feat: support global unique ID generation with SSR compatibility

internals/cli/src/commands/build/build-runtime.ts

@@ -82,9 +82,9 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
         }),
         isVisualizer
           ? visualizer({
-              filename: `${tasks[0].libPath}.html`,
-              open: true
-            })
+            filename: `${tasks[0].libPath}.html`,
+            open: true
+          })
           : null,
         {
           name: 'vite-plugin-transfer-mode',
@@ -118,7 +118,10 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
         rollupOptions: {
           external: (source, importer, isResolved) => {
             if (isResolved || !importer) return false
-
+            // 明确排除 ./pc.vue
+            if (source === './pc.vue') {
+              return false
+            }
             if (libPath === 'tiny-vue-saas-common') {
               return ['@vue/composition-api', 'vue'].includes(source)
             }

internals/cli/src/shared/config.ts

@@ -9,11 +9,14 @@ const EXTENERAL = [
   'streamsaver',
   'shepherd.js',
   './label-wrap',
-  './tall-storage.vue',
+  // './tall-storage.vue',
   'highlight.js',
   'lowlight'
 ]
 const external = (deps) => {
+  if (deps === './pc.vue') {
+    return false
+  }
   return EXTENERAL.includes(deps) || /^@opentiny[\\/]|@originjs|@tiptap|echarts|cropperjs|@better-scroll/.test(deps)
 }
 

internals/vue-vite-import/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@opentiny/vue-vite-import",
+  "version": "0.1.0",
+  "description": "Vite plugin for auto import components",
+  "author": "OpenTiny",
+  "license": "MIT",
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "import"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ]
+}

package.json

@@ -39,6 +39,7 @@
     "dev:saas": "pnpm create:icon-saas && pnpm build:entry && pnpm -C examples/vue3 dev:saas",
     "dev2": "pnpm build:entry && pnpm -C examples/vue2 dev",
     "dev2:saas": "pnpm create:icon-saas && pnpm build:entry && pnpm -C examples/vue2 dev:saas",
+    "dev:nuxt": "pnpm build:entry && pnpm -C examples/nuxt dev",
     "// ---------- 启动官网文档 ----------": "",
     "site": "pnpm build:entry && pnpm -C examples/sites start",
     "site:open": "pnpm build:entry && pnpm -C examples/sites start:open",
@@ -89,7 +90,11 @@
     "// ---------- e2e自动化测试 ----------": "",
     "test:e2e": "pnpm test:e2e3",
     "test:e2e2": "pnpm -C examples/vue2 test:e2e --project=chromium",
-    "test:e2e3": "pnpm -C examples/vue3 test:e2e --project=chromium",
+    "test:e2e3": "CI=true pnpm -C examples/vue3 test:e2e --project=chromium",
+    "test:component": "pnpm -C examples/sites start & sleep 10 && CI=true pnpm -C examples/vue3 test:e2e --project=chromium -g",
+    "test:button": "pnpm -C examples/sites start & sleep 10 && pnpm -C examples/vue3 test:e2e --project=chromium -g \"app/button\" && pnpm -C examples/vue3 exec playwright show-report",
+    "test:alert": "pnpm -C examples/sites start & sleep 10 && CI=true pnpm -C examples/vue3 test:e2e --project=chromium -g \"app/alert\"",
+    "show-report": "pnpm -C examples/vue3 exec playwright show-report",
     "// ---------- playwright下载chromium、firefox等浏览器内核 ----------": "",
     "install:browser": "pnpm -C examples/vue3 install:browser",
     "// ---------- e2e测试代码生成器 ----------": "",
@@ -147,7 +152,7 @@
     "shx": "^0.3.4",
     "typescript": "catalog:",
     "vite": "catalog:",
-    "vue": "^3.4.38",
+    "vue": "^3.5.13",
     "vue-tsc": "^1.6.5"
   },
   "pnpm": {
@@ -156,10 +161,10 @@
       "[email protected]": "patches/[email protected]"
     },
     "overrides": {
-      "@vue/compiler-sfc@3": "3.4.38",
-      "@vue/runtime-core@3": "3.4.38",
-      "@vue/runtime-dom@3": "3.4.38",
-      "@vue/shared@3": "3.4.38",
+      "@vue/compiler-sfc@3": "3.5.13",
+      "@vue/runtime-core@3": "3.5.13",
+      "@vue/runtime-dom@3": "3.5.13",
+      "@vue/shared@3": "3.5.13",
       "cropperjs": "1.6.2",
       "echarts": "5.4.1",
       "follow-redirects": "1.14.8",
@@ -175,10 +180,10 @@
       "[email protected]": "2.7.10",
       "[email protected]": "2.6.14",
       "[email protected]": "2.7.10",
-      "vue@3": "3.4.38",
+      "vue@3": "3.5.13",
       "vue2": "npm:[email protected]",
       "vue2.7": "npm:[email protected]",
-      "vue3": "npm:vue@3.4.38"
+      "vue3": "npm:vue@3.5.13"
     },
     "packageExtensions": {
       "[email protected]": {
@@ -198,7 +203,7 @@
       },
       "vite-plugin-dts": {
         "peerDependencies": {
-          "vue": "^3.4.38"
+          "vue": "^3.5.13"
         }
       },
       "vite-plugin-md": {

packages/renderless/src/autocomplete/vue.ts

@@ -13,7 +13,7 @@
 import { debounce } from '@opentiny/utils'
 import { userPopper } from '@opentiny/vue-hooks'
 import type { Ref } from 'vue'
-import { guid } from '@opentiny/utils'
+import { useId } from '@opentiny/vue-hooks'
 import {
   computedVisible,
   watchVisible,
@@ -68,7 +68,7 @@ const initState = ({
     loading: false,
     highlightedIndex: -1,
     suggestionDisabled: false,
-    id: $prefix + '-' + guid(),
+    id: $prefix + '-' + useId({}),
     suggestionVisible: computed(() => computedVisible(state)),
     // props.validateEvent优先级大于inject，都没有配置默认为true
     validateEvent: props.validateEvent ?? inject('validateEvent', true)

packages/renderless/src/collapse-item/vue.ts

@@ -18,7 +18,7 @@ import type {
   ICollapseItemRenderlessParamUtils
 } from '@/types'
 import { handleFocus, handleEnterClick, handleHeaderClick, handleHeaderContainerClick } from './index'
-import { guid } from '@opentiny/utils'
+import { useId } from '@opentiny/vue-hooks'
 
 export const api = [
   'state',
@@ -39,7 +39,7 @@ export const renderless = (
   const eventName = _constants.EVENT_NAME.CollapseItemClick
 
   const state: ICollapseItemState = reactive({
-    id: guid(),
+    id: useId({}),
     isClick: false,
     focusing: false,
     contentHeight: 0,

packages/renderless/src/dropdown/vue.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { guid } from '@opentiny/utils'
+import { useId } from '@opentiny/vue-hooks'
 import type {
   IDropdownState,
   IDropdownApi,
@@ -56,7 +56,7 @@ export const renderless = (
     menuItemsArray: [],
     triggerElm: null,
     dropdownElm: null,
-    listId: `dropdown-menu-${guid()}`,
+    listId: `dropdown-menu-${useId({})}`,
     showIcon: props.showIcon,
     showSelfIcon: props.showSelfIcon,
     designConfig,

packages/renderless/src/popover/index.ts

@@ -11,7 +11,7 @@
  */
 import type { IPopoverRenderlessParams, IPopoverState } from 'types/popover.type'
 import { on, off, addClass, removeClass } from '@opentiny/utils'
-import { guid } from '@opentiny/utils'
+import { useId } from '@opentiny/vue-hooks'
 import { KEY_CODE } from '@opentiny/utils'
 
 const processTrigger = ({
@@ -255,7 +255,8 @@ export const destroyed =
     off(referenceElm, 'keydown', api.handleKeydown)
   }
 
-export const computedTooltipId = (constants: { IDPREFIX: string }) => () => `${constants.IDPREFIX}-${guid('', 4)}`
+export const computedTooltipId = (constants: { IDPREFIX: string }) => () =>
+  `${constants.IDPREFIX}-${useId({ length: 4 })}`
 
 export const wrapMounted =
   ({ api, props, vm, state }: Pick<IPopoverRenderlessParams, 'state' | 'api' | 'props' | 'vm'>) =>

packages/renderless/src/tooltip/vue.ts

@@ -29,7 +29,7 @@ import {
   handleDocumentClick
 } from './index'
 import { userPopper } from '@opentiny/vue-hooks'
-import { guid } from '@opentiny/utils'
+import { useId } from '@opentiny/vue-hooks'
 import type { ISharedRenderlessParamHooks, ISharedRenderlessParamUtils } from 'types/shared.type'
 import type { ITooltipApi, ITooltipProps, ITooltipState } from 'types/tooltip.type'
 
@@ -58,7 +58,7 @@ const initState = ({ reactive, showPopper, popperElm, referenceElm, props, injec
     timeout: null,
     focusing: false,
     expectedState: undefined,
-    tooltipId: guid('tiny-tooltip-', 4),
+    tooltipId: useId({ nameSpace: 'tiny-tooltip', length: 4 }),
     tabindex: props.tabindex,
     xPlacement: 'bottom',
     showContent: inject('showContent', null),

packages/utils/src/string/index.ts

@@ -243,6 +243,13 @@ export const fillChar = (string, length, append, chr = '0') => {
 
 export const random = () => {
   let MAX_UINT32_PLUS_ONE = 4294967296
+
+  if (!globalThis?.crypto) {
+    // 服务端使用 Math.random() 作为降级方案
+    return Math.random()
+  }
+
+  // 客户端使用更安全的 crypto API
   return globalThis.crypto.getRandomValues(new Uint32Array(1))[0] / MAX_UINT32_PLUS_ONE
 }
 

packages/utils/src/xss/index.ts

@@ -1,4 +1,6 @@
-import * as xss from 'xss'
+import xssImport from 'xss'
+
+const { FilterXSS, getDefaultWhiteList } = xssImport as any
 
 let xssOptions: any = {
   enableAttrs: true,
@@ -94,11 +96,11 @@ let xssOptions: any = {
   }
 }
 
-const defaultWhiteList = (xss.getDefaultWhiteList && xss.getDefaultWhiteList()) || {}
+const defaultWhiteList = (getDefaultWhiteList && getDefaultWhiteList()) || {}
 
 xssOptions.html.whiteList = Object.assign(defaultWhiteList, xssOptions.html.whiteList)
 
-let xssFilterHtml = new xss.FilterXSS(xssOptions.html)
+let xssFilterHtml = new FilterXSS(xssOptions.html)
 
 export const getXssOption = (): object => {
   return xssOptions
@@ -117,7 +119,7 @@ export const setXssOption = (option: any): void => {
     xssOptions.html.whiteList = whiteList
   }
 
-  xssFilterHtml = new xss.FilterXSS(xssOptions.html)
+  xssFilterHtml = new FilterXSS(xssOptions.html)
 }
 
 let filterHtml = (content: string): string => {

packages/vue-hooks/index.ts

@@ -21,3 +21,5 @@ export { useUserAgent } from './src/useUserAgent'
 export { useWindowSize } from './src/useWindowSize'
 export { userPopper } from './src/vue-popper'
 export { usePopup } from './src/vue-popup'
+export { useId, ID_INJECTION_KEY } from './src/useId'
+export { useZIndex, ZINDEX_INJECTION_KEY, INITIAL_ZINDEX_KEY } from './src/useZindex'

packages/vue-hooks/package.json

@@ -17,7 +17,9 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.9",
-    "@opentiny/utils": "workspace:~"
+    "@opentiny/utils": "workspace:~",
+    "@opentiny/vue-common": "workspace:~",
+    "@vueuse/core": "^12.7.0"
   },
   "devDependencies": {
     "typescript": "catalog:",

packages/vue-hooks/src/useId.ts

@@ -0,0 +1,79 @@
+import { hooks as Vue } from '@opentiny/vue-common'
+import { computedEager } from '@vueuse/core'
+import { isServer } from '@opentiny/utils'
+
+const { inject, getCurrentInstance, unref } = Vue
+export interface TyIdInjectionContext {
+  prefix: string | number
+  current: number
+}
+interface useIdParams {
+  nameSpace?: string
+  length?: number
+  deterministicId?: Vue.Ref<string> | string
+}
+/**
+ * 用于Vue provide/inject的注入键，共享ID生成器状态。
+ */
+export const ID_INJECTION_KEY: Vue.InjectionKey<TyIdInjectionContext> = Symbol('tiny-vue-id-injection')
+
+/**
+ * 默认的ID注入上下文，当provide未提供时使用。
+ */
+const defaultIdInjection: TyIdInjectionContext = {
+  prefix: Math.floor(Math.random() * 1000000),
+  current: 0
+}
+
+/**
+ * 获取ID注入上下文的组合式函数，会尝试从组件树中注入，若失败则返回默认上下文。
+ */
+export const useIdInjection = (): TyIdInjectionContext => {
+  return getCurrentInstance() ? inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection
+}
+
+/**
+ * 生成唯一的ID，支持SSR，避免水合不匹配。
+ *
+ * @param {useIdParams} options - 配置选项。
+ * @param {string} [options.nameSpace] - ID命名空间。
+ * @param {number} [options.length] - ID中数字部分的长度。
+ * @param {Ref<string> | string} [options.deterministicId] - 一个确定的ID，如果提供，则直接返回该ID。
+ * @returns {string} 生成的唯一ID。
+ */
+let useIdFromVue: (() => string) | null = null
+export const useId = ({ nameSpace = '', length = 8, deterministicId }: useIdParams): string => {
+  // 判断vue自身是否有useId(vue3.5+）
+  const hasVueUseId = parseFloat(Vue.version) >= 3.5
+  // 如果vue自身有useId，则优先使用vue自身的useId
+  if (!useIdFromVue && hasVueUseId) {
+    try {
+      // eslint-disable-next-line dot-notation
+      useIdFromVue = (Vue as any)?.['useId'] || null
+    } catch (e) {
+      useIdFromVue = null
+    }
+  }
+  const idFromVue = useIdFromVue ? useIdFromVue() : null
+  const idInjection = useIdInjection()
+  // 在SSR期间，如果使用的是默认ID注入上下文，会发出警告。
+  // 随机前缀会导致客户端与服务端ID不一致，从而引发水合错误。
+  if (isServer && idInjection === defaultIdInjection) {
+    console.warn(
+      'IdInjection',
+      `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
+usage: app.provide(ID_INJECTION_KEY, {
+  prefix: number,
+  current: number,
+})`
+    )
+  }
+
+  const current = idInjection.current++
+  const currentStr = String(current)
+  // 如果数字长度小于指定长度，前面补0
+  const paddedCurrent =
+    idFromVue || (currentStr.length >= length ? currentStr : '0'.repeat(length - currentStr.length) + currentStr)
+  const idRef = computedEager(() => unref(deterministicId) || `${nameSpace}id-${idInjection.prefix}-${paddedCurrent}`)
+  return idRef.value
+}