persist vm session

www/src/ts/virtual_machine/base_device.ts

@@ -60,22 +60,22 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
 
     device: DeviceRef;
 
-    @state() accessor name: string | null = null;
-    @state() accessor nameHash: number | null = null;
-    @state() accessor prefabName: string | null;
-    @state() accessor fields: LogicFields;
-    @state() accessor slots: Slot[];
-    @state() accessor reagents: Reagents;
-    @state() accessor connections: Connection[];
-    @state() accessor icIP: number;
-    @state() accessor icOpCount: number;
-    @state() accessor icState: string;
-    @state() accessor errors: ICError[];
-    @state() accessor registers: Registers | null;
-    @state() accessor stack: Stack | null;
-    @state() accessor aliases: Aliases | null;
-    @state() accessor defines: Defines | null;
-    @state() accessor pins: Pins | null;
+    @state() name: string | null = null;
+    @state() nameHash: number | null = null;
+    @state() prefabName: string | null;
+    @state() fields: LogicFields;
+    @state() slots: Slot[];
+    @state() reagents: Reagents;
+    @state() connections: Connection[];
+    @state() icIP: number;
+    @state() icOpCount: number;
+    @state() icState: string;
+    @state() errors: ICError[];
+    @state() registers: Registers | null;
+    @state() stack: Stack | null;
+    @state() aliases: Aliases | null;
+    @state() defines: Defines | null;
+    @state() pins: Pins | null;
 
     connectedCallback(): void {
       const root = super.connectedCallback();

www/src/ts/virtual_machine/device.ts

@@ -46,6 +46,7 @@ import { DeviceDB, DeviceDBEntry } from "./device_db";
 import { connectionFromDeviceDBConnection } from "./utils";
 import { SlDialog } from "@shoelace-style/shoelace";
 import { repeat } from "lit/directives/repeat.js";
+import { cache } from "lit/directives/cache.js";
 
 @customElement("vm-device-card")
 export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
@@ -221,7 +222,8 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
           class="device-name"
           size="small"
           pill
-          placeholder="${this.prefabName}"
+          placeholder=${this.prefabName}
+          value=${this.name}
           @sl-change=${this._handleChangeName}
         >
           <span slot="prefix">Name</span>
@@ -814,18 +816,20 @@ export class VMAddDeviceButton extends BaseElement {
     this.deviceDB = e.detail;
   }
 
-  renderSearchResults(): HTMLTemplateResult {
-    const renderedResults: HTMLTemplateResult[] = this._searchResults?.map(
-      (result) => html`
+  renderSearchResults() {
+    return repeat(
+      this._searchResults ?? [],
+      (result) => result.name,
+      (result) => cache(html`
         <vm-device-template
           prefab_name=${result.name}
           class="card"
           @add-device-template=${this._handleDeviceAdd}
         >
         </vm-device-template>
-      `,
+      `)
     );
-    return html`${renderedResults}`;
+
   }
 
   _handleDeviceAdd() {
@@ -851,7 +855,7 @@ export class VMAddDeviceButton extends BaseElement {
           @sl-input=${this._handleSearchInput}
         >
           <span slot="prefix">Search Structures</span>
-          <sl-icon slot="suffix" name="search"></sl-icon>"
+          <sl-icon slot="suffix" name="search"></sl-icon>
         </sl-input>
         <div class="search-results">${this.renderSearchResults()}</div>
         <sl-button
@@ -926,8 +930,7 @@ export class VmDeviceTemplate extends BaseElement {
 
   constructor() {
     super();
-    const that = this;
-    window.VM.get().then((vm) => (that.deviceDB = vm.db));
+    this.deviceDB = window.VM.vm.db;
   }
 
   get deviceDB(): DeviceDB {

www/src/ts/virtual_machine/index.ts

@@ -127,6 +127,7 @@ class VirtualMachine extends EventTarget {
           detail: ids,
         }),
       );
+      this.app.session.save();
     }
   }
 
@@ -152,7 +153,7 @@ class VirtualMachine extends EventTarget {
         }
       }
     }
-    this.update();
+    this.update(false);
   }
 
   step() {
@@ -193,7 +194,7 @@ class VirtualMachine extends EventTarget {
     }
   }
 
-  update() {
+  update(save: boolean = true) {
     this.updateDevices();
     this.ic10vm.lastOperationModified.forEach((id, _index, _modifiedIds) => {
       if (this.devices.has(id)) {
@@ -202,16 +203,18 @@ class VirtualMachine extends EventTarget {
         );
       }
     }, this);
-    this.updateDevice(this.activeIC);
+    this.updateDevice(this.activeIC, save);
+    if (save) this.app.session.save();
   }
 
-  updateDevice(device: DeviceRef) {
+  updateDevice(device: DeviceRef, save: boolean = true) {
     this.dispatchEvent(
       new CustomEvent("vm-device-modified", { detail: device.id }),
     );
     if (typeof device.ic !== "undefined") {
       this.app.session.setActiveLine(device.id, device.ip!);
     }
+    if (save) this.app.session.save();
   }
 
   handleVmError(err: Error) {
@@ -272,6 +275,7 @@ class VirtualMachine extends EventTarget {
         this.dispatchEvent(
           new CustomEvent("vm-device-modified", { detail: id }),
         );
+        this.app.session.save();
         return true;
       } catch (e) {
         this.handleVmError(e);
@@ -372,6 +376,7 @@ class VirtualMachine extends EventTarget {
           detail: Array.from(device_ids),
         }),
       );
+      this.app.session.save();
       return true;
     } catch (err) {
       this.handleVmError(err);
@@ -413,9 +418,4 @@ class VirtualMachine extends EventTarget {
   }
 }
 
-export interface VMState {
-  activeIC: number;
-  vm: FrozenVM;
-}
-
 export { VirtualMachine };