chore: preview overlay page

farm-fe · Sep 16, 2024 · e27b3ab · e27b3ab
1 parent 98cf06e
commit e27b3ab
Show file tree

Hide file tree

Showing 9 changed files with 337 additions and 92 deletions.
diff --git a/examples/qrcode/index.html b/examples/qrcode/index.html
@@ -6,7 +6,7 @@
     <title>Document</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root"></div
     <script src="./index"></script>
   </body>
 </html>
diff --git a/examples/refactor-react/src/main.tsx b/examples/refactor-react/src/main.tsx
@@ -6,7 +6,7 @@ export function Main() {
   const [count, setCount] = useState(0);
   return (
     <>
-      <div>
+      <div
         <a href="https://farmfe.org/" target="_blank">
           <img src={FarmLogo} className="logo" alt="Farm logo" />
         </a>

diff --git a/examples/vue3/src/App.vue b/examples/vue3/src/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import HelloWorld from "./components/HelloWorld.vue";
-console.log(import.meta.env);
+// console.log(import.meta.env);
 fetch("https://wallhaven.fun/api/wallhaven/w/yx6e9l")
   .then((res) => res.json())
-  .then((data) => console.log(data))
-  .catch((err) => console.error(err));
+  // .then((data) => console.log(data))
+  // .catch((err) => console.error(err));
 </script>
 
 <template>

diff --git a/packages/core/src/config/index.ts b/packages/core/src/config/index.ts
@@ -969,6 +969,7 @@ export async function resolveUserConfig(
   resolvedUserConfig.env = {
     ...userEnv,
     NODE_ENV: userConfig.compilation.mode,
+    BASE_URL: userConfig.compilation.output.publicPath,
     mode,
     DEV: mode === 'development',
     PROD: mode === 'production'

diff --git a/packages/core/src/server/error.ts b/packages/core/src/server/error.ts
@@ -1,7 +1,6 @@
 import type { RollupError } from 'rollup';
 import { colors } from '../utils/color.js';
 import { pad } from '../utils/share.js';
-// import { DevServer } from './index.js';
 
 export function prepareError(err: Error & { potentialSolution?: string }) {
   return {

diff --git a/packages/core/src/server/hmr-engine.ts b/packages/core/src/server/hmr-engine.ts
@@ -66,56 +66,56 @@ export class HmrEngine {
         updatedFilesStr.slice(0, 100) + `...(${queue.length} files)`;
     }
 
-    try {
-      // we must add callback before update
-      this.app.compiler.onUpdateFinish(async () => {
-        // if there are more updates, recompile again
-        if (this._updateQueue.length > 0) {
-          await this.recompileAndSendResult();
-        }
-        if (this.app.resolvedUserConfig?.server.writeToDisk) {
-          this.app.compiler.writeResourcesToDisk();
-        }
-      });
-
-      checkClearScreen(this.app.compiler.config.config);
-      const start = performance.now();
-      const result = await this.app.compiler.update(queue);
-      this.app.logger.info(
-        `${bold(lightCyan(updatedFilesStr))} updated in ${bold(
-          green(formatExecutionTime(performance.now() - start, 's'))
-        )}`
-      );
-
-      // clear update queue after update finished
-      this._updateQueue = this._updateQueue.filter(
-        (item) => !queue.includes(item)
-      );
-
-      let dynamicResourcesMap: Record<string, Resource[]> = null;
-
-      if (result.dynamicResourcesMap) {
-        for (const [key, value] of Object.entries(result.dynamicResourcesMap)) {
-          if (!dynamicResourcesMap) {
-            dynamicResourcesMap = {} as Record<string, Resource[]>;
-          }
+    // try {
+    // we must add callback before update
+    this.app.compiler.onUpdateFinish(async () => {
+      // if there are more updates, recompile again
+      if (this._updateQueue.length > 0) {
+        await this.recompileAndSendResult();
+      }
+      if (this.app.resolvedUserConfig?.server.writeToDisk) {
+        this.app.compiler.writeResourcesToDisk();
+      }
+    });
 
-          // @ts-ignore
-          dynamicResourcesMap[key] = value.map((r) => ({
-            path: r[0],
-            type: r[1] as 'script' | 'link'
-          }));
+    const start = performance.now();
+    const result = await this.app.compiler.update(queue);
+
+    this.app.logger.info(
+      `${bold(lightCyan(updatedFilesStr))} updated in ${bold(
+        green(formatExecutionTime(performance.now() - start, 's'))
+      )}`
+    );
+
+    // clear update queue after update finished
+    this._updateQueue = this._updateQueue.filter(
+      (item) => !queue.includes(item)
+    );
+
+    let dynamicResourcesMap: Record<string, Resource[]> = null;
+
+    if (result.dynamicResourcesMap) {
+      for (const [key, value] of Object.entries(result.dynamicResourcesMap)) {
+        if (!dynamicResourcesMap) {
+          dynamicResourcesMap = {} as Record<string, Resource[]>;
         }
+
+        // @ts-ignore
+        dynamicResourcesMap[key] = value.map((r) => ({
+          path: r[0],
+          type: r[1] as 'script' | 'link'
+        }));
       }
-      const {
-        added,
-        changed,
-        removed,
-        immutableModules,
-        mutableModules,
-        boundaries
-      } = result;
-      const resultStr = `{
+    }
+    const {
+      added,
+      changed,
+      removed,
+      immutableModules,
+      mutableModules,
+      boundaries
+    } = result;
+    const resultStr = `{
         added: [${formatHmrResult(added)}],
         changed: [${formatHmrResult(changed)}],
         removed: [${formatHmrResult(removed)}],
@@ -125,22 +125,22 @@ export class HmrEngine {
         dynamicResourcesMap: ${JSON.stringify(dynamicResourcesMap)}
       }`;
 
-      this.callUpdates(result);
+    this.callUpdates(result);
 
-      this.app.ws.wss.clients.forEach((client: WebSocketClient) => {
-        // @ts-ignore
-        client.send(`
+    this.app.ws.wss.clients.forEach((client: WebSocketClient) => {
+      // @ts-ignore
+      client.send(`
         {
           type: 'farm-update',
           result: ${resultStr}
         }
       `);
-      });
-    } catch (err) {
-      // checkClearScreen(this.app.compiler.config.config);
-      this.app.logger.error(convertErrorMessage(err));
-      // throw new Error(err);
-    }
+    });
+    // } catch (err) {
+    // checkClearScreen(this.app.compiler.config.config);
+    // this.app.logger.error(convertErrorMessage(err));
+
+    // }
   };
 
   async hmrUpdate(absPath: string | string[], force = false) {
@@ -173,6 +173,7 @@ export class HmrEngine {
         const errorStr = `${JSON.stringify({
           message: serialization
         })}`;
+
         this.app.ws.wss.clients.forEach((client: WebSocketClient) => {
           // @ts-ignore
           // client.rawSend(`

diff --git a/packages/runtime-plugin-hmr/src/hmr-client.ts b/packages/runtime-plugin-hmr/src/hmr-client.ts
@@ -3,6 +3,7 @@ import { HotModuleState } from './hot-module-state';
 import { logger } from './logger';
 import { ErrorOverlay, overlayId } from './overlay';
 import { HMRPayload, HmrUpdateResult, RawHmrUpdateResult } from './types';
+import { parseIfJSON } from './utils';
 
 // Inject during compile time
 const hmrPort = Number(FARM_HMR_PORT);
@@ -41,10 +42,8 @@ export class HmrClient {
     // when the user save the file, the server will recompile the file(and its dependencies as long as its dependencies are changed)
     // after the file is recompiled, the server will generated a update resource and send its id to the client
     // the client will apply the update
-    console.log('链接成功');
 
     socket.addEventListener('message', (event) => {
-      console.log(event.data);
       const result: HMRPayload = new Function(`return (${event.data})`)();
       if (result?.type === 'closing') {
         this.closeConnectionGracefully();
@@ -205,7 +204,6 @@ export class HmrClient {
    * @param payload Vite HMR payload
    */
   async handleMessage(payload: HMRPayload) {
-    console.log(payload);
     switch (payload.type) {
       case 'farm-update':
         this.notifyListeners('farm:beforeUpdate', payload);