add hmr

package-lock.json

@@ -48,6 +48,7 @@
         "vite-plugin-dts": "~2.3.0",
         "vite-plugin-top-level-await": "^1.3.1",
         "vite-plugin-wasm": "^3.2.2",
+        "vite-plugin-web-components-hmr": "^0.1.3",
         "vitest": "~0.32.0",
         "which": "^4.0.0"
       }
@@ -10417,6 +10418,22 @@
         "vite": "^2 || ^3 || ^4"
       }
     },
+    "node_modules/vite-plugin-web-components-hmr": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-web-components-hmr/-/vite-plugin-web-components-hmr-0.1.3.tgz",
+      "integrity": "sha512-UF+YYOFyaie6cT7XPatRz2Xo1Fh3TdTwOdCq1Z0EjzMfdAlUiUdF3crkN0DdEhctWBvq18CHxJZUTKw7x1zSRQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-import-assertions": "^7.12.1",
+        "@babel/plugin-syntax-top-level-await": "^7.12.1",
+        "picomatch": "^2.2.2"
+      },
+      "peerDependencies": {
+        "vite": ">=2"
+      }
+    },
     "node_modules/vitest": {
       "version": "0.32.4",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.32.4.tgz",

package.json

@@ -37,6 +37,7 @@
     "vite-plugin-dts": "~2.3.0",
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2",
+    "vite-plugin-web-components-hmr": "^0.1.3",
     "vitest": "~0.32.0",
     "which": "^4.0.0"
   },

studio-frontend/src/app/app.element.ts

@@ -144,7 +144,8 @@ export class AppElement extends LitElement {
 		this.showHelp = !this.showHelp;
 	}
 
-	protected override render = () => html`
+	protected override render() {
+		return html`
 		<sts-canvas-provider class="app-root">
 		<sts-scene-data-provider>
 			<sts-iframe-messaging-bridge></sts-iframe-messaging-bridge>
@@ -277,4 +278,5 @@ export class AppElement extends LitElement {
 		</sts-scene-data-provider>
 		</sts-canvas-provider>
 	`;
+	}
 }

studio-frontend/src/app/blocking.element.ts

@@ -9,33 +9,35 @@ import * as studio from "@storyteller/studio";
 export class BlockingElement extends LitElement {
     static override styles = unsafeCSS(styles);
 
-    override render = () => html`
+    override render() {
-        <sts-button
+        return html`
-            @click=${() => {
+            <sts-button
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Cube);
+                @click=${() => {
-            }}>
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Cube);
-            Cube
+                }}>
-        </sts-button>
+                Cube
+            </sts-button>
 
-        <sts-button
+            <sts-button
-            @click=${() => {
+                @click=${() => {
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Sphere);
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Sphere);
-            }}>
+                }}>
-            Sphere
+                Sphere
-        </sts-button>
+            </sts-button>
 
-        <sts-button
+            <sts-button
-            @click=${() => {
+                @click=${() => {
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Cylinder);
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Cylinder);
-            }}>
+                }}>
-            Cylinder
+                Cylinder
-        </sts-button>
+            </sts-button>
 
-        <sts-button
+            <sts-button
-            @click=${() => {
+                @click=${() => {
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Torus);
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Torus);
-            }}>
+                }}>
-            Torus
+                Torus
-        </sts-button>
+            </sts-button>
-    `;
+        `;
+    }
 }

studio-frontend/tsconfig.json

@@ -22,6 +22,7 @@
     "noImplicitAny": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,
+    "forceConsistentCasingInFileNames": true,
 
     "types": ["vite/client"]
   },

studio-frontend/vite.config.ts

@@ -6,12 +6,14 @@ import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
 import mergeAssetsDirs from "../vite-multiple-assets";
+import { hmrPlugin, presets} from "vite-plugin-web-components-hmr";
 
 export default defineConfig({
 	cacheDir: "../node_modules/.vite/studio-frontend",
 	server:{
 		port: 4200,
 		host: "localhost",
+		hmr: true,
 	},
 	preview:{
 		port: 4300,
@@ -25,5 +27,9 @@ export default defineConfig({
 			"studio-frontend/public",
 			"dist/studio/public",
 		]),
+		hmrPlugin({
+			include: ['./src/**/*.ts'],
+			presets: [presets.lit]
+		})
 	],
 });