@jxsuite/studio 0.28.4 → 0.29.0

package/src/platforms/devserver.ts

@@ -8,6 +8,26 @@
  * See spec/desktop.md §8 for the full specification.
  */
 
+import type { ProjectConfig } from "@jxsuite/schema/types";
+import type { DirEntry } from "../types";
+
+/** A directory entry from the server, tolerating extra wire fields. */
+type WireDirEntry = DirEntry & Record<string, unknown>;
+
+/** Parse a fetch Response body as JSON, asserting the expected shape at the boundary. */
+async function readJson<T>(res: Response): Promise<T> {
+  return (await res.json()) as T;
+}
+
+interface ErrorBody {
+  error?: string;
+}
+
+interface SiteEntry {
+  config: unknown;
+  path: string;
+}
+
 /**
  * Create a DevServerPlatform instance.
  *
@@ -58,7 +78,7 @@ export function createDevServerPlatform() {
     set projectRoot(v) {
       _projectRoot = v || "";
       if (_projectRoot) {
-        this.activate(_projectRoot);
+        void this.activate(_projectRoot);
       }
     },
 
@@ -109,19 +129,16 @@ export function createDevServerPlatform() {
       }
 
       const file = await siteHandle.getFile();
-      const config = JSON.parse(await file.text());
+      const config = JSON.parse(await file.text()) as ProjectConfig;
 
       // Resolve server-relative path by matching against known sites
       const sitesRes = await fetch("/__studio/sites");
       if (!sitesRes.ok) {
         throw new Error("Failed to fetch site list from server");
       }
-      const sites = await sitesRes.json();
+      const sites = await readJson<SiteEntry[]>(sitesRes);
       const match = sites.find(
-        /** @param {{ config: unknown; path: string }} s */ (s: {
-          config: unknown;
-          path: string;
-        }) => JSON.stringify(s.config) === JSON.stringify(config),
+        (s: SiteEntry) => JSON.stringify(s.config) === JSON.stringify(config),
       );
 
       if (!match) {
@@ -132,7 +149,7 @@ export function createDevServerPlatform() {
         if (!findRes.ok) {
           throw new Error("Could not locate project on disk");
         }
-        const found = await findRes.json();
+        const found = await readJson<{ path?: string }>(findRes);
         if (!found.path) {
           throw new Error(`Could not find project directory "${dirHandle.name}"`);
         }
@@ -147,7 +164,7 @@ export function createDevServerPlatform() {
       return {
         config,
         handle: {
-          name: config.name || _projectRoot.split("/").pop(),
+          name: config.name || _projectRoot.split("/").pop()!,
           projectConfig: config,
           root: _projectRoot,
         },
@@ -164,8 +181,17 @@ export function createDevServerPlatform() {
           fetch("/__studio/project"),
           fetch("/__studio/project-info?dir=."),
         ]);
-        const meta = projectRes.ok ? await projectRes.json() : { name: "project", root: "." };
-        const info = infoRes.ok ? await infoRes.json() : { isSiteProject: false };
+        const meta = projectRes.ok
+          ? await readJson<{ name: string; root: string }>(projectRes)
+          : { name: "project", root: "." };
+        const info = infoRes.ok
+          ? await readJson<{
+              isSiteProject: boolean;
+              projectConfig?: ProjectConfig | null;
+              directories?: string[];
+              [key: string]: unknown;
+            }>(infoRes)
+          : { isSiteProject: false };
         return { info, meta };
       } catch {
         return null;
@@ -196,7 +222,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const data = await res.json();
+        const data = await readJson<ErrorBody>(res);
         throw new Error(data.error || "Failed to create project");
       }
       return await res.json();
@@ -210,7 +236,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Failed to list directory: ${dir}`);
       }
-      const entries = await res.json();
+      const entries = await readJson<WireDirEntry[]>(res);
       for (const e of entries) {
         e.path = stripRoot(e.path);
       }
@@ -223,7 +249,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Failed to read file: ${path}`);
       }
-      const data = await res.json();
+      const data = await readJson<{ content: string }>(res);
       return data.content;
     },
 
@@ -392,7 +418,7 @@ export function createDevServerPlatform() {
           method: "POST",
         });
         if (res.ok) {
-          const body = await res.json();
+          const body = await readJson<{ path?: string }>(res);
           return body.path || null;
         }
       } catch {}
@@ -412,7 +438,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         return [];
       }
-      const entries = await res.json();
+      const entries = await readJson<WireDirEntry[]>(res);
       for (const e of entries) {
         e.path = stripRoot(e.path);
       }
@@ -427,7 +453,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         return [];
       }
-      const body = await res.json();
+      const body = await readJson<{ formats?: unknown[] }>(res);
       return body.formats ?? [];
     },
 
@@ -442,7 +468,7 @@ export function createDevServerPlatform() {
         headers: { "Content-Type": "application/json" },
         method: "POST",
       });
-      const data = await res.json();
+      const data = await readJson<{ error?: string; result?: unknown }>(res);
       if (!res.ok) {
         throw new Error(data.error || "Format action failed");
       }
@@ -468,7 +494,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         return null;
       }
-      const { schema } = await res.json();
+      const { schema } = await readJson<{ schema: unknown }>(res);
       return schema;
     },
 
@@ -508,7 +534,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -522,7 +548,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -536,7 +562,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -550,7 +576,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -559,7 +585,7 @@ export function createDevServerPlatform() {
     async gitPull() {
       const res = await fetch("/__studio/git/pull", { method: "POST" });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -568,7 +594,7 @@ export function createDevServerPlatform() {
     async gitFetch() {
       const res = await fetch("/__studio/git/fetch", { method: "POST" });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -582,7 +608,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -596,7 +622,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -621,7 +647,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(await res.text());
       }
-      const data = await res.json();
+      const data = await readJson<{ content: string }>(res);
       return data.content;
     },
 
@@ -633,7 +659,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -647,7 +673,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -656,7 +682,7 @@ export function createDevServerPlatform() {
     async gitInit() {
       const res = await fetch("/__studio/git/init", { method: "POST" });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
     },
@@ -672,7 +698,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
     },
@@ -692,7 +718,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -706,7 +732,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();

package/src/reactivity.ts

@@ -26,3 +26,5 @@ export {
   isReactive,
   isRef,
 } from "@vue/reactivity";
+
+export type { EffectScope } from "@vue/reactivity";

package/src/services/cem-export.ts

@@ -2,11 +2,11 @@
 import type { CemParameter, JxMutableNode, JxStateObject } from "@jxsuite/schema/types";
 import { isFunctionDef, isJsonObject } from "@jxsuite/schema/guards";
 
-/** Collect slot elements from the document tree. */
+/** Collect slot elements from the document tree. Whitespace-only names count as unnamed. */
 export function collectSlots(node?: JxMutableNode | null, slots: string[] = []) {
   if (node?.tagName === "slot") {
     const name = node.attributes?.name;
-    slots.push(typeof name === "string" ? name : "");
+    slots.push(typeof name === "string" ? name.trim() : "");
   }
   if (Array.isArray(node?.children)) {
     for (const c of node.children) {
@@ -16,6 +16,27 @@ export function collectSlots(node?: JxMutableNode | null, slots: string[] = [])
   return slots;
 }
 
+/**
+ * Validate slot usage in a component definition. Returns a warning message or null when valid. Only
+ * static children are walked — slots inside $switch cases are mutually exclusive branches and are
+ * not counted (v1 limitation).
+ */
+export function validateComponentSlots(doc: JxMutableNode): string | null {
+  const names = collectSlots(doc);
+  const unnamed = names.filter((n) => n === "").length;
+  if (unnamed > 1) {
+    return `Component has ${unnamed} unnamed <slot> elements — only one default slot is allowed. Give extra slots a name attribute.`;
+  }
+  const seen = new Set<string>();
+  for (const n of names) {
+    if (n && seen.has(n)) {
+      return `Duplicate slot name "${n}" — slot names must be unique within a component.`;
+    }
+    seen.add(n);
+  }
+  return null;
+}
+
 /**
  * Generate and download a CEM 2.1.0 manifest for the current document.
  *

package/src/services/code-services.ts

@@ -43,8 +43,18 @@ export async function locateDocument(name: string) {
   return platform.locateFile(name);
 }
 
+/** Schema returned by a plugin's `$prototype` module (loose superset used across panels). */
+export interface PluginSchema {
+  type?: string;
+  description?: string;
+  properties?: Record<string, unknown>;
+  required?: string[];
+  returns?: { type?: string };
+  [key: string]: unknown;
+}
+
 /** Cache of plugin schemas keyed by "$src::$prototype". */
-export const pluginSchemaCache = new Map();
+export const pluginSchemaCache = new Map<string, PluginSchema | null>();
 
 /**
  * Fetch and cache the schema for a $prototype module via the server. Works for both external
@@ -77,7 +87,11 @@ export async function fetchPluginSchema(
     }
     const base =
       !importedPath && state.documentPath ? `${location.origin}/${state.documentPath}` : undefined;
-    const schema = await platform.fetchPluginSchema(src, def.$prototype, base);
+    const schema = (await platform.fetchPluginSchema(
+      src,
+      def.$prototype,
+      base,
+    )) as PluginSchema | null;
     pluginSchemaCache.set(cacheKey, schema);
     return schema;
   } catch {

package/src/services/monaco-setup.ts

@@ -18,11 +18,12 @@ const WORKER_PATHS: Record<string, string> = {
 
 self.MonacoEnvironment = {
   getWorker(_, label: string) {
-    const path = WORKER_PATHS[label] || WORKER_PATHS.editorWorkerService;
+    const path = WORKER_PATHS[label] || WORKER_PATHS.editorWorkerService!;
     return new Worker(path, { type: "module" });
   },
 };
 
+// oxlint-disable-next-line typescript/no-unsafe-call, typescript/no-unsafe-member-access -- jsonDefaults is imported from Monaco's untyped ESM contribution (see @ts-expect-error above); no type declarations exist for this named export
 jsonDefaults.setDiagnosticsOptions({
   allowComments: false,
   schemas: [

package/src/settings/content-types-editor.ts

@@ -80,7 +80,7 @@ function handleNewContentType(rerender: () => void) {
   rerender();
 
   // Persist in background
-  saveProjectConfig().then(async () => {
+  void saveProjectConfig().then(async () => {
     const platform = getPlatform();
     await platform.writeFile(`content/${slug}/.gitkeep`, "");
   });
@@ -116,7 +116,7 @@ function handleAddField(rerender: () => void) {
   showAddField = false;
   newFieldState = { format: "", name: "", required: false, type: "string" };
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -135,7 +135,7 @@ function handleDeleteField(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -159,7 +159,7 @@ function handleToggleRequired(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -185,7 +185,7 @@ function handleRenameField(oldName: string, newName: string, rerender: () => voi
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -205,7 +205,7 @@ function handleChangeType(fieldName: string, newType: string, rerender: () => vo
       : undefined;
   schema.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -223,7 +223,7 @@ function handleChangeFormat(fieldName: string, format: string, rerender: () => v
   const type = prop.type || "string";
   schema.properties[fieldName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -239,7 +239,7 @@ function handleChangeRefTarget(fieldName: string, target: string, rerender: () =
 
   schema.properties[fieldName] = { $ref: `#/contentTypes/${target}` };
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Nested field handlers ───────────────────────────────────────────────────
@@ -280,7 +280,7 @@ function handleAddNestedField(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -301,7 +301,7 @@ function handleDeleteNested(parentName: string, childName: string, rerender: ()
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -327,7 +327,7 @@ function handleToggleNestedRequired(parentName: string, childName: string, reren
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -360,7 +360,7 @@ function handleRenameNested(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -387,7 +387,7 @@ function handleChangeNestedType(
       : undefined;
   parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -412,7 +412,7 @@ function handleChangeNestedFormat(
   const type = prop.type || "string";
   parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /** @param {() => void} rerender */
@@ -429,7 +429,7 @@ function handleDeleteContentType(rerender: () => void) {
   selectedContentType = null;
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Render ───────────────────────────────────────────────────────────────────
@@ -508,7 +508,7 @@ export function renderContentTypesEditor(container: HTMLElement) {
   if (!selectedContentType || !contentTypes[selectedContentType]) {
     editorTpl = html`<div class="settings-empty-state">Select or create a content type</div>`;
   } else {
-    const col = contentTypes[selectedContentType];
+    const col = contentTypes[selectedContentType]!;
     const schema = (col.schema || {}) as ContentTypeSchema;
     const properties = schema.properties || {};
     const required = schema.required || [];

package/src/settings/css-vars-editor.ts

@@ -53,7 +53,7 @@ export function renderCssVarsEditor(container: HTMLElement) {
   const mediaNames = media ? Object.keys(media).filter((m) => m !== "--") : [];
 
   const save = () => {
-    updateSiteConfig({ style: { ...rootStyle } });
+    void updateSiteConfig({ style: { ...rootStyle } });
   };
 
   const updateVar = (name: string, val: string) => {
@@ -297,7 +297,7 @@ function renderMediaOverrides(varName: string, rootStyle: JxStyle, mediaNames: s
                 (rootStyle[`@${o.mediaName}`] as Record<string, unknown>)[varName] = (
                   e.target as HTMLInputElement
                 ).value;
-                updateSiteConfig({ style: { ...rootStyle } });
+                void updateSiteConfig({ style: { ...rootStyle } });
               }}
               style="max-width:120px"
             ></sp-textfield>

package/src/settings/defs-editor.ts

@@ -73,7 +73,7 @@ function handleNewDef(rerender: () => void) {
   showNewDef = false;
   newDefName = "";
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /** @param {() => void} rerender */
@@ -105,7 +105,7 @@ function handleAddField(rerender: () => void) {
   showAddField = false;
   newFieldState = { format: "", name: "", required: false, type: "string" };
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -124,7 +124,7 @@ function handleDeleteField(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -148,7 +148,7 @@ function handleToggleRequired(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -173,7 +173,7 @@ function handleRenameField(oldName: string, newName: string, rerender: () => voi
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -193,7 +193,7 @@ function handleChangeType(fieldName: string, newType: string, rerender: () => vo
       : undefined;
   def.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -211,7 +211,7 @@ function handleChangeFormat(fieldName: string, format: string, rerender: () => v
   const type = prop.type || "string";
   def.properties[fieldName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Nested field handlers ───────────────────────────────────────────────────
@@ -247,7 +247,7 @@ function handleAddNestedField(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -268,7 +268,7 @@ function handleDeleteNested(parentName: string, childName: string, rerender: ()
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -294,7 +294,7 @@ function handleToggleNestedRequired(parentName: string, childName: string, reren
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -326,7 +326,7 @@ function handleRenameNested(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -353,7 +353,7 @@ function handleChangeNestedType(
       : undefined;
   parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -378,7 +378,7 @@ function handleChangeNestedFormat(
   const type = prop.type || "string";
   parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /** @param {() => void} rerender */
@@ -395,7 +395,7 @@ function handleDeleteDef(rerender: () => void) {
   selectedDef = null;
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Render ───────────────────────────────────────────────────────────────────