@jxsuite/studio 0.28.2 → 0.28.4

package/src/format/constraints.ts

@@ -14,42 +14,52 @@ export interface NestingValidator {
   blockTags: ReadonlySet<string>;
   inlineTags: ReadonlySet<string>;
   allTags: ReadonlySet<string>;
-  isVoid(tag: string): boolean;
-  isTextOnly(tag: string): boolean;
+  isVoid: (tag: string) => boolean;
+  isTextOnly: (tag: string) => boolean;
   /** Whether childTag may appear inside parentTag ("_root" for the document root). */
-  isValidChild(parentTag: string, childTag: string): boolean;
+  isValidChild: (parentTag: string, childTag: string) => boolean;
 }
 
 /** Build a nesting validator from a format's `$studio.elements` declaration. */
-export function createNestingValidator(elements: ElementsHints | undefined): NestingValidator {
-  const blockTags = new Set(elements?.block ?? []);
-  const inlineTags = new Set(elements?.inline ?? []);
+export function createNestingValidator(elements?: ElementsHints): NestingValidator {
+  const blockTags = new Set(elements?.block);
+  const inlineTags = new Set(elements?.inline);
   const allTags = new Set([...blockTags, ...inlineTags]);
-  const voidTags = new Set(elements?.void ?? []);
-  const textOnly = new Set(elements?.textOnly ?? []);
+  const voidTags = new Set(elements?.void);
+  const textOnly = new Set(elements?.textOnly);
   const nesting = elements?.nesting ?? {};
 
   return {
+    allTags,
     blockTags,
     inlineTags,
-    allTags,
-    isVoid: (tag) => voidTags.has(tag),
     isTextOnly: (tag) => textOnly.has(tag),
     isValidChild(parentTag, childTag) {
       const rule = nesting[parentTag];
-      if (!rule) return true; // unknown parents (directive components) allow anything
+      if (!rule) {
+        return true;
+      } // Unknown parents (directive components) allow anything
 
-      if (rule.only) return rule.only.includes(childTag);
+      if (rule.only) {
+        return rule.only.includes(childTag);
+      }
 
       const isBlock = blockTags.has(childTag);
       const isInline = inlineTags.has(childTag);
       const isDirective = !allTags.has(childTag);
 
-      if (isBlock && rule.block) return true;
-      if (isInline && rule.inline) return true;
-      if (isDirective && rule.directive) return true;
+      if (isBlock && rule.block) {
+        return true;
+      }
+      if (isInline && rule.inline) {
+        return true;
+      }
+      if (isDirective && rule.directive) {
+        return true;
+      }
 
       return false;
     },
+    isVoid: (tag) => voidTags.has(tag),
   };
 }

package/src/format/format-host.ts

@@ -95,15 +95,30 @@ export function formatByExtension(ext: string, capability?: string): StudioForma
 
 /** Look up a format by its import name. */
 export function formatByName(name: string | null | undefined): StudioFormat | undefined {
-  if (!name) return undefined;
+  if (!name) {
+    return undefined;
+  }
   return _formats.find((f) => f.name === name);
 }
 
+/** Error for opening a non-JSON file when no imported format class claims its extension. */
+export function noFormatError(path: string): Error {
+  return new Error(
+    `No format class imported for "${path}" — add one to project.json imports ` +
+      `(e.g. "Markdown": "@jxsuite/parser/Markdown.class.json") and make sure the ` +
+      `project's dependencies are installed`,
+  );
+}
+
 /** The format claiming a file path's extension, if any. */
 export function formatForPath(path: string | null | undefined): StudioFormat | undefined {
-  if (!path) return undefined;
+  if (!path) {
+    return undefined;
+  }
   const dot = path.lastIndexOf(".");
-  if (dot === -1) return undefined;
+  if (dot === -1) {
+    return undefined;
+  }
   return formatByExtension(path.slice(dot));
 }
 
@@ -111,8 +126,12 @@ export function formatForPath(path: string | null | undefined): StudioFormat | u
 export function documentExtensions(kind?: string): string[] {
   const exts = new Set<string>();
   for (const f of _formats) {
-    if (kind && !f.documentKinds.includes(kind)) continue;
-    for (const e of f.extensions) exts.add(e);
+    if (kind && !f.documentKinds.includes(kind)) {
+      continue;
+    }
+    for (const e of f.extensions) {
+      exts.add(e);
+    }
   }
   exts.delete(".json");
   return [...exts];
@@ -140,10 +159,10 @@ export async function formatParse(
   options?: Record<string, unknown>,
 ): Promise<JxMutableNode> {
   return (await formatAction({
-    format: name,
     action: "parse",
-    source,
+    format: name,
     options,
+    source,
   })) as JxMutableNode;
 }
 
@@ -154,9 +173,9 @@ export async function formatSerialize(
   options?: Record<string, unknown>,
 ): Promise<string> {
   return (await formatAction({
-    format: name,
     action: "serialize",
     doc,
+    format: name,
     options,
   })) as string;
 }
@@ -190,13 +209,17 @@ export function splitFormatDocument(format: StudioFormat | undefined, doc: JxMut
 
   // Content document — children form the root-level body; other keys are frontmatter
   const children = (doc.children as unknown[]) ?? [];
-  if (children.length === 0) children.push({ tagName: "p", children: [] });
+  if (children.length === 0) {
+    children.push({ children: [], tagName: "p" });
+  }
 
   const documentKeys = new Set(["state", "imports"]);
   const contentDoc: Record<string, unknown> = { children };
   const frontmatter: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(doc)) {
-    if (key === "children") continue;
+    if (key === "children") {
+      continue;
+    }
     if (documentKeys.has(key)) {
       contentDoc[key] = value;
     } else {

package/src/github/github-auth.ts

@@ -28,18 +28,22 @@ export function clearGithubToken() {
  */
 export async function authenticateGithub() {
   const existing = getGithubToken();
-  if (existing) return existing;
+  if (existing) {
+    return existing;
+  }
 
   const codeRes = await fetch("https://github.com/login/device/code", {
-    method: "POST",
+    body: JSON.stringify({ client_id: CLIENT_ID, scope: "repo" }),
     headers: {
-      "Content-Type": "application/json",
       Accept: "application/json",
+      "Content-Type": "application/json",
     },
-    body: JSON.stringify({ client_id: CLIENT_ID, scope: "repo" }),
+    method: "POST",
   });
 
-  if (!codeRes.ok) throw new Error("Failed to initiate GitHub device flow");
+  if (!codeRes.ok) {
+    throw new Error("Failed to initiate GitHub device flow");
+  }
   const codeData = await codeRes.json();
 
   const { device_code, user_code, verification_uri, interval = 5 } = codeData;
@@ -49,19 +53,21 @@ export async function authenticateGithub() {
     let pollTimer: ReturnType<typeof setTimeout> | null = null;
 
     const poll = async () => {
-      if (cancelled) return;
+      if (cancelled) {
+        return;
+      }
       try {
         const tokenRes = await fetch("https://github.com/login/oauth/access_token", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-          },
           body: JSON.stringify({
             client_id: CLIENT_ID,
             device_code,
             grant_type: "urn:ietf:params:oauth:grant-type:device_code",
           }),
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          method: "POST",
         });
         const tokenData = await tokenRes.json();
 
@@ -81,7 +87,7 @@ export async function authenticateGithub() {
           return;
         }
 
-        // expired_token or access_denied
+        // Expired_token or access_denied
         done(null);
       } catch {
         pollTimer = setTimeout(poll, interval * 1000);
@@ -97,12 +103,16 @@ export async function authenticateGithub() {
         cancel-label="Cancel"
         @cancel=${() => {
           cancelled = true;
-          if (pollTimer) clearTimeout(pollTimer);
+          if (pollTimer) {
+            clearTimeout(pollTimer);
+          }
           done(null);
         }}
         @close=${() => {
           cancelled = true;
-          if (pollTimer) clearTimeout(pollTimer);
+          if (pollTimer) {
+            clearTimeout(pollTimer);
+          }
           done(null);
         }}
       >

package/src/github/github-publish.ts

@@ -2,11 +2,11 @@
 /** Publish a local project to GitHub — creates a new repo and pushes. */
 
 import { html } from "lit-html";
+import { errorMessage } from "@jxsuite/schema/parse";
 import { ref } from "lit-html/directives/ref.js";
 import { showDialog } from "../ui/layers";
 import { authenticateGithub } from "./github-auth";
 import { getPlatform } from "../platform";
-import { refreshGitStatus } from "../panels/git-panel";
 import { statusMessage } from "../panels/statusbar";
 
 /**
@@ -18,7 +18,9 @@ import { statusMessage } from "../panels/statusbar";
  */
 export async function publishToGithub({ projectName }: { projectName: string }) {
   const token = await authenticateGithub();
-  if (!token) return false;
+  if (!token) {
+    return false;
+  }
 
   const repoOpts = await showDialog<{
     name: string;
@@ -37,9 +39,9 @@ export async function publishToGithub({ projectName }: { projectName: string })
         cancel-label="Cancel"
         @confirm=${() => {
           done({
-            name: _nameInput?.value || projectName,
             description: _descInput?.value || "",
             isPrivate: _privateToggle?.checked ?? true,
+            name: _nameInput?.value || projectName,
           });
         }}
         @cancel=${() => done(null)}
@@ -81,23 +83,25 @@ export async function publishToGithub({ projectName }: { projectName: string })
     `;
   });
 
-  if (!repoOpts) return false;
+  if (!repoOpts) {
+    return false;
+  }
 
   statusMessage("Creating GitHub repository…");
 
   const createRes = await fetch("https://api.github.com/user/repos", {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${token}`,
-      Accept: "application/vnd.github+json",
-      "Content-Type": "application/json",
-    },
     body: JSON.stringify({
-      name: repoOpts.name,
+      auto_init: false,
       description: repoOpts.description,
+      name: repoOpts.name,
       private: repoOpts.isPrivate,
-      auto_init: false,
     }),
+    headers: {
+      Accept: "application/vnd.github+json",
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    method: "POST",
   });
 
   if (!createRes.ok) {
@@ -117,11 +121,13 @@ export async function publishToGithub({ projectName }: { projectName: string })
   statusMessage("Pushing to GitHub…");
   try {
     await platform.gitPush({ setUpstream: true });
-  } catch (e) {
-    statusMessage(`Push failed: ${(e as Error).message}`);
+  } catch (error) {
+    statusMessage(`Push failed: ${errorMessage(error)}`);
     return false;
   }
 
+  // Lazy import breaks the github-publish ↔ git-panel module cycle
+  const { refreshGitStatus } = await import("../panels/git-panel");
   await refreshGitStatus();
   statusMessage(`Published to GitHub: ${repo.html_url}`);
   return true;

package/src/new-project/new-project-modal.ts

@@ -5,6 +5,7 @@
  */
 
 import { html } from "lit-html";
+import { errorMessage } from "@jxsuite/schema/parse";
 import { openModal } from "../ui/layers";
 import { getPlatform } from "../platform";
 import type { ProjectConfig } from "@jxsuite/schema/types";
@@ -21,16 +22,16 @@ let _handle: ReturnType<typeof openModal> | null = null;
  * }}
  */
 let _form = {
-  name: "",
-  description: "",
-  url: "",
   adapter: "static",
+  description: "",
   directory: "",
+  name: "",
+  url: "",
 };
 
-let _error: string = "";
+let _error = "";
 
-let _creating: boolean = false;
+let _creating = false;
 
 /** @type {((result: { root: string; config: object } | null) => void) | null} */
 let _resolve: ((result: { root: string; config: ProjectConfig } | null) => void) | null = null;
@@ -45,13 +46,15 @@ export function openNewProjectModal(): Promise<{
   root: string;
   config: ProjectConfig;
 } | null> {
-  if (_handle) return Promise.resolve(null);
+  if (_handle) {
+    return Promise.resolve(null);
+  }
   _form = {
-    name: "",
-    description: "",
-    url: "",
     adapter: "static",
+    description: "",
     directory: "",
+    name: "",
+    url: "",
   };
   _error = "";
   _creating = false;
@@ -63,7 +66,9 @@ export function openNewProjectModal(): Promise<{
 }
 
 export function closeNewProjectModal() {
-  if (!_handle) return;
+  if (!_handle) {
+    return;
+  }
   _handle.close();
   _handle = null;
   if (_resolve) {
@@ -83,10 +88,12 @@ function renderModal() {
       if (_dirDerived && field === "name") {
         _form.directory = _form.name
           .toLowerCase()
-          .replace(/[^a-z0-9]+/g, "-")
-          .replace(/^-|-$/g, "");
+          .replaceAll(/[^a-z0-9]+/g, "-")
+          .replaceAll(/^-|-$/g, "");
+      }
+      if (field === "directory") {
+        _dirDerived = false;
       }
-      if (field === "directory") _dirDerived = false;
       renderModal();
     };
 
@@ -104,8 +111,8 @@ function renderModal() {
     if (!_form.directory.trim()) {
       _form.directory = _form.name
         .toLowerCase()
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-|-$/g, "");
+        .replaceAll(/[^a-z0-9]+/g, "-")
+        .replaceAll(/^-|-$/g, "");
     }
 
     _creating = true;
@@ -124,9 +131,9 @@ function renderModal() {
         _resolve(result);
         _resolve = null;
       }
-    } catch (e) {
+    } catch (error) {
       _creating = false;
-      _error = (e as Error).message;
+      _error = errorMessage(error);
       renderModal();
     }
   };
@@ -136,7 +143,9 @@ function renderModal() {
     <div
       class="new-project-modal"
       @keydown=${(e: KeyboardEvent) => {
-        if (e.key === "Escape") closeNewProjectModal();
+        if (e.key === "Escape") {
+          closeNewProjectModal();
+        }
       }}
     >
       <div class="new-project-modal-header">

package/src/panels/activity-bar.ts

@@ -5,11 +5,13 @@ import { html, render as litRender, nothing } from "lit-html";
 import { activityBar, renderOnly } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import { view, applyPanelCollapse } from "../view";
+import { applyPanelCollapse, view } from "../view";
 import { openSettingsModal } from "../settings/settings-modal";
 import { refreshGitStatus } from "./git-panel";
+import type { EffectScope } from "@vue/reactivity";
+import type { TemplateResult } from "lit-html";
 
-let _scope: import("@vue/reactivity").EffectScope | null = null;
+let _scope: EffectScope | null = null;
 
 export function mount() {
   _scope = effectScope();
@@ -57,27 +59,27 @@ const gitBranchIcon = (s: string) => html`
  * @param {string} [size]
  */
 export function tabIcon(tag: string, size?: string) {
-  const m: Record<string, (s: string) => import("lit-html").TemplateResult> = {
-    "sp-icon-folder": (s: string) => html`<sp-icon-folder slot="icon" size=${s}></sp-icon-folder>`,
-    "sp-icon-layers": (s: string) => html`<sp-icon-layers slot="icon" size=${s}></sp-icon-layers>`,
-    "sp-icon-view-grid": (s: string) =>
-      html`<sp-icon-view-grid slot="icon" size=${s}></sp-icon-view-grid>`,
+  const m: Record<string, (s: string) => TemplateResult> = {
+    "sp-icon-artboard": (s: string) =>
+      html`<sp-icon-artboard slot="icon" size=${s}></sp-icon-artboard>`,
+    "sp-icon-box": (s: string) => html`<sp-icon-box slot="icon" size=${s}></sp-icon-box>`,
     "sp-icon-brackets": (s: string) =>
       html`<sp-icon-brackets slot="icon" size=${s}></sp-icon-brackets>`,
+    "sp-icon-brush": (s: string) => html`<sp-icon-brush slot="icon" size=${s}></sp-icon-brush>`,
+    "sp-icon-chat": (s: string) => html`<sp-icon-chat slot="icon" size=${s}></sp-icon-chat>`,
     "sp-icon-data": (s: string) => html`<sp-icon-data slot="icon" size=${s}></sp-icon-data>`,
-    "sp-icon-properties": (s: string) =>
-      html`<sp-icon-properties slot="icon" size=${s}></sp-icon-properties>`,
     "sp-icon-event": (s: string) => html`<sp-icon-event slot="icon" size=${s}></sp-icon-event>`,
-    "sp-icon-brush": (s: string) => html`<sp-icon-brush slot="icon" size=${s}></sp-icon-brush>`,
     "sp-icon-file-single-web-page": (s: string) =>
       html`<sp-icon-file-single-web-page slot="icon" size=${s}></sp-icon-file-single-web-page>`,
+    "sp-icon-folder": (s: string) => html`<sp-icon-folder slot="icon" size=${s}></sp-icon-folder>`,
+    "sp-icon-git-branch": gitBranchIcon,
+    "sp-icon-layers": (s: string) => html`<sp-icon-layers slot="icon" size=${s}></sp-icon-layers>`,
+    "sp-icon-properties": (s: string) =>
+      html`<sp-icon-properties slot="icon" size=${s}></sp-icon-properties>`,
     "sp-icon-view-all-tags": (s: string) =>
       html`<sp-icon-view-all-tags slot="icon" size=${s}></sp-icon-view-all-tags>`,
-    "sp-icon-artboard": (s: string) =>
-      html`<sp-icon-artboard slot="icon" size=${s}></sp-icon-artboard>`,
-    "sp-icon-chat": (s: string) => html`<sp-icon-chat slot="icon" size=${s}></sp-icon-chat>`,
-    "sp-icon-box": (s: string) => html`<sp-icon-box slot="icon" size=${s}></sp-icon-box>`,
-    "sp-icon-git-branch": gitBranchIcon,
+    "sp-icon-view-grid": (s: string) =>
+      html`<sp-icon-view-grid slot="icon" size=${s}></sp-icon-view-grid>`,
   };
   const fn = m[tag];
   return fn ? fn(size || "s") : nothing;
@@ -85,17 +87,17 @@ export function tabIcon(tag: string, size?: string) {
 
 export function renderActivityBar() {
   const tab = activeTab.value;
-  const leftTab = view.leftTab;
+  const { leftTab } = view;
   const gitFileCount = tab?.session.ui.gitStatus?.files?.length || 0;
   const tabs = [
-    { value: "files", icon: "sp-icon-folder", label: "Files" },
-    { value: "layers", icon: "sp-icon-layers", label: "Layers" },
-    { value: "imports", icon: "sp-icon-box", label: "Imports" },
-    { value: "blocks", icon: "sp-icon-view-grid", label: "Elements" },
-    { value: "state", icon: "sp-icon-brackets", label: "State" },
-    { value: "data", icon: "sp-icon-data", label: "Data" },
-    { value: "head", icon: "sp-icon-view-all-tags", label: "Document" },
-    { value: "git", icon: "sp-icon-git-branch", label: "Source Control" },
+    { icon: "sp-icon-folder", label: "Files", value: "files" },
+    { icon: "sp-icon-layers", label: "Layers", value: "layers" },
+    { icon: "sp-icon-box", label: "Imports", value: "imports" },
+    { icon: "sp-icon-view-grid", label: "Elements", value: "blocks" },
+    { icon: "sp-icon-brackets", label: "State", value: "state" },
+    { icon: "sp-icon-data", label: "Data", value: "data" },
+    { icon: "sp-icon-view-all-tags", label: "Document", value: "head" },
+    { icon: "sp-icon-git-branch", label: "Source Control", value: "git" },
   ];
   const tpl = html`
     <sp-tabs
@@ -107,14 +109,13 @@ export function renderActivityBar() {
         if (clicked === view.leftTab && !view.leftPanelCollapsed) {
           view.leftPanelCollapsed = true;
           applyPanelCollapse();
-          renderActivityBar();
         } else {
           view.leftTab = clicked;
           view.leftPanelCollapsed = false;
           applyPanelCollapse();
           renderOnly("leftPanel");
-          renderActivityBar();
         }
+        renderActivityBar();
       }}
     >
       ${tabs.map(