@jxsuite/studio 0.28.2 → 0.28.4

package/src/view.ts

@@ -7,6 +7,8 @@
  * store.js) makes renderer dependencies explicit.
  */
 
+import type { editor } from "monaco-editor";
+
 interface ViewState {
   panzoomWrap: HTMLElement | null;
   renderGeneration: number;
@@ -16,12 +18,12 @@ interface ViewState {
   panY: number;
   prevCanvasMode: string | null;
   monacoEditor:
-    | (import("monaco-editor").editor.IStandaloneCodeEditor & {
+    | (editor.IStandaloneCodeEditor & {
         _ignoreNextChange?: boolean;
       })
     | null;
   functionEditor:
-    | (import("monaco-editor").editor.IStandaloneCodeEditor & {
+    | (editor.IStandaloneCodeEditor & {
         _ignoreNextChange?: boolean;
         _editingTarget?: string | null;
       })
@@ -136,8 +138,10 @@ export const view: ViewState = {
 const COLLAPSE_STORAGE_KEY = "jx-studio-panel-widths";
 
 export function applyPanelCollapse() {
-  const app = document.getElementById("app");
-  if (!app) return;
+  const app = document.querySelector("#app");
+  if (!app) {
+    return;
+  }
   app.classList.toggle("left-collapsed", view.leftPanelCollapsed);
   app.classList.toggle("right-collapsed", view.rightPanelCollapsed);
   try {
@@ -146,6 +150,6 @@ export function applyPanelCollapse() {
     saved.rightCollapsed = view.rightPanelCollapsed;
     localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(saved));
   } catch {
-    // storage unavailable
+    // Storage unavailable
   }
 }

package/src/workspace/workspace.ts

@@ -1,9 +1,10 @@
-import { reactive, computed } from "../reactivity";
+import { computed, reactive } from "../reactivity";
 import { createTab, disposeTab } from "../tabs/tab";
 import type { Tab } from "../tabs/tab";
 
 import type { ComponentEntry } from "../files/components";
-import type { JxStyle, JxMutableNode } from "@jxsuite/schema/types";
+import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
+import type { ComputedRef } from "@vue/reactivity";
 
 interface FileEntry {
   name: string;
@@ -11,40 +12,49 @@ interface FileEntry {
   type: string;
 }
 
-export const workspace = reactive({
-  /** @type {string | null} */
-  projectRoot: null as string | null,
-  /** @type {object | null} */
-  projectConfig: null as object | null,
-  /** @type {ComponentEntry[]} */
-  componentRegistry: [] as ComponentEntry[],
-  /** @type {JxMutableNode | null} */
+export interface Workspace {
+  projectRoot: string | null;
+  projectConfig: object | null;
+  componentRegistry: ComponentEntry[];
+  clipboard: JxMutableNode | null;
+  styleClipboard: JxStyle | null;
+  fileTree: {
+    dirs: Map<string, FileEntry[]>;
+    expanded: Set<string>;
+    selectedPath: string | null;
+    searchQuery: string;
+  };
+  tabs: Map<string, Tab>;
+  tabOrder: string[];
+  activeTabId: string | null;
+  ui: { activityBar: string };
+}
+
+// Annotated as Workspace: Vue's UnwrapNestedRefs cannot terminate on the
+// Recursive document types, and reactive() does not unwrap refs we never use.
+export const workspace: Workspace = reactive({
+  activeTabId: null as string | null,
   clipboard: null as JxMutableNode | null,
-  /** @type {JxStyle | null} */
-  styleClipboard: null as JxStyle | null,
+  componentRegistry: [] as ComponentEntry[],
   fileTree: {
-    /** @type {Map<string, FileEntry[]>} */
     dirs: new Map<string, FileEntry[]>(),
-    /** @type {Set<string>} */
     expanded: new Set<string>(),
-    /** @type {string | null} */
-    selectedPath: null as string | null,
     searchQuery: "",
+    selectedPath: null as string | null,
   },
-  /** @type {Map<string, Tab>} */
-  tabs: new Map<string, Tab>(),
-  /** @type {string[]} */
+  projectConfig: null as object | null,
+  projectRoot: null as string | null,
+  styleClipboard: null as JxStyle | null,
   tabOrder: [] as string[],
-  /** @type {string | null} */
-  activeTabId: null as string | null,
+  tabs: new Map<string, Tab>(),
   ui: {
     activityBar: "files",
   },
-});
+}) as unknown as Workspace;
 
 export const activeTab = computed(() =>
   workspace.activeTabId ? (workspace.tabs.get(workspace.activeTabId) ?? null) : null,
-) as unknown as import("@vue/reactivity").ComputedRef<Tab | null>;
+) as unknown as ComputedRef<Tab | null>;
 
 /**
  * Open a new tab and make it active.
@@ -83,12 +93,14 @@ export function openTab(opts: {
  */
 export function closeTab(tabId: string) {
   const tab = workspace.tabs.get(tabId);
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   disposeTab(tab);
   workspace.tabs.delete(tabId);
   workspace.tabOrder = workspace.tabOrder.filter((id) => id !== tabId);
   if (workspace.activeTabId === tabId) {
-    workspace.activeTabId = workspace.tabOrder[workspace.tabOrder.length - 1] || null;
+    workspace.activeTabId = workspace.tabOrder.at(-1) || null;
   }
 }
 
@@ -132,7 +144,9 @@ export function replaceAllTabs(newTabOpts: {
   workspace.tabOrder = [newTab.id];
 
   for (const id of oldIds) {
-    if (id === newTab.id) continue;
+    if (id === newTab.id) {
+      continue;
+    }
     workspace.tabs.delete(id);
   }
   for (const tab of oldTabs) {
@@ -148,7 +162,9 @@ export function replaceAllTabs(newTabOpts: {
  * @param {string} tabId
  */
 export function activateTab(tabId: string) {
-  if (workspace.tabs.has(tabId)) workspace.activeTabId = tabId;
+  if (workspace.tabs.has(tabId)) {
+    workspace.activeTabId = tabId;
+  }
 }
 
 /**
@@ -161,11 +177,15 @@ export function activateTab(tabId: string) {
  */
 export function renameTab(oldId: string, newId: string, newDocumentPath: string) {
   const tab = workspace.tabs.get(oldId);
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   tab.id = newId;
   tab.documentPath = newDocumentPath;
   workspace.tabs.delete(oldId);
   workspace.tabs.set(newId, tab);
   workspace.tabOrder = workspace.tabOrder.map((id) => (id === oldId ? newId : id));
-  if (workspace.activeTabId === oldId) workspace.activeTabId = newId;
+  if (workspace.activeTabId === oldId) {
+    workspace.activeTabId = newId;
+  }
 }