@tixxin/nuxt-theme-engine 0.0.2 → 0.0.3

package/README.md

@@ -76,6 +76,8 @@ export default defineNuxtConfig({
 </template>
 ```
 
+`ThemeComponent` 在主题切换时会优先保留当前已显示的组件树，等目标主题组件实际加载完成后再原子切换，以减少异步主题组件带来的空白闪屏。
+
 ## 自定义契约
 
 引擎本身不强绑定某一套业务契约。

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "0.0.2",
+  "version": "0.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/ThemeComponent.vue

@@ -1,8 +1,54 @@
 <script>
-import { computed, defineAsyncComponent, defineComponent, h, useAttrs, useSlots } from "vue";
+import { computed, defineAsyncComponent, defineComponent, h, onServerPrefetch, shallowRef, useAttrs, useSlots, watch } from "vue";
 import { themeComponentLoaders, themeComponentRegistry } from "#build/theme-engine.registry.mjs";
 import { useThemeEngine } from "../composables/useThemeEngine";
 const asyncComponentCache = /* @__PURE__ */ new Map();
+const loadedComponentCache = /* @__PURE__ */ new Map();
+const loadingTaskCache = /* @__PURE__ */ new Map();
+function resolveThemeComponent(themeName, componentName, firstThemeName) {
+  const entry = themeComponentRegistry[themeName]?.[componentName] ?? themeComponentRegistry[firstThemeName]?.[componentName];
+  const loader = themeComponentLoaders[themeName]?.[componentName] ?? themeComponentLoaders[firstThemeName]?.[componentName];
+  if (!entry || !loader) {
+    return null;
+  }
+  return {
+    cacheKey: `${entry.sourceTheme}:${componentName}`,
+    loader
+  };
+}
+async function loadThemeComponent(cacheKey, loader) {
+  const cachedComponent = loadedComponentCache.get(cacheKey);
+  if (cachedComponent) {
+    return cachedComponent;
+  }
+  const loadingTask = loadingTaskCache.get(cacheKey);
+  if (loadingTask) {
+    return loadingTask;
+  }
+  const task = loader().then((module) => {
+    const component = module.default ?? null;
+    if (component) {
+      loadedComponentCache.set(cacheKey, component);
+    }
+    return component;
+  }).finally(() => {
+    loadingTaskCache.delete(cacheKey);
+  });
+  loadingTaskCache.set(cacheKey, task);
+  return task;
+}
+function getAsyncComponent(cacheKey, loader) {
+  if (!asyncComponentCache.has(cacheKey)) {
+    asyncComponentCache.set(cacheKey, defineAsyncComponent(async () => {
+      const component = await loadThemeComponent(cacheKey, loader);
+      if (!component) {
+        throw new Error(`Theme component "${cacheKey}" failed to load.`);
+      }
+      return component;
+    }));
+  }
+  return asyncComponentCache.get(cacheKey) ?? null;
+}
 export default defineComponent({
   name: "ThemeComponent",
   inheritAttrs: false,
@@ -17,29 +63,53 @@ export default defineComponent({
     const slots = useSlots();
     const { currentTheme } = useThemeEngine();
     const firstThemeName = Object.keys(themeComponentRegistry)[0] ?? "";
-    const entry = computed(() => {
-      return themeComponentRegistry[currentTheme.value]?.[props.name] ?? themeComponentRegistry[firstThemeName]?.[props.name];
-    });
-    const resolvedComponent = computed(() => {
-      const resolvedEntry = entry.value;
-      if (!resolvedEntry) {
-        return null;
+    const displayedComponent = shallowRef(null);
+    const displayedCacheKey = shallowRef(null);
+    const targetComponent = computed(() => resolveThemeComponent(currentTheme.value, props.name, firstThemeName));
+    let activeRequestId = 0;
+    async function syncDisplayedComponent() {
+      const requestId = ++activeRequestId;
+      const resolvedTarget = targetComponent.value;
+      if (!resolvedTarget) {
+        displayedComponent.value = null;
+        displayedCacheKey.value = null;
+        return;
       }
-      const loader = themeComponentLoaders[currentTheme.value]?.[props.name] ?? themeComponentLoaders[firstThemeName]?.[props.name];
-      if (!loader) {
-        return null;
+      if (displayedCacheKey.value === resolvedTarget.cacheKey && displayedComponent.value) {
+        return;
       }
-      const cacheKey = `${resolvedEntry.sourceTheme}:${props.name}`;
-      if (!asyncComponentCache.has(cacheKey)) {
-        asyncComponentCache.set(cacheKey, defineAsyncComponent(loader));
+      const cachedComponent = loadedComponentCache.get(resolvedTarget.cacheKey);
+      if (cachedComponent) {
+        displayedComponent.value = cachedComponent;
+        displayedCacheKey.value = resolvedTarget.cacheKey;
+        return;
       }
-      return asyncComponentCache.get(cacheKey) ?? null;
+      const hasDisplayedComponent = Boolean(displayedComponent.value);
+      if (!hasDisplayedComponent) {
+        displayedComponent.value = getAsyncComponent(resolvedTarget.cacheKey, resolvedTarget.loader);
+        displayedCacheKey.value = resolvedTarget.cacheKey;
+      }
+      const loadedComponent = await loadThemeComponent(resolvedTarget.cacheKey, resolvedTarget.loader);
+      if (!loadedComponent || requestId !== activeRequestId) {
+        return;
+      }
+      displayedComponent.value = loadedComponent;
+      displayedCacheKey.value = resolvedTarget.cacheKey;
+    }
+    watch([
+      () => currentTheme.value,
+      () => props.name
+    ], () => {
+      void syncDisplayedComponent();
+    }, {
+      immediate: true
     });
+    onServerPrefetch(syncDisplayedComponent);
     return () => {
-      if (!resolvedComponent.value) {
+      if (!displayedComponent.value) {
         return null;
       }
-      return h(resolvedComponent.value, attrs, slots);
+      return h(displayedComponent.value, attrs, slots);
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tixxin/nuxt-theme-engine",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "A Nuxt 4 theme engine with layered themes, typed contracts, and runtime theme switching.",
   "license": "MIT",