build(internal): build all template when run build:runtime (#895)

examples/sites/demos/mobile-first/app/alert/close-text.vue

@@ -6,8 +6,7 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Alert, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -15,7 +14,7 @@ export default {
   },
   methods: {
     close() {
-      alert('关闭了')
+      Modal('关闭了')
     }
   }
 }

examples/sites/playground/App.vue

@@ -44,7 +44,6 @@ const createImportMap = (version) => {
     imports[`@opentiny/vue-design-${tinyTheme}`] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}@${version}/index.js`
   }
   if (isMobileFirst) {
-    imports['@opentiny/vue'] = `${getRuntime(version)}tiny-vue-mobile-first.mjs`
     imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
   }
   return {
@@ -140,7 +139,10 @@ function selectVersion(version) {
 function versionChange(version) {
   const importMap = createImportMap(version)
   store.state.files['import-map.json'] = new File('', JSON.stringify(importMap))
+  insertStyleDom(version)
+}
 
+function insertStyleDom(version) {
   nextTick(() => {
     if (!document.querySelector('iframe')) return
 
@@ -160,6 +162,7 @@ function changeLayout(layout) {
 }
 
 function changeReserve(isReserve) {
+  insertStyleDom(state.selectVersion)
   localStorage.setItem(LAYOUT_REVERSE, isReserve)
 }
 

internals/cli/package.json

@@ -40,7 +40,6 @@
     "build:ui1": "pnpm build && node dist/index.js build:ui",
     "// #build:runtime-vue 构建适用于 Vue2/Vue3 的组件 Runtime (按需加载)": "",
     "build:runtime": "pnpm build:entry-app && esno src/index.ts build:runtime",
-    "build:runtime-mf": "pnpm build:entry-app --tiny_mode mobile-first && esno src/index.ts build:runtime --tiny_mode mobile-first",
     "// ---------------------全局适配@aurora包名--------------------- ": "",
     "release:aurora": "esno src/index.ts release:aurora",
     "// ----------------------辅助脚本---------------------- ": "",

internals/cli/src/commands/build/build-entry-app.ts

@@ -14,9 +14,6 @@ import {
 import { getComponents } from '../../shared/module-utils'
 import handlebarsRender from './handlebars.render'
 
-const argv = minimist(process.argv.slice(2))
-const { tiny_mode = 'pc' } = argv
-
 const version = getopentinyVersion({ key: 'version' })
 const outputDir = 'packages/vue'
 const MAIN_TEMPLATE = `{{{include}}}
@@ -53,7 +50,7 @@ export const install = (app, opts = {}) => {
 
 const buildFullRuntime = () => {
   const outputPath = pathFromWorkspaceRoot(outputDir, 'app.ts')
-  const components = getComponents(tiny_mode)
+  const components = getComponents('all')
   const includeTemplate: string[] = []
   const componentsTemplate: string[] = []
 

internals/cli/src/commands/build/build-runtime.ts

@@ -9,9 +9,6 @@ import type { BuildUiOption, BaseConfig } from './build-ui'
 import { pathFromPackages, getBaseConfig, requireModules } from './build-ui'
 import { createProcessor } from 'tailwindcss/src/cli/build/plugin'
 
-const argv = minimist(process.argv.slice(2))
-const { tiny_mode = 'pc' } = argv
-
 async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope, min }) {
   const rootDir = pathFromPackages('')
   const runtimeDir = `dist${vueVersion}/@opentiny/vue/runtime`
@@ -59,7 +56,6 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
     baseConfig.define = Object.assign(baseConfig.define || {}, {
       'process.env.BUILD_TARGET': JSON.stringify(vueVersion !== '3' ? 'runtime' : 'component'),
       'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.TINY_MODE': JSON.stringify(tiny_mode),
       'process.env.RUNTIME_VERSION': JSON.stringify(requireModules('packages/renderless/package.json').version),
       'process.env.COMPONENT_VERSION': JSON.stringify(requireModules('packages/vue/package.json').version)
     })
@@ -104,7 +100,7 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
               }
 
               if (/\.css$/.test(name ?? '')) {
-                return `${tiny_mode === 'mobile-first' ? 'mobile-first-' : ''}style${min ? '.min' : ''}[extname]`
+                return `style${min ? '.min' : ''}[extname]`
               }
 
               return 'style/[name]-[hash][extname]'
@@ -135,20 +131,17 @@ function getEntryTasks() {
     },
     {
       path: 'vue/app.ts',
-      libPath: tiny_mode === 'mobile-first' ? 'tiny-vue-mobile-first' : 'tiny-vue'
-    }
-  ]
-  if (tiny_mode === 'mobile-first') {
-    entry.push({
+      libPath: 'tiny-vue'
+    },
+    {
       path: 'vue-icon-saas/index.ts',
       libPath: 'tiny-vue-icon-saas'
-    })
-  } else {
-    entry.push({
+    },
+    {
       path: 'vue-icon/index.ts',
       libPath: 'tiny-vue-icon'
-    })
-  }
+    }
+  ]
   return entry
 }
 
@@ -172,19 +165,17 @@ export async function buildRuntime({
     for (let i = 0; i < tasks.length; i++) {
       await batchBuildAll({ vueVersion, tasks: [tasks[i]], message, emptyOutDir, npmScope: scope, min })
     }
-    if (tiny_mode === 'mobile-first') {
-      const rootDir = pathFromPackages('')
-      const runtimeDir = `dist${vueVersion}/@opentiny/vue/runtime`
-      const outDir = path.resolve(rootDir, runtimeDir)
-      const processor = await createProcessor(
-        {
-          '--output': path.join(outDir, 'tailwind.css'),
-          '--content': path.join(outDir, 'tiny-vue-mobile-first.mjs')
-        },
-        path.resolve(rootDir, 'theme-saas/tailwind.config.js')
-      )
-      await processor.build()
-    }
+    const rootDir = pathFromPackages('')
+    const runtimeDir = `dist${vueVersion}/@opentiny/vue/runtime`
+    const outDir = path.resolve(rootDir, runtimeDir)
+    const processor = await createProcessor(
+      {
+        '--output': path.join(outDir, 'tailwind.css'),
+        '--content': path.join(outDir, 'tiny-vue.mjs')
+      },
+      path.resolve(rootDir, 'theme-saas/tailwind.config.js')
+    )
+    await processor.build()
     // 确保只运行一次
     emptyOutDir = false
   }

package.json

@@ -58,7 +58,7 @@
     "create:mapping": "pnpm -C internals/cli create:mapping",
     "sync-icons": "pnpm -C internals/cli sync-icons",
     "// ---------- 打包运行时组件库 ----------": "",
-    "build:runtime": "pnpm -C internals/cli build:runtime && pnpm -C internals/cli build:runtime-mf",
+    "build:runtime": "pnpm -C internals/cli build:runtime",
     "// ---------- 构建相关脚本 ----------": "",
     "build:ui": "pnpm create:icon-saas && pnpm create:mapping && pnpm build:entry && gulp themeConcat && pnpm -C internals/cli build:ui",
     "build:renderless": "pnpm -C packages/renderless build:fast",