refactor(frontend): bump rebuild to v1.0

Signed-off-by: Rachel Powers <508861+Ryex@users.noreply.github.com>
2024-09-17 15:12:32 -07:00
parent a34fb426b7
commit 87959efa1e
20 changed files with 816 additions and 755 deletions
--- a/www/cspell.json
+++ b/www/cspell.json
@@ -52,6 +52,7 @@
        "brnaz",
        "brne",
        "brnez",
+        "bson",
        "Circuitboard",
        "clazz",
        "codegen",
@@ -61,6 +62,7 @@
        "Depressurising",
        "deviceslength",
        "dodgerblue",
+        "dont",
        "endpos",
        "getd",
        "Hardsuit",
@@ -76,6 +78,7 @@
        "lawngreen",
        "lbns",
        "leeoniya",
+        "lightdom",
        "logicable",
        "LogicSlotType",
        "logicslottypes",
@@ -131,6 +134,7 @@
        "stationpedia",
        "tablist",
        "tabpanel",
+        "tailwindcss",
        "themelist",
        "tokentype",
        "trunc",
@@ -139,7 +143,8 @@
        "VMUI",
        "vstack",
        "whitesmoke",
-        "whos"
+        "whos",
+        "wicg"
    ],
    "flagWords": [],
    "language": "en",
--- a/www/package.json
+++ b/www/package.json
@@ -25,25 +25,25 @@
  "homepage": "https://github.com/ryex/ic10emu#readme",
  "devDependencies": {
    "@oneidentity/zstd-js": "^1.0.3",
-    "@rsbuild/core": "^0.7.10",
-    "@rsbuild/plugin-image-compress": "^0.7.10",
-    "@rsbuild/plugin-sass": "^0.7.10",
-    "@rsbuild/plugin-type-check": "^0.7.10",
-    "@rspack/cli": "^0.7.5",
-    "@rspack/core": "^0.7.5",
-    "@swc/helpers": "^0.5.12",
+    "@rsbuild/core": "^1.0.4",
+    "@rsbuild/plugin-image-compress": "^1.0.2",
+    "@rsbuild/plugin-sass": "^1.0.1",
+    "@rsbuild/plugin-type-check": "^1.0.1",
+    "@rspack/cli": "^1.0.5",
+    "@rspack/core": "^1.0.5",
+    "@swc/helpers": "^0.5.13",
    "@types/ace": "^0.0.52",
    "@types/bootstrap": "^5.2.10",
    "@types/wicg-file-system-access": "^2023.10.5",
    "fork-ts-checker-webpack-plugin": "^9.0.2",
    "lit-scss-loader": "^2.0.1",
-    "mini-css-extract-plugin": "^2.9.0",
+    "mini-css-extract-plugin": "^2.9.1",
    "postcss-loader": "^8.1.1",
-    "sass": "^1.77.8",
-    "tailwindcss": "^3.4.10",
+    "sass": "^1.78.0",
+    "tailwindcss": "^3.4.12",
    "ts-lit-plugin": "^2.0.2",
    "ts-loader": "^9.5.1",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
    "typescript-lit-html-plugin": "^0.9.0"
  },
  "dependencies": {
@@ -52,8 +52,8 @@
    "@lit/context": "^1.1.2",
    "@popperjs/core": "^2.11.8",
    "@shoelace-style/shoelace": "^2.16.0",
-    "ace-builds": "^1.36.0",
-    "ace-linters": "^1.3.0",
+    "ace-builds": "^1.36.2",
+    "ace-linters": "^1.3.2",
    "bootstrap": "^5.3.3",
    "bson": "^6.8.0",
    "buffer": "^6.0.3",
@@ -65,7 +65,7 @@
    "jquery": "^3.7.1",
    "lit": "^3.2.0",
    "lzma-web": "^3.0.1",
-    "marked": "^14.0.0",
+    "marked": "^14.1.2",
    "stream-browserify": "^3.0.0",
    "uuid": "^10.0.0",
    "vm-browserify": "^1.1.2"
--- a/www/pnpm-lock.yaml
+++ b/www/pnpm-lock.yaml
--- a/www/rsbuild.config.ts
+++ b/www/rsbuild.config.ts
@@ -13,14 +13,23 @@ const commitHash = require("child_process")
  .trim();

 export default defineConfig({
-  output: {
-    targets: ["web"],
+  environments: {
+    web: {
+      output: {
+        target: 'web',
+      }
+    }
  },
  source: {
    entry: {
-      index: "./src/ts/index.ts",
+      index: path.resolve(__dirname, "./src/ts/index.ts"),
    },
  },
+  html: {
+    appIcon: {
+      icons: [],
+    }
+  },
  tools: {
    rspack: {
      plugins: [
@@ -58,15 +67,11 @@ export default defineConfig({
      jsc: {
        parser: {
          syntax: "typescript",
-          // dynamicImport: true,
          decorators: true,
        },
        transform: {
-          legacyDecorator: true,
          decoratorMetadata: true,
-          // decoratorVersion: "2022-03",
        },
-        // target: "es2021",
      },
    },
    htmlPlugin: {
--- a/www/src/ts/app/app.ts
+++ b/www/src/ts/app/app.ts
@@ -54,10 +54,10 @@ export class App extends BaseElement {

  editorSettings: { fontSize: number; relativeLineNumbers: boolean };

-  @query("ace-ic10") editor: IC10Editor;
-  @query("session-share-dialog") shareDialog: ShareSessionDialog;
-  @query("save-dialog") saveDialog: SaveDialog;
-  @query("app-welcome") appWelcome: AppWelcome;
+  @query("ace-ic10") accessor editor: IC10Editor;
+  @query("session-share-dialog") accessor shareDialog: ShareSessionDialog;
+  @query("save-dialog") accessor saveDialog: SaveDialog;
+  @query("app-welcome") accessor appWelcome: AppWelcome;

  // get editor() {
  //   return this.renderRoot.querySelector("ace-ic10") as IC10Editor;
--- a/www/src/ts/app/nav.ts
+++ b/www/src/ts/app/nav.ts
@@ -92,9 +92,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">
--- a/www/src/ts/app/save.ts
+++ b/www/src/ts/app/save.ts
@@ -47,7 +47,7 @@ export class SaveDialog extends BaseElement {
    this.performSearch();
  }

-  @state() mode: SaveDialogMode;
+  @state() accessor mode: SaveDialogMode;

  private searchResults: { name: string; date: Date; session: SessionDB.CurrentDBVmState }[];

@@ -64,21 +64,21 @@ export class SaveDialog extends BaseElement {
        this._handleSessionsUpdate.bind(this),
      ),
    );
-    this.loadsaves();
+    this.loadSaves();
  }

  _handleSessionsUpdate() {
-    this.loadsaves();
+    this.loadSaves();
  }

-  loadsaves() {
+  loadSaves() {
    window.App.get().then(async (app) => {
      const saves = await app.session.getLocalSaved();
      this.saves = saves;
    });
  }

-  @query("sl-dialog.save-dialog") saveDialog: SlDialog;
+  @query("sl-dialog.save-dialog") accessor saveDialog: SlDialog;

  show(mode: SaveDialogMode) {
    this.mode = mode;
@@ -224,7 +224,7 @@ export class SaveDialog extends BaseElement {
    `;
  }

-  @query("sl-dialog.delete-dialog") deleteDialog: SlDialog;
+  @query("sl-dialog.delete-dialog") accessor deleteDialog: SlDialog;
  private _toDelete: string | undefined;

  _preventOverlayClose(event: CustomEvent) {
@@ -250,9 +250,9 @@ export class SaveDialog extends BaseElement {
    this._filter = undefined;
  }

-  @query(".save-name-input") saveInput: SlInput;
-  @query(".filter-input") filterInput: SlInput;
-  @query(".save-button") saveButton: SlButton;
+  @query(".save-name-input") accessor saveInput: SlInput;
+  @query(".filter-input") accessor filterInput: SlInput;
+  @query(".save-button") accessor saveButton: SlButton;

  async _handleSaveButtonClick(_e: CustomEvent) {
    const name = this.saveInput.value;
--- a/www/src/ts/app/share.ts
+++ b/www/src/ts/app/share.ts
@@ -7,9 +7,9 @@ import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";

@customElement("session-share-dialog")
 export class ShareSessionDialog extends BaseElement {
-  @query(".dialog")  dialog: SlDialog;
-  @query(".input")  input: SlInput;
-  @property({ type: String })  link: string;
+  @query(".dialog") accessor dialog: SlDialog;
+  @query(".input") accessor input: SlInput;
+  @property({ type: String }) accessor link: string;

  constructor() {
    super();
--- a/www/src/ts/app/welcome.ts
+++ b/www/src/ts/app/welcome.ts
@@ -20,15 +20,15 @@ export class AppWelcome extends BaseElement {
    `,
  ];

-  @property({ type: Boolean }) dontShowAgain: boolean;
+  @property({ type: Boolean }) accessor dontShowAgain: boolean;

  constructor() {
    super();
    this.dontShowAgain = true;
  }

-  @query("sl-dialog.welcome-dialog") dialog: SlDialog;
-  @query("sl-switch.dont-show-switch") dontShowSwitch: SlSwitch;
+  @query("sl-dialog.welcome-dialog") accessor dialog: SlDialog;
+  @query("sl-switch.dont-show-switch") accessor dontShowSwitch: SlSwitch;

  hide() {
    this.dialog?.hide();
--- a/www/src/ts/components/details.ts
+++ b/www/src/ts/components/details.ts
@@ -8,7 +8,7 @@ import SlDetails from "@shoelace-style/shoelace/dist/components/details/details.

@customElement("ic10-details")
 export class IC10Details extends SlDetails {
-  @query(".details__summary-icon")  summaryIcon: HTMLSpanElement;
+  @query(".details__summary-icon") accessor summaryIcon: HTMLSpanElement;

  static styles = [
    SlDetails.styles,
--- a/www/src/ts/editor/ace.ts
+++ b/www/src/ts/editor/ace.ts
@@ -205,6 +205,10 @@ export declare namespace AceHidden {
    getWidth(): number;
    destroy(): void;
  }
+
+  export interface HoverTooltipConstructor {
+    new(parentNode?: HTMLElement): HoverTooltip
+  }
  export class HoverTooltip extends Tooltip {
    constructor(parentNode?: HTMLElement);
    timeout: number;
@@ -272,9 +276,13 @@ export declare namespace AceHidden {
     */
    doPopupsOverlap(popupA: Tooltip, popupB: Tooltip): boolean;
  }
+
+  export interface MarkerGroupConstructor {
+    new(session: EditSession, options?: { markerType?: "fullLine" | "line" }): Ace.MarkerGroup
+  }
 }

-const { HoverTooltip } = ace.require("ace/tooltip");
-const MarkerGroup = ace.require("ace/marker_group").MarkerGroup;
+const HoverTooltip: AceHidden.HoverTooltipConstructor = ace.require("ace/tooltip").HoverTooltip;
+const MarkerGroup: AceHidden.MarkerGroupConstructor = ace.require("ace/marker_group").MarkerGroup;

 export { ace, TextMode, Range, AceLanguageClient, HoverTooltip, MarkerGroup }
--- a/www/src/ts/editor/index.ts
+++ b/www/src/ts/editor/index.ts
@@ -98,9 +98,9 @@ export class IC10Editor extends BaseElement {
  stylesAdded: string[];
  tooltipObserver: MutationObserver;

-  @query(".e-kb-shortcuts") kbShortcuts: AceKeyboardShortcuts;
+  @query(".e-kb-shortcuts") accessor kbShortcuts: AceKeyboardShortcuts;

-  @query(".e-settings-dialog") settingDialog: SlDialog;
+  @query(".e-settings-dialog") accessor settingDialog: SlDialog;

  errorTooltip: AceHidden.HoverTooltip = new HoverTooltip();
  activeLineTooltip: AceHidden.HoverTooltip = new HoverTooltip();
@@ -231,9 +231,9 @@ export class IC10Editor extends BaseElement {
      characterData: false,
    });

-    // Fornow this seems uneeded, tooltips seem to work better on the lightdom
+    // For now this seems unneeded, tooltips seem to work better on the lightdom
    // this.tooltipObserver = new MutationObserver((_mutations, _observer) => {
-    //   // we want the toltips on the shadow-dom not the light dom body
+    //   // we want the tooltips on the shadow-dom not the light dom body
    //   for (const node of document.body.querySelectorAll(
    //     ".ace_tooltip, .ace_editor.ace_autocomplete",
    //   )) {
--- a/www/src/ts/editor/shortcuts_ui.ts
+++ b/www/src/ts/editor/shortcuts_ui.ts
@@ -29,7 +29,7 @@ export class AceKeyboardShortcuts extends BaseElement {
  ];

  editor?: Ace.Editor;
-  @query(".drawer") drawer: SlDrawer;
+  @query(".drawer") accessor drawer: SlDrawer;

  constructor() {
    super();
@@ -48,10 +48,10 @@ export class AceKeyboardShortcuts extends BaseElement {
  protected render() {
    var kbs: any[] = [];
    if (this.editor) {
-      const getEditorKeybordShortcuts = ace.require(
+      const getEditorKeyboardShortcuts = ace.require(
        "ace/ext/menu_tools/get_editor_keyboard_shortcuts",
-      ).getEditorKeybordShortcuts;
-      kbs = getEditorKeybordShortcuts(this.editor);
+      ).getEditorKeyboardShortcuts;
+      kbs = getEditorKeyboardShortcuts(this.editor);
    }
    return html`
      <sl-drawer label="Editor Keyboard Shortcuts" class="drawer">
--- a/www/src/ts/virtualMachine/baseDevice.ts
+++ b/www/src/ts/virtualMachine/baseDevice.ts
@@ -30,11 +30,11 @@ export const VMObjectMixin = <T extends Constructor<LitElement>>(
    objectIDSignal: Signal<ObjectID | null> = signal(null);
    vm: Signal<VirtualMachine> = signal(null);

-    @property({type: Number})
    get objectID(): number {
      return this.objectIDSignal.peek();
    }

+    @property({type: Number})
    set objectID(value: number) {
      this.objectIDSignal.value = value;
    }
--- a/www/src/ts/virtualMachine/device/addDevice.ts
+++ b/www/src/ts/virtualMachine/device/addDevice.ts
@@ -43,8 +43,8 @@ export class VMAddDeviceButton extends VMObjectMixin(BaseElement) {
    `,
  ];

-  @query("sl-drawer") drawer: SlDrawer;
-  @query(".device-search-input") searchInput: SlInput;
+  @query("sl-drawer") accessor drawer: SlDrawer;
+  @query(".device-search-input") accessor searchInput: SlInput;

  templateDB = computed(() => {
    return this.vm.value?.state.templateDB.value ?? null;
--- a/www/src/ts/virtualMachine/device/card.ts
+++ b/www/src/ts/virtualMachine/device/card.ts
@@ -23,7 +23,7 @@ export type CardTab = "fields" | "slots" | "reagents" | "networks" | "pins";
 export class VMDeviceCard extends VMObjectMixin(BaseElement) {
  image_err: boolean;

-  @property({ type: Boolean }) open: boolean;
+  @property({ type: Boolean }) accessor open: boolean;

  constructor() {
    super();
@@ -489,7 +489,7 @@ export class VMDeviceCard extends VMObjectMixin(BaseElement) {
    setTimeout(() => this.resolveTab(e.detail.name as CardTab), 100);
  }

-  @query(".remove-device-dialog") removeDialog: SlDialog;
+  @query(".remove-device-dialog") accessor removeDialog: SlDialog;

  _preventOverlayClose(event: CustomEvent) {
    if (event.detail.source === "overlay") {
--- a/www/src/ts/virtualMachine/device/deviceList.ts
+++ b/www/src/ts/virtualMachine/device/deviceList.ts
@@ -140,7 +140,7 @@ export class VMDeviceList extends VMObjectMixin(BaseElement) {
    return result;
  }

-  @query("vm-slot-add-dialog") slotDialog: VMSlotAddDialog;
+  @query("vm-slot-add-dialog") accessor slotDialog: VMSlotAddDialog;

  _showDeviceSlotDialog(
    e: CustomEvent<SlotModifyEvent>,
@@ -156,7 +156,7 @@ export class VMDeviceList extends VMObjectMixin(BaseElement) {
    }
  }

-  @query(".device-filter-input") filterInput: SlInput;
+  @query(".device-filter-input") accessor filterInput: SlInput;
  get filter() {
    return this._filter.value;
  }
--- a/www/src/ts/virtualMachine/device/slot.ts
+++ b/www/src/ts/virtualMachine/device/slot.ts
@@ -31,11 +31,11 @@ export class VMDeviceSlot extends VMObjectMixin(BaseElement) {

  slotIndexSignal: Signal<number> = signal(0);

-  @property({ type: Number })
  get slotIndex() {
    return this.slotIndexSignal.peek();
  }

+  @property({ type: Number })
  set slotIndex(val: number) {
    this.slotIndexSignal.value = val;
  }
--- a/www/src/ts/virtualMachine/device/slotAddDialog.ts
+++ b/www/src/ts/virtualMachine/device/slotAddDialog.ts
@@ -250,8 +250,8 @@ export class VMSlotAddDialog extends VMObjectMixin(BaseElement) {
    this.hide();
  }

-  @query("sl-dialog.slot-add-dialog") dialog: SlDialog;
-  @query(".device-search-input") searchInput: SlInput;
+  @query("sl-dialog.slot-add-dialog") accessor dialog: SlDialog;
+  @query(".device-search-input") accessor searchInput: SlInput;

  render() {
   const name = computed(() => {
--- a/www/tsconfig.json
+++ b/www/tsconfig.json
@@ -12,10 +12,9 @@
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "useDefineForClassFields": false,
-    "types": ["@types/wicg-file-system-access", "@types/ace"],
+    "experimentalDecorators": false,
+    "useDefineForClassFields": true,
+    "types": ["@types/wicg-file-system-access"],
    "plugins": [
      {
        "name": "ts-lit-plugin"