fix: shiki-worker package

erd-editor.code-workspace

@@ -8,6 +8,10 @@
       "name": "erd-editor-schema",
       "path": "packages/erd-editor-schema"
     },
+    {
+      "name": "shiki-worker",
+      "path": "packages/shiki-worker"
+    },
     {
       "name": "shared",
       "path": "packages/shared"

packages/erd-editor/package.json

@@ -49,6 +49,7 @@
     "@dineug/go": "^0.1.7",
     "@dineug/r-html": "workspace:*",
     "@dineug/shared": "workspace:*",
+    "@dineug/shiki-worker": "workspace:*",
     "@dineug/vite-plugin-r-html": "workspace:*",
     "@easylogic/colorpicker": "1.10.11",
     "@floating-ui/dom": "1.5.3",
@@ -84,7 +85,6 @@
     "rxjs": "^7.8.1",
     "stats.js": "^0.17.0",
     "storybook": "^7.5.3",
-    "shiki": "0.14.5",
     "ts-patch": "^3.0.2",
     "tslib": "^2.6.1",
     "typescript-transform-paths": "^3.4.6",

packages/erd-editor/src/components/primitives/code-block/CodeBlock.ts

@@ -13,7 +13,8 @@ import { arrayHas } from '@dineug/shared';
 
 import Icon from '@/components/primitives/icon/Icon';
 import { useUnmounted } from '@/hooks/useUnmounted';
-import { ShikiService } from '@/utils/shikiService';
+import { globalEmitter } from '@/utils/globalEmitter';
+import { getShikiService, ShikiService } from '@/utils/services/shikiService';
 
 import * as styles from './CodeBlock.styles';
 
@@ -62,30 +63,27 @@ const CodeBlock: FC<CodeBlockProps> = (props, ctx) => {
     });
   };
 
-  onBeforeMount(() => {
-    ShikiService.getInstance()
-      .codeToHtml(props.value, {
+  const setHighlight = () => {
+    getShikiService()
+      ?.codeToHtml(props.value, {
         lang: props.lang,
         theme: props.theme,
       })
       .then(highlight => {
         state.highlight = highlight;
         setBackgroundColor();
       });
+  };
+
+  onBeforeMount(() => {
+    setHighlight();
 
     addUnsubscribe(
+      globalEmitter.on({ loadShikiService: setHighlight }),
       watch(props).subscribe(propName => {
         if (!hasPropName(propName)) return;
 
-        ShikiService.getInstance()
-          .codeToHtml(props.value, {
-            theme: props.theme,
-            lang: props.lang,
-          })
-          .then(highlight => {
-            state.highlight = highlight;
-            setBackgroundColor();
-          });
+        setHighlight();
       }),
       () => {
         state.highlight = '';

packages/erd-editor/src/index.dev.ts

@@ -1,9 +1,10 @@
-import './index';
-
 import { cssUnwrap, hmr } from '@dineug/r-html';
+import { ShikiService } from '@dineug/shiki-worker';
 // @ts-ignore
 import Stats from 'stats.js';
 
+import { setShikiService } from './index';
+
 function runStats() {
   const stats = new Stats();
   stats.dom.style.top = '';
@@ -31,3 +32,4 @@ function runEditor() {
 hmr();
 runStats();
 runEditor();
+setShikiService(ShikiService);

packages/erd-editor/src/index.ts

@@ -2,3 +2,4 @@ import '@/components/customElementRegistry';
 
 export { setExportFileCallback } from '@/utils/file/exportFile';
 export { setImportFileCallback } from '@/utils/file/importFile';
+export { setShikiService } from '@/utils/services/shikiService';

packages/erd-editor/src/utils/emitter.ts

@@ -12,6 +12,7 @@ const InternalActionType = {
   openColorPicker: 'openColorPicker',
   closeColorPicker: 'closeColorPicker',
   openToast: 'openToast',
+  loadShikiService: 'loadShikiService',
 } as const;
 type InternalActionType = ValuesType<typeof InternalActionType>;
 
@@ -26,6 +27,7 @@ type InternalActionMap = {
     message: DOMTemplateLiterals;
     close?: Promise<void>;
   };
+  [InternalActionType.loadShikiService]: void;
 };
 
 type Reducer<K extends keyof M, M> = (action: Action<K, M>) => void;
@@ -63,3 +65,7 @@ export const closeColorPickerAction = createAction<
 export const openToastAction = createAction<
   InternalActionMap[typeof InternalActionType.openToast]
 >(InternalActionType.openToast);
+
+export const loadShikiServiceAction = createAction<
+  InternalActionMap[typeof InternalActionType.loadShikiService]
+>(InternalActionType.loadShikiService);

packages/erd-editor/src/utils/globalEmitter.ts

@@ -0,0 +1,3 @@
+import { Emitter } from '@/utils/emitter';
+
+export const globalEmitter = new Emitter();

packages/erd-editor/src/utils/services/shikiService.ts

@@ -0,0 +1,37 @@
+import { loadShikiServiceAction } from '@/utils/emitter';
+import { globalEmitter } from '@/utils/globalEmitter';
+
+type LazyShikiService = {
+  getInstance(): ShikiService;
+};
+
+export type ShikiService = {
+  codeToHtml(
+    code: string,
+    {
+      lang,
+      theme,
+    }: {
+      lang:
+        | 'sql'
+        | 'typescript'
+        | 'graphql'
+        | 'csharp'
+        | 'java'
+        | 'kotlin'
+        | 'scala';
+      theme?: 'dark' | 'light';
+    }
+  ): Promise<string>;
+};
+
+let shikiService: LazyShikiService | null;
+
+export function setShikiService(service: LazyShikiService) {
+  shikiService = service;
+  globalEmitter.emit(loadShikiServiceAction());
+}
+
+export function getShikiService() {
+  return shikiService?.getInstance() ?? null;
+}

packages/shiki-worker/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 SeungHwan-Lee <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/shiki-worker/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@dineug/shiki-worker",
+  "version": "0.1.0",
+  "private": true,
+  "description": "shiki-worker",
+  "type": "module",
+  "main": "./dist/shiki-worker.umd.cjs",
+  "module": "./dist/shiki-worker.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/shiki-worker.js"
+      },
+      "require": "./dist/shiki-worker.umd.cjs"
+    }
+  },
+  "files": [
+    "dist/*.js",
+    "dist/**/*.ts"
+  ],
+  "author": "SeungHwan-Lee <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.2",
+    "comlink": "4.4.1",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "shiki": "0.14.5",
+    "ts-patch": "^3.0.2",
+    "tslib": "^2.6.1",
+    "typescript-transform-paths": "^3.4.6",
+    "typescript": "5.1.6",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vite": "^4.4.9"
+  }
+}

packages/erd-editor/src/utils/shikiService.ts → packages/shiki-worker/src/index.ts

@@ -1,7 +1,7 @@
 import * as Comlink from 'comlink';
 
-import type { ShikiService as ShikiServiceType } from '@/workers/shiki.worker';
-import ShikiWorker from '@/workers/shiki.worker?worker&inline';
+import type { ShikiService as ShikiServiceType } from './shiki.worker';
+import ShikiWorker from './shiki.worker?worker&inline';
 
 class ShikiService {
   private static instance: ShikiService;

packages/shiki-worker/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/shiki-worker/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["ES2020", "WebWorker"]
+  },
+  "include": ["src"]
+}

packages/shiki-worker/vite.config.ts

@@ -0,0 +1,55 @@
+// @ts-ignore
+import { readFileSync } from 'node:fs';
+
+import typescript from '@rollup/plugin-typescript';
+import { visualizer } from 'rollup-plugin-visualizer';
+// @ts-ignore
+import tspCompiler from 'ts-patch/compiler';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+const pkg = JSON.parse(readFileSync('package.json', { encoding: 'utf8' }));
+
+const banner = `/*!
+ * ${pkg.name}
+ * @version ${pkg.version} | ${new Date().toDateString()}
+ * @author ${pkg.author}
+ * @license ${pkg.license}
+ */`;
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: './src/index.ts',
+      name: pkg.name,
+      fileName: 'shiki-worker',
+      formats: ['es', 'umd'],
+    },
+    rollupOptions: {
+      output: {
+        banner,
+      },
+    },
+  },
+  plugins: [
+    tsconfigPaths(),
+    visualizer({ filename: './dist/stats.html' }),
+    typescript({
+      typescript: tspCompiler,
+      noEmitOnError: true,
+      compilerOptions: {
+        declaration: true,
+        outDir: './dist',
+        plugins: [
+          {
+            transform: 'typescript-transform-paths',
+            afterDeclarations: true,
+          },
+        ],
+      },
+    }),
+  ],
+  server: {
+    open: true,
+  },
+});