chore: add svelet demo

farm-fe · Dec 11, 2023 · 8eaba30 · 8eaba30
1 parent a26c904
commit 8eaba30
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 11 deletions.
diff --git a/examples/vite-adapter-svelet/farm.config.ts b/examples/vite-adapter-svelet/farm.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	vitePlugins: [sveltekit()]
+});
diff --git a/examples/vite-adapter-svelet/package.json b/examples/vite-adapter-svelet/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@farmfe-examples/svelet",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.27.4",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0"
+  },
+  "type": "module"
+}
diff --git a/examples/vite-adapter-svelet/src/app.d.ts b/examples/vite-adapter-svelet/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/examples/vite-adapter-svelet/src/app.html b/examples/vite-adapter-svelet/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/examples/vite-adapter-svelet/src/lib/index.ts b/examples/vite-adapter-svelet/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/examples/vite-adapter-svelet/src/routes/+page.svelte b/examples/vite-adapter-svelet/src/routes/+page.svelte
@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
diff --git a/examples/vite-adapter-svelet/static/favicon.png b/examples/vite-adapter-svelet/static/favicon.png
diff --git a/examples/vite-adapter-svelet/svelte.config.js b/examples/vite-adapter-svelet/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
diff --git a/examples/vite-adapter-svelet/vite.config.ts b/examples/vite-adapter-svelet/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
diff --git a/packages/runtime-plugin-hmr/src/hmr-client.ts b/packages/runtime-plugin-hmr/src/hmr-client.ts
@@ -18,6 +18,10 @@ export class HmrClient {
   registeredHotModulesMap = new Map<string, HotModuleState>();
   disposeMap = new Map<string, (data: any) => void | Promise<void>>();
   pruneMap = new Map<string, (data: any[]) => void | Promise<void>>();
+  customListenersMap = new Map<
+    string,
+    ((data: any) => void | Promise<void>)[]
+  >();
 
   constructor(private moduleSystem: ModuleSystem) {}
 
@@ -49,11 +53,23 @@ export class HmrClient {
       );
     });
 
-    socket.addEventListener('open', () => {
-      logger.log('connected to the server');
+    socket.addEventListener(
+      'open',
+      () => {
+        logger.log('connected to the server');
+        this.notifyListeners('vite:ws:connect', { webSocket: socket });
+      },
+      { once: true }
+    );
+
+    socket.addEventListener('message', async ({ data }) => {
+      // handle message
+    });
+
+    socket.addEventListener('close', () => {
+      this.notifyListeners('vite:ws:disconnect', { webSocket: socket });
+      logger.log('disconnected from the server, please reload the page.');
     });
-    // TODO use ping/pong to detect the connection is closed, and if the server is online again, reload the page
-    // socket.addEventListener('close', () => setTimeout(connect, 3000));
 
     return socket;
   }
@@ -72,7 +88,7 @@ export class HmrClient {
 
   applyHotUpdates(result: HmrUpdateResult, moduleSystem: ModuleSystem) {
     result.changed.forEach((id) => {
-      console.log(`[Farm HMR] ${id} updated`);
+      logger.log(`${id} updated`);
     });
 
     for (const id of result.removed) {
@@ -123,4 +139,12 @@ export class HmrClient {
       }
     }
   }
+
+  async notifyListeners(event: string, data: any) {
+    const callbacks = this.customListenersMap.get(event);
+
+    if (callbacks) {
+      await Promise.allSettled(callbacks.map((cb) => cb(data)));
+    }
+  }
 }
diff --git a/packages/runtime-plugin-hmr/src/hot-module-state.ts b/packages/runtime-plugin-hmr/src/hot-module-state.ts
@@ -4,8 +4,6 @@ import type { InferCustomEventPayload } from '@farmfe/core/types/custom-event.d.
 import { HmrClient } from './hmr-client';
 import { logger } from './logger';
 
-// export const REGISTERED_HOT_MODULES =
-
 export class HotModuleState {
   acceptCallbacks: Array<{ deps: string[]; fn: (mods: any[]) => void }> = [];
   data = {};
@@ -77,7 +75,6 @@ export class HotModuleState {
       map.set(event, existing);
     };
     addToMap(this.hmrClient.customListenersMap);
-    addToMap(this.newListeners);
   }
 
   off<T extends string>(
@@ -97,12 +94,14 @@ export class HotModuleState {
       map.set(event, pruned);
     };
     removeFromMap(this.hmrClient.customListenersMap);
-    removeFromMap(this.newListeners);
   }
 
   send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void {
-    this.hmrClient.addBuffer(JSON.stringify({ type: 'custom', event, data }));
-    this.hmrClient.send();
+    if (this.hmrClient.socket.readyState === WebSocket.OPEN) {
+      this.hmrClient.socket.send(
+        JSON.stringify({ type: 'custom', event, data })
+      );
+    }
   }
 
   // tap = (changeModule: ModuleInitialization) => {