wip(uts): web平台支持uvue.css

.prettierignore

 dist
+dist-x
 packages/uni-app-plus/lib
 packages/uni-app-vite/lib
 packages/uni-app-vue/lib

packages/global.d.ts

@@ -29,6 +29,7 @@ declare var __IMPORT_META_ENV_BASE_URL__:
   | '__IMPORT_META_ENV_BASE_URL__'
 
 // Global compile-time constants
+declare var __X__: boolean
 declare var __DEV__: boolean
 declare var __TEST__: boolean
 declare var __NODE_JS__: boolean

packages/shims-uni-app.d.ts

@@ -51,6 +51,9 @@ declare namespace UniNamespace {
     nvue?: {
       'flex-direction': 'column' | 'row'
     }
+    uvue?: {
+      'flex-direction': 'column' | 'row'
+    }
     globalStyle: PagesJsonPageStyle & {
       rpxCalcMaxDeviceWidth?: number
       rpxCalcBaseDeviceWidth?: number

packages/uni-app-uts/src/plugins/pre.ts

@@ -18,7 +18,7 @@ const debugPreHtml = debug('uni:pre-html')
 const debugPreJsTry = debug('uni:pre-js-try')
 
 const PRE_HTML_EXTNAME = ['.vue', '.uvue']
-const PRE_JS_EXTNAME = ['.json', '.css', '.uts'].concat(PRE_HTML_EXTNAME)
+const PRE_JS_EXTNAME = ['.json', '.css', '.uts', '.ts'].concat(PRE_HTML_EXTNAME)
 
 export function uniPrePlugin(options: UniPrePluginOptions = {}): Plugin {
   const filter = createFilter(options.include, options.exclude)

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

@@ -235,26 +235,30 @@ function normalizePageStyle(
   pageStyle: UniApp.PagesJsonPageStyle | undefined,
   platform: UniApp.PLATFORM
 ) {
-  const hasNVue =
-    pagePath &&
-    process.env.UNI_INPUT_DIR &&
-    fs.existsSync(path.join(process.env.UNI_INPUT_DIR, pagePath + '.nvue'))
-      ? true
-      : undefined
-
-  let isNVue = false
-  if (hasNVue) {
-    const hasVue = fs.existsSync(
-      path.join(process.env.UNI_INPUT_DIR, pagePath + '.vue')
-    )
-    if (hasVue) {
-      if (platform === 'app') {
-        if (process.env.UNI_NVUE_COMPILER !== 'vue') {
-          isNVue = true
+  let isNVue: boolean | undefined = false
+  if (process.env.UNI_APP_X === 'true') {
+    isNVue = undefined
+  } else {
+    const hasNVue =
+      pagePath &&
+      process.env.UNI_INPUT_DIR &&
+      fs.existsSync(path.join(process.env.UNI_INPUT_DIR, pagePath + '.nvue'))
+        ? true
+        : undefined
+
+    if (hasNVue) {
+      const hasVue = fs.existsSync(
+        path.join(process.env.UNI_INPUT_DIR, pagePath + '.vue')
+      )
+      if (hasVue) {
+        if (platform === 'app') {
+          if (process.env.UNI_NVUE_COMPILER !== 'vue') {
+            isNVue = true
+          }
         }
+      } else {
+        isNVue = true
       }
-    } else {
-      isNVue = true
     }
   }
 

packages/uni-h5-vite/src/plugin/handleHotUpdate/index.ts

@@ -34,7 +34,11 @@ export function createHandleHotUpdate(): Plugin['handleHotUpdate'] {
       invalidateFiles = [
         path.resolve(inputDir, PAGES_JSON_JS),
         path.resolve(inputDir, MANIFEST_JSON_JS),
-        resolveBuiltIn('@dcloudio/uni-h5/dist/uni-h5.es.js'),
+        resolveBuiltIn(
+          '@dcloudio/uni-h5/' +
+            (process.env.UNI_APP_X === 'true' ? 'dist-x' : 'dist') +
+            '/uni-h5.es.js'
+        ),
       ]
       try {
         invalidateFiles.push(resolveBuiltIn('vite/dist/client/env.mjs'))

packages/uni-h5-vite/src/plugins/manifestJson.ts

@@ -94,11 +94,14 @@ export function uniManifestJsonPlugin(): Plugin {
         )
         const fallbackLocale = (i18nOptions && i18nOptions.locale) || ''
 
+        const vueType = process.env.UNI_APP_X === 'true' ? 'uvue' : 'nvue'
+
         const flexDirection =
-          (manifest['app'] &&
-            manifest['app'].nvue &&
-            manifest['app'].nvue['flex-direction']) ||
-          'column'
+          (process.env.UNI_APP_X === 'true'
+            ? manifest['uni-app-x'] && manifest['uni-app-x']['flex-direction']
+            : manifest['app'] &&
+              manifest['app'].nvue &&
+              manifest['app'].nvue['flex-direction']) || 'column'
 
         const platformConfig =
           manifest[
@@ -114,9 +117,9 @@ export function uniManifestJsonPlugin(): Plugin {
   export const appVersionCode = ${JSON.stringify(manifest.versionCode || '')}
 
   export const debug = ${!!debug}
-  export const nvue = ${JSON.stringify({
-    'flex-direction': flexDirection,
-  })}
+  export const ${vueType} = ${JSON.stringify({
+            'flex-direction': flexDirection,
+          })}
   export const networkTimeout = ${JSON.stringify(networkTimeout)}
   // h5
   export const router = ${JSON.stringify(router)}

packages/uni-h5-vite/src/plugins/pagesJson.ts

@@ -49,11 +49,11 @@ function generatePagesJsonCode(
   const uniRoutesCode = generateRoutes(globalName, pagesJson, config)
   const uniConfigCode = generateConfig(globalName, pagesJson, config)
   const cssCode = generateCssCode(config)
-
+  const vueType = process.env.UNI_APP_X === 'true' ? 'uvue' : 'nvue'
   return `
 import { defineAsyncComponent, resolveComponent, createVNode, withCtx, openBlock, createBlock } from 'vue'
 import { PageComponent, useI18n, setupWindow, setupPage } from '@dcloudio/uni-h5'
-import { appId, appName, appVersion, appVersionCode, debug, networkTimeout, router, async, sdkConfigs, qqMapKey, googleMapKey, aMapKey, bMapKey, aMapSecurityJsCode, aMapServiceHost, nvue, locale, fallbackLocale, darkmode, themeConfig } from './${MANIFEST_JSON_JS}'
+import { appId, appName, appVersion, appVersionCode, debug, networkTimeout, router, async, sdkConfigs, qqMapKey, googleMapKey, aMapKey, bMapKey, aMapSecurityJsCode, aMapServiceHost, ${vueType}, locale, fallbackLocale, darkmode, themeConfig } from './${MANIFEST_JSON_JS}'
 const locales = import.meta.globEager('./locale/*.json')
 ${importLayoutComponentsCode}
 const extend = Object.assign
@@ -119,9 +119,15 @@ function generateCssCode(config: ResolvedConfig) {
   if (define.__UNI_FEATURE_TABBAR__) {
     cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'tabBar.css')
   }
-  if (define.__UNI_FEATURE_NVUE__) {
-    cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'nvue.css')
+  // x 项目直接集成 uvue.css
+  if (process.env.UNI_APP_X === 'true') {
+    cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'uvue.css')
+  } else {
+    if (define.__UNI_FEATURE_NVUE__) {
+      cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'nvue.css')
+    }
   }
+
   if (define.__UNI_FEATURE_PULL_DOWN_REFRESH__) {
     cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'pageRefresh.css')
   }
@@ -265,6 +271,7 @@ function generateConfig(
   delete pagesJson.subPackages
   delete pagesJson.subpackages
   pagesJson.compilerVersion = process.env.UNI_COMPILER_VERSION
+  const vueType = process.env.UNI_APP_X === 'true' ? 'uvue' : 'nvue'
   return `${globalName}.__uniConfig=extend(${JSON.stringify(pagesJson)},{
   appId,
   appName,
@@ -280,7 +287,7 @@ function generateConfig(
   aMapKey,
   aMapSecurityJsCode,
   aMapServiceHost,
-  nvue,
+  ${vueType},
   locale,
   fallbackLocale,
   locales:Object.keys(locales).reduce((res,name)=>{const locale=name.replace(/\\.\\/locale\\/(uni-app.)?(.*).json/,'$2');extend(res[locale]||(res[locale]={}),locales[name].default);return res},{}),

packages/uni-h5-vite/src/plugins/resolveId.ts

@@ -14,7 +14,11 @@ export function uniResolveIdPlugin(): Plugin {
     enforce: 'pre',
     config() {
       resolveCache[ownerModuleName] = resolveBuiltIn(
-        path.join(ownerModuleName, 'dist/uni-h5.es.js')
+        path.join(
+          ownerModuleName,
+          (process.env.UNI_APP_X === 'true' ? 'dist-x' : 'dist') +
+            '/uni-h5.es.js'
+        )
       )
       resolveCache['@dcloudio/uni-h5-vue'] = resolveBuiltIn(
         path.join(

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

@@ -15330,13 +15330,15 @@ 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);
+  {
+    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) {

packages/uni-h5/package.json

@@ -6,6 +6,7 @@
   "module": "./dist/uni-h5.es.js",
   "files": [
     "dist",
+    "dist-x",
     "lib",
     "style"
   ],

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

@@ -178,13 +178,19 @@ 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, '')
+  if (__X__) {
+    const uvueDirKey = 'uvue-dir-' + __uniConfig.uvue!['flex-direction']
+    document.body.setAttribute('uvue', '')
+    document.body.setAttribute(uvueDirKey, '')
   } else {
-    document.body.removeAttribute('nvue')
-    document.body.removeAttribute(nvueDirKey)
+    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)
+    }
   }
 }
 

packages/uni-h5/style/framework/uvue.css

+[uvue] uni-view,
+[uvue] uni-label,
+[uvue] uni-swiper-item,
+[uvue] uni-scroll-view {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+
+[uvue] uni-button {
+  margin: 0;
+}
+
+[uvue-dir-row] uni-view,
+[uvue-dir-row] uni-label,
+[uvue-dir-row] uni-swiper-item {
+  flex-direction: row;
+}
+
+[uvue-dir-column] uni-view,
+[uvue-dir-column] uni-label,
+[uvue-dir-column] uni-swiper-item {
+  flex-direction: column;
+}
+
+[uvue-dir-row-reverse] uni-view,
+[uvue-dir-row-reverse] uni-label,
+[uvue-dir-row-reverse] uni-swiper-item {
+  flex-direction: row-reverse;
+}
+
+[uvue-dir-column-reverse] uni-view,
+[uvue-dir-column-reverse] uni-label,
+[uvue-dir-column-reverse] uni-swiper-item {
+  flex-direction: column-reverse;
+}
+
+[uvue] uni-view,
+[uvue] uni-image,
+[uvue] uni-input,
+[uvue] uni-scroll-view,
+[uvue] uni-swiper,
+[uvue] uni-swiper-item,
+[uvue] uni-text,
+[uvue] uni-textarea,
+[uvue] uni-video {
+  position: relative;
+  border: 0px solid #000000;
+  box-sizing: border-box;
+}
+
+[uvue] uni-swiper-item {
+  position: absolute;
+}

packages/uni-h5/vite.config.ts

@@ -19,7 +19,7 @@ function resolve(file: string) {
 }
 
 const FORMAT = process.env.FORMAT as 'es' | 'cjs'
-
+const isX = process.env.UNI_APP_X === 'true'
 const rollupPlugins = [
   replace({
     values: {
@@ -69,6 +69,7 @@ export default defineConfig({
     __PLATFORM__: JSON.stringify('h5'),
     __APP_VIEW__: false,
     __NODE_JS__: FORMAT === 'cjs' ? true : false,
+    __X__: isX,
   },
   resolve: {
     alias: [
@@ -120,6 +121,7 @@ export default defineConfig({
     assetsDir: '.',
     rollupOptions: {
       output: {
+        dir: isX ? 'dist-x' : 'dist',
         freeze: false, // uni 对象需要可被修改
         entryFileNames: 'uni-h5.' + FORMAT + '.js',
       },

scripts/build.js

@@ -146,6 +146,26 @@ async function build(target) {
         {
           stdio: 'inherit',
           env: Object.assign({ FORMAT: 'cjs' }, process.env),
+          cwd: pkgDir,
+        }
+      )
+      // uni-h5(uni-app x)
+      await execa(
+        'vite',
+        ['build', '--config', path.resolve(pkgDir, 'vite.config.ts')],
+        {
+          stdio: 'inherit',
+          env: Object.assign({ FORMAT: 'es', UNI_APP_X: 'true' }, process.env, env),
+          cwd: pkgDir,
+        }
+      )
+      await execa(
+        'vite',
+        ['build', '--config', path.resolve(pkgDir, 'vite.config.ts')],
+        {
+          stdio: 'inherit',
+          env: Object.assign({ FORMAT: 'cjs', UNI_APP_X: 'true' }, process.env, env),
+          cwd: pkgDir,
         }
       )
     }