@jxsuite/compiler 0.23.1 → 0.24.0

package/src/targets/{compile-element.js → compile-element.ts}

@@ -13,7 +13,9 @@ import {
   collectStyles,
   compileExpression,
   isMutating,
-} from "../shared.js";
+} from "../shared.ts";
+import type { ExpressionNode } from "../shared.ts";
+import type { JxStyle, JxMutableNode } from "@jxsuite/schema/types";
 
 /**
  * Compile a Jx custom element document to a JS module string.
@@ -22,18 +24,17 @@ import {
  * @param {Record<string, unknown>} [opts]
  * @returns {Promise<{ files: { path: string; content: string; tagName: string }[] }>}
  */
-export async function compileElement(sourcePath, opts = {}) {
-  const { resolveElementPath, $media: optsMedia } = /** @type {JxMutableNode} */ (opts);
+export async function compileElement(sourcePath: string | any, opts: Record<string, unknown> = {}) {
+  const { resolveElementPath, $media: optsMedia } = opts as JxMutableNode;
   /** @type {{ path: string; content: string; tagName: string }[]} */
-  const files = [];
-  /** @type {Set<string>} */
-  const visited = new Set();
+  const files: { path: string; content: string; tagName: string }[] = [];
+  const visited: Set<string> = new Set();
 
   /**
    * @param {string | any} srcPath
    * @param {string | null} parentDir
    */
-  async function processElement(srcPath, parentDir) {
+  async function processElement(srcPath: string | any, parentDir: string | null) {
     /** @type {JxMutableNode} */
     let doc;
     /** @type {string | null} */
@@ -53,8 +54,8 @@ export async function compileElement(sourcePath, opts = {}) {
     } else {
       doc = srcPath;
       filePath = null;
-      if (visited.has(/** @type {string} */ (doc.tagName))) return;
-      visited.add(/** @type {string} */ (doc.tagName));
+      if (visited.has(doc.tagName as string)) return;
+      visited.add(doc.tagName as string);
     }
 
     const tagName = doc.tagName;
@@ -66,11 +67,10 @@ export async function compileElement(sourcePath, opts = {}) {
     const currentDir = filePath ? dn(filePath) : null;
 
     // Process $elements dependencies depth-first
-    /** @type {string[]} */
-    const elementImports = [];
+    const elementImports: string[] = [];
     if (Array.isArray(doc.$elements)) {
       for (const elRef of doc.$elements) {
-        const refPath = /** @type {JxMutableNode} */ (elRef).$ref ?? elRef;
+        const refPath = (elRef as JxMutableNode).$ref ?? elRef;
         if (typeof refPath !== "string") continue;
 
         if (currentDir) {
@@ -97,7 +97,7 @@ export async function compileElement(sourcePath, opts = {}) {
     files.push({ path: outputPath, content: jsContent, tagName });
   }
 
-  await processElement(sourcePath, /** @type {string | null} */ (opts.basePath ?? null));
+  await processElement(sourcePath, (opts.basePath ?? null) as string | null);
   return { files };
 }
 
@@ -112,12 +112,15 @@ export async function compileElement(sourcePath, opts = {}) {
  *   files: { path: string; content: string; tagName: string }[];
  * }>}
  */
-export async function compileElementPage(sourcePath, opts = {}) {
+export async function compileElementPage(
+  sourcePath: string | any,
+  opts: Record<string, unknown> = {},
+) {
   const {
     title = "Jx App",
     reactivitySrc = "https://esm.sh/@vue/reactivity@3.5.13",
     litHtmlSrc = "https://esm.sh/lit-html@3.3.0",
-  } = /** @type {JxMutableNode} */ (opts);
+  } = opts as JxMutableNode;
 
   const result = await compileElement(sourcePath, opts);
   const root = result.files[result.files.length - 1];
@@ -159,7 +162,7 @@ export async function compileElementPage(sourcePath, opts = {}) {
  * @param {JxMutableNode} def
  * @returns {string | undefined}
  */
-function extractInitialValue(def) {
+function extractInitialValue(def: JxMutableNode) {
   if (def === null || typeof def !== "object" || Array.isArray(def)) {
     return JSON.stringify(def);
   }
@@ -190,9 +193,12 @@ function extractInitialValue(def) {
  * @param {string[]} elementImports
  * @returns {string}
  */
-export function emitElementModule(doc, className, elementImports) {
-  /** @type {string[]} */
-  const lines = [];
+export function emitElementModule(
+  doc: JxMutableNode | Record<string, any>,
+  className: string,
+  elementImports: string[],
+) {
+  const lines: string[] = [];
 
   lines.push("// Generated by @jxsuite/compiler — do not edit manually");
   if (doc.$id) lines.push(`// Source: ${doc.$id}`);
@@ -202,15 +208,14 @@ export function emitElementModule(doc, className, elementImports) {
   }
 
   // Collect $src imports from state entries before emitting other imports
-  /** @type {Map<string, string[]>} */
-  const srcImportMap = new Map();
+  const srcImportMap: Map<string, string[]> = new Map();
   const defs = doc.state ?? {};
   for (const [key, def] of Object.entries(defs)) {
-    const d = /** @type {JxMutableNode} */ (def);
+    const d = def as JxMutableNode;
     if (d && typeof d === "object" && !Array.isArray(d) && d.$prototype === "Function" && d.$src) {
       const srcPath = d.$src;
       if (!srcImportMap.has(srcPath)) srcImportMap.set(srcPath, []);
-      /** @type {string[]} */ (srcImportMap.get(srcPath)).push(key);
+      (srcImportMap.get(srcPath) as string[]).push(key);
     }
   }
   for (const [srcPath, names] of srcImportMap) {
@@ -228,17 +233,14 @@ export function emitElementModule(doc, className, elementImports) {
   lines.push("  constructor() {");
   lines.push("    super();");
 
-  /** @type {[string, string][]} */
-  const stateEntries = [];
-  /** @type {[string, any][]} */
-  const computedEntries = [];
-  /** @type {[string, any][]} */
-  const functionEntries = [];
+  const stateEntries: [string, string][] = [];
+  const computedEntries: [string, any][] = [];
+  const functionEntries: [string, any][] = [];
 
   for (const [key, def] of Object.entries(defs)) {
-    const d = /** @type {JxMutableNode} */ (def);
+    const d = def as JxMutableNode;
     if (d && typeof d === "object" && !Array.isArray(d) && "$expression" in d) {
-      const node = /** @type {any} */ (d).$expression;
+      const node = (d as Record<string, unknown>).$expression as ExpressionNode;
       if (isMutating(node.operator)) {
         functionEntries.push([key, d]);
       } else {
@@ -309,8 +311,7 @@ export function emitElementModule(doc, className, elementImports) {
   lines.push("");
 
   // Collect CSS rules from children tree (assigns .jx-N classes to defs)
-  /** @type {string[]} */
-  const cssRules = [];
+  const cssRules: string[] = [];
   if (Array.isArray(doc.children)) {
     const counter = { n: 0 };
     for (const child of doc.children) {
@@ -348,8 +349,7 @@ export function emitElementModule(doc, className, elementImports) {
   lines.push("      }");
   lines.push("    }");
   if (doc.style && typeof doc.style === "object") {
-    /** @type {[string, string][]} */
-    const dynamicStyles = [];
+    const dynamicStyles: [string, string][] = [];
     for (const [prop, value] of Object.entries(doc.style)) {
       if (
         prop.startsWith(":") ||
@@ -370,8 +370,7 @@ export function emitElementModule(doc, className, elementImports) {
       for (const [cssProp, value] of dynamicStyles) {
         const expr = value.replace(
           /\$\{([^}]+)\}/g,
-          (/** @type {string} */ _, /** @type {string} */ e) =>
-            "${" + e.replace(/state\./g, "this.state.") + "}",
+          (_: string, e: string) => "${" + e.replace(/state\./g, "this.state.") + "}",
         );
         lines.push(`      this.style['${cssProp}'] = \`${expr}\`;`);
       }
@@ -422,18 +421,20 @@ export function emitElementModule(doc, className, elementImports) {
  * @param {string} indent
  * @returns {string}
  */
-function emitLitChildren(children, parentStyle, indent) {
+function emitLitChildren(
+  children: (JxMutableNode | string)[] | JxMutableNode | undefined,
+  parentStyle: JxStyle | Record<string, any> | null | undefined,
+  indent: string,
+) {
   if (!children) return "";
 
-  if (/** @type {JxMutableNode} */ (children).$prototype === "Array") {
+  if ((children as JxMutableNode).$prototype === "Array") {
     return emitMappedArray(/** @type {JxMutableNode} */ (children), indent);
   }
 
   if (!Array.isArray(children)) return "";
 
-  return children
-    .map((/** @type {JxMutableNode | string} */ child) => emitLitNode(child, indent))
-    .join("\n");
+  return children.map((child: JxMutableNode | string) => emitLitNode(child, indent)).join("\n");
 }
 
 /**
@@ -441,7 +442,7 @@ function emitLitChildren(children, parentStyle, indent) {
  * @param {string} indent
  * @returns {string}
  */
-function emitLitNode(def, indent) {
+function emitLitNode(def: JxMutableNode | string, indent: string) {
   // String children are text nodes
   if (typeof def === "string") {
     if (def.includes("${")) return `${indent}${toLitTextContent(def)}`;
@@ -454,8 +455,7 @@ function emitLitNode(def, indent) {
 
   const tag = def.tagName ?? "div";
 
-  /** @type {string[]} */
-  const parts = [];
+  const parts: string[] = [];
 
   if (def.attributes) {
     for (const [key, val] of Object.entries(def.attributes)) {
@@ -486,10 +486,8 @@ function emitLitNode(def, indent) {
     )
       continue;
 
-    if (val && typeof val === "object" && /** @type {JxMutableNode} */ (val).$ref) {
-      parts.push(
-        `.${key}="\${${refToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (val).$ref))}}"`,
-      );
+    if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
+      parts.push(`.${key}="\${${refToExpr((val as JxMutableNode).$ref as string)}}"`);
     } else if (typeof val === "string" && val.includes("${")) {
       parts.push(`.${key}="${toLitExpr(val)}"`);
     }
@@ -497,10 +495,8 @@ function emitLitNode(def, indent) {
 
   if (def.$props) {
     for (const [key, val] of Object.entries(def.$props)) {
-      if (val && typeof val === "object" && /** @type {JxMutableNode} */ (val).$ref) {
-        parts.push(
-          `.${key}="\${${refToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (val).$ref))}}"`,
-        );
+      if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
+        parts.push(`.${key}="\${${refToExpr((val as JxMutableNode).$ref as string)}}"`);
       } else {
         parts.push(`.${key}="\${${JSON.stringify(val)}}"`);
       }
@@ -510,21 +506,20 @@ function emitLitNode(def, indent) {
   for (const [key, val] of Object.entries(def)) {
     if (!key.startsWith("on") || key === "observedAttributes") continue;
     const eventName = key.slice(2).toLowerCase();
-    if (val && typeof val === "object" && /** @type {JxMutableNode} */ (val).$ref) {
+    if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
       parts.push(
-        `@${eventName}="\${(e) => ${refToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (val).$ref))}(s, e)}"`,
+        `@${eventName}="\${(e) => ${refToExpr((val as JxMutableNode).$ref as string)}(s, e)}"`,
       );
     } else if (val && typeof val === "object" && "$expression" in /** @type {any} */ (val)) {
-      const compiled = compileExpression(/** @type {any} */ (val).$expression, {
-        statePrefix: "s",
-        eventParam: "e",
-      });
+      const compiled = compileExpression(
+        (val as Record<string, unknown>).$expression as ExpressionNode,
+        {
+          statePrefix: "s",
+          eventParam: "e",
+        },
+      );
       parts.push(`@${eventName}="\${(e) => { ${compiled}; }}"`);
-    } else if (
-      val &&
-      typeof val === "object" &&
-      /** @type {JxMutableNode} */ (val).$prototype === "Function"
-    ) {
+    } else if (val && typeof val === "object" && (val as JxMutableNode).$prototype === "Function") {
       parts.push(
         `@${eventName}="\${(e) => { ${inlineHandlerBody(/** @type {JxMutableNode} */ (val))} }}"`,
       );
@@ -558,22 +553,19 @@ function emitLitNode(def, indent) {
  * @param {string} indent
  * @returns {string}
  */
-function emitMappedArray(arrayDef, indent) {
+function emitMappedArray(arrayDef: JxMutableNode, indent: string) {
   const itemsExpr = arrayDef.items?.$ref ? refToExpr(arrayDef.items.$ref) : "ITEMS";
   const mapDef = arrayDef.map;
 
   if (!mapDef) return "";
 
   const tag = mapDef.tagName ?? "div";
-  /** @type {string[]} */
-  const parts = [];
+  const parts: string[] = [];
 
   if (mapDef.$props) {
     for (const [key, val] of Object.entries(mapDef.$props)) {
-      if (val && typeof val === "object" && /** @type {JxMutableNode} */ (val).$ref) {
-        parts.push(
-          `.${key}="\${${mapRefToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (val).$ref))}}"`,
-        );
+      if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
+        parts.push(`.${key}="\${${mapRefToExpr((val as JxMutableNode).$ref as string)}}"`);
       } else {
         parts.push(`.${key}="\${${JSON.stringify(val)}}"`);
       }
@@ -586,15 +578,18 @@ function emitMappedArray(arrayDef, indent) {
   for (const [key, val] of Object.entries(mapDef)) {
     if (!key.startsWith("on")) continue;
     const eventName = key.slice(2).toLowerCase();
-    if (val && typeof val === "object" && /** @type {JxMutableNode} */ (val).$ref) {
+    if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
       parts.push(
-        `@${eventName}="\${(e) => ${refToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (val).$ref))}(s, e)}"`,
+        `@${eventName}="\${(e) => ${refToExpr((val as JxMutableNode).$ref as string)}(s, e)}"`,
       );
     } else if (val && typeof val === "object" && "$expression" in /** @type {any} */ (val)) {
-      const compiled = compileExpression(/** @type {any} */ (val).$expression, {
-        statePrefix: "s",
-        eventParam: "e",
-      });
+      const compiled = compileExpression(
+        (val as Record<string, unknown>).$expression as ExpressionNode,
+        {
+          statePrefix: "s",
+          eventParam: "e",
+        },
+      );
       parts.push(`@${eventName}="\${(e) => { ${compiled}; }}"`);
     }
   }
@@ -619,7 +614,7 @@ function emitMappedArray(arrayDef, indent) {
  * @param {string} ref
  * @returns {string}
  */
-function refToExpr(ref) {
+function refToExpr(ref: string) {
   if (ref.startsWith("#/state/")) {
     const path = ref.slice("#/state/".length);
     return "s." + path.replace(/\//g, ".");
@@ -635,7 +630,7 @@ function refToExpr(ref) {
  * @param {string} ref
  * @returns {string}
  */
-function mapRefToExpr(ref) {
+function mapRefToExpr(ref: string) {
   if (ref.startsWith("$map/")) {
     return ref.slice("$map/".length).replace(/\//g, ".");
   }
@@ -646,7 +641,7 @@ function mapRefToExpr(ref) {
  * @param {string} str
  * @returns {string}
  */
-function toLitExpr(str) {
+function toLitExpr(str: string) {
   return str.replace(/state\./g, "s.");
 }
 
@@ -657,14 +652,14 @@ function toLitExpr(str) {
  * @param {unknown} value
  * @returns {string}
  */
-function toLitTextContent(value) {
+function toLitTextContent(value: unknown) {
   // Handle $ref objects → emit as lit expression
   if (
     value !== null &&
     typeof value === "object" &&
-    typeof (/** @type {JxMutableNode} */ (value).$ref) === "string"
+    typeof (value as JxMutableNode).$ref === "string"
   ) {
-    return `\${${refToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (value).$ref))}}`;
+    return `\${${refToExpr((value as JxMutableNode).$ref as string)}}`;
   }
   if (typeof value === "string" && value.includes("${")) {
     return toLitExpr(value);
@@ -676,7 +671,7 @@ function toLitTextContent(value) {
  * @param {JxMutableNode} def
  * @returns {string}
  */
-function inlineHandlerBody(def) {
+function inlineHandlerBody(def: JxMutableNode) {
   const body = def.body ?? "";
   return body.replace(/(?<!this\.)state\./g, "s.").replace(/(?<!this\.)state(?!\.)/g, "s");
 }
@@ -685,11 +680,10 @@ function inlineHandlerBody(def) {
  * @param {JxStyle | Record<string, any> | null | undefined} styleDef
  * @returns {string}
  */
-function emitStyleString(styleDef) {
+function emitStyleString(styleDef: JxStyle | Record<string, any> | null | undefined) {
   if (!styleDef || typeof styleDef !== "object") return "";
 
-  /** @type {string[]} */
-  const parts = [];
+  const parts: string[] = [];
   for (const [prop, value] of Object.entries(styleDef)) {
     if (
       prop.startsWith(":") ||
@@ -717,7 +711,7 @@ function emitStyleString(styleDef) {
  * @param {(JxMutableNode | string)[] | undefined} children
  * @returns {boolean}
  */
-function treeHasSlot(children) {
+function treeHasSlot(children: (JxMutableNode | string)[] | undefined) {
   if (!Array.isArray(children)) return false;
   for (const child of children) {
     if (!child || typeof child !== "object") continue;