wip(app): nvue

packages/uni-app-vite/src/nvue/index.ts

@@ -4,13 +4,20 @@ import {
   uniViteInjectPlugin,
   UNI_EASYCOM_EXCLUDE,
 } from '@dcloudio/uni-cli-shared'
-import { uniAppNVuePlugin } from './plugin'
+
 import { uniEasycomPlugin } from '../plugins/easycom'
+import { uniManifestJsonPlugin } from '../plugins/manifestJson'
+import { uniAppNVuePlugin } from './plugin'
+import { uniMainJsPlugin } from './plugins/mainJs'
+import { uniPagesJsonPlugin } from './plugins/pagesJson'
 
 export function initNVuePlugins() {
   return [
     uniEasycomPlugin({ exclude: UNI_EASYCOM_EXCLUDE }),
     uniHBuilderXConsolePlugin(),
+    uniMainJsPlugin(),
+    ...(process.env.UNI_RENDERER === 'native' ? [uniManifestJsonPlugin()] : []),
+    uniPagesJsonPlugin(),
     uniViteInjectPlugin('uni:app-inject', initAppProvide()),
     uniAppNVuePlugin(),
   ]

packages/uni-app-vite/src/nvue/plugin/index.ts

 import path from 'path'
+import {
+  dynamicImportPolyfill,
+  normalizePath,
+  parseVueRequest,
+  removeExt,
+  resolveMainPathOnce,
+} from '@dcloudio/uni-cli-shared'
+import { PreRenderedChunk } from 'rollup'
 import { Plugin } from 'vite'
+import { nvueOutDir } from '../../utils'
 export function uniAppNVuePlugin(): Plugin {
   return {
     name: 'uni:app-nvue',
     config() {
+      const inputDir = process.env.UNI_INPUT_DIR
+      const mainPath = resolveMainPathOnce(inputDir)
       return {
+        lib: {
+          // 必须使用 lib 模式，否则会生成 preload 等代码
+          fileName: 'main.js',
+          entry: mainPath,
+          formats: ['esm'],
+        },
         build: {
-          outDir: path.join(process.env.UNI_OUTPUT_DIR, '../.nvue'),
-          rollupOptions: {},
+          outDir: nvueOutDir(),
+          rollupOptions: {
+            input: {
+              main: mainPath,
+            },
+            output: {
+              entryFileNames(chunk) {
+                if (chunk.name === 'main') {
+                  return 'app.js'
+                }
+                return chunk.name + '.js'
+              },
+              format: 'esm',
+              assetFileNames: '[name][extname]',
+              chunkFileNames: createChunkFileNames(inputDir),
+              plugins: [dynamicImportPolyfill()],
+            },
+          },
         },
       }
     },
   }
 }
+
+function createChunkFileNames(
+  inputDir: string
+): (chunkInfo: PreRenderedChunk) => string {
+  return function chunkFileNames(chunk) {
+    if (chunk.isDynamicEntry && chunk.facadeModuleId) {
+      const { filename } = parseVueRequest(chunk.facadeModuleId)
+      if (filename.endsWith('.nvue')) {
+        return (
+          removeExt(normalizePath(path.relative(inputDir, filename))) + '.js'
+        )
+      }
+    }
+    return '[name].js'
+  }
+}

packages/uni-app-vite/src/nvue/plugins/entry.ts

-import path from 'path'
-import type { Plugin } from 'vite'
-import {
-  decodeBase64Url,
-  encodeBase64Url,
-  normalizePath,
-  polyfillCode,
-} from '@dcloudio/uni-cli-shared'
-
-const uniNVuePagePrefix = 'uniNVuePage://'
-
-function isUniNVuePageUrl(id: string) {
-  return id.startsWith(uniNVuePagePrefix)
-}
-
-export function createUniNVuePagePath(pagePath: string) {
-  return uniNVuePagePrefix + encodeBase64Url(pagePath + '.nvue')
-}
-
-function parseUniNvuePagePath(uniNVuePageUrl: string) {
-  return decodeBase64Url(uniNVuePageUrl.replace(uniNVuePagePrefix, ''))
-}
-
-export function uniNVueEntryPlugin(): Plugin {
-  const inputDir = process.env.UNI_INPUT_DIR
-  return {
-    name: 'uni:app-nvue-entry',
-    enforce: 'pre',
-    resolveId(id) {
-      if (isUniNVuePageUrl(id)) {
-        return id
-      }
-    },
-    load(id) {
-      if (isUniNVuePageUrl(id)) {
-        const filepath = normalizePath(
-          path.resolve(inputDir, parseUniNvuePagePath(id))
-        )
-        this.addWatchFile(filepath)
-        return {
-          code: `import { createApp } from 'vue'
-import App from '${filepath}'
-${polyfillCode}
-createApp(App).mount('#app')
-`,
-        }
-      }
-    },
-  }
-}

packages/uni-app-vite/src/nvue/plugins/mainJs.ts

+import { defineUniMainJsPlugin } from '@dcloudio/uni-cli-shared'
+
+export function uniMainJsPlugin() {
+  return defineUniMainJsPlugin((opts) => {
+    return {
+      name: 'uni:app-nvue-main-js',
+      enforce: 'pre',
+      transform(code, id) {
+        if (opts.filter(id)) {
+          if (process.env.UNI_RENDERER === 'native') {
+            code = code.includes('createSSRApp')
+              ? createApp(code)
+              : createLegacyApp(code)
+            return {
+              code: `import './pages.json.js';` + code,
+              map: { mappings: '' },
+            }
+          }
+          return {
+            code: `import './pages.json.js'`,
+            map: { mappings: '' },
+          }
+        }
+      },
+    }
+  })
+}
+
+function createApp(code: string) {
+  return `${code.replace(
+    'createSSRApp',
+    'createVueApp as createSSRApp'
+  )};const __app__=createApp().app;__app__._component.mpType='app';__app__._component.render=()=>{};__app__.use(uni.__vuePlugin).mount("#app");`
+}
+
+function createLegacyApp(code: string) {
+  return `function createApp(rootComponent,rootProps){rootComponent.mpTye='app';rootComponent.render=()=>{};const app=createVueApp(rootComponent,rootProps).use(uni.__vuePlugin);const oldMount=app.mount;app.mount=(container)=>{const appVm=oldMount.call(app,container);return appVm;};return app;};${code.replace(
+    'createApp',
+    'createVueApp'
+  )}`
+}

packages/uni-app-vite/src/nvue/plugins/pagesJson.ts

+import path from 'path'
+import { Plugin } from 'vite'
+
+import {
+  defineUniPagesJsonPlugin,
+  normalizeAppConfigService,
+  normalizePagesJson,
+  parseManifestJsonOnce,
+  getLocaleFiles,
+  normalizeAppNVuePagesJson,
+} from '@dcloudio/uni-cli-shared'
+
+export function uniPagesJsonPlugin(): Plugin {
+  return defineUniPagesJsonPlugin((opts) => {
+    return {
+      name: 'uni:app-nvue-pages-json',
+      enforce: 'pre',
+      transform(code, id) {
+        if (!opts.filter(id)) {
+          return
+        }
+        this.addWatchFile(path.resolve(process.env.UNI_INPUT_DIR, 'pages.json'))
+        getLocaleFiles(
+          path.resolve(process.env.UNI_INPUT_DIR, 'locale')
+        ).forEach((filepath) => {
+          this.addWatchFile(filepath)
+        })
+        const pagesJson = normalizePagesJson(code, process.env.UNI_PLATFORM)
+        pagesJson.pages.forEach((page) => {
+          if (page.style.isNVue) {
+            this.addWatchFile(
+              path.resolve(process.env.UNI_INPUT_DIR, page.path + '.nvue')
+            )
+          }
+        })
+        if (process.env.UNI_RENDERER === 'native') {
+          this.emitFile({
+            fileName: `app-config-service.js`,
+            type: 'asset',
+            source: normalizeAppConfigService(
+              pagesJson,
+              parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
+            ),
+          })
+          return {
+            code:
+              `import './manifest.json.js'\n` +
+              normalizeAppNVuePagesJson(pagesJson),
+            map: { mappings: '' },
+          }
+        }
+        return {
+          code: normalizeAppNVuePagesJson(pagesJson),
+          map: { mappings: '' },
+        }
+      },
+    }
+  })
+}

packages/uni-app-vite/src/plugin/build.ts

@@ -6,7 +6,9 @@ import {
   emptyDir,
   isInHybridNVue,
   normalizePath,
+  resolveMainPathOnce,
 } from '@dcloudio/uni-cli-shared'
+import { nvueOutDir } from '../utils'
 
 export function buildOptions(
   userConfig: UserConfig,
@@ -15,7 +17,12 @@ export function buildOptions(
   const inputDir = process.env.UNI_INPUT_DIR
   const outputDir = process.env.UNI_OUTPUT_DIR
   // 开始编译时，清空输出目录
-  if (!isInHybridNVue(userConfig)) {
+  if (isInHybridNVue(userConfig)) {
+    const nvueOutputDir = nvueOutDir()
+    if (fs.existsSync(nvueOutputDir)) {
+      emptyDir(nvueOutputDir)
+    }
+  } else {
     if (fs.existsSync(outputDir)) {
       emptyDir(outputDir)
     }
@@ -27,6 +34,7 @@ export function buildOptions(
     assetsInlineLimit: 0,
     rollupOptions: {
       external: ['vue'],
+      input: resolveMainPathOnce(inputDir),
       output: {
         sourcemapPathTransform(relativeSourcePath, sourcemapPath) {
           const sourcePath = normalizePath(

packages/uni-app-vite/src/utils.ts

 import path from 'path'
 export const templateDir = path.resolve(__dirname, '../lib/template/')
+export function nvueOutDir() {
+  return path.join(process.env.UNI_OUTPUT_DIR, '../.nvue')
+}

packages/uni-app-vite/src/vue/plugin/index.ts

@@ -2,7 +2,6 @@ import path from 'path'
 import fs from 'fs-extra'
 import {
   APP_SERVICE_FILENAME,
-  resolveMainPathOnce,
   parsePagesJsonOnce,
   UniVitePlugin,
 } from '@dcloudio/uni-cli-shared'
@@ -13,14 +12,12 @@ import { configResolved } from './configResolved'
 import { templateDir } from '../../utils'
 
 export function uniAppVuePlugin(): UniVitePlugin {
-  const inputDir = process.env.UNI_INPUT_DIR
   return {
     name: 'uni:app-vue',
     config() {
       return {
         build: {
           rollupOptions: {
-            input: resolveMainPathOnce(inputDir),
             output: {
               name: 'AppService',
               format: process.env.UNI_APP_CODE_SPLITING ? 'amd' : 'iife',

packages/uni-app-vite/src/vue/plugins/mainJs.ts

@@ -3,7 +3,7 @@ import { defineUniMainJsPlugin } from '@dcloudio/uni-cli-shared'
 export function uniMainJsPlugin() {
   return defineUniMainJsPlugin((opts) => {
     return {
-      name: 'uni:app-main-js',
+      name: 'uni:app-vue-main-js',
       enforce: 'pre',
       transform(code, id) {
         if (opts.filter(id)) {
@@ -12,7 +12,7 @@ export function uniMainJsPlugin() {
             : createLegacyApp(code)
           return {
             code: `import './pages.json.js';` + code,
-            map: this.getCombinedSourcemap(),
+            map: { mappings: '' },
           }
         }
       },

packages/uni-app-vite/src/vue/plugins/pagesJson.ts

@@ -9,12 +9,11 @@ import {
   parseManifestJsonOnce,
   getLocaleFiles,
 } from '@dcloudio/uni-cli-shared'
-import { initWebpackNVueEntry } from '@dcloudio/uni-cli-nvue'
 
 export function uniPagesJsonPlugin(): Plugin {
   return defineUniPagesJsonPlugin((opts) => {
     return {
-      name: 'uni:app-pages-json',
+      name: 'uni:app-vue-pages-json',
       enforce: 'pre',
       transform(code, id) {
         if (!opts.filter(id)) {
@@ -27,16 +26,12 @@ export function uniPagesJsonPlugin(): Plugin {
           this.addWatchFile(filepath)
         })
         const pagesJson = normalizePagesJson(code, process.env.UNI_PLATFORM)
-
-        if (process.env.UNI_NVUE_COMPILER !== 'vue') {
-          initWebpackNVueEntry(pagesJson.pages)
-        }
-
-        // TODO subpackages
         pagesJson.pages.forEach((page) => {
-          this.addWatchFile(
-            path.resolve(process.env.UNI_INPUT_DIR, page.path + '.vue')
-          )
+          if (!page.style.isNVue) {
+            this.addWatchFile(
+              path.resolve(process.env.UNI_INPUT_DIR, page.path + '.vue')
+            )
+          }
         })
         this.emitFile({
           fileName: `app-config-service.js`,
@@ -49,7 +44,7 @@ export function uniPagesJsonPlugin(): Plugin {
         return {
           code:
             `import './manifest.json.js'\n` + normalizeAppPagesJson(pagesJson),
-          map: this.getCombinedSourcemap(),
+          map: { mappings: '' },
         }
       },
     }

packages/uni-app-vite/src/vue/plugins/renderjs.ts

@@ -24,7 +24,7 @@ export function uniRenderjsPlugin(): Plugin {
   let resolvedConfig: ResolvedConfig
   let changed: boolean = false
   return {
-    name: 'uni:app-renderjs',
+    name: 'uni:app-vue-renderjs',
     configResolved(config) {
       resolvedConfig = config
       wxsModulesCache.set(resolvedConfig, new Map<string, string>())
@@ -78,7 +78,7 @@ export function uniRenderjsPlugin(): Plugin {
           ;(Comp.$${type} || (Comp.$${type} = [])).push('${name}')
           ;(Comp.$${globalName} || (Comp.$${globalName} = {}))['${name}'] = '${moduleHashId}'
         }`,
-        map: null,
+        map: { mappings: '' },
       }
     },
     generateBundle() {

packages/uni-cli-shared/src/json/app/pages/definePage.ts

@@ -26,3 +26,19 @@ export function definePageCode(pagesJson: Record<string, any>) {
   })
   return importPagesCode.join('\n') + '\n' + definePagesCode.join('\n')
 }
+
+export function defineNVuePageCode(pagesJson: Record<string, any>) {
+  const importNVuePagesCode: string[] = []
+  pagesJson.pages.forEach((page: UniApp.PagesJsonPageOptions) => {
+    if (!page.style.isNVue) {
+      return
+    }
+    const pagePathWithExtname = normalizePagePath(page.path, 'app')
+    if (pagePathWithExtname) {
+      importNVuePagesCode.push(
+        `import('./${pagePathWithExtname}').then(()=>{})`
+      )
+    }
+  })
+  return importNVuePagesCode.join('\n')
+}

packages/uni-cli-shared/src/json/app/pages/index.ts

 import { globalCode, polyfillCode, restoreGlobalCode } from './code'
-import { definePageCode } from './definePage'
+import { definePageCode, defineNVuePageCode } from './definePage'
 import { normalizeAppUniConfig } from './uniConfig'
 import { normalizeAppUniRoutes } from './uniRoutes'
 
@@ -7,6 +7,10 @@ export function normalizeAppPagesJson(pagesJson: Record<string, any>) {
   return polyfillCode + restoreGlobalCode + definePageCode(pagesJson)
 }
 
+export function normalizeAppNVuePagesJson(pagesJson: Record<string, any>) {
+  return defineNVuePageCode(pagesJson)
+}
+
 export function normalizeAppConfigService(
   pagesJson: UniApp.PagesJson,
   manifestJson: Record<string, any>

packages/uni-cli-shared/src/vite/plugins/dynamicImportPolyfill.ts

+import type { Plugin } from 'vite'
+export function dynamicImportPolyfill(): Plugin {
+  return {
+    name: 'dynamic-import-polyfill',
+    renderDynamicImport() {
+      return {
+        left: '(',
+        right: ')',
+      }
+    },
+  }
+}

packages/uni-cli-shared/src/vite/plugins/index.ts

@@ -4,6 +4,7 @@ export * from './inject'
 export * from './mainJs'
 export * from './jsonJs'
 export * from './console'
+export * from './dynamicImportPolyfill'
 
 export { assetPlugin, getAssetHash } from './vitejs/plugins/asset'
 export {

packages/uni-mp-vite/src/plugin/build.ts

@@ -14,8 +14,9 @@ import {
   isCSSRequest,
   parseManifestJsonOnce,
   M,
+  dynamicImportPolyfill,
 } from '@dcloudio/uni-cli-shared'
-import { GetManualChunk, GetModuleInfo, Plugin, PreRenderedChunk } from 'rollup'
+import { GetManualChunk, GetModuleInfo, PreRenderedChunk } from 'rollup'
 import {
   isUniComponentUrl,
   isUniPageUrl,
@@ -191,18 +192,6 @@ function createChunkFileNames(
   }
 }
 
-function dynamicImportPolyfill(): Plugin {
-  return {
-    name: 'dynamic-import-polyfill',
-    renderDynamicImport() {
-      return {
-        left: '(',
-        right: ')',
-      }
-    },
-  }
-}
-
 export function notFound(filename: string): never {
   console.log()
   console.error(M['file.notfound'].replace('{file}', filename))