fix(jsx-explorer): support browser env

Author: sxzz

packages/jsx-explorer/package.json

@@ -11,13 +11,15 @@
   "dependencies": {
     "@babel/core": "^7.25.2",
     "@vue/babel-plugin-jsx": "workspace:*",
+    "assert": "^2.1.0",
     "monaco-editor": "^0.51.0",
+    "pathe": "^1.1.2",
     "vue": "^3.5.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "vite": "~5.4.3",
-    "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-node-polyfills": "^0.22.0"
+    "terser": "^5.31.6",
+    "unplugin-replace": "^0.3.3",
+    "vite": "^5.4.3"
   }
 }

packages/jsx-explorer/src/editor.worker.ts

@@ -0,0 +1,13 @@
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+// @ts-ignore
+self.MonacoEnvironment = {
+  globalAPI: true,
+  getWorker(_: any, label: string) {
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  },
+};

packages/jsx-explorer/src/env.d.ts

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

packages/jsx-explorer/src/index.ts

@@ -9,6 +9,7 @@ import {
   compilerOptions,
   initOptions,
 } from './options';
+import './editor.worker';
 import './index.css';
 
 main();
@@ -100,6 +101,7 @@ const App = defineComponent((props) => <div>Hello World</div>)`,
           console.log('AST', res.ast!);
           output.setValue(res.code!);
         } else {
+          console.error(err);
           output.setValue(err.message!);
         }
       }

packages/jsx-explorer/vite.config.ts

@@ -1,22 +1,27 @@
 import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import VueJSX from '@vitejs/plugin-vue-jsx';
-import MonacoEditorPlugin from 'vite-plugin-monaco-editor';
+import Replace from 'unplugin-replace/vite';
 
 export default defineConfig({
+  build: {
+    minify: 'terser',
+  },
   resolve: {
     alias: {
       '@vue/babel-plugin-jsx': '@vue/babel-plugin-jsx/src/index.ts',
+      path: 'pathe',
     },
   },
   plugins: [
     VueJSX(),
-    // @ts-expect-error
-    (MonacoEditorPlugin.default as typeof MonacoEditorPlugin)({
-      languageWorkers: ['editorWorkerService', 'typescript'],
-    }),
-    nodePolyfills({
-      globals: { process: true },
+    Replace({
+      values: {
+        'process.env.BABEL_TYPES_8_BREAKING': 'false',
+        'process.env.BABEL_ENV': '"development"',
+        'process.env.NODE_NDEBUG': 'true',
+        'process.env.NODE_DEBUG': 'false',
+        'Buffer.isBuffer': 'function isBuffer() { return false; }',
+      },
     }),
   ],
 });