@jxsuite/studio 0.19.0 → 0.21.0

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) =>