From 756a47510fd46844c198d9451409ac361556d017 Mon Sep 17 00:00:00 2001
From: Rachel Powers <508861+Ryex@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:40:31 -0700
Subject: [PATCH] ensure all decorators use accessor

---
 www/src/ts/app/app.ts                     |  1 +
 www/src/ts/app/nav.ts                     |  6 ++--
 www/src/ts/app/save.ts                    | 10 +++----
 www/src/ts/virtual_machine/base_device.ts | 34 +++++++++++------------
 www/src/ts/virtual_machine/device.ts      | 20 ++++++-------
 5 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/www/src/ts/app/app.ts b/www/src/ts/app/app.ts
index da23b5d..ebb3ce1 100644
--- a/www/src/ts/app/app.ts
+++ b/www/src/ts/app/app.ts
@@ -92,6 +92,7 @@ export class App extends BaseElement {
         <div class="app-body">
           <sl-split-panel
             style="--min: 20em; --max: calc(100% - 20em);"
+
             primary="start"
             snap="512px 50%"
             snap-threshold="15"
diff --git a/www/src/ts/app/nav.ts b/www/src/ts/app/nav.ts
index dcca27b..d2e3a20 100644
--- a/www/src/ts/app/nav.ts
+++ b/www/src/ts/app/nav.ts
@@ -99,9 +99,9 @@ export class Nav extends BaseElement {
     super();
   }
 
-  @property() gitVer: string;
-  @property() appVer: string;
-  @property() buildDate: string;
+  @property() accessor gitVer: string;
+  @property() accessor appVer: string;
+  @property() accessor buildDate: string;
   protected render(): HTMLTemplateResult {
     return html`
       <nav id="navBar" class="navbar navbar-default">
diff --git a/www/src/ts/app/save.ts b/www/src/ts/app/save.ts
index 26afe40..597b17e 100644
--- a/www/src/ts/app/save.ts
+++ b/www/src/ts/app/save.ts
@@ -20,8 +20,8 @@ export class SaveDialog extends BaseElement {
     ...defaultCss,
   ];
 
-  @state() saves: { name: string, date: Date, session: VMState }[];
-  @state() mode: SaveDialogMode;
+  @state() accessor saves: { name: string, date: Date, session: VMState }[];
+  @state() accessor mode: SaveDialogMode;
 
   constructor() {
     super();
@@ -45,7 +45,7 @@ export class SaveDialog extends BaseElement {
     });
   }
 
-  @query("sl-dialog") dialog: SlDialog;
+  @query("sl-dialog") accessor dialog: SlDialog;
 
   show(mode: SaveDialogMode) {
     this.mode = mode;
@@ -61,9 +61,9 @@ export class SaveDialog extends BaseElement {
       <sl-dialog label="Save Session">
         ${when(this.mode === "save",
           () => html`
-              <div>
+              <div class="hstack mb-2">
                 <sl-input class="save-name-input" autofocus></sl-input>
-                <sl-button variant="success" @click=${this._handleSaveClick}>Save</sl-button>
+                <sl-button class="ms-2" variant="success" @click=${this._handleSaveClick}>Save</sl-button>
               </div>
             `
         )}
diff --git a/www/src/ts/virtual_machine/base_device.ts b/www/src/ts/virtual_machine/base_device.ts
index ed00f00..e4858ac 100644
--- a/www/src/ts/virtual_machine/base_device.ts
+++ b/www/src/ts/virtual_machine/base_device.ts
@@ -1,6 +1,6 @@
 import { property, state } from "lit/decorators.js";
 
-import {
+import type {
   DeviceRef,
   LogicFields,
   Reagents,
@@ -60,22 +60,22 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
 
     device: DeviceRef;
 
-    @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;
+    @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;
 
     connectedCallback(): void {
       const root = super.connectedCallback();
diff --git a/www/src/ts/virtual_machine/device.ts b/www/src/ts/virtual_machine/device.ts
index 2f6003d..446acb0 100644
--- a/www/src/ts/virtual_machine/device.ts
+++ b/www/src/ts/virtual_machine/device.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   Connection,
   DeviceTemplate,
   LogicField,
@@ -43,7 +43,7 @@ import {
 } from "../utils";
 import SlSelect from "@shoelace-style/shoelace/dist/components/select/select.js";
 import SlDrawer from "@shoelace-style/shoelace/dist/components/drawer/drawer.js";
-import { DeviceDB, DeviceDBEntry } from "./device_db";
+import type { DeviceDB, DeviceDBEntry } from "./device_db";
 import { connectionFromDeviceDBConnection } from "./utils";
 import { SlDialog } from "@shoelace-style/shoelace";
 import { repeat } from "lit/directives/repeat.js";
@@ -53,7 +53,7 @@ import { cache } from "lit/directives/cache.js";
 export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
   image_err: boolean;
 
-  @property({ type: Boolean }) open: boolean;
+  @property({ type: Boolean }) accessor open: boolean;
 
   constructor() {
     super();
@@ -465,7 +465,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
     `;
   }
 
-  @query(".remove-device-dialog") removeDialog: SlDialog;
+  @query(".remove-device-dialog") accessor removeDialog: SlDialog;
 
   _preventOverlayClose(event: CustomEvent) {
     if (event.detail.source === "overlay") {
@@ -928,12 +928,12 @@ export class VmDeviceTemplate extends BaseElement {
     `,
   ];
 
-  @state() fields: { [key in LogicType]?: LogicField };
-  @state() slots: SlotTemplate[];
-  @state() template: DeviceTemplate;
-  @state() device_id: number | undefined;
-  @state() device_name: string | undefined;
-  @state() connections: Connection[];
+  @state() accessor fields: { [key in LogicType]?: LogicField };
+  @state() accessor slots: SlotTemplate[];
+  @state() accessor template: DeviceTemplate;
+  @state() accessor device_id: number | undefined;
+  @state() accessor device_name: string | undefined;
+  @state() accessor connections: Connection[];
 
   constructor() {
     super();