mountly-vite-plugin 1.6.0 → 1.7.0

package/dist/index.js

@@ -613,8 +613,8 @@ function getSelfContainedExternals(framework) {
 
 // src/embed.ts
 import { globSync, readFileSync as readFileSync2 } from "fs";
-import { basename, dirname as dirname3, extname, relative as relative3, resolve as resolve3 } from "path";
-import { parseAst as parseAst3 } from "vite";
+import { basename, dirname as dirname4, extname, relative as relative3, resolve as resolve3 } from "path";
+import { parseAst as parseAst4 } from "vite";
 
 // src/docs.ts
 import { parseAst as parseAst2 } from "vite";
@@ -1099,6 +1099,283 @@ function extractDocs(code, options = {}) {
   }
 }
 
+// src/types.ts
+import { dirname as dirname3, resolve as resolvePath } from "path";
+import { parseAst as parseAst3 } from "vite";
+function parseModule(file, code) {
+  const sfc = /\.(vue|svelte)$/.exec(file)?.[1];
+  const source = sfc ? scriptOf(code) : code;
+  const body = parseAst3(source, { lang: sfc ? "ts" : "tsx" }).body;
+  const mod = {
+    file,
+    source,
+    body,
+    types: /* @__PURE__ */ new Map(),
+    imports: /* @__PURE__ */ new Map(),
+    exports: /* @__PURE__ */ new Map(),
+    opaque: /* @__PURE__ */ new Set()
+  };
+  for (const raw of body) {
+    const node = raw.declaration ?? raw;
+    if (node.type === "TSInterfaceDeclaration" || node.type === "TSTypeAliasDeclaration") {
+      if (mod.types.has(node.id.name) || mod.opaque.has(node.id.name)) {
+        mod.types.delete(node.id.name);
+        mod.opaque.add(node.id.name);
+      } else {
+        mod.types.set(node.id.name, node);
+      }
+    } else if (node.type === "ImportDeclaration" || raw.source && raw.specifiers) {
+      for (const s of node.specifiers ?? []) {
+        if (s.type !== "ImportSpecifier" && s.type !== "ExportSpecifier") {
+          mod.opaque.add(s.local.name);
+          continue;
+        }
+        const name2 = s.imported ?? s.local;
+        const local = s.type === "ExportSpecifier" ? s.exported : s.local;
+        mod.imports.set(local.name ?? local.value, {
+          from: node.source.value,
+          name: name2.name ?? name2.value
+        });
+      }
+    } else if (raw.type === "ExportNamedDeclaration" && !raw.declaration) {
+      for (const s of raw.specifiers) {
+        mod.exports.set(s.exported.name ?? s.exported.value, s.local.name ?? s.local.value);
+      }
+    } else if (node.id?.name) {
+      mod.opaque.add(node.id.name);
+    }
+  }
+  const params = (node) => {
+    if (Array.isArray(node)) return node.forEach(params);
+    if (!node || typeof node !== "object") return;
+    const n = node;
+    if (n.type === "TSTypeParameter") mod.opaque.add(n.name.name);
+    for (const key in n) params(n[key]);
+  };
+  params(body);
+  for (const [, list = ""] of code.matchAll(/<script\b[^>]*\bgenerics?="([^"]*)"/g)) {
+    for (const part of list.split(",")) mod.opaque.add(part.trim().split(/\s/)[0] ?? "");
+  }
+  return mod;
+}
+function rewrite(source, node, edits) {
+  let out = source.slice(node.start, node.end);
+  for (const [start, end, text] of [...edits].sort((a, b) => b[0] - a[0])) {
+    out = out.slice(0, start - node.start) + text + out.slice(end - node.start);
+  }
+  return out;
+}
+function introduced(node) {
+  const names = (node.typeParameters?.params ?? []).map((p) => p.name.name);
+  if (node.type === "TSMappedType" && node.key?.name) names.push(node.key.name);
+  if (node.type === "TSConditionalType") {
+    const infer = (n) => {
+      if (Array.isArray(n)) return n.forEach(infer);
+      if (!n || typeof n !== "object") return;
+      if (n.type === "TSInferType") names.push(n.typeParameter.name.name);
+      for (const key in n) infer(n[key]);
+    };
+    infer(node.extendsType);
+  }
+  return names;
+}
+function tupleElement(node) {
+  if (!node || node.type === "TSRestType") return void 0;
+  if (node.type === "TSNamedTupleMember") {
+    if (node.elementType?.type === "TSRestType") return void 0;
+    const inner = node.elementType?.type === "TSOptionalType" ? node.elementType.typeAnnotation : node.elementType;
+    return { type: inner, optional: Boolean(node.optional) || inner !== node.elementType };
+  }
+  if (node.type === "TSOptionalType") return { type: node.typeAnnotation, optional: true };
+  return { type: node, optional: false };
+}
+var UTILITY_TYPES = /* @__PURE__ */ new Set([
+  "Array",
+  "ArrayLike",
+  "AsyncIterable",
+  "Awaited",
+  "Capitalize",
+  "ConstructorParameters",
+  "Exclude",
+  "Extract",
+  "InstanceType",
+  "Iterable",
+  "Lowercase",
+  "NoInfer",
+  "NonNullable",
+  "Omit",
+  "Parameters",
+  "Partial",
+  "Pick",
+  "PromiseLike",
+  "PropertyKey",
+  "Readonly",
+  "ReadonlyArray",
+  "ReadonlyMap",
+  "ReadonlySet",
+  "Record",
+  "Required",
+  "ReturnType",
+  "Uncapitalize",
+  "Uppercase"
+]);
+var NODE_ONLY = /* @__PURE__ */ new Set(["Buffer", "process", "global", "require", "module", "exports"]);
+function isGlobal(name2) {
+  if (UTILITY_TYPES.has(name2)) return true;
+  if (NODE_ONLY.has(name2)) return false;
+  if (/^(?:HTML|SVG)\w*Element$|^\w*Event(?:Init|Target)?$|^(?:Element|Node|Document|Window|ShadowRoot|DOMRect|FileList|DataTransfer|CSSStyleDeclaration|NodeList)$/.test(
+    name2
+  )) {
+    return true;
+  }
+  return name2 in globalThis;
+}
+function unwrap(type) {
+  if (type?.type === "TSParenthesizedType") return unwrap(type.typeAnnotation);
+  if (type?.type !== "TSUnionType") return type;
+  const real = type.types.filter(
+    (t) => t.type !== "TSUndefinedKeyword" && t.type !== "TSNullKeyword"
+  );
+  return real.length === 1 ? unwrap(real[0]) : type;
+}
+var CANDIDATES = ["", ".ts", ".tsx", ".d.ts", "/index.ts", "/index.tsx"];
+function embedTypes(code, options) {
+  const result = { props: {}, events: {}, declarations: [] };
+  const named = /* @__PURE__ */ new Map();
+  const taken = /* @__PURE__ */ new Set();
+  const modules = /* @__PURE__ */ new Map();
+  const load = (file) => {
+    if (!modules.has(file)) {
+      let mod = null;
+      try {
+        const text = options.load?.(file);
+        if (text !== void 0) mod = parseModule(file, text);
+      } catch {
+      }
+      modules.set(file, mod);
+    }
+    return modules.get(file) ?? null;
+  };
+  const resolve4 = (mod, name2, depth = 0) => {
+    const decl = mod.types.get(name2);
+    if (decl) return { decl, mod };
+    if (mod.opaque.has(name2) || depth > 8) return null;
+    const imp = mod.imports.get(name2);
+    if (!imp) return isGlobal(name2) ? void 0 : null;
+    if (!imp.from.startsWith(".")) return null;
+    const base = resolvePath(dirname3(mod.file), imp.from.replace(/\.[cm]?js$/, ""));
+    for (const ext of CANDIDATES) {
+      const other = load(base + ext);
+      if (other) return resolve4(other, other.exports.get(imp.name) ?? imp.name, depth + 1) ?? null;
+    }
+    return null;
+  };
+  const emit = (decl, mod) => {
+    const existing = named.get(decl);
+    if (existing) return existing;
+    let as = `${options.scope}_${decl.id.name}`;
+    for (let n = 2; taken.has(as); n++) as = `${options.scope}_${decl.id.name}${n}`;
+    named.set(decl, as);
+    taken.add(as);
+    const edits = [[decl.id.start, decl.id.end, as]];
+    if (!walk(decl, mod, /* @__PURE__ */ new Set(), edits)) return void 0;
+    result.declarations.push(`export ${rewrite(mod.source, decl, edits)}`);
+    return as;
+  };
+  const walk = (node, mod, scope, edits) => {
+    if (Array.isArray(node)) return node.every((n2) => walk(n2, mod, scope, edits));
+    if (!node || typeof node !== "object") return true;
+    const n = node;
+    if (n.type === "TSTypeQuery" || n.type === "TSImportType" || n.type === "TSQualifiedName" || n.type === "MemberExpression" || n.computed && n.key?.type !== "Literal") {
+      return false;
+    }
+    const own = introduced(n);
+    const inner = own.length ? /* @__PURE__ */ new Set([...scope, ...own]) : scope;
+    const ref = n.type === "TSTypeReference" ? n.typeName : n.type === "TSInterfaceHeritage" ? n.expression : null;
+    if (ref?.type === "Identifier" && !inner.has(ref.name)) {
+      const target = resolve4(mod, ref.name);
+      if (target === null) return false;
+      if (target) {
+        const as = emit(target.decl, target.mod);
+        if (!as) return false;
+        edits.push([ref.start, ref.end, as]);
+      }
+    }
+    for (const key in n) if (!walk(n[key], mod, inner, edits)) return false;
+    return true;
+  };
+  const typed = (node, mod) => {
+    if (!node) return void 0;
+    const mark = result.declarations.length;
+    const before = new Map(named);
+    const edits = [];
+    if (walk(node, mod, /* @__PURE__ */ new Set(), edits)) return rewrite(mod.source, node, edits);
+    result.declarations.length = mark;
+    named.clear();
+    taken.clear();
+    for (const [decl, as] of before) {
+      named.set(decl, as);
+      taken.add(as);
+    }
+    return void 0;
+  };
+  const detail = (params, mod, skip = 0) => {
+    const param = params?.[skip];
+    if (!param || param.type === "RestElement") return void 0;
+    const text = typed(param.typeAnnotation?.typeAnnotation, mod);
+    return text && param.optional ? `${text} | null` : text;
+  };
+  try {
+    const file = options.file ?? "component.tsx";
+    const mod = parseModule(file, code);
+    modules.set(file, mod);
+    const aliases = localTypes(mod.body);
+    const sfc = /\.(vue|svelte)$/.exec(file)?.[1];
+    let declared;
+    if (sfc === "vue") declared = macroCall(mod.body, "defineProps")?.typeArguments?.params?.[0];
+    else if (sfc === "svelte") declared = svelteProps(mod.body)?.id?.typeAnnotation?.typeAnnotation;
+    else {
+      const declaration = findExport(mod.body, options.exportName ?? "default");
+      declared = declaration ? propsType(declaration) : void 0;
+    }
+    for (const member2 of membersOf(declared, aliases) ?? []) {
+      const name2 = keyOf(member2);
+      if (!name2) continue;
+      if (/^on[A-Z]/.test(name2)) {
+        const fn = member2.type === "TSMethodSignature" ? member2 : unwrap(member2.typeAnnotation?.typeAnnotation);
+        if (fn?.type !== "TSFunctionType" && fn?.type !== "TSMethodSignature") continue;
+        if (fn.typeParameters) continue;
+        const text2 = detail(fn.params, mod);
+        if (text2) result.events[eventName(name2)] = text2;
+        continue;
+      }
+      if (member2.type !== "TSPropertySignature") continue;
+      const text = typed(member2.typeAnnotation?.typeAnnotation, mod);
+      if (text) result.props[name2] = text;
+    }
+    if (sfc === "vue") {
+      const emits = macroCall(mod.body, "defineEmits")?.typeArguments?.params?.[0];
+      for (const member2 of membersOf(emits, aliases) ?? []) {
+        if (member2.type === "TSPropertySignature") {
+          const event = keyOf(member2);
+          const tuple = member2.typeAnnotation?.typeAnnotation;
+          const first = tuple?.type === "TSTupleType" ? tuple.elementTypes[0] : void 0;
+          const element = tupleElement(first);
+          const text = element && typed(element.type, mod);
+          if (event && text) result.events[event] = element.optional ? `${text} | null` : text;
+        }
+        if (member2.type === "TSCallSignatureDeclaration") {
+          const event = member2.params?.[0]?.typeAnnotation?.typeAnnotation?.literal?.value;
+          const text = detail(member2.params, mod, 1);
+          if (typeof event === "string" && text) result.events[event] = text;
+        }
+      }
+    }
+  } catch {
+  }
+  return result;
+}
+
 // src/embed.ts
 function frameworkFor(file) {
   if (file.endsWith(".vue")) return "vue";
@@ -1148,18 +1425,25 @@ function normalize(options, root) {
   return unique(entries);
 }
 function declarations(elements) {
-  const blocks = elements.map(({ tag, props }) => {
+  const blocks = elements.map(({ tag, props, types, docs }) => {
     const id = name(tag);
-    const members = props.filter((spec) => spec.kind !== "event").map((spec) => `  ${member(spec.name)}?: ${TS_TYPE[spec.kind] ?? "unknown"};`);
-    const events = props.filter((spec) => spec.kind === "event").map((spec) => `  ${JSON.stringify(spec.event)}: CustomEvent;`);
+    const members = props.filter((spec) => spec.kind !== "event").map(
+      (spec) => `${jsdoc(docs.props[spec.name]?.description, "  ")}  ${member(spec.name)}?: ${types.props[spec.name] ?? TS_TYPE[spec.kind] ?? "unknown"};`
+    );
+    const events = props.filter((spec) => spec.kind === "event").map((spec) => {
+      const detail = spec.event && types.events[spec.event];
+      return `${jsdoc(docs.props[spec.name]?.description, "  ")}  ${JSON.stringify(spec.event)}: CustomEvent${detail ? `<${detail}>` : ""};`;
+    });
     const block = (kind, lines) => lines.length ? `export interface ${id}${kind} {
 ${lines.join("\n")}
 }` : `export interface ${id}${kind} {}`;
-    return `${block("Props", members)}
+    return `${types.declarations.map((text) => `${text}
+
+`).join("")}${block("Props", members)}
 
 ${block("EventMap", events)}
 
-export interface ${id}Element extends MountlyElement<${id}Props> {
+${jsdoc(docs.description, "")}export interface ${id}Element extends MountlyElement<${id}Props> {
   addEventListener<K extends keyof ${id}EventMap>(
     type: K,
     listener: (this: ${id}Element, event: ${id}EventMap[K]) => unknown,
@@ -1225,6 +1509,16 @@ ${jsx.join("\n")}
 }
 `;
 }
+function jsdoc(text, indent) {
+  if (!text) return "";
+  const lines = text.replace(/\*\//g, "*\\/").split("\n");
+  if (lines.length === 1) return `${indent}/** ${lines[0]} */
+`;
+  return `${indent}/**
+${lines.map((line) => `${indent} *${line ? ` ${line}` : ""}`).join("\n")}
+${indent} */
+`;
+}
 function member(prop) {
   return /^[A-Za-z_$][\w$]*$/.test(prop) ? prop : JSON.stringify(prop);
 }
@@ -1336,7 +1630,7 @@ function resolveCssToken(bundle) {
       output.code = output.code.replace(token, "void 0");
       continue;
     }
-    const href = relative3(dirname3(output.fileName), stylesheet).replace(/\\/g, "/");
+    const href = relative3(dirname4(output.fileName), stylesheet).replace(/\\/g, "/");
     output.code = output.code.replace(
       token,
       `new URL(${JSON.stringify(`./${href}`)}, import.meta.url).href`
@@ -1444,7 +1738,7 @@ function shimWorkers(code) {
       walk(child, node, outside ? shadowed : hidden);
     }
   };
-  walk(parseAst3(code, { lang: "js" }), void 0, false);
+  walk(parseAst4(code, { lang: "js" }), void 0, false);
   if (!callees.length) return null;
   let out = code;
   for (const { start, end } of callees.sort((a, b) => b.start - a.start)) {
@@ -1493,7 +1787,20 @@ function readElementSource(entry, tag, root) {
       `[mountly] cannot read the props of ${entry.component} for <${tag}>. Declare the props type in that file, or pass \`props\` on the element entry.`
     );
   }
-  return { props, docs: extractDocs(source, opts) };
+  const docs = extractDocs(source, opts);
+  const types = entry.props ? { props: {}, events: {}, declarations: [] } : embedTypes(source, {
+    ...opts,
+    file: resolve3(root, entry.component),
+    scope: name(tag),
+    load: (file) => {
+      try {
+        return readFileSync2(file, "utf8");
+      } catch {
+        return void 0;
+      }
+    }
+  });
+  return { props, docs, types };
 }
 function defineElementsConfig(options) {
   const entryId = "virtual:mountly-embed";
@@ -1510,13 +1817,14 @@ function defineElementsConfig(options) {
       root = config.root;
       assertSingleCompiler(config.plugins);
       elements = normalize(options, root).map(([tag, entry]) => {
-        const { props, docs } = readElementSource(entry, tag, root);
+        const { props, docs, types } = readElementSource(entry, tag, root);
         return {
           tag,
           entry,
           props,
           framework: entry.framework ?? frameworkFor(entry.component),
-          docs
+          docs,
+          types
         };
       });
       const warn = config.logger?.warn.bind(config.logger) ?? console.warn;

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+import { type ExtractOptions } from "./props.js";
+export interface EmbedTypes {
+    /** Per prop, its type as written, with copied names renamed. */
+    props: Record<string, string>;
+    /** Per DOM event, the type of its `detail`: the callback's first argument. */
+    events: Record<string, string>;
+    /** The declarations those types name, to emit beside them. */
+    declarations: string[];
+}
+export interface EmbedTypesOptions extends ExtractOptions {
+    /** Prefix for copied declarations, so two elements' `Line` types cannot collide. */
+    scope: string;
+    /** Read a file an import points at. Absent or `undefined`: imports stay opaque. */
+    load?: (file: string) => string | undefined;
+}
+export declare function embedTypes(code: string, options: EmbedTypesOptions): EmbedTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mountly-vite-plugin",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Vite lib build plugin for mountly vertical widgets (dual ESM output)",
   "license": "Apache-2.0",
   "repository": {