wip(app): nvue

packages/uni-app-plus/dist/uni.runtime.esm.js

@@ -18247,7 +18247,7 @@ function initPageOptions({ meta }) {
 }
 function initNVuePage(id, nvuePageVm, pageInstance) {
     initPageVm(nvuePageVm, pageInstance);
-    addCurrentPage(nvuePageVm);
+    addCurrentPage(initScope(id, nvuePageVm, pageInstance));
     if (id === 1) {
         // 首页是 nvue 时，在 registerPage 时，执行路由堆栈
         if (__uniConfig.splashscreen &&

packages/uni-app-plus/src/service/framework/page/register.ts

@@ -19,6 +19,7 @@ import { addCurrentPage, getAllPages } from './getCurrentPages'
 import { getBaseSystemInfo } from '../../api/base/getBaseSystemInfo'
 import { preloadWebviews, PreloadWebviewObject } from './preLoad'
 import { navigateFinish } from '../../api/route/utils'
+import { initScope } from './setup'
 
 interface RegisterPageOptions {
   url: string
@@ -154,7 +155,7 @@ function initNVuePage(
   pageInstance: Page.PageInstance['$page']
 ) {
   initPageVm(nvuePageVm, pageInstance)
-  addCurrentPage(nvuePageVm)
+  addCurrentPage(initScope(id, nvuePageVm, pageInstance))
   if (id === 1) {
     // 首页是 nvue 时，在 registerPage 时，执行路由堆栈
     if (

packages/uni-app-plus/src/service/framework/page/setup.ts

@@ -52,7 +52,7 @@ export function setupPage(component: VuePageComponent) {
   return component
 }
 
-function initScope(
+export function initScope(
   pageId: number,
   vm: ComponentPublicInstance,
   pageInstance: Page.PageInstance['$page']

packages/uni-app-vite/package.json

@@ -25,6 +25,7 @@
     "@dcloudio/uni-shared": "0.0.1-nvue3.3040020220221001",
     "@rollup/pluginutils": "^4.1.2",
     "@vitejs/plugin-vue": "^2.2.2",
+    "@vue/compiler-dom": "3.2.31",
     "@vue/compiler-sfc": "3.2.31",
     "debug": "^4.3.3",
     "fs-extra": "^10.0.0",

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

@@ -25,6 +25,7 @@ import { createConfigResolved } from '../../plugin/configResolved'
 import { defaultNVueRpx2Unit } from '@dcloudio/uni-shared'
 import { external, globals } from '../utils'
 import { transformRootNode } from './transforms/transformRootNode'
+import { transformModel } from './transforms/vModel'
 
 const uTags = {
   text: 'u-text',
@@ -48,6 +49,12 @@ export function initNVueNodeTransforms() {
   ]
 }
 
+export function initNVueDirectiveTransforms() {
+  return {
+    model: transformModel,
+  }
+}
+
 export function uniAppNVuePlugin({
   appService,
 }: {

packages/uni-app-vite/src/nvue/plugin/transforms/vModel.ts

+import {
+  transformModel as baseTransform,
+  DirectiveTransform,
+  ElementTypes,
+  findProp,
+  NodeTypes,
+  hasDynamicKeyVBind,
+} from '@vue/compiler-core'
+import { createDOMCompilerError, DOMErrorCodes } from '@vue/compiler-dom'
+import { V_MODEL_TEXT, V_MODEL_DYNAMIC } from '@vue/compiler-dom'
+
+export const transformModel: DirectiveTransform = (dir, node, context) => {
+  const baseResult = baseTransform(dir, node, context)
+  // base transform has errors OR component v-model (only need props)
+  if (!baseResult.props.length || node.tagType === ElementTypes.COMPONENT) {
+    return baseResult
+  }
+
+  if (dir.arg) {
+    context.onError(
+      createDOMCompilerError(
+        DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT,
+        dir.arg.loc
+      )
+    )
+  }
+
+  function checkDuplicatedValue() {
+    const value = findProp(node, 'value')
+    if (value) {
+      context.onError(
+        createDOMCompilerError(
+          DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
+          value.loc
+        )
+      )
+    }
+  }
+
+  const { tag } = node
+  const isCustomElement = context.isCustomElement(tag)
+  if (
+    tag === 'input' ||
+    tag === 'u-input' ||
+    tag === 'textarea' ||
+    tag === 'u-textarea' ||
+    isCustomElement
+  ) {
+    let directiveToUse = V_MODEL_TEXT
+    let isInvalidType = false
+    if (tag === 'input' || tag === 'u-input' || isCustomElement) {
+      const type = findProp(node, `type`)
+      if (type) {
+        if (type.type === NodeTypes.DIRECTIVE) {
+          // :type="foo"
+          directiveToUse = V_MODEL_DYNAMIC
+        } else if (type.value) {
+          checkDuplicatedValue()
+        }
+      } else if (hasDynamicKeyVBind(node)) {
+        // element has bindings with dynamic keys, which can possibly contain
+        // "type".
+        directiveToUse = V_MODEL_DYNAMIC
+      } else {
+        // text type
+        checkDuplicatedValue()
+      }
+    } else {
+      // textarea
+      checkDuplicatedValue()
+    }
+    // inject runtime directive
+    // by returning the helper symbol via needRuntime
+    // the import will replaced a resolveDirective call.
+    if (!isInvalidType) {
+      baseResult.needRuntime = context.helper(directiveToUse)
+    }
+  } else {
+    context.onError(
+      createDOMCompilerError(
+        DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
+        dir.loc
+      )
+    )
+  }
+
+  // native vmodel doesn't need the `modelValue` props since they are also
+  // passed to the runtime as `binding.value`. removing it reduces code size.
+  baseResult.props = baseResult.props.filter(
+    (p) =>
+      !(
+        p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+        p.key.content === 'modelValue'
+      )
+  )
+
+  return baseResult
+}

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

@@ -109,7 +109,7 @@ const __pagePath = '${removeExt(filename)}'
 let __pageQuery = {}
 try{ __pageQuery = JSON.parse(webview.__query__) }catch(e){}
 App.mpType = 'page'
-const app = Vue.createPageApp(App,{$store:getApp().$store,__pageId,__pagePath,__pageQuery})
+const app = Vue.createPageApp(App,{$store:getApp({allowDefault:true}).$store,__pageId,__pagePath,__pageQuery})
 app.provide('__globalStyles', Vue.useCssStyles([...__uniConfig.styles, ...(App.styles||[])]))
 app.mount('#root')`,
     path.join(nvueOutDir(), 'main.js'),

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

@@ -12,6 +12,7 @@ import {
 } from '@dcloudio/uni-cli-shared'
 
 import { initNVueNodeTransforms } from '../../nvue'
+import { initNVueDirectiveTransforms } from '../../nvue/plugin'
 
 export function uniOptions(): UniVitePlugin['uni'] {
   const isNVueCompiler = process.env.UNI_COMPILER === 'nvue'
@@ -53,6 +54,9 @@ export function uniOptions(): UniVitePlugin['uni'] {
         transformMatchMedia,
         transformPageHead,
       ],
+      directiveTransforms: {
+        ...(isNVueCompiler ? initNVueDirectiveTransforms() : {}),
+      },
     },
   }
 }

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

@@ -24,11 +24,11 @@ function createApp(code: string) {
   return `${code.replace(
     'createSSRApp',
     'createVueApp as createSSRApp'
-  )};const {app:__app__,Vuex:__Vuex__,Pinia:__Pinia__}=createApp();uni.Vuex=__Vuex__;uni.Pinia=__Pinia__;__app__._component.mpType='app';__app__._component.render=()=>{};__app__.mount("#app");`
+  )};const {app:__app__,Vuex:__Vuex__,Pinia:__Pinia__}=createApp();uni.Vuex=__Vuex__;uni.Pinia=__Pinia__;__app__.provide('__globalStyles', __uniConfig.styles);__app__._component.mpType='app';__app__._component.render=()=>{};__app__.mount("#app");`
 }
 
 function createLegacyApp(code: string) {
-  return `function createApp(rootComponent,rootProps){rootComponent.mpTye='app';rootComponent.render=()=>{};const app=createVueApp(rootComponent,rootProps);const oldMount=app.mount;app.mount=(container)=>{const appVm=oldMount.call(app,container);return appVm;};return app;};${code.replace(
+  return `function createApp(rootComponent,rootProps){rootComponent.mpTye='app';rootComponent.render=()=>{};const app=createVueApp(rootComponent,rootProps);app.provide('__globalStyles', __uniConfig.styles);const oldMount=app.mount;app.mount=(container)=>{const appVm=oldMount.call(app,container);return appVm;};return app;};${code.replace(
     'createApp',
     'createVueApp'
   )}`

packages/uni-app-vue/dist/nvue.runtime.esm.dev.js

@@ -9433,6 +9433,11 @@ function parseStyleSheet(_ref22) {
   var component = type;
 
   if (!component.__styles) {
+    // nvue 和 vue 混合开发时，__globalStyles注入的是未处理过的
+    if (appContext && isArray(appContext.provides.__globalStyles)) {
+      appContext.provides.__globalStyles = useCssStyles(appContext.provides.__globalStyles);
+    }
+
     if (component.mpType === 'page' && appContext) {
       // 如果是页面组件，则直接使用全局样式
       component.__styles = appContext.provides.__globalStyles;

packages/uni-app-vue/dist/nvue.runtime.esm.prod.js

@@ -7700,6 +7700,11 @@ function parseStyleSheet(_ref22) {
   var component = type;
 
   if (!component.__styles) {
+    // nvue 和 vue 混合开发时，__globalStyles注入的是未处理过的
+    if (appContext && isArray(appContext.provides.__globalStyles)) {
+      appContext.provides.__globalStyles = useCssStyles(appContext.provides.__globalStyles);
+    }
+
     if (component.mpType === 'page' && appContext) {
       // 如果是页面组件，则直接使用全局样式
       component.__styles = appContext.provides.__globalStyles;

packages/uni-app-vue/lib/nvue.runtime.esm.js

@@ -7892,6 +7892,10 @@ function parseClassList(classList, instance, el = null) {
 function parseStyleSheet({ type, appContext }) {
     const component = type;
     if (!component.__styles) {
+        // nvue 和 vue 混合开发时，__globalStyles注入的是未处理过的
+        if (appContext && isArray(appContext.provides.__globalStyles)) {
+            appContext.provides.__globalStyles = useCssStyles(appContext.provides.__globalStyles);
+        }
         if (component.mpType === 'page' && appContext) {
             // 如果是页面组件，则直接使用全局样式
             component.__styles = appContext.provides.__globalStyles;

pnpm-lock.yaml

@@ -207,6 +207,7 @@ importers:
       '@types/fs-extra': ^9.0.13
       '@vitejs/plugin-vue': ^2.2.2
       '@vue/compiler-core': 3.2.31
+      '@vue/compiler-dom': 3.2.31
       '@vue/compiler-sfc': 3.2.31
       debug: ^4.3.3
       esbuild: ^0.14.14
@@ -221,6 +222,7 @@ importers:
       '@dcloudio/uni-shared': link:../uni-shared
       '@rollup/pluginutils': 4.1.2
       '@vitejs/plugin-vue': 2.2.2_vite@2.8.4+vue@3.2.31
+      '@vue/compiler-dom': 3.2.31
       '@vue/compiler-sfc': 3.2.31
       debug: 4.3.3
       fs-extra: 10.0.0