feat: resolveId

package.json

@@ -55,6 +55,7 @@
     "@types/pako": "^1.0.1",
     "@types/puppeteer": "^5.4.2",
     "@types/quill": "^1.3.7",
+    "@types/resolve": "^1.20.0",
     "@typescript-eslint/parser": "^4.12.0",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vitejs/plugin-vue-jsx": "^1.1.4",

packages/playground/ssr/package.json

@@ -17,7 +17,7 @@
     "@dcloudio/uni-i18n": "../../uni-i18n",
     "@dcloudio/uni-shared": "../../uni-shared",
     "@vue/shared": "^3.1.0-beta.3",
-    "vue": "../../uni-h5-vue"
+    "vue": "^3.1.0-beta.3"
   },
   "devDependencies": {
     "@dcloudio/uni-cli-shared": "../../uni-cli-shared",

packages/playground/ssr/yarn.lock

@@ -248,6 +248,30 @@
     "@vue/compiler-dom" "3.1.0-beta.3"
     "@vue/shared" "3.1.0-beta.3"
 
+"@vue/reactivity@3.1.0-beta.3":
+  version "3.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.0-beta.3.tgz#94328652d2f76c691332806b9ff205847c7f956b"
+  integrity sha512-zA5m8IajiNbIrDiha8HaEzxqTcT0ZmcQkUoAwPK7exq70Z+AD4eemIWnXFiAaf+Mi8pePQ0dk0sITcWgXGo/pQ==
+  dependencies:
+    "@vue/shared" "3.1.0-beta.3"
+
+"@vue/runtime-core@3.1.0-beta.3":
+  version "3.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.0-beta.3.tgz#1c360e12c0f8016c227a9df46d5b13158cdbdc14"
+  integrity sha512-/GzufgW/y3O2ZHtvKoBqWCLXj13u5qGBFN4cPY2mbazHxyVCqX+FplVj/PI2wo02txzoJtH3/BXbC151fCx/Gg==
+  dependencies:
+    "@vue/reactivity" "3.1.0-beta.3"
+    "@vue/shared" "3.1.0-beta.3"
+
+"@vue/runtime-dom@3.1.0-beta.3":
+  version "3.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.0-beta.3.tgz#83bca683010df26eac2b2b3544d0e52134b3ee41"
+  integrity sha512-s5W/6G8VQNEoTTLSb7cZ0uTWum8K5Sx5AFc0tRvUi2VyXJbgHUB/pN6SNvi3qsTbgSrYPG7kKWnhoxCZCBUwrA==
+  dependencies:
+    "@vue/runtime-core" "3.1.0-beta.3"
+    "@vue/shared" "3.1.0-beta.3"
+    csstype "^2.6.8"
+
 "@vue/server-renderer@^3.1.0-beta.3":
   version "3.1.0-beta.3"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.1.0-beta.3.tgz#d30d467965165c6e68dd76044d3315f55d61fc0d"
@@ -705,6 +729,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csstype@^2.6.8:
+  version "2.6.17"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
+  integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
+
 cypress@^7.3.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-7.3.0.tgz#17345b8d18681c120f033e7d8fd0f0271e9d0d51"
@@ -2465,8 +2494,14 @@ vue-router@^4.0.6:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.6.tgz#91750db507d26642f225b0ec6064568e5fe448d6"
   integrity sha512-Y04llmK2PyaESj+N33VxLjGCUDuv9t4q2OpItEGU7POZiuQZaugV6cJpE6Qm1sVFtxufodLKN2y2dQl9nk0Reg==
 
-vue@../../uni-h5-vue:
-  version "3.0.0"
+vue@^3.1.0-beta.3:
+  version "3.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.0-beta.3.tgz#ed7d944b3d276cbdcda8993f73833a05a182bd13"
+  integrity sha512-Um1HjcgTBs65/imtgxKJEfFV00UaAAxbTTpuWlTfHeKd2wSyvoMMvQdiwL+GuEeKzgG0pZomZ8z2otekcLkmCA==
+  dependencies:
+    "@vue/compiler-dom" "3.1.0-beta.3"
+    "@vue/runtime-dom" "3.1.0-beta.3"
+    "@vue/shared" "3.1.0-beta.3"
 
 which@^2.0.1:
   version "2.0.2"

packages/uni-cli-shared/src/utils.ts

@@ -15,3 +15,7 @@ export const resolveMainPathOnce = once((inputDir: string) => {
   }
   return path.resolve(inputDir, 'main.js')
 })
+
+export function resolveBuiltIn(path: string) {
+  return require.resolve(path, { paths: [process.env.UNI_CLI_CONTEXT] })
+}

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) {
@@ -1185,7 +1185,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);
@@ -10089,7 +10089,6 @@ var PickerViewColumn = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       const el = rootRef.value;
       const content = contentRef.value;
-      nextTick(() => {
       const {
         scroller: scrollerOrigin,
         handleTouchStart,
@@ -10122,9 +10121,8 @@ var PickerViewColumn = /* @__PURE__ */ defineComponent({
             handleTouchEnd(e2);
         }
       }, true);
-        updatesScroller();
-      });
       useCustomClick(el);
+      updatesScroller();
     });
     return () => {
       const defaultSlots = slots.default && slots.default();
@@ -14921,7 +14919,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;
@@ -15034,12 +15032,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;
@@ -15059,10 +15057,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/vite-plugin-uni/src/config/resolve.ts

@@ -4,13 +4,12 @@ import { VitePluginUniResolvedOptions } from '..'
 
 export function createResolve(
   options: VitePluginUniResolvedOptions,
-  config: UserConfig
+  _config: UserConfig
 ): UserConfig['resolve'] {
   return {
     alias: {
       '@': options.inputDir,
       '~@': options.inputDir, // src: url('~@/static/uni.ttf') format('truetype');
-      vue: '@dcloudio/uni-h5-vue',
     },
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'].concat(
       EXTNAME_VUE

packages/vite-plugin-uni/src/configResolved/config.ts

 import { ResolvedConfig } from 'vite'
+import { parseCompatConfigOnce } from '../../../uni-cli-shared/dist'
 import {
   isSsr,
   initSsrDefine,
+  rewriteSsrVue,
+  rewriteSsrResolve,
   rewriteSsrNativeTag,
   rewriteSsrRenderStyle,
 } from '../utils'
@@ -9,7 +12,10 @@ import {
 // import alias from 'module-alias'
 export function initConfig(config: ResolvedConfig) {
   if (isSsr(config.command, config)) {
+    const { MODE } = parseCompatConfigOnce(process.env.UNI_INPUT_DIR)
     initSsrDefine(config)
+    rewriteSsrVue(MODE)
+    rewriteSsrResolve(MODE)
     rewriteSsrNativeTag()
     rewriteSsrRenderStyle(process.env.UNI_INPUT_DIR)
   }

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

@@ -23,6 +23,7 @@ import { uniCssScopedPlugin } from './cssScoped'
 import { uniRenderjsPlugin } from './renderjs'
 import { uniPreVuePlugin } from './preVue'
 import { uniSSRPlugin } from './ssr'
+import { uniResolveIdPlugin } from './resolveId'
 
 const debugPlugin = debug('vite:uni:plugin')
 
@@ -93,6 +94,8 @@ export function initPlugins(
 
   addPlugin(plugins, vue(options.vueOptions), 'vite:uni', 'pre')
 
+  addPlugin(plugins, uniResolveIdPlugin(options), 'vite:resolve', 'pre')
+
   if (options.platform === 'h5') {
     // h5平台需要为非App.vue组件自动增加scoped
     addPlugin(

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

+import path from 'path'
+import debug from 'debug'
+import { Plugin } from 'vite'
+
+import { resolveBuiltIn, parseCompatConfigOnce } from '@dcloudio/uni-cli-shared'
+
+import { VitePluginUniResolvedOptions } from '../..'
+import { BuiltInModulesKey, BUILT_IN_MODULES } from '../../utils'
+
+const debugResolve = debug('vite:uni:resolve')
+
+function getModuleType(mode?: 2 | 3) {
+  return mode === 2 ? 'es-compat' : 'es'
+}
+// ssr 时，服务端 vue 的映射目前由 package.json-"vue":"npm:@dcloudio/uni-h5-vue" 处理（TODO HBuilderX）
+
+export function uniResolveIdPlugin(
+  options: VitePluginUniResolvedOptions
+): Plugin {
+  const resolveCache: Record<string, string> = {}
+  const resolvedIds = [
+    {
+      test(id: string) {
+        return id === '@dcloudio/uni-h5-vue'
+      },
+      resolveId(id: string) {
+        const files = BUILT_IN_MODULES[id as BuiltInModulesKey]
+        const { MODE } = parseCompatConfigOnce(options.inputDir)
+        return resolveBuiltIn(
+          path.join(id, files[getModuleType(MODE) as keyof typeof files])
+        )
+      },
+    },
+    {
+      test(id: string) {
+        return BUILT_IN_MODULES[id as BuiltInModulesKey]
+      },
+      resolveId(id: string) {
+        return resolveBuiltIn(
+          path.join(id, BUILT_IN_MODULES[id as BuiltInModulesKey]['es'])
+        )
+      },
+    },
+    {
+      test(id: string) {
+        return (
+          id.startsWith('@dcloudio/uni-h5/style') ||
+          id.startsWith('@dcloudio/uni-components/style')
+        )
+      },
+      resolveId(id: string) {
+        return resolveBuiltIn(id)
+      },
+    },
+  ]
+  return {
+    name: 'vite:uni-resolve-id',
+    resolveId(id) {
+      if (id === 'vue') {
+        if (options.platform === 'h5') {
+          id = '@dcloudio/uni-h5-vue'
+        }
+      }
+      const cache = resolveCache[id]
+      if (cache) {
+        return cache
+      }
+
+      for (const { test, resolveId } of resolvedIds) {
+        if (!test(id)) {
+          continue
+        }
+        const file = resolveId(id)
+        if (!file) {
+          continue
+        }
+        resolveCache[id] = file
+        debugResolve(id, file)
+        return file
+      }
+    },
+  }
+}

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

@@ -3,7 +3,6 @@ import { UniCompiler, initUniCompiler } from '@dcloudio/uni-cli-shared'
 import { Options as VueOptions } from '@vitejs/plugin-vue'
 
 import { createConfig } from './config'
-// import { createResolveId } from './resolveId'
 import { createConfigResolved } from './configResolved'
 import { createConfigureServer } from './configureServer'
 import { createHandleHotUpdate } from './handleHotUpdate'
@@ -45,7 +44,6 @@ export default function uniPlugin(
     config: createConfig(options),
     configResolved: createConfigResolved(options),
     configureServer: createConfigureServer(options),
-    // resolveId: createResolveId(options),// TODO 仅为HBuilderX中服务？
     handleHotUpdate: createHandleHotUpdate(options),
   }
 }

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

-import path from 'path'
-import debug from 'debug'
-import { Plugin } from 'vite'
-import { VitePluginUniResolvedOptions } from '..'
-import { BUILT_IN_MODULES } from '../utils'
-import { parseCompatConfigOnce } from '../../../uni-cli-shared/dist'
-
-const debugResolve = debug('vite:uni:resolve')
-
-function getModuleType(ssr?: boolean, mode?: 2 | 3) {
-  return ssr ? 'cjs' : 'es' + (mode === 2 ? '-compat' : '')
-}
-
-export function createResolveId(
-  options: VitePluginUniResolvedOptions
-): Plugin['resolveId'] {
-  return function (id, _importer, _options, ssr) {
-    if (id === '@dcloudio/uni-h5-vue') {
-      const files = BUILT_IN_MODULES[id]
-      const { MODE } = parseCompatConfigOnce(options.inputDir)
-      const file = require.resolve(
-        path.join(id, files[getModuleType(ssr, MODE) as keyof typeof files])
-      )
-      debugResolve(file)
-      return file
-    }
-    const files = BUILT_IN_MODULES[id as keyof typeof BUILT_IN_MODULES]
-    if (files) {
-      const file = require.resolve(path.join(id, files[ssr ? 'cjs' : 'es']))
-      debugResolve(file)
-      return file
-    }
-    if (
-      id.startsWith('@dcloudio/uni-h5/style') ||
-      id.startsWith('@dcloudio/uni-components/style')
-    ) {
-      debugResolve(id)
-      return require.resolve(id, { paths: [process.env.UNI_CLI_CONTEXT] })
-    }
-  }
-}

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

@@ -35,3 +35,5 @@ export const BUILT_IN_MODULES = {
     cjs: 'dist/uni-shared.cjs.js',
   },
 }
+
+export type BuiltInModulesKey = keyof typeof BUILT_IN_MODULES

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

 import path from 'path'
 import fs from 'fs-extra'
-import { extend, isString, NormalizedStyle } from '@vue/shared'
+import { extend, isArray, isString, NormalizedStyle } from '@vue/shared'
 import {
   isNativeTag,
   createRpx2Unit,
   Rpx2UnitOptions,
 } from '@dcloudio/uni-shared'
-import { parseRpx2UnitOnce } from '@dcloudio/uni-cli-shared'
+import { parseRpx2UnitOnce, resolveBuiltIn } from '@dcloudio/uni-cli-shared'
 import { ConfigEnv, ResolvedConfig, UserConfig } from 'vite'
+import resolve from 'resolve'
 
 export function isSsr(
   command: ConfigEnv['command'],
@@ -68,6 +69,51 @@ export function generateSSREntryServerCode() {
   )
 }
 
+export function rewriteSsrVue(mode?: 2 | 3) {
+  // 解决 @vue/server-renderer 中引入 vue 的映射
+  let vuePath: string
+  if (mode === 2) {
+    vuePath = resolveBuiltIn(
+      '@dcloudio/uni-h5-vue/dist/vue.runtime.compat.cjs.js'
+    )
+  } else {
+    vuePath = resolveBuiltIn('@dcloudio/uni-h5-vue/dist/vue.runtime.cjs.js')
+  }
+  require('module-alias').addAlias('vue', vuePath)
+}
+
+function initResolveSyncOpts(opts?: resolve.SyncOpts) {
+  if (!opts) {
+    opts = {}
+  }
+  if (!opts.paths) {
+    opts.paths = []
+  }
+  if (isString(opts.paths)) {
+    opts.paths = [opts.paths]
+  }
+  if (isArray(opts.paths)) {
+    opts.paths.push(path.join(process.env.UNI_CLI_CONTEXT, 'node_modules'))
+  }
+  return opts
+}
+
+export function rewriteSsrResolve(mode?: 2 | 3) {
+  // 解决 ssr 时 __vite_ssr_import__("vue") 的映射
+  const resolve = require('resolve')
+  const oldSync = resolve.sync
+  resolve.sync = (id: string, opts?: resolve.SyncOpts) => {
+    if (id === 'vue') {
+      return resolveBuiltIn(
+        `@dcloudio/uni-h5-vue/dist/vue.runtime.${
+          mode === 2 ? 'compat.' : ''
+        }cjs.js`
+      )
+    }
+    return oldSync(id, initResolveSyncOpts(opts))
+  }
+}
+
 export function rewriteSsrNativeTag() {
   const { parserOptions } = require('@vue/compiler-dom')
   // TODO compiler-ssr时，传入的 isNativeTag 会被 @vue/compiler-dom 的 isNativeTag 覆盖

yarn.lock

@@ -983,6 +983,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/resolve@^1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.0.tgz#11325a379b6f63b858fed49552fd4178495ee087"
+  integrity sha512-SFT3jdUNlLkjxUWwH/0QjLiEsV38hjdDX8oMcX9jZAD8KWNzRLdg6INZE7UMz9O86b2BOHzA3dR8nF+DbonX2Q==
+
 "@types/sass@^1.16.0":
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"