feat: json-viewer-core hmr

.gitignore

@@ -19,6 +19,7 @@ dist
 build
 _site
 packages/**/lib
+packages/**/workerLib
 packages/semi-theme-default/css/semi.css
 packages/semi-theme-default/semi.scss
 public

.storybook/base/base.js

@@ -3,7 +3,7 @@ const path = require('path');
 const _ = require('lodash');
 const chalk = require('chalk').default;
 const utils = require('./utils');
-
+const fs = require('fs');
 let AnalyzePlugin = null
 if(process.env.__ENABLE_ANALYZE__ === 'true') {
     AnalyzePlugin = require("@ies/semi-page-analyze-inject/src/AnalyzePlugin")
@@ -79,6 +79,23 @@ module.exports = {
                 },
             ]
         })
+        rules.push({
+            test: /jsonWorkerManager\.ts$/,
+            use: [
+                {
+                    loader: 'webpack-replace-loader',
+                    options: {
+                        search: '%WORKER_RAW%',
+                        replace: () => {
+                            const workFilePath = resolve('packages/semi-json-viewer-core/workerLib/worker.js');
+                            const result = fs.readFileSync(workFilePath, 'utf-8');
+                            const encodedResult = encodeURIComponent(result);
+                            return encodedResult;
+                        }
+                    }
+                }
+            ]
+        });
         config.module.rules = rules;
         config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx');
         config.resolve.symlinks = false;
@@ -92,7 +109,8 @@ module.exports = {
             '@douyinfe/semi-illustrations': resolve('packages/semi-illustrations/src'),
             '@douyinfe/semi-animation': resolve('packages/semi-animation'),
             '@douyinfe/semi-animation-react': resolve('packages/semi-animation-react'),
-            '@douyinfe/semi-animation-styled': resolve('packages/semi-animation-styled')
+            '@douyinfe/semi-animation-styled': resolve('packages/semi-animation-styled'),
+            '@douyinfe/semi-json-viewer-core': resolve('packages/semi-json-viewer-core/src'),
         };
         config.devtool = 'source-map';
         // config.output.publicPath = "/storybook/"

gatsby-node.js

@@ -112,7 +112,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                 'semi-site-header': process.env.SEMI_SITE_HEADER || '@douyinfe/semi-site-header',
                 'semi-site-banner': process.env.SEMI_SITE_BANNER || '@douyinfe/semi-site-banner',
                 'univers-webview': process.env.SEMI_SITE_UNIVERS_WEBVIEW || resolve('packages/semi-ui'),
-                '@douyinfe/semi-json-viewer-core': resolve('packages/semi-json-viewer-core'),
+                '@douyinfe/semi-json-viewer-core': resolve('packages/semi-json-viewer-core/src'),
                 '@douyinfe/semi-ui': resolve('packages/semi-ui'),
                 '@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
                 '@douyinfe/semi-icons': resolve('packages/semi-icons/src/'),
@@ -170,16 +170,31 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                         },
                     },
                 },
+                {
+                    test: /jsonWorkerManager\.ts$/,
+                    use: [{
+                        loader: 'webpack-replace-loader',
+                        options: {
+                            search: '%WORKER_RAW%',
+                            replace: () => {
+                                const workFilePath = resolve('packages/semi-json-viewer-core/workerLib/worker.js');
+                                const result = fs.readFileSync(workFilePath, 'utf-8');
+                                const encodedResult = encodeURIComponent(result);
+                                return encodedResult;
+                            }
+                        }
+                    }],
+                },
                 {
                     test: [/\.tsx?$/],
                     include: [path.resolve(__dirname, 'src')],
-                    use: {
+                    use: [{
                         loader: 'esbuild-loader',
                         options: {
                             loader: 'tsx', // Remove this if you're not using JSX
                             target: 'esnext' // Syntax to compile to (see options below for possible values)
                         },
-                    },
+                    }],
                 },
                 {
                     test: /\.mjs$/,

package.json

@@ -217,6 +217,7 @@
         "webpack": "^5.77.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^3.11.2",
+        "webpack-replace-loader": "^5.0.1",
         "webpackbar": "^5.0.0-3",
         "worker-loader": "^3.0.8"
     },

packages/semi-json-viewer-core/script/compileLib.js

@@ -40,10 +40,12 @@ const compile = async ()=>{
     const finalRaw = mainRaw.replaceAll("%WORKER_RAW%", encodeURIComponent(workerRaw));
 
     const saveDir = path.join(__dirname, "..", "lib");
+    const workerSaveDir = path.join(__dirname, "..", "workerLib");
 
     if (!fs.existsSync(saveDir)) {
         fs.mkdirSync(saveDir);
     }
+    fs.writeFileSync(path.join(workerSaveDir, "worker.js"), workerRaw, 'utf8');
     fs.writeFileSync(path.join(saveDir, "index.js"), finalRaw, 'utf8');
 };