From e03ac56b9118c6edb6424e631bf7d21d1591b66f Mon Sep 17 00:00:00 2001 From: dineug Date: Sat, 2 Dec 2023 22:45:55 +0900 Subject: [PATCH] fix: shiki-worker package --- erd-editor.code-workspace | 4 ++ packages/erd-editor/package.json | 2 +- .../primitives/code-block/CodeBlock.ts | 24 ++++---- packages/erd-editor/src/index.dev.ts | 6 +- packages/erd-editor/src/index.ts | 1 + packages/erd-editor/src/utils/emitter.ts | 6 ++ .../erd-editor/src/utils/globalEmitter.ts | 3 + .../src/utils/services/shikiService.ts | 37 +++++++++++++ packages/shiki-worker/LICENSE | 21 +++++++ packages/shiki-worker/package.json | 40 ++++++++++++++ .../src/index.ts} | 4 +- .../src}/shiki.worker.ts | 0 packages/shiki-worker/src/vite-env.d.ts | 1 + packages/shiki-worker/tsconfig.json | 11 ++++ packages/shiki-worker/vite.config.ts | 55 +++++++++++++++++++ pnpm-lock.yaml | 39 ++++++++++++- 16 files changed, 233 insertions(+), 21 deletions(-) create mode 100644 packages/erd-editor/src/utils/globalEmitter.ts create mode 100644 packages/erd-editor/src/utils/services/shikiService.ts create mode 100644 packages/shiki-worker/LICENSE create mode 100644 packages/shiki-worker/package.json rename packages/{erd-editor/src/utils/shikiService.ts => shiki-worker/src/index.ts} (81%) rename packages/{erd-editor/src/workers => shiki-worker/src}/shiki.worker.ts (100%) create mode 100644 packages/shiki-worker/src/vite-env.d.ts create mode 100644 packages/shiki-worker/tsconfig.json create mode 100644 packages/shiki-worker/vite.config.ts diff --git a/erd-editor.code-workspace b/erd-editor.code-workspace index 74903c02..74dba2b6 100644 --- a/erd-editor.code-workspace +++ b/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" diff --git a/packages/erd-editor/package.json b/packages/erd-editor/package.json index ef9c711c..c6e7cd06 100644 --- a/packages/erd-editor/package.json +++ b/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", diff --git a/packages/erd-editor/src/components/primitives/code-block/CodeBlock.ts b/packages/erd-editor/src/components/primitives/code-block/CodeBlock.ts index 06099542..2b3bffe9 100644 --- a/packages/erd-editor/src/components/primitives/code-block/CodeBlock.ts +++ b/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,9 +63,9 @@ const CodeBlock: FC = (props, ctx) => { }); }; - onBeforeMount(() => { - ShikiService.getInstance() - .codeToHtml(props.value, { + const setHighlight = () => { + getShikiService() + ?.codeToHtml(props.value, { lang: props.lang, theme: props.theme, }) @@ -72,20 +73,17 @@ const CodeBlock: FC = (props, ctx) => { 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 = ''; diff --git a/packages/erd-editor/src/index.dev.ts b/packages/erd-editor/src/index.dev.ts index 7f8a3678..f7b165aa 100644 --- a/packages/erd-editor/src/index.dev.ts +++ b/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); diff --git a/packages/erd-editor/src/index.ts b/packages/erd-editor/src/index.ts index 6053371c..eab7cfc0 100644 --- a/packages/erd-editor/src/index.ts +++ b/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'; diff --git a/packages/erd-editor/src/utils/emitter.ts b/packages/erd-editor/src/utils/emitter.ts index f4d2bc93..523f16c5 100644 --- a/packages/erd-editor/src/utils/emitter.ts +++ b/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; @@ -26,6 +27,7 @@ type InternalActionMap = { message: DOMTemplateLiterals; close?: Promise; }; + [InternalActionType.loadShikiService]: void; }; type Reducer = (action: Action) => 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); diff --git a/packages/erd-editor/src/utils/globalEmitter.ts b/packages/erd-editor/src/utils/globalEmitter.ts new file mode 100644 index 00000000..b8c6a3e8 --- /dev/null +++ b/packages/erd-editor/src/utils/globalEmitter.ts @@ -0,0 +1,3 @@ +import { Emitter } from '@/utils/emitter'; + +export const globalEmitter = new Emitter(); diff --git a/packages/erd-editor/src/utils/services/shikiService.ts b/packages/erd-editor/src/utils/services/shikiService.ts new file mode 100644 index 00000000..49f96261 --- /dev/null +++ b/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; +}; + +let shikiService: LazyShikiService | null; + +export function setShikiService(service: LazyShikiService) { + shikiService = service; + globalEmitter.emit(loadShikiServiceAction()); +} + +export function getShikiService() { + return shikiService?.getInstance() ?? null; +} diff --git a/packages/shiki-worker/LICENSE b/packages/shiki-worker/LICENSE new file mode 100644 index 00000000..2e3bb26c --- /dev/null +++ b/packages/shiki-worker/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 SeungHwan-Lee + +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. diff --git a/packages/shiki-worker/package.json b/packages/shiki-worker/package.json new file mode 100644 index 00000000..f8d90e80 --- /dev/null +++ b/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 ", + "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" + } +} diff --git a/packages/erd-editor/src/utils/shikiService.ts b/packages/shiki-worker/src/index.ts similarity index 81% rename from packages/erd-editor/src/utils/shikiService.ts rename to packages/shiki-worker/src/index.ts index ad926140..9e391593 100644 --- a/packages/erd-editor/src/utils/shikiService.ts +++ b/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; diff --git a/packages/erd-editor/src/workers/shiki.worker.ts b/packages/shiki-worker/src/shiki.worker.ts similarity index 100% rename from packages/erd-editor/src/workers/shiki.worker.ts rename to packages/shiki-worker/src/shiki.worker.ts diff --git a/packages/shiki-worker/src/vite-env.d.ts b/packages/shiki-worker/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/packages/shiki-worker/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/shiki-worker/tsconfig.json b/packages/shiki-worker/tsconfig.json new file mode 100644 index 00000000..66e0dac5 --- /dev/null +++ b/packages/shiki-worker/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, + "lib": ["ES2020", "WebWorker"] + }, + "include": ["src"] +} diff --git a/packages/shiki-worker/vite.config.ts b/packages/shiki-worker/vite.config.ts new file mode 100644 index 00000000..cd106f56 --- /dev/null +++ b/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, + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b4739c8b..d3a6caec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,6 +68,9 @@ importers: '@dineug/shared': specifier: workspace:* version: link:../shared + '@dineug/shiki-worker': + specifier: workspace:* + version: link:../shiki-worker '@dineug/vite-plugin-r-html': specifier: workspace:* version: link:../vite-plugin-r-html @@ -167,9 +170,6 @@ importers: rxjs: specifier: ^7.8.1 version: 7.8.1 - shiki: - specifier: 0.14.5 - version: 0.14.5 stats.js: specifier: ^0.17.0 version: 0.17.0 @@ -291,6 +291,39 @@ importers: specifier: ^4.2.0 version: 4.2.0(typescript@5.1.6)(vite@4.4.9) + packages/shiki-worker: + devDependencies: + '@rollup/plugin-typescript': + specifier: ^11.1.2 + version: 11.1.2(tslib@2.6.1)(typescript@5.1.6) + comlink: + specifier: 4.4.1 + version: 4.4.1 + rollup-plugin-visualizer: + specifier: ^5.9.2 + version: 5.9.2 + shiki: + specifier: 0.14.5 + version: 0.14.5 + ts-patch: + specifier: ^3.0.2 + version: 3.0.2 + tslib: + specifier: ^2.6.1 + version: 2.6.1 + typescript: + specifier: 5.1.6 + version: 5.1.6 + typescript-transform-paths: + specifier: ^3.4.6 + version: 3.4.6(typescript@5.1.6) + vite: + specifier: ^4.4.9 + version: 4.4.9 + vite-tsconfig-paths: + specifier: ^4.2.0 + version: 4.2.0(typescript@5.1.6)(vite@4.4.9) + packages/vite-plugin-r-html: dependencies: '@babel/core':