From 4ebce63a5b39085846ddcf06703a72ddfc9ca0d7 Mon Sep 17 00:00:00 2001
From: JounQin <admin@1stg.me>
Date: Tue, 15 Jun 2021 12:45:54 +0800
Subject: [PATCH] fix: use worker-loader correctly

resolve https://github.com/webpack-contrib/worker-loader/issues/320
---
 src/App.vue                                  |  8 +++----
 src/components/monaco-editor/monaco-env.ts   | 13 -----------
 src/components/monaco-editor/setup-monaco.ts | 24 ++++++++++++++++++--
 src/shimd.d.ts                               |  4 +++-
 src/utils/index.ts                           |  1 -
 src/utils/timer.ts                           |  2 --
 webpack.config.ts                            | 24 +++++++++++++++-----
 7 files changed, 47 insertions(+), 29 deletions(-)
 delete mode 100644 src/components/monaco-editor/monaco-env.ts
 delete mode 100644 src/utils/index.ts
 delete mode 100644 src/utils/timer.ts

diff --git a/src/App.vue b/src/App.vue
index c071039..0a56c63 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,6 @@
 </template>
 <script lang="ts" setup>
 import type { editor } from 'monaco-editor'
-import { getDocumentSymbols } from 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols'
 
 import { MonacoEditor } from './components'
 
@@ -20,12 +19,13 @@ containers:
 `.trimStart()
 
 const onEditorChange = async (editor: editor.IStandaloneCodeEditor) => {
-  console.log(editor)
-
+  const { getDocumentSymbols } = await import(
+    'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols'
+  )
   editor.onDidChangeCursorSelection(async () => {
     const model = editor.getModel()
     console.log('model:', model)
-    const symbols = await getDocumentSymbols(model!, false, {
+    const symbols = await getDocumentSymbols(model!, true, {
       isCancellationRequested: false,
       onCancellationRequested: () => ({
         // eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/src/components/monaco-editor/monaco-env.ts b/src/components/monaco-editor/monaco-env.ts
deleted file mode 100644
index e88c142..0000000
--- a/src/components/monaco-editor/monaco-env.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker'
-import YamlWorker from 'monaco-yaml/lib/esm/yaml.worker'
-
-window.MonacoEnvironment = {
-  globalAPI: true,
-  getWorker(_: string, label: string) {
-    console.log(_, label)
-    if (label === 'yaml') {
-      return new YamlWorker()
-    }
-    return new EditorWorker()
-  },
-}
diff --git a/src/components/monaco-editor/setup-monaco.ts b/src/components/monaco-editor/setup-monaco.ts
index ec51e86..3679a7e 100644
--- a/src/components/monaco-editor/setup-monaco.ts
+++ b/src/components/monaco-editor/setup-monaco.ts
@@ -1,8 +1,28 @@
 /// <reference types="monaco-yaml/lib/monaco" />
 
-import './monaco-env'
-
 export const setupMonaco = async () => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (window.monaco) {
+    return window.monaco
+  }
+
+  const [{ default: EditorWorker }, { default: YamlWorker }] =
+    await Promise.all([
+      // eslint-disable-next-line import/no-unresolved, import/no-webpack-loader-syntax
+      import('worker-loader!monaco-editor/esm/vs/editor/editor.worker'),
+      import('monaco-yaml/lib/esm/yaml.worker'),
+    ])
+
+  window.MonacoEnvironment = {
+    globalAPI: true,
+    getWorker(_: string, label: string) {
+      if (label === 'yaml') {
+        return new YamlWorker()
+      }
+      return new EditorWorker()
+    },
+  }
+
   const monaco = await import('monaco-editor/esm/vs/editor/edcore.main')
 
   // @ts-expect-error
diff --git a/src/shimd.d.ts b/src/shimd.d.ts
index 5763131..782d0cb 100644
--- a/src/shimd.d.ts
+++ b/src/shimd.d.ts
@@ -24,9 +24,11 @@ declare module 'monaco-editor/esm/vs/editor/edcore.main' {
 }
 
 declare module '*.worker' {
-  export = class _Worker extends Worker {
+  class _Worker extends Worker {
     constructor()
   }
+
+  export default _Worker
 }
 
 declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution' {}
diff --git a/src/utils/index.ts b/src/utils/index.ts
deleted file mode 100644
index 4621391..0000000
--- a/src/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './timer'
diff --git a/src/utils/timer.ts b/src/utils/timer.ts
deleted file mode 100644
index f11cb65..0000000
--- a/src/utils/timer.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const delay = (ms: number) =>
-  new Promise(resolve => setTimeout(resolve, ms))
diff --git a/webpack.config.ts b/webpack.config.ts
index f7a799b..3803022 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -1,13 +1,17 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin'
-import { Configuration } from 'webpack'
+import { DefinePlugin, Configuration } from 'webpack'
 import { VueLoaderPlugin } from 'vue-loader'
 
+const NODE_ENV = (process.env.NODE_ENV ?? 'development') as
+  | 'development'
+  | 'production'
+
+const isProd = NODE_ENV === 'production'
+
 const config: Configuration = {
-  mode:
-    (process.env.NODE_ENV as 'development' | 'production' | undefined) ??
-    'development',
+  mode: NODE_ENV,
   entry: './src/index.ts',
-  devtool: 'source-map',
+  devtool: isProd ? false : 'source-map',
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
   },
@@ -36,6 +40,7 @@ const config: Configuration = {
       {
         test: /\.worker\.[jt]s$/,
         loader: 'worker-loader',
+        exclude: require.resolve('monaco-editor/esm/vs/editor/editor.worker'),
       },
       {
         test: /\.ttf$/,
@@ -43,7 +48,14 @@ const config: Configuration = {
       },
     ],
   },
-  plugins: [new VueLoaderPlugin(), new HtmlWebpackPlugin()],
+  plugins: [
+    new DefinePlugin({
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin(),
+  ],
 }
 
 export default config