@incremark/svelte 0.2.5 → 0.2.7

package/dist/stores/useShiki.svelte.js

@@ -0,0 +1,98 @@
+// ============ 单例管理器 ============
+class ShikiManager {
+    static instance = null;
+    highlighters = new Map();
+    constructor() { }
+    static getInstance() {
+        if (!ShikiManager.instance) {
+            ShikiManager.instance = new ShikiManager();
+        }
+        return ShikiManager.instance;
+    }
+    async getHighlighter(theme) {
+        if (this.highlighters.has(theme)) {
+            return this.highlighters.get(theme);
+        }
+        const { createHighlighter } = await import('shiki');
+        const highlighter = await createHighlighter({
+            themes: [theme],
+            langs: []
+        });
+        const info = {
+            highlighter,
+            loadedLanguages: new Set(),
+            loadedThemes: new Set([theme])
+        };
+        this.highlighters.set(theme, info);
+        return info;
+    }
+    async loadLanguage(theme, lang) {
+        const info = this.highlighters.get(theme);
+        if (!info || info.loadedLanguages.has(lang))
+            return;
+        try {
+            await info.highlighter.loadLanguage(lang);
+            info.loadedLanguages.add(lang);
+        }
+        catch { /* 静默处理 */ }
+    }
+    async loadTheme(theme) {
+        const info = this.highlighters.get(theme);
+        if (!info || info.loadedThemes.has(theme))
+            return;
+        try {
+            await info.highlighter.loadTheme(theme);
+            info.loadedThemes.add(theme);
+        }
+        catch { /* 静默处理 */ }
+    }
+    async codeToHtml(theme, code, lang, fallbackTheme) {
+        const info = this.highlighters.get(theme);
+        if (!info)
+            throw new Error('Highlighter not found');
+        const actualLang = info.loadedLanguages.has(lang) ? lang : 'text';
+        return info.highlighter.codeToHtml(code, {
+            lang: actualLang,
+            theme: theme
+        });
+    }
+}
+const shikiManager = ShikiManager.getInstance();
+// ============ Svelte 5 Composable ============
+/**
+ * 使用 Shiki Highlighter
+ * @param themeGetter 传入一个返回主题字符串的函数，例如 () => theme
+ */
+export function useShiki(themeGetter) {
+    // 使用 Svelte 5 的原生响应式状态
+    let isHighlighting = $state(false);
+    /**
+     * 高亮代码
+     */
+    async function highlight(code, lang, fallbackTheme) {
+        // 关键：每次执行时通过 Getter 获取最新的主题
+        const currentTheme = themeGetter();
+        const currentFallback = fallbackTheme;
+        isHighlighting = true;
+        try {
+            const info = await shikiManager.getHighlighter(currentTheme);
+            // 按需加载语言
+            if (!info.loadedLanguages.has(lang) && lang !== 'text') {
+                await shikiManager.loadLanguage(currentTheme, lang);
+            }
+            // 按需加载主题
+            if (!info.loadedThemes.has(currentTheme)) {
+                await shikiManager.loadTheme(currentTheme);
+            }
+            return await shikiManager.codeToHtml(currentTheme, code, lang, currentFallback);
+        }
+        finally {
+            isHighlighting = false;
+        }
+    }
+    return {
+        // 使用 getter 暴露只读状态，保持 UI 响应
+        get isHighlighting() { return isHighlighting; },
+        highlight
+    };
+}

package/dist/stores/useTypewriter.d.ts

@@ -22,7 +22,7 @@ export interface UseTypewriterOptions {
 export interface UseTypewriterReturn {
     /** 用于渲染的 blocks（经过打字机处理或原始blocks） */
     blocks: Readable<Array<ParsedBlock & {
-        stableId: string;
+        isLastPending?: boolean;
     }>>;
     /** 打字机控制对象 */
     typewriter: TypewriterControls;

package/dist/stores/useTypewriter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTypewriter.d.ts","sourceRoot":"","sources":["../../src/stores/useTypewriter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAqB,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC9E,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EAGhB,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG3E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,YAAY;IACZ,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,oBAAoB;IACpB,eAAe,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IACxC,oBAAoB;IACpB,aAAa,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,WAAW,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAA;IAC3D,cAAc;IACd,UAAU,EAAE,kBAAkB,CAAA;IAC9B,qBAAqB;IACrB,WAAW,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CACvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CA4KhF"}
+{"version":3,"file":"useTypewriter.d.ts","sourceRoot":"","sources":["../../src/stores/useTypewriter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAqB,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC9E,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EAGhB,KAAK,gBAAgB,EAEtB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG3E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,YAAY;IACZ,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,oBAAoB;IACpB,eAAe,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IACxC,oBAAoB;IACpB,aAAa,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,WAAW,GAAG;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,cAAc;IACd,UAAU,EAAE,kBAAkB,CAAA;IAC9B,qBAAqB;IACrB,WAAW,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CACvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CA4KhF"}

package/dist/stores/useTypewriter.js

@@ -79,12 +79,13 @@ export function useTypewriter(options) {
     const rawBlocks = derived([completedBlocks, pendingBlocks], ([$completedBlocks, $pendingBlocks]) => {
         const result = [];
         for (const block of $completedBlocks) {
-            result.push({ ...block, stableId: block.id });
+            result.push(block);
         }
         for (let i = 0; i < $pendingBlocks.length; i++) {
+            const isLastPending = i === $pendingBlocks.length - 1;
             result.push({
                 ...$pendingBlocks[i],
-                stableId: `pending-${i}`
+                isLastPending
             });
         }
         return result;
@@ -106,7 +107,6 @@ export function useTypewriter(options) {
             }
             return {
                 id: db.id,
-                stableId: db.id,
                 status: (db.isDisplayComplete ? 'completed' : 'pending'),
                 isLastPending,
                 node,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/svelte",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Incremark Svelte 5 集成",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -24,10 +24,10 @@
   ],
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/core": "0.2.5",
-    "@incremark/devtools": "0.2.5",
-    "@incremark/shared": "0.2.5",
-    "@incremark/theme": "0.2.5"
+    "@incremark/devtools": "0.2.7",
+    "@incremark/core": "0.2.7",
+    "@incremark/shared": "0.2.7",
+    "@incremark/theme": "0.2.7"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",