add hmr

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`
-        <sts-button
-            @click=${() => {
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Cube);
-            }}>
-            Cube
-        </sts-button>
+    override render() {
+        return html`
+            <sts-button
+                @click=${() => {
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Cube);
+                }}>
+                Cube
+            </sts-button>
 
-        <sts-button
-            @click=${() => {
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Sphere);
-            }}>
-            Sphere
-        </sts-button>
+            <sts-button
+                @click=${() => {
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Sphere);
+                }}>
+                Sphere
+            </sts-button>
 
-        <sts-button
-            @click=${() => {
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Cylinder);
-            }}>
-            Cylinder
-        </sts-button>
+            <sts-button
+                @click=${() => {
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Cylinder);
+                }}>
+                Cylinder
+            </sts-button>
 
-        <sts-button
-            @click=${() => {
-                studio.dispatchBlockingCommand(studio.BlockingCommand.Torus);
-            }}>
-            Torus
-        </sts-button>
-    `;
+            <sts-button
+                @click=${() => {
+                    studio.dispatchBlockingCommand(studio.BlockingCommand.Torus);
+                }}>
+                Torus
+            </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]
+		})
 	],
 });