@jxsuite/studio 0.28.2 → 0.28.4

package/src/recent-projects.ts

@@ -20,8 +20,10 @@ const MAX_RECENT_FILES = 10;
 export function getRecentProjects() {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return [];
-    return (JSON.parse(raw) as RecentProject[]).sort((a, b) => b.timestamp - a.timestamp);
+    if (!raw) {
+      return [];
+    }
+    return (JSON.parse(raw) as RecentProject[]).toSorted((a, b) => b.timestamp - a.timestamp);
   } catch {
     return [];
   }
@@ -34,7 +36,9 @@ export function getRecentProjects() {
 export function addRecentProject(name: string, root: string) {
   const projects = getRecentProjects().filter((p) => p.root !== root);
   projects.unshift({ name, root, timestamp: Date.now() });
-  if (projects.length > MAX_RECENT) projects.length = MAX_RECENT;
+  if (projects.length > MAX_RECENT) {
+    projects.length = MAX_RECENT;
+  }
   localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
 }
 
@@ -46,8 +50,10 @@ export function clearRecentProjects() {
 export function getRecentFiles() {
   try {
     const raw = localStorage.getItem(FILES_STORAGE_KEY);
-    if (!raw) return [];
-    return (JSON.parse(raw) as RecentFile[]).sort((a, b) => b.timestamp - a.timestamp);
+    if (!raw) {
+      return [];
+    }
+    return (JSON.parse(raw) as RecentFile[]).toSorted((a, b) => b.timestamp - a.timestamp);
   } catch {
     return [];
   }
@@ -56,7 +62,9 @@ export function getRecentFiles() {
 /** @param {{ path: string; name: string }} file */
 export function trackRecentFile(file: { path: string; name: string }) {
   const recent = getRecentFiles().filter((f) => f.path !== file.path);
-  recent.unshift({ path: file.path, name: file.name, timestamp: Date.now() });
-  if (recent.length > MAX_RECENT_FILES) recent.length = MAX_RECENT_FILES;
+  recent.unshift({ name: file.name, path: file.path, timestamp: Date.now() });
+  if (recent.length > MAX_RECENT_FILES) {
+    recent.length = MAX_RECENT_FILES;
+  }
   localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(recent));
 }

package/src/resize-edges.ts

@@ -31,7 +31,9 @@ let mounted = false;
 
 export function mountResizeEdges() {
   const wc = g.__jxPlatform?.windowControls;
-  if (!wc || !wc.getFrame || mounted) return;
+  if (!wc || !wc.getFrame || mounted) {
+    return;
+  }
   mounted = true;
 
   const container = document.createElement("div");
@@ -41,10 +43,10 @@ export function mountResizeEdges() {
     const el = document.createElement("div");
     el.className = `resize-edge ${edge}`;
     el.addEventListener("mousedown", (e) => startResize(e, edge, wc));
-    container.appendChild(el);
+    container.append(el);
   }
 
-  document.body.appendChild(container);
+  document.body.append(container);
 }
 
 /**
@@ -88,7 +90,7 @@ async function startResize(
     }
     if (edge.includes("left")) {
       const newW = Math.max(MIN_WIDTH, width - dx);
-      x = x + (width - newW);
+      x += width - newW;
       width = newW;
     }
     if (edge.includes("bottom")) {
@@ -96,7 +98,7 @@ async function startResize(
     }
     if (edge.includes("top")) {
       const newH = Math.max(MIN_HEIGHT, height - dy);
-      y = y + (height - newH);
+      y += height - newH;
       height = newH;
     }
 

package/src/services/cem-export.ts

@@ -1,15 +1,18 @@
 /// <reference lib="dom" />
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { CemParameter, JxMutableNode, JxStateObject } from "@jxsuite/schema/types";
+import { isFunctionDef, isJsonObject } from "@jxsuite/schema/guards";
 
 /** Collect slot elements from the document tree. */
-export function collectSlots(node: JxMutableNode | null | undefined, slots: string[] = []) {
+export function collectSlots(node?: JxMutableNode | null, slots: string[] = []) {
   if (node?.tagName === "slot") {
-    slots.push(node.attributes?.name || "");
+    const name = node.attributes?.name;
+    slots.push(typeof name === "string" ? name : "");
+  }
+  if (Array.isArray(node?.children)) {
+    for (const c of node.children) {
+      collectSlots(typeof c === "string" ? undefined : c, slots);
+    }
   }
-  if (Array.isArray(node?.children))
-    node.children.forEach((c: JxMutableNode | string) =>
-      collectSlots(typeof c === "string" ? undefined : c, slots),
-    );
   return slots;
 }
 
@@ -19,7 +22,7 @@ export function collectSlots(node: JxMutableNode | null | undefined, slots: stri
  * @param {{ document: JxMutableNode }} S - Studio state
  * @param {{
  *   defCategory: (d: unknown) => string;
- *   normParam: (p: unknown) => unknown;
+ *   normParam: (p: string | CemParameter) => CemParameter;
  *   collectCssParts: (node: JxMutableNode) => { name: string }[];
  * }} helpers
  */
@@ -27,70 +30,80 @@ export function exportCemManifest(
   S: { document: JxMutableNode },
   helpers: {
     defCategory: (d: unknown) => string;
-    normParam: (p: unknown) => unknown;
+    normParam: (p: string | CemParameter) => CemParameter;
     collectCssParts: (node: JxMutableNode) => { name: string }[];
   },
 ) {
   const { defCategory, normParam, collectCssParts } = helpers;
   const doc = S.document;
-  const tagName = doc.tagName;
-  if (!tagName || !tagName.includes("-")) return;
+  const { tagName } = doc;
+  if (!tagName || !tagName.includes("-")) {
+    return;
+  }
 
   const state = doc.state || {};
-  const members = [];
-  const attributes = [];
-  const events = [];
-  const seenEvents = new Set();
+  const members: Record<string, unknown>[] = [];
+  const attributes: Record<string, unknown>[] = [];
+  const events: Record<string, unknown>[] = [];
+  const seenEvents = new Set<string>();
 
   for (const [key, d] of Object.entries(state)) {
-    if (key.startsWith("#")) continue; // private
+    if (key.startsWith("#")) {
+      continue;
+    } // Private
 
     const cat = defCategory(d);
 
     if (cat === "function") {
-      members.push({
-        kind: "method",
-        name: key,
-        ...(d.description ? { description: d.description } : {}),
-        ...(d.parameters ? { parameters: d.parameters.map(normParam) } : {}),
-        ...(d.deprecated
-          ? {
-              deprecated: typeof d.deprecated === "string" ? d.deprecated : true,
-            }
-          : {}),
-      });
-      // Collect emits
-      if (Array.isArray(d.emits)) {
-        for (const ev of d.emits) {
+      if (isFunctionDef(d)) {
+        members.push({
+          kind: "method",
+          name: key,
+          ...(d.description ? { description: d.description } : {}),
+          ...(d.parameters ? { parameters: d.parameters.map(normParam) } : {}),
+          ...(d.deprecated
+            ? { deprecated: typeof d.deprecated === "string" ? d.deprecated : true }
+            : {}),
+        });
+        // Collect emits
+        for (const ev of d.emits ?? []) {
           if (ev.name && !seenEvents.has(ev.name)) {
             seenEvents.add(ev.name);
             events.push({
               name: ev.name,
-              ...(ev.type ? { type: ev.type } : {}),
+              ...(ev.type !== undefined ? { type: ev.type } : {}),
               ...(ev.description ? { description: ev.description } : {}),
             });
           }
         }
+      } else if (isJsonObject(d)) {
+        // Legacy $handler entry — emit a bare method member
+        const { description } = d;
+        members.push({
+          kind: "method",
+          name: key,
+          ...(typeof description === "string" ? { description } : {}),
+        });
       }
     } else if (cat === "state") {
+      // Naked primitive values carry no metadata; object defs are signals/type defs.
+      const def: JxStateObject | null = isJsonObject(d) ? (d as JxStateObject) : null;
       members.push({
         kind: "field",
         name: key,
-        ...(d.type ? { type: { text: d.type } } : {}),
-        ...(d.default !== undefined ? { default: String(d.default) } : {}),
-        ...(d.description ? { description: d.description } : {}),
-        ...(d.attribute ? { attribute: d.attribute } : {}),
-        ...(d.reflects ? { reflects: true } : {}),
-        ...(d.deprecated
-          ? {
-              deprecated: typeof d.deprecated === "string" ? d.deprecated : true,
-            }
+        ...(def?.type ? { type: { text: def.type } } : {}),
+        ...(def && def.default !== undefined ? { default: String(def.default) } : {}),
+        ...(def?.description ? { description: def.description } : {}),
+        ...(def?.attribute ? { attribute: def.attribute } : {}),
+        ...(def?.reflects ? { reflects: true } : {}),
+        ...(def?.deprecated
+          ? { deprecated: typeof def.deprecated === "string" ? def.deprecated : true }
           : {}),
       });
-      if (d.attribute) {
+      if (def?.attribute) {
         attributes.push({
-          name: d.attribute,
-          ...(d.type ? { type: { text: d.type } } : {}),
+          name: def.attribute,
+          ...(def.type ? { type: { text: def.type } } : {}),
           fieldName: key,
         });
       }
@@ -99,41 +112,44 @@ export function exportCemManifest(
 
   // Slots
   const slotNames = collectSlots(doc);
-  const slots = slotNames.map((name: string) => ({
-    name: name || "",
-    ...(name ? {} : { description: "Default slot" }),
-  }));
+  const slots = slotNames.map((name: string) => {
+    const slot: { name: string; description?: string } = { name: name || "" };
+    if (!name) {
+      slot.description = "Default slot";
+    }
+    return slot;
+  });
 
   // CSS custom properties
   const style = doc.style || {};
   const cssProperties = Object.entries(style)
     .filter(([k]) => k.startsWith("--"))
-    .map(([name, val]) => ({ name, default: String(val) }));
+    .map(([name, val]) => ({ default: String(val), name }));
 
   // CSS parts
   const cssParts = collectCssParts(doc).map((p) => ({ name: p.name }));
 
   const manifest = {
-    schemaVersion: "2.1.0",
     modules: [
       {
-        kind: "javascript-module",
-        path: "",
         declarations: [
           {
             kind: "class",
+            members,
             name: tagName,
             tagName,
-            members,
-            ...(attributes.length ? { attributes } : {}),
-            ...(events.length ? { events } : {}),
-            ...(slots.length ? { slots } : {}),
-            ...(cssProperties.length ? { cssProperties } : {}),
-            ...(cssParts.length ? { cssParts } : {}),
+            ...(attributes.length > 0 ? { attributes } : {}),
+            ...(events.length > 0 ? { events } : {}),
+            ...(slots.length > 0 ? { slots } : {}),
+            ...(cssProperties.length > 0 ? { cssProperties } : {}),
+            ...(cssParts.length > 0 ? { cssParts } : {}),
           },
         ],
+        kind: "javascript-module",
+        path: "",
       },
     ],
+    schemaVersion: "2.1.0",
   };
 
   const blob = new Blob([JSON.stringify(manifest, null, 2)], {

package/src/services/code-services.ts

@@ -1,11 +1,13 @@
 /** OXC code services (server-backed) */
 
 import { getPlatform } from "../platform";
+import { isJsonObject, paramNames } from "@jxsuite/schema/guards";
 import { projectState } from "../state";
 import { getNodeAtPath } from "../store";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import type { JxPath } from "../state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { JxFunctionDef, JxMutableNode } from "@jxsuite/schema/types";
+import type { editor } from "monaco-editor";
 
 export interface OxLintDiagnostic {
   severity: string;
@@ -22,7 +24,9 @@ export interface OxLintDiagnostic {
  */
 export async function codeService(action: string, payload: unknown) {
   const platform = getPlatform();
-  if (!platform.codeService) return null;
+  if (!platform.codeService) {
+    return null;
+  }
   return platform.codeService(action, payload);
 }
 
@@ -33,7 +37,9 @@ export async function codeService(action: string, payload: unknown) {
  */
 export async function locateDocument(name: string) {
   const platform = getPlatform();
-  if (!platform.locateFile) return null;
+  if (!platform.locateFile) {
+    return null;
+  }
   return platform.locateFile(name);
 }
 
@@ -55,9 +61,13 @@ export async function fetchPluginSchema(
     ? projectState?.projectConfig?.imports?.[def.$prototype]
     : null;
   const src = def.$src || importedPath;
-  if (!src || !def.$prototype) return null;
+  if (!src || !def.$prototype) {
+    return null;
+  }
   const cacheKey = `${src}::${def.$prototype}`;
-  if (pluginSchemaCache.has(cacheKey)) return pluginSchemaCache.get(cacheKey);
+  if (pluginSchemaCache.has(cacheKey)) {
+    return pluginSchemaCache.get(cacheKey);
+  }
 
   try {
     const platform = getPlatform();
@@ -81,34 +91,34 @@ export async function fetchPluginSchema(
  * @param {OxLintDiagnostic[]} diagnostics
  */
 export function setLintMarkers(
-  editor: import("monaco-editor").editor.IStandaloneCodeEditor,
+  editor: editor.IStandaloneCodeEditor,
   diagnostics: OxLintDiagnostic[],
 ) {
   const model = editor.getModel();
-  if (!model) return;
+  if (!model) {
+    return;
+  }
   const markers = diagnostics
     .map((d) => {
       const label = d.labels?.[0];
-      if (!label) return null;
+      if (!label) {
+        return null;
+      }
       const { line, column, length } = label.span;
       return {
+        code: d.url ? { target: monaco.Uri.parse(d.url), value: d.code } : d.code,
+        endColumn: column + (length || 1),
+        endLineNumber: line,
+        message: d.message + (d.help ? `\n${d.help}` : ""),
         severity:
           d.severity === "error" ? monaco.MarkerSeverity.Error : monaco.MarkerSeverity.Warning,
-        message: d.message + (d.help ? `\n${d.help}` : ""),
-        startLineNumber: line,
-        startColumn: column,
-        endLineNumber: line,
-        endColumn: column + (length || 1),
-        code: d.url ? { value: d.code, target: monaco.Uri.parse(d.url) } : d.code,
         source: "oxlint",
+        startColumn: column,
+        startLineNumber: line,
       };
     })
     .filter(Boolean);
-  monaco.editor.setModelMarkers(
-    model,
-    "oxlint",
-    markers as import("monaco-editor").editor.IMarkerData[],
-  );
+  monaco.editor.setModelMarkers(model, "oxlint", markers as editor.IMarkerData[]);
 }
 
 /**
@@ -118,15 +128,32 @@ export function setLintMarkers(
 export function getFunctionArgs(
   editing: { type: string; defName?: string; path?: JxPath; eventKey?: string },
   document: JxMutableNode | null | undefined,
-) {
+): string[] {
+  // Read parameters off any object-shaped def (covers legacy entries without $prototype).
+  const fromDef = (def: unknown): string[] | null => {
+    if (!isJsonObject(def)) {
+      return null;
+    }
+    const params = def.parameters;
+    if (!Array.isArray(params) || params.length === 0) {
+      return null;
+    }
+    return paramNames(params as JxFunctionDef["parameters"]);
+  };
   if (editing.type === "def") {
-    const defName = editing.defName;
-    return (defName && document?.state?.[defName]?.parameters) || ["state", "event"];
+    const args = editing.defName ? fromDef(document?.state?.[editing.defName]) : null;
+    if (args) {
+      return args;
+    }
   } else if (editing.type === "event") {
-    if (!document || !editing.path) return ["state", "event"];
+    if (!document || !editing.path) {
+      return ["state", "event"];
+    }
     const node = getNodeAtPath(document, editing.path);
-    const eventKey = editing.eventKey;
-    return (eventKey && node?.[eventKey]?.parameters) || ["state", "event"];
+    const args = node && editing.eventKey ? fromDef(node[editing.eventKey]) : null;
+    if (args) {
+      return args;
+    }
   }
   return ["state", "event"];
 }

package/src/services/monaco-setup.ts

@@ -10,10 +10,10 @@ import jxSchema from "@jxsuite/schema/schema.json";
 import projectSchema from "@jxsuite/schema/project-schema.json";
 
 const WORKER_PATHS: Record<string, string> = {
+  editorWorkerService: "/monaco-editor/esm/vs/editor/editor.worker.js",
+  javascript: "/monaco-editor/esm/vs/language/typescript/ts.worker.js",
   json: "/monaco-editor/esm/vs/language/json/json.worker.js",
   typescript: "/monaco-editor/esm/vs/language/typescript/ts.worker.js",
-  javascript: "/monaco-editor/esm/vs/language/typescript/ts.worker.js",
-  editorWorkerService: "/monaco-editor/esm/vs/editor/editor.worker.js",
 };
 
 self.MonacoEnvironment = {
@@ -24,11 +24,9 @@ self.MonacoEnvironment = {
 };
 
 jsonDefaults.setDiagnosticsOptions({
-  validate: true,
   allowComments: false,
   schemas: [
     {
-      uri: "https://jxsuite.com/schema/v1",
       fileMatch: [
         "pages/*.json",
         "pages/**/*.json",
@@ -40,11 +38,13 @@ jsonDefaults.setDiagnosticsOptions({
         "elements/**/*.json",
       ],
       schema: jxSchema,
+      uri: "https://jxsuite.com/schema/v1",
     },
     {
-      uri: "https://jxsuite.com/schema/project/v1",
       fileMatch: ["project.json"],
       schema: projectSchema,
+      uri: "https://jxsuite.com/schema/project/v1",
     },
   ],
+  validate: true,
 });