refactor: websocket and devserver (#700)

* feat: websocket class * chore: update code * chore: update grade demo * chore: update test server * chore: init ws server migrate devserver * chore: update test websocket success * chore: update code * chore: optimize server with ws code * chore: optimize server with ws code * chore: remove unless code * chore: update code * chore: update code * chore: update code * chore: update code * chore: update lock
farm-fe · Nov 6, 2023 · 032a05d · 032a05d
1 parent a973690
commit 032a05d
Show file tree

Hide file tree

Showing 18 changed files with 2,787 additions and 3,001 deletions.
diff --git a/examples/qrcode/index.html b/examples/qrcode/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-  <div id="canvas"></div>
-  <script src="./index"></script>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="canvas"></div>
+    <script src="./index"></script>
+  </body>
+</html>
diff --git a/examples/qrcode/index.mjs b/examples/qrcode/index.mjs
@@ -1,9 +1,9 @@
-import QRCode from 'qrcode'
+import QRCode from 'qrcode';
 
 // With promises
 QRCode.toCanvas('text', { errorCorrectionLevel: 'H' }, function (err, canvas) {
-  if (err) throw err
+  if (err) throw err;
 
-  var container = document.getElementById('canvas')
-  container.appendChild(canvas)
-})
+  var container = document.getElementById('canvas');
+  container.appendChild(canvas);
+});
diff --git a/examples/react-antd/farm.config.ts b/examples/react-antd/farm.config.ts
@@ -1,4 +1,4 @@
-import type { UserConfig } from '@farmfe/core';
+import type { UserConfig } from "@farmfe/core";
 
 function defineConfig(config: UserConfig) {
   return config;
@@ -7,23 +7,23 @@ function defineConfig(config: UserConfig) {
 export default defineConfig({
   compilation: {
     input: {
-      index: './index.html'
+      index: "./index.html",
     },
     output: {
-      path: './build',
-      publicPath: '/admin/'
+      path: "./build",
+      publicPath: "/admin/",
     },
-    sourcemap: true
+    sourcemap: true,
   },
   server: {
     // headers: {
     //   'Access-Control-Allow-Origin': '*'
     // },
-    port: 5580,
-    hmr: true,
     writeToDisk: false,
     cors: true,
-    host: '127.0.0.1'
+    hmr: {
+      port: 6542
+    }
   },
-  plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass']
+  plugins: ["@farmfe/plugin-react", "@farmfe/plugin-sass"],
 });
diff --git a/examples/react-antd/package.json b/examples/react-antd/package.json
@@ -15,7 +15,7 @@
     "@farmfe/cli": "workspace:*",
     "@farmfe/core": "workspace:*",
     "@farmfe/js-plugin-sass": "workspace:*",
-    "@farmfe/plugin-react": "workspace:^0.3.3",
+    "@farmfe/plugin-react": "workspace:^0.3.4",
     "@farmfe/plugin-sass": "workspace:^0.2.9",
     "@types/react": "18",
     "@types/react-dom": "18",

diff --git a/examples/react/farm.config.ts b/examples/react/farm.config.ts
@@ -1,4 +1,4 @@
-import type { UserConfig } from '@farmfe/core';
+import type { UserConfig } from "@farmfe/core";
 
 function defineConfig(config: UserConfig) {
   return config;
@@ -7,16 +7,16 @@ function defineConfig(config: UserConfig) {
 export default defineConfig({
   compilation: {
     input: {
-      index: './index.html'
+      index: "./index.html",
     },
     resolve: {
-      symlinks: true
+      symlinks: true,
     },
     define: {
-      BTN: 'Click me'
+      BTN: "Click me",
     },
     output: {
-      path: './build',
+      path: "./build",
       publicPath: "public",
     },
     // sourcemap: true,
@@ -25,31 +25,30 @@ export default defineConfig({
       //   indentName: 'farm-[name]-[hash]'
       // },
       prefixer: {
-        targets: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 11']
-      }
+        targets: ["last 2 versions", "Firefox ESR", "> 1%", "ie >= 11"],
+      },
     },
-    treeShaking: true
+    treeShaking: true,
   },
   server: {
     cors: true,
-    port: 8260
   },
   plugins: [
-    '@farmfe/plugin-react',
-    '@farmfe/plugin-sass',
+    "@farmfe/plugin-react",
+    "@farmfe/plugin-sass",
     {
-      name: 'plugin-finish-hook-test',
+      name: "plugin-finish-hook-test",
       finish: {
         executor(param, context, hookContext) {
           // console.log('plugin-finish-hook-test', param, context, hookContext);
-        }
-      }
+        },
+      },
     },
     {
-      name: 'plugin-hook-context-test',
+      name: "plugin-hook-context-test",
       load: {
         filters: {
-          resolvedPaths: ['.+main.tsx']
+          resolvedPaths: [".+main.tsx"],
         },
         executor(param, context, hookContext) {
           // console.log('plugin-hook-context-test', param, context, hookContext);
@@ -66,18 +65,18 @@ export default defineConfig({
           // context.warn('test');
           // context.error('test');
           return null;
-        }
-      }
+        },
+      },
     },
     {
-      name: 'plugin-update-modules-hook-test',
+      name: "plugin-update-modules-hook-test",
       updateModules: {
         executor(param, context, hookContext) {
           // console.log("params", param);
           // console.log("context", context);
           // console.log("hookContext", hookContext);
-        }
-      }
-    }
-  ]
+        },
+      },
+    },
+  ],
 });
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "start": "farm start",
+    "dev": "farm start",
     "build": "farm build",
     "preview": "farm preview"
   }

diff --git a/packages/core/src/server/hmr-engine.ts b/packages/core/src/server/hmr-engine.ts
@@ -7,6 +7,7 @@ import { DevServer } from './index.js';
 import { Logger, bold, cyan, green } from '../utils/index.js';
 import { JsUpdateResult } from '../../binding/binding.js';
 import type { Resource } from '@farmfe/runtime/src/resource-loader.js';
+import { WebSocketClient } from './ws.js';
 
 export class HmrEngine {
   private _updateQueue: string[] = [];
@@ -70,6 +71,7 @@ export class HmrEngine {
         green(`${Date.now() - start}ms`)
       )}`
     );
+
     // TODO: write resources to disk when hmr finished in incremental mode
     // if (this._devServer.config?.writeToDisk) {
     //   this._compiler.onUpdateFinish(() => {
@@ -120,8 +122,7 @@ export class HmrEngine {
     //   result: resultStr,
     //   count: this._devServer.ws.clients.size
     // });
-
-    this._devServer.ws.clients.forEach((client) => {
+    this._devServer.ws.clients.forEach((client: WebSocketClient) => {
       client.send(resultStr);
     });