feat(h5): support nvue mode

packages/shims-uni-app.d.ts

@@ -27,6 +27,9 @@ declare namespace UniApp {
       strict: boolean
       base: string
     }
+    nvue: {
+      'flex-direction': 'column' | 'row'
+    }
     globalStyle: {
       navigationBar: PageNavigationBar
       refreshOptions?: PageRefreshOptions

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

@@ -13,14 +13,18 @@ export const parsePagesJson = (
 ) => {
   const jsonStr = fs.readFileSync(path.join(inputDir, 'pages.json'), 'utf8')
   if (normalize) {
-    return normalizePagesJson(jsonStr, platform)
+    return normalizePagesJson(jsonStr, inputDir, platform)
   }
   return parseJson(jsonStr, true) as UniApp.PagesJson
 }
 
 export const parsePagesJsonOnce = once(parsePagesJson)
 
-export function normalizePagesJson(jsonStr: string, platform: UniApp.PLATFORM) {
+export function normalizePagesJson(
+  jsonStr: string,
+  inputDir: string,
+  platform: UniApp.PLATFORM
+) {
   let pagesJson: UniApp.PagesJson = {
     pages: [],
     globalStyle: {
@@ -40,7 +44,7 @@ export function normalizePagesJson(jsonStr: string, platform: UniApp.PLATFORM) {
     ...normalizeSubpackages(pagesJson.subPackages || pagesJson.subpackages)
   )
   // pageStyle
-  normalizePages(pagesJson.pages, platform)
+  normalizePages(pagesJson.pages, inputDir, platform)
   // globalStyle
   pagesJson.globalStyle = normalizePageStyle(pagesJson.globalStyle!, platform)
   // tabBar
@@ -69,12 +73,13 @@ function validatePages(pagesJson: Record<string, any>, jsonStr: string) {
 
 function normalizePages(
   pages: UniApp.PagesJsonPageOptions[],
+  _inputDir: string,
   platform: UniApp.PLATFORM
 ) {
-  pages.forEach((page) => {
+  return pages.filter((page) => {
     page.style = normalizePageStyle(page.style!, platform)
+    return true
   })
-  return pages
 }
 
 function normalizeSubpackages(

packages/uni-h5/dist/uni-h5.es.js

@@ -485,7 +485,7 @@ var safeAreaInsets = {
   onChange,
   offChange
 };
-var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets;
+var out = safeAreaInsets;
 const onEventPrevent = /* @__PURE__ */ withModifiers(() => {
 }, ["prevent"]);
 const onEventStop = /* @__PURE__ */ withModifiers(() => {
@@ -497,10 +497,10 @@ function getWindowOffset() {
   const left = parseInt(style.getPropertyValue("--window-left"));
   const right = parseInt(style.getPropertyValue("--window-right"));
   return {
-    top: top ? top + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top : 0,
-    bottom: bottom ? bottom + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom : 0,
-    left: left ? left + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left : 0,
-    right: right ? right + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right : 0
+    top: top ? top + out.top : 0,
+    bottom: bottom ? bottom + out.bottom : 0,
+    left: left ? left + out.left : 0,
+    right: right ? right + out.right : 0
   };
 }
 function updateCssVar(cssVars) {
@@ -1190,7 +1190,7 @@ function normalizePageMeta(pageMeta) {
       let offset = rpx2px(refreshOptions.offset);
       const {type} = navigationBar;
       if (type !== "transparent" && type !== "none") {
-        offset += NAVBAR_HEIGHT + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+        offset += NAVBAR_HEIGHT + out.top;
       }
       refreshOptions.offset = offset;
       refreshOptions.height = rpx2px(refreshOptions.height);
@@ -12978,9 +12978,20 @@ function pruneRouteCache(key) {
     }
   });
 }
+function updateCurPageAttrs(pageMeta) {
+  const nvueDirKey = "nvue-dir-" + __uniConfig.nvue["flex-direction"];
+  if (pageMeta.isNVue) {
+    document.body.setAttribute("nvue", "");
+    document.body.setAttribute(nvueDirKey, "");
+  } else {
+    document.body.removeAttribute("nvue");
+    document.body.removeAttribute(nvueDirKey);
+  }
+}
 function onPageShow(instance2, pageMeta) {
   updateBodyScopeId(instance2);
   updateCurPageCssVar(pageMeta);
+  updateCurPageAttrs(pageMeta);
   initPageScrollListener(instance2, pageMeta);
 }
 function onPageReady(instance2) {
@@ -14928,7 +14939,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const windowWidth = getWindowWidth(screenWidth);
   let windowHeight = window.innerHeight;
   const language = navigator.language;
-  const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+  const statusBarHeight = out.top;
   let osname;
   let osversion;
   let model;
@@ -15041,12 +15052,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
   const system = `${osname} ${osversion}`;
   const platform = osname.toLocaleLowerCase();
   const safeArea = {
-    left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left,
-    right: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-    top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
-    bottom: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
-    width: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-    height: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom
+    left: out.left,
+    right: windowWidth - out.right,
+    top: out.top,
+    bottom: windowHeight - out.bottom,
+    width: windowWidth - out.left - out.right,
+    height: windowHeight - out.top - out.bottom
   };
   const {top: windowTop, bottom: windowBottom} = getWindowOffset();
   windowHeight -= windowTop;
@@ -15066,10 +15077,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
     model,
     safeArea,
     safeAreaInsets: {
-      top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
-      right: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-      bottom: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
-      left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left
+      top: out.top,
+      right: out.right,
+      bottom: out.bottom,
+      left: out.left
     }
   };
 });

packages/uni-h5/src/framework/setup/page.ts

@@ -184,12 +184,24 @@ function pruneRouteCache(key: string) {
   })
 }
 
+function updateCurPageAttrs(pageMeta: UniApp.PageRouteMeta) {
+  const nvueDirKey = 'nvue-dir-' + __uniConfig.nvue['flex-direction']
+  if (pageMeta.isNVue) {
+    document.body.setAttribute('nvue', '')
+    document.body.setAttribute(nvueDirKey, '')
+  } else {
+    document.body.removeAttribute('nvue')
+    document.body.removeAttribute(nvueDirKey)
+  }
+}
+
 export function onPageShow(
   instance: ComponentInternalInstance,
   pageMeta: UniApp.PageRouteMeta
 ) {
   updateBodyScopeId(instance)
   updateCurPageCssVar(pageMeta)
+  updateCurPageAttrs(pageMeta)
   initPageScrollListener(instance, pageMeta)
 }
 

packages/vite-plugin-uni/src/configResolved/plugins/pagesJson.ts

@@ -61,9 +61,13 @@ function generatePagesJsonCode(
   options: VitePluginUniResolvedOptions
 ) {
   const globalName = getGlobal(ssr)
-  const pagesJson = normalizePagesJson(jsonStr, options.platform)
+  const pagesJson = normalizePagesJson(
+    jsonStr,
+    options.inputDir,
+    options.platform
+  )
   const definePagesCode = generatePagesDefineCode(pagesJson, config)
-  const uniRoutesCode = generateRoutes(globalName, pagesJson, config)
+  const uniRoutesCode = generateRoutes(globalName, pagesJson, config, options)
   const uniConfigCode = generateConfig(globalName, pagesJson, options)
   const manifestJsonPath = slash(
     path.resolve(options.inputDir, 'manifest.json.js')
@@ -71,9 +75,7 @@ function generatePagesJsonCode(
   const cssCode = generateCssCode(config, options)
 
   return `
-import { ${
-    config.define!.__UNI_FEATURE_PAGES__ ? 'defineAsyncComponent, ' : ''
-  }resolveComponent, createVNode, withCtx, openBlock, createBlock } from 'vue'
+import { defineAsyncComponent, resolveComponent, createVNode, withCtx, openBlock, createBlock } from 'vue'
 import { PageComponent, AsyncLoadingComponent, AsyncErrorComponent } from '@dcloudio/uni-h5'
 import { appid, debug, networkTimeout, router, async, sdkConfigs, qqMapKey, nvue } from '${manifestJsonPath}'
 const extend = Object.assign
@@ -124,9 +126,9 @@ function generateCssCode(
 ) {
   const define = config.define! as FEATURE_DEFINES
   const cssFiles = [H5_FRAMEWORK_STYLE_PATH + 'base.css']
-  if (define.__UNI_FEATURE_PAGES__) {
-    cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'async.css')
-  }
+  // if (define.__UNI_FEATURE_PAGES__) {
+  cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'async.css')
+  // }
   if (define.__UNI_FEATURE_RESPONSIVE__) {
     cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'layout.css')
   }
@@ -167,16 +169,16 @@ const ${pageIdent} = defineAsyncComponent(extend({loader:${pageIdent}Loader},Asy
 
 function generatePagesDefineCode(
   pagesJson: UniApp.PagesJson,
-  config: ResolvedConfig
+  _config: ResolvedConfig
 ) {
-  const define = config.define! as FEATURE_DEFINES
-  if (!define.__UNI_FEATURE_PAGES__) {
-    // single page
-    const pagePath = pagesJson.pages[0].path
-    return `import ${normalizePageIdentifier(
-      pagePath
-    )} from './${pagePath}.vue?mpType=page'`
-  }
+  // const define = config.define! as FEATURE_DEFINES
+  // if (!define.__UNI_FEATURE_PAGES__) {
+  //   // single page
+  //   const pagePath = pagesJson.pages[0].path
+  //   return `import ${normalizePageIdentifier(
+  //     pagePath
+  //   )} from './${pagePath}.vue?mpType=page'`
+  // }
   const { pages } = pagesJson
   return (
     `const AsyncComponentOptions = {
@@ -190,22 +192,28 @@ function generatePagesDefineCode(
   )
 }
 
-function normalizePagesRoute(pagesJson: UniApp.PagesJson): PageRouteOptions[] {
+function normalizePagesRoute(
+  pagesJson: UniApp.PagesJson,
+  options: VitePluginUniResolvedOptions
+): PageRouteOptions[] {
   const firstPagePath = pagesJson.pages[0].path
   const tabBarList = (pagesJson.tabBar && pagesJson.tabBar.list) || []
   return pagesJson.pages.map((pageOptions) => {
-    const path = pageOptions.path
-    const name = normalizePageIdentifier(path)
-    const isEntry = firstPagePath === path ? true : undefined
+    const pagePath = pageOptions.path
+    const name = normalizePageIdentifier(pagePath)
+    const isEntry = firstPagePath === pagePath ? true : undefined
     const tabBarIndex = tabBarList.findIndex(
-      (tabBarPage: { pagePath: string }) => tabBarPage.pagePath === path
+      (tabBarPage: { pagePath: string }) => tabBarPage.pagePath === pagePath
     )
     const isTabBar = tabBarIndex !== -1 ? true : undefined
-
+    const isNVue = fs.existsSync(
+      path.join(options.inputDir, pagePath + '.nvue')
+    )
     let windowTop = 0
     const meta = Object.assign(
       {
         route: pageOptions.path,
+        isNVue: isNVue ? true : undefined,
         isQuit: isEntry || isTabBar ? true : undefined,
         isEntry,
         isTabBar,
@@ -231,11 +239,7 @@ function generatePageRoute(
   return `{
   path:'/${isEntry ? '' : path}',${alias}
   component:{render(){return renderPage(${name})}},
-  loader: ${
-    config.define!.__UNI_FEATURE_PAGES__
-      ? normalizePageIdentifier(path) + 'Loader'
-      : 'null'
-  },
+  loader: ${normalizePageIdentifier(path)}Loader,
   meta: ${JSON.stringify(meta)}
 }`
 }
@@ -252,14 +256,15 @@ function generatePagesRoute(
 function generateRoutes(
   globalName: string,
   pagesJson: UniApp.PagesJson,
-  config: ResolvedConfig
+  config: ResolvedConfig,
+  options: VitePluginUniResolvedOptions
 ) {
   return `
 function renderPage(component){
   return (openBlock(), createBlock(PageComponent, null, {page: withCtx(() => [createVNode(component, { ref: "page" }, null, 512 /* NEED_PATCH */)]), _: 1 /* STABLE */}))
 }
 ${globalName}.__uniRoutes=[${[
-    ...generatePagesRoute(normalizePagesRoute(pagesJson), config),
+    ...generatePagesRoute(normalizePagesRoute(pagesJson, options), config),
   ].join(',')}]`
 }
 

packages/vite-plugin-uni/src/configResolved/plugins/ssr.ts

@@ -16,8 +16,8 @@ import {
   isIdentifier,
   isCallExpression,
   isMemberExpression,
-  generateSSRDefineCode,
-  generateSSREntryServerCode,
+  generateSsrDefineCode,
+  generateSsrEntryServerCode,
 } from '../../utils'
 
 const debugSSR = debug('vite:uni:ssr')
@@ -32,7 +32,7 @@ export function uniSSRPlugin(
 ): Plugin {
   const filter = createFilter(options.include, options.exclude)
   const entryServerJs = path.join(options.inputDir, ENTRY_SERVER_JS)
-  const entryServerJsCode = generateSSREntryServerCode()
+  const entryServerJsCode = generateSsrEntryServerCode()
   return {
     name: 'vite:uni-ssr',
     resolveId(id) {
@@ -85,7 +85,7 @@ export function uniSSRPlugin(
       const chunk = bundle['entry-server.js'] as OutputChunk
       if (chunk) {
         chunk.code =
-          generateSSRDefineCode(config, parseRpx2UnitOnce(options.inputDir)) +
+          generateSsrDefineCode(config, parseRpx2UnitOnce(options.inputDir)) +
           '\n' +
           chunk.code
       }

packages/vite-plugin-uni/src/utils/ssr.ts

@@ -50,29 +50,29 @@ function serializeDefine(define: Record<string, any>): string {
   return res + `}`
 }
 
-export function generateSSRDefineCode(
+function normalizeSsrDefine(config: ResolvedConfig) {
+  const defines = extend(
+    {
+      __IMPORT_META_ENV_BASE_URL__: JSON.stringify(config.env.BASE_URL),
+    },
+    config.define!
+  )
+  delete defines['import.meta.env.LEGACY']
+  return defines
+}
+export function generateSsrDefineCode(
   config: ResolvedConfig,
   { unit, unitRatio, unitPrecision }: Rpx2UnitOptions
 ): string {
   return fs
     .readFileSync(path.join(__dirname, '../../lib/ssr/define.js'), 'utf8')
-    .replace(
-      '__DEFINES__',
-      serializeDefine(
-        extend(
-          {
-            __IMPORT_META_ENV_BASE_URL__: JSON.stringify(config.env.BASE_URL),
-          },
-          config.define!
-        )
-      )
-    )
+    .replace('__DEFINES__', serializeDefine(normalizeSsrDefine(config)))
     .replace('__UNIT__', JSON.stringify(unit))
     .replace('__UNIT_RATIO__', JSON.stringify(unitRatio))
     .replace('__UNIT_PRECISION__', JSON.stringify(unitPrecision))
 }
 
-export function generateSSREntryServerCode() {
+export function generateSsrEntryServerCode() {
   return fs.readFileSync(
     path.join(__dirname, '../../lib/ssr/entry-server.js'),
     'utf8'