fix: shared worker

dineug · Dec 18, 2023 · abb0deb · abb0deb
1 parent 23623aa
commit abb0deb
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 115 deletions.
diff --git a/packages/erd-editor-shiki-worker/src/index.ts b/packages/erd-editor-shiki-worker/src/index.ts
@@ -1,14 +1,29 @@
 import * as Comlink from 'comlink';
 
-import type { ShikiService as ShikiServiceType } from './shiki.worker';
-import ShikiWorker from './shiki.worker?worker&inline';
+import type { ShikiService as ShikiServiceType } from './shiki.service';
+import ShikiSharedWorker from './shiki.shared-worker?sharedworker&inline';
+// import ShikiWorker from './shiki.worker?worker&inline';
+
+const WORKER_NAME = `@dineug/erd-editor-shiki-worker?v${__APP_VERSION__}`;
 
 class ShikiService {
   private static instance: ShikiService;
 
   private worker: Comlink.Remote<ShikiServiceType>;
   private constructor() {
-    this.worker = Comlink.wrap<ShikiServiceType>(new ShikiWorker());
+    try {
+      const worker = new ShikiSharedWorker({
+        name: WORKER_NAME,
+      });
+      this.worker = Comlink.wrap<ShikiServiceType>(worker.port);
+    } catch (error) {
+      console.error(error);
+      // TODO: fallback
+      // const worker = new ShikiWorker({
+      //   name: WORKER_NAME,
+      // });
+      // this.worker = Comlink.wrap<ShikiServiceType>(worker);
+    }
   }
 
   static getInstance() {

diff --git a/packages/erd-editor-shiki-worker/src/shiki.service.ts b/packages/erd-editor-shiki-worker/src/shiki.service.ts
@@ -0,0 +1,113 @@
+import { getHighlighter, setWasm, toShikiTheme } from 'shiki';
+// @ts-ignore
+import wasmUrl from 'shiki/dist/onig.wasm?url';
+import csharp from 'shiki/languages/csharp.tmLanguage.json';
+import graphql from 'shiki/languages/graphql.tmLanguage.json';
+import java from 'shiki/languages/java.tmLanguage.json';
+import kotlin from 'shiki/languages/kotlin.tmLanguage.json';
+import scala from 'shiki/languages/scala.tmLanguage.json';
+import sql from 'shiki/languages/sql.tmLanguage.json';
+import typescript from 'shiki/languages/typescript.tmLanguage.json';
+import githubDark from 'shiki/themes/github-dark.json';
+import githubLight from 'shiki/themes/github-light.json';
+
+const themeMap: Record<string, any> = {
+  dark: githubDark,
+  light: githubLight,
+};
+
+const languages: Array<any> = [
+  {
+    id: 'typescript',
+    scopeName: 'source.ts',
+    displayName: 'TypeScript',
+    aliases: ['ts'],
+    grammar: typescript,
+  },
+  {
+    id: 'sql',
+    scopeName: 'source.sql',
+    displayName: 'SQL',
+    grammar: sql,
+  },
+  {
+    id: 'graphql',
+    scopeName: 'source.graphql',
+    displayName: 'GraphQL',
+    aliases: ['gql'],
+    grammar: graphql,
+  },
+  {
+    id: 'csharp',
+    scopeName: 'source.cs',
+    displayName: 'C#',
+    aliases: ['c#', 'cs'],
+    grammar: csharp,
+  },
+  {
+    id: 'java',
+    scopeName: 'source.java',
+    displayName: 'Java',
+    grammar: java,
+  },
+  {
+    id: 'kotlin',
+    scopeName: 'source.kotlin',
+    displayName: 'Kotlin',
+    aliases: ['kt', 'kts'],
+    grammar: kotlin,
+  },
+  {
+    id: 'scala',
+    scopeName: 'source.scala',
+    displayName: 'Scala',
+    grammar: scala,
+  },
+];
+
+function getThemeKey(theme?: string): 'dark' | 'light' {
+  return theme === 'dark' || theme === 'light' ? theme : 'dark';
+}
+
+export class ShikiService {
+  private ready: Promise<void>;
+
+  constructor() {
+    this.ready = new Promise(async (resolve, reject) => {
+      try {
+        const wasmResponse = await fetch(wasmUrl);
+        setWasm(wasmResponse);
+        resolve();
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  async codeToHtml(
+    code: string,
+    {
+      lang,
+      theme,
+    }: {
+      lang:
+        | 'sql'
+        | 'typescript'
+        | 'graphql'
+        | 'csharp'
+        | 'java'
+        | 'kotlin'
+        | 'scala';
+      theme?: 'dark' | 'light';
+    }
+  ) {
+    return await this.ready.then(async () => {
+      const highlighter = await getHighlighter({
+        theme: toShikiTheme(Reflect.get(themeMap, getThemeKey(theme))),
+        langs: languages,
+      });
+
+      return highlighter.codeToHtml(code, { lang });
+    });
+  }
+}
diff --git a/packages/erd-editor-shiki-worker/src/shiki.shared-worker.ts b/packages/erd-editor-shiki-worker/src/shiki.shared-worker.ts
@@ -0,0 +1,12 @@
+import * as Comlink from 'comlink';
+
+import { ShikiService } from './shiki.service';
+
+declare var self: SharedWorkerGlobalScope;
+
+const service = new ShikiService();
+
+self.onconnect = event => {
+  const port = event.ports[0];
+  Comlink.expose(service, port);
+};
diff --git a/packages/erd-editor-shiki-worker/src/shiki.worker.ts b/packages/erd-editor-shiki-worker/src/shiki.worker.ts
@@ -1,117 +1,6 @@
 import * as Comlink from 'comlink';
-import { getHighlighter, setWasm, toShikiTheme } from 'shiki';
-// @ts-ignore
-import wasmUrl from 'shiki/dist/onig.wasm?url';
-import csharp from 'shiki/languages/csharp.tmLanguage.json';
-import graphql from 'shiki/languages/graphql.tmLanguage.json';
-import java from 'shiki/languages/java.tmLanguage.json';
-import kotlin from 'shiki/languages/kotlin.tmLanguage.json';
-import scala from 'shiki/languages/scala.tmLanguage.json';
-import sql from 'shiki/languages/sql.tmLanguage.json';
-import typescript from 'shiki/languages/typescript.tmLanguage.json';
-import githubDark from 'shiki/themes/github-dark.json';
-import githubLight from 'shiki/themes/github-light.json';
 
-const themeMap: Record<string, any> = {
-  dark: githubDark,
-  light: githubLight,
-};
-
-const languages: Array<any> = [
-  {
-    id: 'typescript',
-    scopeName: 'source.ts',
-    displayName: 'TypeScript',
-    aliases: ['ts'],
-    grammar: typescript,
-  },
-  {
-    id: 'sql',
-    scopeName: 'source.sql',
-    displayName: 'SQL',
-    grammar: sql,
-  },
-  {
-    id: 'graphql',
-    scopeName: 'source.graphql',
-    displayName: 'GraphQL',
-    aliases: ['gql'],
-    grammar: graphql,
-  },
-  {
-    id: 'csharp',
-    scopeName: 'source.cs',
-    displayName: 'C#',
-    aliases: ['c#', 'cs'],
-    grammar: csharp,
-  },
-  {
-    id: 'java',
-    scopeName: 'source.java',
-    displayName: 'Java',
-    grammar: java,
-  },
-  {
-    id: 'kotlin',
-    scopeName: 'source.kotlin',
-    displayName: 'Kotlin',
-    aliases: ['kt', 'kts'],
-    grammar: kotlin,
-  },
-  {
-    id: 'scala',
-    scopeName: 'source.scala',
-    displayName: 'Scala',
-    grammar: scala,
-  },
-];
-
-function getThemeKey(theme?: string): 'dark' | 'light' {
-  return theme === 'dark' || theme === 'light' ? theme : 'dark';
-}
-
-export class ShikiService {
-  private ready: Promise<void>;
-
-  constructor() {
-    this.ready = new Promise(async (resolve, reject) => {
-      try {
-        const wasmResponse = await fetch(wasmUrl);
-        setWasm(wasmResponse);
-        resolve();
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  async codeToHtml(
-    code: string,
-    {
-      lang,
-      theme,
-    }: {
-      lang:
-        | 'sql'
-        | 'typescript'
-        | 'graphql'
-        | 'csharp'
-        | 'java'
-        | 'kotlin'
-        | 'scala';
-      theme?: 'dark' | 'light';
-    }
-  ) {
-    return await this.ready.then(async () => {
-      const highlighter = await getHighlighter({
-        theme: toShikiTheme(Reflect.get(themeMap, getThemeKey(theme))),
-        langs: languages,
-      });
-
-      return highlighter.codeToHtml(code, { lang });
-    });
-  }
-}
+import { ShikiService } from './shiki.service';
 
 const service = new ShikiService();
 

diff --git a/packages/erd-editor-shiki-worker/src/vite-env.d.ts b/packages/erd-editor-shiki-worker/src/vite-env.d.ts
@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;
diff --git a/packages/erd-editor-shiki-worker/vite.config.ts b/packages/erd-editor-shiki-worker/vite.config.ts
@@ -18,6 +18,9 @@ const banner = `/*!
  */`;
 
 export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
   build: {
     lib: {
       entry: './src/index.ts',

diff --git a/packages/erd-editor/src/utils/schema-sql-parser/index.ts b/packages/erd-editor/src/utils/schema-sql-parser/index.ts
@@ -327,6 +327,7 @@ function convertIndex(
             .setOne(indexColumn);
         });
 
+        doc.indexIds.push(newIndex.id);
         query(collections).collection('indexEntities').setOne(newIndex);
       }
     });
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		/// <reference types="vite/client" />

		declare const __APP_VERSION__: string;
-Original file line number
+Diff line change
@@ Expand Up / @@ -327,6 +327,7 @@ function convertIndex( @@
                 .setOne(indexColumn);
             });
+            doc.indexIds.push(newIndex.id);
             query(collections).collection('indexEntities').setOne(newIndex);
           }
         });
@@ Expand Down @@