Add component hot reload functionality

components/package.json

@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
+    "dev": "vite build --watch",
     "preview": "vite preview"
   },
   "devDependencies": {
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@intechstudio/grid-uikit": "^1.20240813.1834",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "ws": "^8.18.0"
   }
 }

components/vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { sveltePreprocess } from "svelte-preprocess";
+import { notifyEditorAfterBuildPlugin } from "./vite.postbuild";
 
 export default defineConfig({
   plugins: [
@@ -12,6 +13,7 @@ export default defineConfig({
       },
       emitCss: false,
     }),
+    notifyEditorAfterBuildPlugin(),
   ],
   build: {
     sourcemap: true,

components/vite.postbuild.ts

@@ -0,0 +1,42 @@
+import { PluginOption } from "vite";
+import { WebSocket } from "ws";
+import path from "path";
+
+export function notifyEditorAfterBuildPlugin(): PluginOption {
+  return {
+    name: "postbuild-notify-editor",
+    closeBundle: () =>
+      new Promise<void>((resolve) => {
+        if (
+          process.env.WEB_COMPONENT_NAME &&
+          process.env.WEB_COMPONENT_NAME != "profile-cloud-dev"
+        ) {
+          resolve();
+        }
+        let timeout = setTimeout(() => {
+          console.log("No connection to Editor, closing websocket connection");
+          ws.close();
+          resolve();
+        }, 3000);
+        let ws = new WebSocket("ws://localhost:9000");
+        ws.on("open", () => {
+          ws.send(
+            JSON.stringify({
+              type: "developer-package",
+              event: "components-build-complete",
+              id: "package-photoshop",
+              rootPath: path.resolve(__dirname, ".."),
+            }),
+          );
+          ws.close();
+          clearTimeout(timeout);
+          resolve();
+        });
+        ws.on("error", (err) => {
+          console.error(err);
+          clearTimeout(timeout);
+          resolve();
+        });
+      }),
+  };
+}