@jxsuite/studio 0.19.0 → 0.20.0

package/src/panels/editors.js

@@ -3,6 +3,8 @@
  * completion provider for state scope variables.
  */
 
+/** @typedef {import("../services/code-services.js").OxLintDiagnostic} OxLintDiagnostic */
+
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
@@ -13,12 +15,15 @@ import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "../tabs/tran
 import { view } from "../view.js";
 import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services.js";
 
-function getFunctionBody(/** @type {any} */ editing) {
+/** @typedef {{ type: "def"; defName: string } | { type: "event"; path: JxPath; eventKey: string }} EditingTarget */
+
+/** @param {EditingTarget | null | undefined} editing */
+function getFunctionBody(editing) {
   const document = activeTab.value?.doc.document;
-  if (editing.type === "def") {
+  if (editing?.type === "def") {
     return document?.state?.[editing.defName]?.body || "";
-  } else if (editing.type === "event") {
-    const node = getNodeAtPath(document, editing.path);
+  } else if (editing?.type === "event") {
+    const node = getNodeAtPath(/** @type {JxMutableNode} */ (document), editing.path);
     return node?.[editing.eventKey]?.body || "";
   }
   return "";
@@ -26,7 +31,9 @@ function getFunctionBody(/** @type {any} */ editing) {
 
 /** @param {() => void} closeFunctionEditor */
 export function renderFunctionEditor(closeFunctionEditor) {
-  const editing = activeTab.value?.session.ui.editingFunction;
+  const editing = /** @type {EditingTarget | null | undefined} */ (
+    activeTab.value?.session.ui.editingFunction
+  );
 
   // If editor already exists and matches current target, just sync value
   if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
@@ -66,7 +73,7 @@ export function renderFunctionEditor(closeFunctionEditor) {
 
   const tab = activeTab.value;
   const docName = tab?.documentPath?.split("/").pop() || tab?.doc.document?.tagName || "document";
-  const ed = /** @type {any} */ (editing);
+  const ed = /** @type {EditingTarget} */ (editing);
   const funcLabel = ed.type === "def" ? `ƒ ${ed.defName}` : `ƒ ${ed.eventKey}`;
 
   // Editor container
@@ -94,22 +101,29 @@ export function renderFunctionEditor(closeFunctionEditor) {
   );
 
   const body = getFunctionBody(editing);
-  const args = getFunctionArgs(editing, activeTab.value?.doc.document);
-
-  view.functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
-    value: body,
-    language: "javascript",
-    theme: "vs-dark",
-    automaticLayout: true,
-    minimap: { enabled: false },
-    fontSize: 12,
-    fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
-    lineNumbers: "on",
-    scrollBeyondLastLine: false,
-    wordWrap: "on",
-    tabSize: 2,
-  });
+  const args = getFunctionArgs(
+    /** @type {EditingTarget} */ (editing),
+    activeTab.value?.doc.document,
+  );
+
+  view.functionEditor = monaco.editor.create(
+    /** @type {HTMLElement} */ (/** @type {unknown} */ (editorContainer)),
+    {
+      value: body,
+      language: "javascript",
+      theme: "vs-dark",
+      automaticLayout: true,
+      minimap: { enabled: false },
+      fontSize: 12,
+      fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
+      lineNumbers: "on",
+      scrollBeyondLastLine: false,
+      wordWrap: "on",
+      tabSize: 2,
+    },
+  );
   view.functionEditor._editingTarget = JSON.stringify(editing);
+  const editor = view.functionEditor;
 
   // Format on open — show pretty-printed code, then run initial lint
   codeService("format", { code: body, args }).then((result) => {
@@ -120,29 +134,32 @@ export function renderFunctionEditor(closeFunctionEditor) {
   });
   codeService("lint", { code: body, args }).then((result) => {
     if (result?.diagnostics && view.functionEditor)
-      setLintMarkers(view.functionEditor, result.diagnostics);
+      setLintMarkers(view.functionEditor, /** @type {OxLintDiagnostic[]} */ (result.diagnostics));
   });
 
   // Debounced sync back to state + lint on edit
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let syncDebounce;
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let lintDebounce;
   let lintGen = 0;
-  view.functionEditor.onDidChangeModelContent(() => {
-    if (view.functionEditor._ignoreNextChange) {
-      view.functionEditor._ignoreNextChange = false;
+  editor.onDidChangeModelContent(() => {
+    if (editor._ignoreNextChange) {
+      editor._ignoreNextChange = false;
       return;
     }
 
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
-      const newBody = view.functionEditor.getValue();
-      const ed = /** @type {any} */ (editing);
+      const newBody = editor.getValue();
+      const ed = /** @type {EditingTarget} */ (editing);
       if (ed.type === "def") {
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, ed.defName, { body: newBody }));
       } else if (ed.type === "event") {
-        const node = getNodeAtPath(activeTab.value?.doc.document, ed.path);
+        const node = getNodeAtPath(
+          /** @type {JxMutableNode} */ (activeTab.value?.doc.document),
+          ed.path,
+        );
         const current = node?.[ed.eventKey] || {};
         transactDoc(activeTab.value, (t) =>
           mutateUpdateProperty(t, ed.path, ed.eventKey, {
@@ -158,11 +175,14 @@ export function renderFunctionEditor(closeFunctionEditor) {
     clearTimeout(lintDebounce);
     lintDebounce = setTimeout(() => {
       const gen = ++lintGen;
-      const currentCode = view.functionEditor.getValue();
+      const currentCode = editor.getValue();
       codeService("lint", { code: currentCode, args }).then((result) => {
         if (gen !== lintGen) return;
         if (result?.diagnostics && view.functionEditor)
-          setLintMarkers(view.functionEditor, result.diagnostics);
+          setLintMarkers(
+            view.functionEditor,
+            /** @type {OxLintDiagnostic[]} */ (result.diagnostics),
+          );
       });
     }, 750);
   });
@@ -187,11 +207,11 @@ export function registerFunctionCompletions() {
       const suggestions = Object.entries(defs).map(([key, def]) => {
         let kind = monaco.languages.CompletionItemKind.Variable;
         if (
-          /** @type {any} */ (def)?.$prototype === "Function" ||
-          /** @type {any} */ (def)?.$handler
+          /** @type {JxPrototypeDef} */ (def)?.$prototype === "Function" ||
+          /** @type {{ $handler?: unknown }} */ (def)?.$handler
         )
           kind = monaco.languages.CompletionItemKind.Function;
-        else if (/** @type {any} */ (def)?.$prototype)
+        else if (/** @type {JxPrototypeDef} */ (def)?.$prototype)
           kind = monaco.languages.CompletionItemKind.Property;
         return {
           label: `state.${key}`,

package/src/panels/elements-panel.js

@@ -8,17 +8,23 @@ import { view } from "../view.js";
 import { getEffectiveElements } from "../site-context.js";
 import { componentRegistry } from "../files/components.js";
 
+/** @typedef {import("../files/components.js").ComponentEntry} ComponentEntry */
+
 /**
- * @param {{ webdata: any; defaultDef: (tag: string) => any; rerender: () => void }} ctx
+ * @param {{
+ *   webdata: { elements: Record<string, { tag: string }[]> };
+ *   defaultDef: (tag: string) => JxMutableNode;
+ *   rerender: () => void;
+ * }} ctx
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderElementsTemplate(ctx) {
   const tab = activeTab.value;
 
   const categories = Object.entries(ctx.webdata.elements).map(
-    (/** @type {any} */ [category, elements]) => {
+    (/** @type {[string, { tag: string }[]]} */ [category, elements]) => {
       const filtered = view.elementsFilter
-        ? elements.filter((/** @type {any} */ e) => e.tag.includes(view.elementsFilter))
+        ? elements.filter((/** @type {{ tag: string }} */ e) => e.tag.includes(view.elementsFilter))
         : elements;
       if (filtered.length === 0) return nothing;
 
@@ -26,12 +32,13 @@ export function renderElementsTemplate(ctx) {
         <sp-accordion-item
           label=${category}
           ?open=${!view.elementsCollapsed.has(category)}
-          @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-            if (e.target.open) view.elementsCollapsed.delete(category);
+          @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
+            if (/** @type {HTMLElement & { open: boolean }} */ (e.target).open)
+              view.elementsCollapsed.delete(category);
             else view.elementsCollapsed.add(category);
           }}
         >
-          ${filtered.map((/** @type {any} */ { tag }) => {
+          ${filtered.map((/** @type {{ tag: string }} */ { tag }) => {
             const def = ctx.defaultDef(tag);
             return html`
               <div
@@ -57,13 +64,15 @@ export function renderElementsTemplate(ctx) {
     },
   );
 
-  const effectiveEls = getEffectiveElements(tab?.doc.document?.$elements);
+  const effectiveEls = getEffectiveElements(
+    /** @type {(string | JxElement)[] | undefined} */ (tab?.doc.document?.$elements),
+  );
   /** @type {Set<string>} */
   const enabledTags = new Set();
   for (const entry of effectiveEls) {
     if (typeof entry !== "string") continue;
     const comp = componentRegistry.find(
-      (/** @type {any} */ c) =>
+      (/** @type {ComponentEntry} */ c) =>
         c.source === "npm" && c.modulePath && entry === `${c.package}/${c.modulePath}`,
     );
     if (comp) {
@@ -77,9 +86,11 @@ export function renderElementsTemplate(ctx) {
   const compsFiltered =
     componentRegistry.length > 0
       ? componentRegistry
-          .filter((/** @type {any} */ c) => c.source !== "npm" || enabledTags.has(c.tagName))
           .filter(
-            (/** @type {any} */ c) =>
+            (/** @type {ComponentEntry} */ c) => c.source !== "npm" || enabledTags.has(c.tagName),
+          )
+          .filter(
+            (/** @type {ComponentEntry} */ c) =>
               !view.elementsFilter || c.tagName.toLowerCase().includes(view.elementsFilter),
           )
       : [];
@@ -90,14 +101,15 @@ export function renderElementsTemplate(ctx) {
           <sp-accordion-item
             label="Components"
             ?open=${!view.elementsCollapsed.has("Components")}
-            @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-              if (e.target.open) view.elementsCollapsed.delete("Components");
+            @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
+              if (/** @type {HTMLElement & { open: boolean }} */ (e.target).open)
+                view.elementsCollapsed.delete("Components");
               else view.elementsCollapsed.add("Components");
             }}
           >
             <div class="components-section">
               ${compsFiltered.map(
-                (/** @type {any} */ comp) => html`
+                (/** @type {ComponentEntry} */ comp) => html`
                   <div
                     class="element-card"
                     data-component-tag=${comp.tagName}
@@ -112,10 +124,12 @@ export function renderElementsTemplate(ctx) {
                       const instanceDef = {
                         tagName: comp.tagName,
                         $props: Object.fromEntries(
-                          (comp.props || []).map((/** @type {any} */ p) => [
-                            p.name,
-                            p.default !== undefined ? p.default : "",
-                          ]),
+                          (comp.props || []).map(
+                            (/** @type {{ name: string; default?: unknown }} */ p) => [
+                              p.name,
+                              p.default !== undefined ? p.default : "",
+                            ],
+                          ),
                         ),
                       };
                       transactDoc(t, (tr) =>
@@ -142,8 +156,8 @@ export function renderElementsTemplate(ctx) {
       size="s"
       placeholder="Filter elements…"
       value=${view.elementsFilter}
-      @input=${(/** @type {any} */ e) => {
-        view.elementsFilter = e.target.value.toLowerCase();
+      @input=${(/** @type {Event} */ e) => {
+        view.elementsFilter = /** @type {HTMLInputElement} */ (e.target).value.toLowerCase();
         ctx.rerender();
       }}
     ></sp-search>

package/src/panels/events-panel.js

@@ -33,7 +33,7 @@ export function eventsSidebarTemplate(helpers) {
   );
 
   // Declared CEM events (custom element docs)
-  /** @type {any} */
+  /** @type {unknown} */
   let declaredEventsT = nothing;
   if (isCustomElementDoc()) {
     const allEmits = [];
@@ -86,8 +86,8 @@ export function eventsSidebarTemplate(helpers) {
                   size="s"
                   class="event-name"
                   .value=${live(evKey)}
-                  @change=${(/** @type {any} */ e) => {
-                    const newKey = e.target.value;
+                  @change=${(/** @type {Event} */ e) => {
+                    const newKey = /** @type {HTMLInputElement} */ (e.target).value;
                     if (newKey && newKey !== evKey) {
                       transactDoc(activeTab.value, (t) => {
                         mutateUpdateProperty(t, selection, evKey, undefined);
@@ -104,8 +104,8 @@ export function eventsSidebarTemplate(helpers) {
                   size="s"
                   class="event-mode"
                   .value=${live(isInline ? "inline" : "ref")}
-                  @change=${(/** @type {any} */ e) => {
-                    if (e.target.value === "inline") {
+                  @change=${(/** @type {Event} */ e) => {
+                    if (/** @type {HTMLInputElement} */ (e.target).value === "inline") {
                       transactDoc(activeTab.value, (t) =>
                         mutateUpdateProperty(t, selection, evKey, {
                           $prototype: "Function",
@@ -149,11 +149,11 @@ export function eventsSidebarTemplate(helpers) {
                         grows
                         placeholder="// handler body"
                         .value=${live(evVal.body || "")}
-                        @input=${(/** @type {any} */ e) => {
+                        @input=${(/** @type {Event} */ e) => {
                           transactDoc(activeTab.value, (t) =>
                             mutateUpdateProperty(t, selection, evKey, {
                               $prototype: "Function",
-                              body: e.target.value,
+                              body: /** @type {HTMLInputElement} */ (e.target).value,
                               parameters: evVal.parameters || [],
                             }),
                           );
@@ -181,10 +181,15 @@ export function eventsSidebarTemplate(helpers) {
                       size="s"
                       class="event-handler"
                       .value=${live(evVal.$ref || "__none__")}
-                      @change=${(/** @type {any} */ e) => {
-                        if (e.target.value && e.target.value !== "__none__") {
+                      @change=${(/** @type {Event} */ e) => {
+                        if (
+                          /** @type {HTMLInputElement} */ (e.target).value &&
+                          /** @type {HTMLInputElement} */ (e.target).value !== "__none__"
+                        ) {
                           transactDoc(activeTab.value, (t) =>
-                            mutateUpdateProperty(t, selection, evKey, { $ref: e.target.value }),
+                            mutateUpdateProperty(t, selection, evKey, {
+                              $ref: /** @type {HTMLInputElement} */ (e.target).value,
+                            }),
                           );
                         } else {
                           transactDoc(activeTab.value, (t) =>