uview-plus 3.7.36 → 3.8.32

package/libs/mixin/mixin.js

@@ -2,9 +2,21 @@ import { defineMixin } from '../vue'
 import { deepMerge, $parent, sleep } from '../function/index'
 import test from '../function/test'
 import route from '../util/route'
+import {
+    applyNativeThemeUI,
+    applyNativeThemeUIDeferred,
+    getThemeCardStyle,
+    getThemeIsDark,
+    getThemePageStyle,
+    getThemeVar,
+    getThemeVarsForStyle,
+    syncThemeRuntimeFromStorage
+} from '../theme/runtime'
 // #ifdef APP-NVUE
 // 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
-const dom = uni.requireNativePlugin('dom')
+const dom = (typeof uni !== 'undefined' && uni && typeof uni.requireNativePlugin === 'function')
+    ? uni.requireNativePlugin('dom')
+    : null
 // #endif
 
 export const mixin = defineMixin({
@@ -31,21 +43,51 @@ export const mixin = defineMixin({
         }
     },
     data() {
-        return {}
+        return {
+            __upPageThemeChangeHandler: null,
+            upThemeVersion: 0
+        }
     },
     onLoad() {
         // getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
-        this.$u.getRect = this.$uGetRect
+        this.upBindGetRect()
+        this.upInitThemeVersion()
+        if (this.upIsPageScope()) {
+            this.upApplyNativeThemeUI()
+            if (typeof uni !== 'undefined' && typeof uni.$on === 'function' && !this.__upPageThemeChangeHandler) {
+                this.__upPageThemeChangeHandler = () => {
+                    this.upApplyNativeThemeUI()
+                }
+                uni.$on('uThemeChange', this.__upPageThemeChangeHandler)
+            }
+        }
+    },
+    onShow() {
+        if (this.upIsPageScope()) {
+            this.upApplyNativeThemeUI()
+        }
     },
     created() {
         // 组件当中，只有created声明周期，为了能在组件使用，故也在created中将方法挂载到$u
-        this.$u.getRect = this.$uGetRect
+        this.upBindGetRect()
+        this.upInitThemeVersion()
+        if (typeof uni !== 'undefined' && typeof uni.$on === 'function') {
+            this.__uThemeChangeHandler = (payload = {}) => {
+                this.upSyncThemeVersion(payload)
+                this.chacheU = null
+                if (typeof this.$forceUpdate === 'function') {
+                    this.$forceUpdate()
+                }
+            }
+            uni.$on('uThemeChange', this.__uThemeChangeHandler)
+        }
     },
     computed: {
         // 在2.x版本中，将会把$u挂载到uni对象下，导致在模板中无法使用uni.$u.xxx形式
         // 所以这里通过computed计算属性将其附加到this.$u上，就可以在模板或者js中使用uni.$u.xxx
         // 只在nvue环境通过此方式引入完整的$u，其他平台会出现性能问题，非nvue则按需引入（主要原因是props过大）
         $u() {
+            this.upThemeVersion
             // #ifndef APP-NVUE
             // 在非nvue端，移除props，http，mixin等对象，避免在小程序setData时数据过大影响性能
             let mergeU = deepMerge(uni.$u, {
@@ -63,6 +105,22 @@ export const mixin = defineMixin({
             return uni.$u
             // #endif
         },
+        upThemeIsDark() {
+            this.upThemeVersion
+            return getThemeIsDark(this.$u)
+        },
+        upThemeVars() {
+            this.upThemeVersion
+            return getThemeVarsForStyle(this.$u)
+        },
+        upThemePageStyle() {
+            this.upThemeVersion
+            return getThemePageStyle(this.$u)
+        },
+        upThemeCardStyle() {
+            this.upThemeVersion
+            return getThemeCardStyle(this.$u)
+        },
         /**
          * 生成bem规则类名
          * 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
@@ -98,6 +156,47 @@ export const mixin = defineMixin({
         }
     },
     methods: {
+        upBindGetRect() {
+            const upU = this.$u || (typeof uni !== 'undefined' ? uni.$u : null)
+            if (upU) {
+                upU.getRect = this.$uGetRect
+            } else if (typeof uni !== 'undefined') {
+                uni.$u = {
+                    getRect: this.$uGetRect
+                }
+            }
+        },
+        upReadThemeVersion() {
+            return Number((typeof uni !== 'undefined' && uni.$u && uni.$u.theme && uni.$u.theme.version) || 0)
+        },
+        upInitThemeVersion() {
+            const version = this.upReadThemeVersion()
+            if (version) {
+                this.upThemeVersion = version
+            }
+        },
+        upSyncThemeVersion(payload = {}) {
+            const version = Number(payload.version || this.upReadThemeVersion() || 0)
+            this.upThemeVersion = version || Number(this.upThemeVersion || 0) + 1
+        },
+        upIsPageScope() {
+            return !!(this.$page || this.route || this.$options?.mpType === 'page')
+        },
+        upHasProp(propName) {
+            const vnodeProps = this.$?.vnode?.props || {}
+            const kebabName = propName.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`)
+            return Object.prototype.hasOwnProperty.call(vnodeProps, propName)
+                || Object.prototype.hasOwnProperty.call(vnodeProps, kebabName)
+        },
+        upThemeVar(varName, fallbackColor) {
+            this.upThemeVersion
+            return getThemeVar(varName, fallbackColor, this.$u)
+        },
+        upApplyNativeThemeUI() {
+            syncThemeRuntimeFromStorage(this.$u)
+            this.upSyncThemeVersion()
+            applyNativeThemeUIDeferred(this.$u)
+        },
         // 跳转某一个页面
         openPage(urlKey = 'url') {
             const url = this[urlKey]
@@ -200,6 +299,14 @@ export const mixin = defineMixin({
                 }
             })
         }
+        if (typeof uni !== 'undefined' && typeof uni.$off === 'function' && this.__uThemeChangeHandler) {
+            uni.$off('uThemeChange', this.__uThemeChangeHandler)
+            this.__uThemeChangeHandler = null
+        }
+        if (typeof uni !== 'undefined' && typeof uni.$off === 'function' && this.__upPageThemeChangeHandler) {
+            uni.$off('uThemeChange', this.__upPageThemeChangeHandler)
+            this.__upPageThemeChangeHandler = null
+        }
     }
 })
 

package/libs/root/index.js

@@ -0,0 +1,151 @@
+import { dirname, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import process from 'node:process'
+import { existsSync, mkdirSync, statSync, writeFileSync } from 'node:fs'
+
+import { createFilter, normalizePath } from 'vite'
+
+import { transformNvuePage, transformPage } from './page.js'
+import { rebuildUpApp, registerUpApp } from './root.js'
+import { loadPagesJson, normalizePlatformPath, toArray } from './utils.js'
+
+const rootLibPath = normalizePath(dirname(fileURLToPath(import.meta.url)))
+
+export default function UniUpRoot(options = {}) {
+  const rootOptions = {
+    enabledVirtualHost: false,
+    enabledGlobalRef: false,
+    rootFileName: 'App.up',
+    autoCreateRootFile: true,
+    excludePages: [],
+    ...options,
+  }
+  const rootFileName = String(rootOptions.rootFileName || 'App.up').replace(/\.vue$/i, '')
+
+  const detectProjectRoot = () => {
+    const cwd = normalizePath(process.env.INIT_CWD || process.cwd())
+    const envInputDir = process.env.UNI_INPUT_DIR ? normalizePath(process.env.UNI_INPUT_DIR) : ''
+    const cliRootPath = normalizePath(resolve(cwd, 'src'))
+    const hbuilderRootPath = cwd
+
+    const isPageRoot = (path) => existsSync(resolve(path, 'pages.json'))
+
+    if (envInputDir && isPageRoot(envInputDir)) {
+      const projectType = envInputDir.endsWith('/src') ? 'cli' : 'hbuilder'
+      return { rootPath: envInputDir, projectType }
+    }
+
+    if (isPageRoot(cliRootPath)) {
+      return { rootPath: cliRootPath, projectType: 'cli' }
+    }
+
+    if (isPageRoot(hbuilderRootPath)) {
+      return { rootPath: hbuilderRootPath, projectType: 'hbuilder' }
+    }
+
+    return {
+      rootPath: envInputDir || cliRootPath,
+      projectType: envInputDir && !envInputDir.endsWith('/src') ? 'hbuilder' : 'cli',
+    }
+  }
+
+  const projectInfo = detectProjectRoot()
+  const rootPath = normalizePath(projectInfo.rootPath)
+  const appUpPath = normalizePath(resolve(rootPath, `${rootFileName}.vue`))
+  const rootToastHostPath = normalizePath(resolve(rootLibPath, 'root-toast-host.vue'))
+  const nvueRootPath = normalizePath(resolve(rootPath, 'uni_modules/uview-plus/libs/root/nvue-root.vue'))
+  const themeRuntimePath = normalizePath(resolve(rootPath, 'uni_modules/uview-plus/libs/theme/runtime.js'))
+  const pagesPath = normalizePath(resolve(rootPath, 'pages.json'))
+  const excludedPaths = toArray(rootOptions.excludePages)
+    .filter(Boolean)
+    .map(path => normalizePath(resolve(rootPath, path)))
+
+  const mainFiles = [
+    normalizePath(resolve(rootPath, 'main.ts')),
+    normalizePath(resolve(rootPath, 'main.js')),
+  ]
+
+  const getRelativeImportPath = (fromFile, toFile) => {
+    let importPath = normalizePath(relative(dirname(fromFile), toFile))
+    if (!importPath.startsWith('.')) {
+      importPath = `./${importPath}`
+    }
+    return importPath
+  }
+
+  let pagesJson = []
+  let pagesJsonMtimeMs = 0
+  let hasPlatformPlugin = false
+
+  const ensureRootFile = () => {
+    if (!rootOptions.autoCreateRootFile) return
+    if (existsSync(appUpPath)) return
+
+    const defaultRootSfc = `<template>
+\t<UpRootView />
+</template>
+`
+
+    mkdirSync(dirname(appUpPath), { recursive: true })
+    writeFileSync(appUpPath, defaultRootSfc, 'utf-8')
+  }
+
+  const refreshPagesJson = () => {
+    if (!existsSync(pagesPath)) return
+    const mtimeMs = statSync(pagesPath).mtimeMs
+    if (mtimeMs === pagesJsonMtimeMs && pagesJson.length) return
+    pagesJson = loadPagesJson(pagesPath, rootPath)
+    pagesJsonMtimeMs = mtimeMs
+  }
+
+  return {
+    name: 'vite-plugin-uni-up-root',
+    enforce: 'pre',
+    configResolved({ plugins }) {
+      hasPlatformPlugin = plugins.some(v => v.name === 'vite-plugin-uni-platform')
+    },
+    buildStart() {
+      ensureRootFile()
+      refreshPagesJson()
+    },
+    async transform(code, id) {
+      let ms = null
+      const isSfcBlock = id.includes('?')
+      const cleanId = normalizePath(id.split('?')[0])
+
+      const filterMain = createFilter(mainFiles)
+      if (filterMain(cleanId)) {
+        ms = await registerUpApp(code, rootFileName, getRelativeImportPath(cleanId, rootToastHostPath))
+      }
+
+      const filterUpRoot = createFilter(appUpPath)
+      if (filterUpRoot(cleanId)) {
+        ms = await rebuildUpApp(code, rootOptions.enabledVirtualHost)
+      }
+
+      refreshPagesJson()
+      const pageId = hasPlatformPlugin ? normalizePlatformPath(cleanId) : cleanId
+      const filterPage = createFilter(pagesJson, excludedPaths)
+      if (!isSfcBlock && filterPage(pageId)) {
+        if (cleanId.endsWith('.nvue')) {
+          ms = await transformNvuePage(
+            code,
+            getRelativeImportPath(cleanId, nvueRootPath),
+            getRelativeImportPath(cleanId, themeRuntimePath),
+            rootOptions.enabledGlobalRef
+          )
+        } else {
+          ms = await transformPage(code, rootOptions.enabledGlobalRef)
+        }
+      }
+
+      if (ms) {
+        return {
+          code: ms.toString(),
+          map: ms.generateMap({ hires: true }),
+        }
+      }
+      return null
+    },
+  }
+}

package/libs/root/nvue-root.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="up-nvue-root" :style="rootStyle">
+    <slot />
+  </view>
+</template>
+
+<script>
+import { applyNativeThemeUI, getThemePageStyle, getThemeVarsForStyle, syncThemeRuntimeFromStorage } from '../theme/runtime.js'
+
+export default {
+  name: 'UpNvueRoot',
+  data() {
+    return {
+      rootStyle: {
+        ...getThemeVarsForStyle(),
+        ...getThemePageStyle()
+      },
+      minPageHeight: '0px'
+    }
+  },
+  created() {
+    this.syncPageHeight()
+    this.refreshRootStyle()
+    this.themeChangeHandler = () => {
+      this.refreshRootStyle()
+    }
+    if (typeof uni !== 'undefined' && typeof uni.$on === 'function') {
+      uni.$on('uThemeChange', this.themeChangeHandler)
+    }
+  },
+  mounted() {
+    this.refreshRootStyle()
+  },
+  beforeUnmount() {
+    if (this.themeChangeHandler && typeof uni !== 'undefined' && typeof uni.$off === 'function') {
+      uni.$off('uThemeChange', this.themeChangeHandler)
+    }
+    this.themeChangeHandler = null
+  },
+  methods: {
+    syncPageHeight() {
+      let windowHeight = 0
+      try {
+        if (typeof uni !== 'undefined' && typeof uni.getWindowInfo === 'function') {
+          windowHeight = Number((uni.getWindowInfo() || {}).windowHeight || 0)
+        } else if (typeof uni !== 'undefined' && typeof uni.getSystemInfoSync === 'function') {
+          windowHeight = Number((uni.getSystemInfoSync() || {}).windowHeight || 0)
+        }
+      } catch (e) {
+        windowHeight = 0
+      }
+      this.minPageHeight = `${windowHeight || 0}px`
+    },
+    refreshRootStyle() {
+      syncThemeRuntimeFromStorage()
+      this.rootStyle = {
+        ...getThemeVarsForStyle(),
+        ...getThemePageStyle(),
+        minHeight: this.minPageHeight,
+        width: '750rpx'
+      }
+      applyNativeThemeUI()
+    }
+  }
+}
+</script>
+
+<style>
+.up-nvue-root {
+    width: 750rpx;
+}
+</style>

package/libs/root/page.js

@@ -0,0 +1,269 @@
+import { MagicString } from 'vue/compiler-sfc'
+
+import { findNode, parseSFC } from './utils.js'
+
+function getPageRootRefSource(sfc, enabledGlobalRef = false) {
+  const pageTempAttrs = sfc.template?.attrs
+  if (pageTempAttrs && pageTempAttrs.root) {
+    return `ref="${pageTempAttrs.root}"`
+  }
+  return enabledGlobalRef ? 'ref="uniUpRoot"' : ''
+}
+
+function ensureNvueNavigationBar(pageMetaSource) {
+  const navigationBarSource = '<navigation-bar :front-color="upThemeNavFrontColor" :background-color="upThemeNavBgColor" />'
+  if (!pageMetaSource) return `<page-meta>${navigationBarSource}</page-meta>`
+  if (pageMetaSource.indexOf('navigation-bar') > -1 || pageMetaSource.indexOf('NavigationBar') > -1) {
+    return pageMetaSource
+  }
+  return pageMetaSource.replace(/<page-meta([^>]*)>/i, `<page-meta$1>${navigationBarSource}`)
+}
+
+function wrapTemplate(ms, sfc, tagName, rootRefSource = '', withNvueNavigationBar = false) {
+  const pageTempStart = sfc.template?.loc.start.offset
+  const pageTempEnd = sfc.template?.loc.end.offset
+
+  let pageMetaSource = ''
+  const pageMetaNode = findNode(sfc, 'PageMeta')
+
+  if (pageMetaNode) {
+    pageMetaSource = pageMetaNode.loc.source
+    const metaTempStart = pageMetaNode.loc.start.offset
+    const metaTempEnd = pageMetaNode.loc.end.offset
+    ms.remove(metaTempStart, metaTempEnd)
+  }
+
+  if (withNvueNavigationBar) {
+    pageMetaSource = ensureNvueNavigationBar(pageMetaSource)
+  }
+
+  if (pageTempStart != null && pageTempEnd != null) {
+    ms.appendLeft(pageTempStart, `\n${pageMetaSource}\n<${tagName} ${rootRefSource}>`)
+    ms.appendRight(pageTempEnd, `\n</${tagName}>\n`)
+  }
+}
+
+export async function transformPage(code, enabledGlobalRef = false) {
+  const sfc = await parseSFC(code)
+  const ms = new MagicString(code)
+
+  wrapTemplate(ms, sfc, 'global-up-root', getPageRootRefSource(sfc, enabledGlobalRef))
+
+  return ms
+}
+
+function ensureOptionsComponent(ms, scriptContent) {
+  if (scriptContent.includes('UpNvueRoot')) return
+
+  const componentsMatch = scriptContent.match(/components\s*:\s*\{/)
+  if (componentsMatch) {
+    ms.appendLeft(componentsMatch.index + componentsMatch[0].length, ' UpNvueRoot,')
+    return
+  }
+
+  const exportDefaultMatch = scriptContent.match(/export\s+default\s+(?:defineComponent\s*\()?\s*\{/)
+  if (exportDefaultMatch) {
+    ms.appendLeft(
+      exportDefaultMatch.index + exportDefaultMatch[0].length,
+      '\n  components: { UpNvueRoot },'
+    )
+  }
+}
+
+function ensureOptionsThemeMixin(ms, scriptContent) {
+  if (scriptContent.includes('__upNvueThemeMixin')) return
+
+  const mixinsMatch = scriptContent.match(/mixins\s*:\s*\[/)
+  if (mixinsMatch) {
+    ms.appendLeft(mixinsMatch.index + mixinsMatch[0].length, ' __upNvueThemeMixin,')
+    return
+  }
+
+  const exportDefaultMatch = scriptContent.match(/export\s+default\s+(?:defineComponent\s*\()?\s*\{/)
+  if (exportDefaultMatch) {
+    ms.appendLeft(
+      exportDefaultMatch.index + exportDefaultMatch[0].length,
+      '\n  mixins: [__upNvueThemeMixin],'
+    )
+  }
+}
+
+function getScriptSetupImports(componentImportPath, runtimeImportPath) {
+  return `import UpNvueRoot from '${componentImportPath}'
+import { computed as __upComputed, onBeforeUnmount as __upOnBeforeUnmount, onMounted as __upOnMounted, ref as __upRef } from 'vue'
+import { onShow as __upOnShow } from '@dcloudio/uni-app'
+import {
+  applyNativeThemeUI as __upApplyNativeThemeUI,
+  applyNativeThemeUIDeferred as __upApplyNativeThemeUIDeferred,
+  getThemeCardStyle as __upGetThemeCardStyle,
+  getThemeIsDark as __upGetThemeIsDark,
+  getThemePageStyle as __upGetThemePageStyle,
+  getThemeVar as __upThemeVar,
+  syncThemeRuntimeFromStorage as __upSyncThemeRuntimeFromStorage
+} from '${runtimeImportPath}'
+
+const __upThemeVersion = __upRef(0)
+let __upThemeChangeHandler = null
+const __upReadThemeVersion = () => Number((typeof uni !== 'undefined' && uni.$u && uni.$u.theme && uni.$u.theme.version) || 0)
+const __upSyncThemeVersion = (payload = {}) => {
+  const version = Number(payload.version || __upReadThemeVersion() || 0)
+  __upThemeVersion.value = version || Number(__upThemeVersion.value || 0) + 1
+}
+__upOnMounted(() => {
+  __upSyncThemeRuntimeFromStorage()
+  __upSyncThemeVersion()
+  __upApplyNativeThemeUI()
+  if (typeof uni !== 'undefined' && typeof uni.$on === 'function') {
+    __upThemeChangeHandler = (payload = {}) => {
+      __upSyncThemeRuntimeFromStorage()
+      __upSyncThemeVersion(payload)
+      __upApplyNativeThemeUI()
+    }
+    uni.$on('uThemeChange', __upThemeChangeHandler)
+  }
+})
+__upOnShow(() => {
+  __upSyncThemeRuntimeFromStorage()
+  __upSyncThemeVersion()
+  __upApplyNativeThemeUIDeferred()
+})
+__upOnBeforeUnmount(() => {
+  if (typeof uni !== 'undefined' && typeof uni.$off === 'function' && __upThemeChangeHandler) {
+    uni.$off('uThemeChange', __upThemeChangeHandler)
+    __upThemeChangeHandler = null
+  }
+})
+const upThemeVar = (varName, fallbackColor) => {
+  __upThemeVersion.value
+  return __upThemeVar(varName, fallbackColor)
+}
+const upThemeCardStyle = __upComputed(() => {
+  __upThemeVersion.value
+  return __upGetThemeCardStyle()
+})
+const upThemePageStyle = __upComputed(() => {
+  __upThemeVersion.value
+  return __upGetThemePageStyle()
+})
+const upThemeIsDark = __upComputed(() => {
+  __upThemeVersion.value
+  return __upGetThemeIsDark()
+})
+const upThemeNavFrontColor = __upComputed(() => {
+  __upThemeVersion.value
+  return __upGetThemeIsDark() ? '#ffffff' : '#000000'
+})
+const upThemeNavBgColor = __upComputed(() => {
+  __upThemeVersion.value
+  return __upThemeVar('--up-navbar-bg-color', __upGetThemeIsDark() ? '#1c1c1e' : '#ffffff')
+})
+`
+}
+
+function getOptionsImports(componentImportPath, runtimeImportPath) {
+  return `import UpNvueRoot from '${componentImportPath}'
+import {
+  applyNativeThemeUI as __upApplyNativeThemeUI,
+  applyNativeThemeUIDeferred as __upApplyNativeThemeUIDeferred,
+  getThemeCardStyle as __upGetThemeCardStyle,
+  getThemeIsDark as __upGetThemeIsDark,
+  getThemePageStyle as __upGetThemePageStyle,
+  getThemeVar as __upThemeVar,
+  syncThemeRuntimeFromStorage as __upSyncThemeRuntimeFromStorage
+} from '${runtimeImportPath}'
+
+const __upNvueThemeMixin = {
+  data() {
+    return {
+      __upNvueThemeVersion: 0,
+      __upNvueThemeChangeHandler: null
+    }
+  },
+  created() {
+    __upSyncThemeRuntimeFromStorage()
+    this.__upSyncNvueThemeVersion()
+    __upApplyNativeThemeUI()
+    if (typeof uni !== 'undefined' && typeof uni.$on === 'function') {
+      this.__upNvueThemeChangeHandler = (payload = {}) => {
+        __upSyncThemeRuntimeFromStorage()
+        this.__upSyncNvueThemeVersion(payload)
+        __upApplyNativeThemeUI()
+      }
+      uni.$on('uThemeChange', this.__upNvueThemeChangeHandler)
+    }
+  },
+  onShow() {
+    __upSyncThemeRuntimeFromStorage()
+    this.__upSyncNvueThemeVersion()
+    __upApplyNativeThemeUIDeferred()
+  },
+  beforeUnmount() {
+    if (typeof uni !== 'undefined' && typeof uni.$off === 'function' && this.__upNvueThemeChangeHandler) {
+      uni.$off('uThemeChange', this.__upNvueThemeChangeHandler)
+      this.__upNvueThemeChangeHandler = null
+    }
+  },
+  computed: {
+    upThemeCardStyle() {
+      this.__upNvueThemeVersion
+      return __upGetThemeCardStyle()
+    },
+    upThemePageStyle() {
+      this.__upNvueThemeVersion
+      return __upGetThemePageStyle()
+    },
+    upThemeIsDark() {
+      this.__upNvueThemeVersion
+      return __upGetThemeIsDark()
+    },
+    upThemeNavFrontColor() {
+      this.__upNvueThemeVersion
+      return __upGetThemeIsDark() ? '#ffffff' : '#000000'
+    },
+    upThemeNavBgColor() {
+      this.__upNvueThemeVersion
+      return __upThemeVar('--up-navbar-bg-color', __upGetThemeIsDark() ? '#1c1c1e' : '#ffffff')
+    }
+  },
+  methods: {
+    __upReadNvueThemeVersion() {
+      return Number((typeof uni !== 'undefined' && uni.$u && uni.$u.theme && uni.$u.theme.version) || 0)
+    },
+    __upSyncNvueThemeVersion(payload = {}) {
+      const version = Number(payload.version || this.__upReadNvueThemeVersion() || 0)
+      this.__upNvueThemeVersion = version || Number(this.__upNvueThemeVersion || 0) + 1
+    },
+    upThemeVar(varName, fallbackColor) {
+      this.__upNvueThemeVersion
+      return __upThemeVar(varName, fallbackColor)
+    }
+  }
+}
+`
+}
+
+export async function transformNvuePage(
+  code,
+  componentImportPath,
+  runtimeImportPath,
+  enabledGlobalRef = false
+) {
+  const sfc = await parseSFC(code)
+  const ms = new MagicString(code)
+
+  wrapTemplate(ms, sfc, 'UpNvueRoot', getPageRootRefSource(sfc, enabledGlobalRef), true)
+
+  if (sfc.scriptSetup) {
+    ms.appendLeft(sfc.scriptSetup.loc.start.offset, getScriptSetupImports(componentImportPath, runtimeImportPath))
+  } else if (sfc.script) {
+    ms.appendLeft(sfc.script.loc.start.offset, getOptionsImports(componentImportPath, runtimeImportPath))
+    ensureOptionsComponent(ms, sfc.script.content)
+    ensureOptionsThemeMixin(ms, sfc.script.content)
+  } else {
+    ms.append(
+      `\n<script>\n${getOptionsImports(componentImportPath, runtimeImportPath)}export default {\n  components: { UpNvueRoot },\n  mixins: [__upNvueThemeMixin]\n}\n</script>\n`
+    )
+  }
+
+  return ms
+}

package/libs/root/root-toast-host.vue

@@ -0,0 +1,31 @@
+<template>
+  <up-toast ref="upGlobalToastRef" />
+  <up-notify ref="upGlobalNotifyRef" />
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const upGlobalToastRef = ref(null)
+const upGlobalNotifyRef = ref(null)
+
+onMounted(() => {
+  if (typeof uni === 'undefined' || !uni.$u) return
+  if (typeof uni.$u.setRootToastRef === 'function') {
+    uni.$u.setRootToastRef(upGlobalToastRef.value)
+  }
+  if (typeof uni.$u.setRootNotifyRef === 'function') {
+    uni.$u.setRootNotifyRef(upGlobalNotifyRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (typeof uni === 'undefined' || !uni.$u) return
+  if (typeof uni.$u.setRootToastRef === 'function') {
+    uni.$u.setRootToastRef(null)
+  }
+  if (typeof uni.$u.setRootNotifyRef === 'function') {
+    uni.$u.setRootNotifyRef(null)
+  }
+})
+</script>