@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/tab-strip.ts

@@ -10,13 +10,14 @@ import { html, render as litRender, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { effect, effectScope } from "../reactivity";
-import { workspace, activateTab, closeTab } from "../workspace/workspace";
+import { activateTab, closeTab, workspace } from "../workspace/workspace";
 import type { Tab } from "../tabs/tab";
 import { showConfirmDialog } from "../ui/layers";
+import type { EffectScope } from "@vue/reactivity";
 
 let _host: HTMLElement | null = null;
 
-let _scope: import("@vue/reactivity").EffectScope | null = null;
+let _scope: EffectScope | null = null;
 
 /**
  * Mount the tab strip into the given host element.
@@ -46,9 +47,11 @@ export function unmount() {
 }
 
 function render() {
-  if (!_host) return;
+  if (!_host) {
+    return;
+  }
 
-  if (workspace.tabOrder.length < 1) {
+  if (workspace.tabOrder.length === 0) {
     litRender(nothing, _host);
     return;
   }
@@ -61,13 +64,15 @@ function render() {
           (id) => id,
           (id) => {
             const tab = workspace.tabs.get(id);
-            if (!tab) return nothing;
+            if (!tab) {
+              return nothing;
+            }
             const isActive = id === workspace.activeTabId;
             const isDirty = tab.doc.dirty;
             const label = tabLabel(tab);
             return html`
               <div
-                class=${classMap({ "tab-strip-tab": true, active: isActive })}
+                class=${classMap({ active: isActive, "tab-strip-tab": true })}
                 @click=${() => activateTab(id)}
                 @auxclick=${(e: MouseEvent) => {
                   if (e.button === 1) {
@@ -106,9 +111,11 @@ function render() {
  */
 function tabLabel(tab: Tab) {
   const path = tab.documentPath;
-  if (!path) return "Untitled";
+  if (!path) {
+    return "Untitled";
+  }
   const parts = path.split("/");
-  return parts[parts.length - 1];
+  return parts.at(-1);
 }
 
 /**
@@ -118,14 +125,18 @@ function tabLabel(tab: Tab) {
  */
 async function requestClose(id: string) {
   const tab = workspace.tabs.get(id);
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   if (tab.doc.dirty) {
     const confirmed = await showConfirmDialog(
       "Unsaved Changes",
       `"${tabLabel(tab)}" has unsaved changes. Close without saving?`,
       { confirmLabel: "Close", destructive: true },
     );
-    if (!confirmed) return;
+    if (!confirmed) {
+      return;
+    }
   }
   closeTab(id);
 }

package/src/panels/toolbar.ts

@@ -6,19 +6,21 @@
 
 import { html, render as litRender, nothing } from "lit-html";
 import { updateSession, updateUi } from "../store";
-import { undo as tabUndo, redo as tabRedo } from "../tabs/transact";
+import { redo as tabRedo, undo as tabUndo } from "../tabs/transact";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import type { DocumentStackEntry } from "../types";
 import { getEffectiveMedia } from "../site-context";
 import { mediaDisplayName } from "./shared";
-import { view, applyPanelCollapse } from "../view";
+import { applyPanelCollapse, view } from "../view";
 import { getRecentProjects } from "../recent-projects";
 import { openQuickSearch } from "./quick-search";
 import { getPlatform } from "../platform";
 import { refreshGitStatus } from "./git-panel";
 import { openBrowseModal } from "../browse/browse-modal";
 import { openNewProjectModal } from "../new-project/new-project-modal";
+import type { EffectScope } from "@vue/reactivity";
+import type { TemplateResult } from "lit-html";
 
 interface ToolbarCtx {
   navigateBack: () => void;
@@ -48,25 +50,25 @@ let _rootEl: HTMLElement | null = null;
 
 let _ctx: ToolbarCtx | null = null;
 
-let _scope: import("@vue/reactivity").EffectScope | null = null;
+let _scope: EffectScope | null = null;
 
 const toolbarIconMap = {
-  "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
-  "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
+  "sp-icon-artboard": html`<sp-icon-artboard slot="icon"></sp-icon-artboard>`,
   "sp-icon-back": html`<sp-icon-back slot="icon"></sp-icon-back>`,
-  "sp-icon-undo": html`<sp-icon-undo slot="icon"></sp-icon-undo>`,
-  "sp-icon-redo": html`<sp-icon-redo slot="icon"></sp-icon-redo>`,
-  "sp-icon-duplicate": html`<sp-icon-duplicate slot="icon"></sp-icon-duplicate>`,
+  "sp-icon-brush": html`<sp-icon-brush slot="icon"></sp-icon-brush>`,
+  "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
   "sp-icon-delete": html`<sp-icon-delete slot="icon"></sp-icon-delete>`,
+  "sp-icon-document": html`<sp-icon-document slot="icon"></sp-icon-document>`,
+  "sp-icon-duplicate": html`<sp-icon-duplicate slot="icon"></sp-icon-duplicate>`,
   "sp-icon-edit": html`<sp-icon-edit slot="icon"></sp-icon-edit>`,
-  "sp-icon-artboard": html`<sp-icon-artboard slot="icon"></sp-icon-artboard>`,
+  "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
+  "sp-icon-gears": html`<sp-icon-gears slot="icon"></sp-icon-gears>`,
   "sp-icon-preview": html`<sp-icon-preview slot="icon"></sp-icon-preview>`,
-  "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
-  "sp-icon-brush": html`<sp-icon-brush slot="icon"></sp-icon-brush>`,
+  "sp-icon-redo": html`<sp-icon-redo slot="icon"></sp-icon-redo>`,
+  "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
+  "sp-icon-undo": html`<sp-icon-undo slot="icon"></sp-icon-undo>`,
   "sp-icon-view-list": html`<sp-icon-view-list slot="icon"></sp-icon-view-list>`,
-  "sp-icon-gears": html`<sp-icon-gears slot="icon"></sp-icon-gears>`,
-  "sp-icon-document": html`<sp-icon-document slot="icon"></sp-icon-document>`,
-} as Record<string, import("lit-html").TemplateResult>;
+} as Record<string, TemplateResult>;
 
 /**
  * @param {string} label
@@ -128,11 +130,13 @@ export function unmount() {
 }
 
 export function render() {
-  if (!_rootEl || !_ctx) return;
+  if (!_rootEl || !_ctx) {
+    return;
+  }
   try {
     litRender(toolbarTemplate(), _rootEl);
-  } catch (e) {
-    console.error("toolbar render error:", e);
+  } catch (error) {
+    console.error("toolbar render error:", error);
   }
 }
 
@@ -163,7 +167,7 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
           }}
         >
           <sp-menu-item value="__new__">New Project…</sp-menu-item>
-          ${recentProjects.length
+          ${recentProjects.length > 0
             ? html`<sp-menu-divider></sp-menu-divider> ${recentProjects.map(
                   (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
                 )}`
@@ -269,19 +273,23 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
 }
 
 const modes = [
-  { key: "edit", label: "Edit", iconTag: "sp-icon-edit" },
-  { key: "design", label: "Design", iconTag: "sp-icon-artboard" },
-  { key: "preview", label: "Preview", iconTag: "sp-icon-preview" },
-  { key: "source", label: "Code", iconTag: "sp-icon-code" },
-  { key: "stylebook", label: "Stylebook", iconTag: "sp-icon-brush" },
+  { iconTag: "sp-icon-edit", key: "edit", label: "Edit" },
+  { iconTag: "sp-icon-artboard", key: "design", label: "Design" },
+  { iconTag: "sp-icon-preview", key: "preview", label: "Preview" },
+  { iconTag: "sp-icon-code", key: "source", label: "Code" },
+  { iconTag: "sp-icon-brush", key: "stylebook", label: "Stylebook" },
 ];
 
 function toolbarTemplate() {
   const tab = activeTab.value;
-  if (!_ctx) return html``;
+  if (!_ctx) {
+    return html``;
+  }
   const ctx = _ctx;
 
-  if (!tab) return minimalToolbarTemplate(ctx);
+  if (!tab) {
+    return minimalToolbarTemplate(ctx);
+  }
 
   const allowedModes = new Set(tab.capabilities.modes);
   const canUndo = tab.history.index > 0;
@@ -289,14 +297,14 @@ function toolbarTemplate() {
   const canSave = tab.doc.dirty;
 
   const S = {
-    document: tab.doc.document,
-    ui: tab.session.ui,
-    mode: tab.doc.mode,
-    selection: tab.session.selection,
     dirty: tab.doc.dirty,
+    document: tab.doc.document,
     documentPath: tab.documentPath,
-    fileHandle: tab.fileHandle,
     documentStack: tab.session.documentStack,
+    fileHandle: tab.fileHandle,
+    mode: tab.doc.mode,
+    selection: tab.session.selection,
+    ui: tab.session.ui,
   };
   const canvasMode = ctx.getCanvasMode();
   const hasStack = S.documentStack && S.documentStack.length > 0;
@@ -333,7 +341,7 @@ function toolbarTemplate() {
                   toggles
                   size="s"
                   title=${query}
-                  ?selected=${!!S.ui.featureToggles[name]}
+                  ?selected=${Boolean(S.ui.featureToggles[name])}
                   @click=${() => {
                     const newToggles = {
                       ...S.ui.featureToggles,
@@ -359,13 +367,15 @@ function toolbarTemplate() {
             ?selected=${canvasMode === m.key}
             ?disabled=${!allowedModes.has(m.key)}
             @click=${() => {
-              if (canvasMode === m.key) return;
-              if (!allowedModes.has(m.key)) return;
-              if (S.ui.editingFunction) {
-                if (view.functionEditor) {
-                  view.functionEditor.dispose();
-                  view.functionEditor = null;
-                }
+              if (canvasMode === m.key) {
+                return;
+              }
+              if (!allowedModes.has(m.key)) {
+                return;
+              }
+              if (S.ui.editingFunction && view.functionEditor) {
+                view.functionEditor.dispose();
+                view.functionEditor = null;
               }
               ctx.setCanvasMode(m.key);
               view.panX = 0;
@@ -374,7 +384,9 @@ function toolbarTemplate() {
               const uiPatch: { editingFunction: null; rightTab?: string } = {
                 editingFunction: null,
               };
-              if (m.key === "stylebook") uiPatch.rightTab = "style";
+              if (m.key === "stylebook") {
+                uiPatch.rightTab = "style";
+              }
               updateSession({ ui: uiPatch });
               ctx.renderCanvas();
               ctx.safeRenderRightPanel();
@@ -483,7 +495,7 @@ function toolbarTemplate() {
           }}
         >
           <sp-menu-item value="__new__">New Project…</sp-menu-item>
-          ${recentProjects.length
+          ${recentProjects.length > 0
             ? html`<sp-menu-divider></sp-menu-divider> ${recentProjects.map(
                   (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
                 )}`

package/src/panels/welcome-screen.ts

@@ -113,7 +113,7 @@ export function renderWelcome(host: HTMLElement) {
 function shortenPath(path: string) {
   if (path.startsWith("/home/")) {
     const parts = path.split("/");
-    return "~/" + parts.slice(3).join("/");
+    return `~/${parts.slice(3).join("/")}`;
   }
   return path;
 }

package/src/platform.ts

@@ -23,8 +23,9 @@ export function registerPlatform(platform: StudioPlatform) {
 
 /** @returns {StudioPlatform} */
 export function getPlatform() {
-  if (!g.__jxPlatform)
+  if (!g.__jxPlatform) {
     throw new Error("No platform registered. Call registerPlatform() before starting Studio.");
+  }
   return g.__jxPlatform;
 }