mountly-vite-plugin 1.2.3 → 1.5.0

package/README.md

@@ -78,6 +78,21 @@ to compose them into a config you already own:
 | `mountlyCssAsText`              | import CSS as a string, for adopting into a shadow root  |
 | `getFrameworkPeerExternals`     | the externals list for a peer build                      |
 
+## Script-tag component libraries
+
+`defineElementsConfig({ prefix, elements })` turns typed React/Vue/Svelte
+components into lazily-loaded custom elements, and emits `embed.d.ts` and
+`custom-elements.json` alongside `embed.js`.
+
+Elements render in light DOM, so the consuming page's design system reaches in.
+Pass `shadow: true` when the host is not one you trust: every element in the
+distribution then renders into its own shadow root, and the build emits one
+stylesheet that it injects into no document.
+
+See the [complete guide](https://mountly.dev/concepts/script-embeds/) and the
+[React](../../docs/examples/react-embed) and
+[mixed-framework](../../docs/examples/mixed-embed) examples.
+
 ## TypeScript
 
 `mountlyManifestFragmentPlugin` reads exports from the TypeScript checker and

package/dist/embed.d.ts

@@ -0,0 +1,63 @@
+import { type UserConfig } from "vite";
+import type { MountlyWidgetFramework } from "./index.js";
+import { type PropSpec } from "./props.js";
+export interface MountlyElementEntry {
+    /** Browser-compatible component source, also importable directly by your app. */
+    component: string;
+    exportName?: string;
+    /**
+     * Override the adapter for this element. Inferred from the file extension, so
+     * this is only for a component whose extension does not say what it is — a
+     * Vue `defineComponent` written in a `.ts` file, say.
+     */
+    framework?: MountlyWidgetFramework;
+    /** Override the prop table when the component's props type lives elsewhere. */
+    props?: PropSpec[];
+    /** Core trigger syntax. Defaults to mounting when connected. */
+    trigger?: string;
+}
+export interface MountlyElementsConfigOptions {
+    /**
+     * Namespace for the generated tags. Custom element names need a dash, and
+     * the consumer's page is not yours — `acme` gives `<acme-payments-summary>`.
+     */
+    prefix: string;
+    /** A glob of component files, or an explicit tag → component map. */
+    elements: string | string[] | Record<string, string | MountlyElementEntry>;
+    /**
+     * Project root. Only needed when the config is not loaded from it — a
+     * monorepo running the build from elsewhere, say. Defaults to `process.cwd()`.
+     */
+    root?: string;
+    /**
+     * Render every element into a shadow root instead of the host's light DOM.
+     *
+     * Light DOM is the default because the usual consumer is a page that wants
+     * its own design system to reach in — a CMS template, a partner site running
+     * your tokens. Turn this on when the host is one you do not trust to leave
+     * your component alone, or that you must not affect: the host's CSS cannot
+     * reach in, and your CSS stops being emitted into its document.
+     *
+     * The whole distribution shares the setting, because it describes the kind
+     * of host you ship to, not the component.
+     */
+    shadow?: boolean;
+}
+/**
+ * Route each `new Worker(…)` that means the platform's Worker through the
+ * cross-origin shim. Parsed, not pattern-matched: the same characters in a
+ * string, template or comment are content, and an inline worker's source is one
+ * of those strings. A call is left alone when any enclosing scope binds
+ * `Worker` (a parameter, a catch, a var, a let, a class, an import), since that
+ * call constructs the author's Worker.
+ */
+export declare function shimWorkers(code: string): string | null;
+/**
+ * Build a script-tag distribution: one file registers every tag, and each
+ * component, its framework and its CSS arrive only when an element connects.
+ *
+ * The author writes an ordinary React/Vue/Svelte component. Its props type is
+ * read at build time, so the consumer gets real attributes, real properties and
+ * real DOM events with nothing to configure on either side.
+ */
+export declare function defineElementsConfig(options: MountlyElementsConfigOptions): UserConfig;

package/dist/index.d.ts

@@ -3,6 +3,13 @@ export { mountlyHostPlugin, type MountlyHostPluginOptions } from "./host.js";
 export { mountlyManifestFragmentPlugin, type ManifestFragmentPluginOptions } from "./fragment.js";
 export type MountlyWidgetFramework = "react" | "vue" | "svelte";
 export declare function getFrameworkPeerExternals(framework: MountlyWidgetFramework): Array<string | RegExp>;
+/**
+ * The self-contained build's whole promise is "drop this file in a page and it
+ * works", so mountly's own runtime helpers are bundled in rather than
+ * externalised: the host then needs no import map at all. The peer build still
+ * externalises them, because sharing through the host's import map is the point
+ * of that build.
+ */
 export declare function getSelfContainedExternals(framework: MountlyWidgetFramework): Array<string | RegExp>;
 export interface MountlyCssAsTextOptions {
     include?: string | RegExp | (string | RegExp)[];
@@ -63,3 +70,5 @@ export interface DefineMountlyWidgetConfigOptions {
     featureExport?: string;
 }
 export declare function defineMountlyWidgetConfig(options?: DefineMountlyWidgetConfigOptions): UserConfig[];
+export { defineElementsConfig, type MountlyElementsConfigOptions, type MountlyElementEntry, } from "./embed.js";
+export { extractProps, type PropSpec, type PropKind } from "./props.js";

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { readFileSync as readFileSync2 } from "fs";
+import { readFileSync as readFileSync3 } from "fs";
 import { exportKeyToSubpath as exportKeyToSubpath3 } from "mountly-manifest";
 
 // src/fragment.ts
@@ -144,7 +144,7 @@ function mountlyManifestFragmentPlugin(options) {
       if (options.team) vertical.team = options.team;
       if (options.version) vertical.version = options.version;
       if (options.featureExport) vertical.featureExport = options.featureExport;
-      const declarations = emitDeclarations(entry, exposeEntries);
+      const declarations2 = emitDeclarations(entry, exposeEntries);
       const namedExports = await collectNamedExports([
         ...entry ? [entry] : [],
         ...Object.values(exposeEntries)
@@ -158,7 +158,7 @@ function mountlyManifestFragmentPlugin(options) {
           mapped[key] = value.startsWith("./") ? value : `./${exportKeyToSubpath(value)}`;
           const exposeEntry = exposeEntries[key];
           const exportNames = exposeEntry ? namedExports.get(exposeEntry) ?? [] : [];
-          const declaration = declarations.exportDeclarations[key];
+          const declaration = declarations2.exportDeclarations[key];
           if (exportNames.length > 0 || declaration) {
             typedExports[key] = declaration || exportNames.length > 0 ? {
               ...declaration ? { declaration } : {},
@@ -167,16 +167,16 @@ function mountlyManifestFragmentPlugin(options) {
           }
         }
         vertical.exports = mapped;
-        if (moduleTypes.length > 0 || declarations.rootDeclaration || Object.keys(typedExports).length > 0) {
+        if (moduleTypes.length > 0 || declarations2.rootDeclaration || Object.keys(typedExports).length > 0) {
           vertical.types = {
-            ...declarations.rootDeclaration ? { declaration: declarations.rootDeclaration } : {},
+            ...declarations2.rootDeclaration ? { declaration: declarations2.rootDeclaration } : {},
             ...moduleTypes.length > 0 ? { module: [...new Set(moduleTypes)].sort() } : {},
             ...Object.keys(typedExports).length > 0 ? { exports: typedExports } : {}
           };
         }
-      } else if (moduleTypes.length > 0 || declarations.rootDeclaration) {
+      } else if (moduleTypes.length > 0 || declarations2.rootDeclaration) {
         vertical.types = {
-          ...declarations.rootDeclaration ? { declaration: declarations.rootDeclaration } : {},
+          ...declarations2.rootDeclaration ? { declaration: declarations2.rootDeclaration } : {},
           module: [...new Set(moduleTypes)].sort()
         };
       }
@@ -332,12 +332,12 @@ async function materializeTypeGraph(root, verticalId, source, cacheDir, seen) {
   }
   return localFile;
 }
-async function writeTypesFile(manifest, outFile, root, remotes, strict) {
+async function writeTypesFile(manifest2, outFile, root, remotes, strict) {
   if (!outFile) return;
   const cacheDir = join2(dirname2(outFile), ".mountly", "remotes");
   const declarationModules = /* @__PURE__ */ new Map();
   const seen = /* @__PURE__ */ new Map();
-  for (const vertical of manifest.verticals) {
+  for (const vertical of manifest2.verticals) {
     const rootSpecifier = vertical.alias ?? vertical.id;
     const remoteOrigin = remotes[vertical.id];
     const entries = [
@@ -374,7 +374,7 @@ async function writeTypesFile(manifest, outFile, root, remotes, strict) {
       }
     }
   }
-  const next = codegenManifestTypes(manifest, {
+  const next = codegenManifestTypes(manifest2, {
     resolveDeclarationModule: ({ specifier }) => declarationModules.get(specifier) ?? null,
     resolveExportNames: ({ vertical, exportKey }) => exportNamesForVertical(vertical, exportKey)
   });
@@ -383,8 +383,8 @@ async function writeTypesFile(manifest, outFile, root, remotes, strict) {
   if (prev === next) return;
   writeFileSync2(outFile, next);
 }
-function verticalIdFromSpecifier(manifest, specifier) {
-  for (const vertical of manifest.verticals) {
+function verticalIdFromSpecifier(manifest2, specifier) {
+  for (const vertical of manifest2.verticals) {
     const roots = [vertical.id, vertical.alias].filter(Boolean);
     for (const root of roots) {
       if (specifier === root || specifier.startsWith(`${root}/`)) {
@@ -394,10 +394,10 @@ function verticalIdFromSpecifier(manifest, specifier) {
   }
   return null;
 }
-function resolveDevUrl(manifest, specifier, remotes) {
-  const manifestUrl = resolveRemoteImport(manifest, specifier);
+function resolveDevUrl(manifest2, specifier, remotes) {
+  const manifestUrl = resolveRemoteImport(manifest2, specifier);
   if (!manifestUrl) return null;
-  const verticalId = verticalIdFromSpecifier(manifest, specifier);
+  const verticalId = verticalIdFromSpecifier(manifest2, specifier);
   const remoteOrigin = verticalId ? remotes[verticalId] : void 0;
   if (!remoteOrigin) return manifestUrl;
   if (manifestUrl.startsWith("/")) {
@@ -413,9 +413,9 @@ function resolveDevUrl(manifest, specifier, remotes) {
   }
   return `${remoteOrigin.replace(/\/$/, "")}/${manifestUrl.replace(/^\/+/, "")}`;
 }
-function isRemoteSpecifier(manifest, id) {
-  if (resolveRemoteImport(manifest, id)) return true;
-  return manifest.verticals.some((vertical) => {
+function isRemoteSpecifier(manifest2, id) {
+  if (resolveRemoteImport(manifest2, id)) return true;
+  return manifest2.verticals.some((vertical) => {
     const roots = [vertical.id, vertical.alias].filter(Boolean);
     return roots.some((root) => id.startsWith(`${root}/`));
   });
@@ -432,7 +432,7 @@ function applyBaseToImportUrl(url, base) {
 }
 async function fetchRemoteFragments(remotes) {
   const verticals = [];
-  for (const [name, urlRaw] of Object.entries(remotes)) {
+  for (const [name2, urlRaw] of Object.entries(remotes)) {
     const trimmed = urlRaw.replace(/\/+$/, "");
     const isFragmentUrl = trimmed.endsWith(".json");
     const fragmentUrl = isFragmentUrl ? trimmed : `${trimmed}/mountly.manifest.fragment.json`;
@@ -440,7 +440,7 @@ async function fetchRemoteFragments(remotes) {
     const response = await fetch(fragmentUrl);
     if (!response.ok) {
       throw new Error(
-        `[mountly:host] remote "${name}": failed to fetch ${fragmentUrl} (${response.status}) \u2014 is the remote built and served?`
+        `[mountly:host] remote "${name2}": failed to fetch ${fragmentUrl} (${response.status}) \u2014 is the remote built and served?`
       );
     }
     const fragment = await response.json();
@@ -450,7 +450,7 @@ async function fetchRemoteFragments(remotes) {
       verticals.push({
         ...vertical,
         // A `mountlyRemote` build emits one vertical; key it by the host's remote name.
-        id: fragmentVerticals.length === 1 ? name : vertical.id,
+        id: fragmentVerticals.length === 1 ? name2 : vertical.id,
         url: absolute
       });
     }
@@ -470,7 +470,7 @@ function mountlyHostPlugin(options) {
     }
   };
   const strictTypes = options.types !== false && typeof options.types === "object" ? options.types.strict ?? true : options.types !== false;
-  let manifest;
+  let manifest2;
   let root = process.cwd();
   let isProduction = false;
   let sourceFiles = [];
@@ -520,11 +520,11 @@ function mountlyHostPlugin(options) {
     async config(_config, env) {
       isProduction = env.command === "build";
       await ensureUrlRemotes();
-      manifest = loadCurrentManifest();
-      maybeWriteManifest(manifest);
+      manifest2 = loadCurrentManifest();
+      maybeWriteManifest(manifest2);
       typesOutFile = resolveTypesOutFile(root, options.manifest, options.types);
-      void writeTypesFile(manifest, typesOutFile, root, devOrigins, false);
-      const external = manifestRemoteSpecifiers(manifest);
+      void writeTypesFile(manifest2, typesOutFile, root, devOrigins, false);
+      const external = manifestRemoteSpecifiers(manifest2);
       return {
         build: {
           rollupOptions: {
@@ -540,15 +540,15 @@ function mountlyHostPlugin(options) {
       root = config.root;
       viteBase = config.base;
       await ensureUrlRemotes();
-      manifest = loadCurrentManifest();
+      manifest2 = loadCurrentManifest();
       typesOutFile = resolveTypesOutFile(root, options.manifest, options.types);
-      void writeTypesFile(manifest, typesOutFile, root, devOrigins, false);
+      void writeTypesFile(manifest2, typesOutFile, root, devOrigins, false);
     },
     async buildStart() {
       await ensureUrlRemotes();
-      manifest = loadCurrentManifest();
-      maybeWriteManifest(manifest);
-      await writeTypesFile(manifest, typesOutFile, root, devOrigins, strictTypes);
+      manifest2 = loadCurrentManifest();
+      maybeWriteManifest(manifest2);
+      await writeTypesFile(manifest2, typesOutFile, root, devOrigins, strictTypes);
       for (const file of sourceFiles) this.addWatchFile(file);
     },
     configureServer(server) {
@@ -556,12 +556,12 @@ function mountlyHostPlugin(options) {
     },
     handleHotUpdate(ctx) {
       if (!sourceFiles.includes(ctx.file)) return;
-      manifest = loadCurrentManifest();
-      void writeTypesFile(manifest, typesOutFile, root, devOrigins, false);
+      manifest2 = loadCurrentManifest();
+      void writeTypesFile(manifest2, typesOutFile, root, devOrigins, false);
     },
     resolveId(id) {
-      if (!isRemoteSpecifier(manifest, id)) return null;
-      const url = isProduction ? null : resolveDevUrl(manifest, id, devOrigins);
+      if (!isRemoteSpecifier(manifest2, id)) return null;
+      const url = isProduction ? null : resolveDevUrl(manifest2, id, devOrigins);
       if (url) {
         return { id: url, external: true };
       }
@@ -573,9 +573,9 @@ function mountlyHostPlugin(options) {
         let next = html;
         if (injectImportMap) {
           const imports = Object.fromEntries(
-            Object.entries(manifestToImportMap(manifest)).map(([specifier, url]) => [
+            Object.entries(manifestToImportMap(manifest2)).map(([specifier, url]) => [
               specifier,
-              isProduction ? applyBaseToImportUrl(url, viteBase) : resolveDevUrl(manifest, specifier, devOrigins) ?? url
+              isProduction ? applyBaseToImportUrl(url, viteBase) : resolveDevUrl(manifest2, specifier, devOrigins) ?? url
             ])
           );
           const snippet = `<script type="importmap">
@@ -592,6 +592,779 @@ ${JSON.stringify({ imports }, null, 2)}
   };
 }
 
+// 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 parseAst2 } from "vite";
+
+// src/props.ts
+import { parseAst } from "vite";
+function kebab(name2) {
+  return name2.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function eventName(prop) {
+  return kebab(prop.replace(/^on(?=[A-Z])/, ""));
+}
+function unwrapUnion(type) {
+  if (type.type !== "TSUnionType") return type;
+  const real = type.types.filter(
+    (t) => t.type !== "TSUndefinedKeyword" && t.type !== "TSNullKeyword" && !(t.type === "TSLiteralType" && t.literal?.value === null)
+  );
+  if (real.length === 1) return unwrapUnion(real[0]);
+  if (real.length > 1 && real.every((t) => typeof t.literal?.value === "string")) {
+    return { type: "TSStringKeyword" };
+  }
+  return { type: "TSUnknown" };
+}
+function kindOf(type, types, seen = 0) {
+  if (!type || seen > 4) return "auto";
+  const resolved = unwrapUnion(type);
+  if (resolved.type === "TSLiteralType") {
+    const value = resolved.literal?.value;
+    if (typeof value === "string") return "string";
+    if (typeof value === "number") return "number";
+    if (typeof value === "boolean") return "boolean";
+    return "json";
+  }
+  switch (resolved.type) {
+    case "TSStringKeyword":
+      return "string";
+    case "TSNumberKeyword":
+      return "number";
+    case "TSBooleanKeyword":
+      return "boolean";
+    case "TSFunctionType":
+      return "function";
+    case "TSTypeReference": {
+      if (resolved.typeArguments) return "json";
+      const alias = types.get(resolved.typeName?.name);
+      if (alias) return kindOf(alias, types, seen + 1);
+      return "auto";
+    }
+    default:
+      return "json";
+  }
+}
+function localTypes(body) {
+  const types = /* @__PURE__ */ new Map();
+  for (const raw of body) {
+    const node = raw.type === "ExportNamedDeclaration" && raw.declaration ? raw.declaration : raw;
+    if (node.type === "TSInterfaceDeclaration") types.set(node.id.name, node);
+    if (node.type === "TSTypeAliasDeclaration") types.set(node.id.name, node.typeAnnotation);
+  }
+  return types;
+}
+function membersOf(type, types, seen = 0) {
+  if (!type || seen > 4) return null;
+  if (type.type === "TSTypeLiteral" || type.type === "TSInterfaceBody") {
+    return type.body ?? type.members;
+  }
+  if (type.type === "TSTypeReference" && type.typeName?.type === "Identifier") {
+    return membersOf(types.get(type.typeName.name), types, seen + 1);
+  }
+  if (type.type === "TSInterfaceDeclaration") {
+    const inherited = [];
+    for (const heritage of type.extends ?? []) {
+      const base = membersOf(types.get(heritage.expression?.name), types, seen + 1);
+      if (!base) return null;
+      inherited.push(...base);
+    }
+    return [...inherited, ...type.body?.body ?? []];
+  }
+  if (type.type === "TSIntersectionType") {
+    const all = [];
+    for (const part of type.types) {
+      const members = membersOf(part, types, seen + 1);
+      if (!members) return null;
+      all.push(...members);
+    }
+    return all;
+  }
+  return null;
+}
+function isComponent(node) {
+  return node.type === "FunctionDeclaration" || node.type === "ArrowFunctionExpression" || node.type === "FunctionExpression";
+}
+function findExport(body, exportName) {
+  if (exportName === "default") {
+    const node = body.find((n) => n.type === "ExportDefaultDeclaration");
+    if (!node) return null;
+    if (isComponent(node.declaration)) return node.declaration;
+    if (node.declaration.type === "Identifier") return findVariable(body, node.declaration.name);
+    return null;
+  }
+  for (const raw of body) {
+    if (raw.type !== "ExportNamedDeclaration" || !raw.declaration) continue;
+    const declaration = raw.declaration;
+    if (declaration.type === "FunctionDeclaration" && declaration.id?.name === exportName) {
+      return declaration;
+    }
+    if (declaration.type === "VariableDeclaration") {
+      const match = declaration.declarations.find((d) => d.id?.name === exportName);
+      if (match) return match;
+    }
+  }
+  return findVariable(body, exportName);
+}
+function findVariable(body, name2) {
+  for (const raw of body) {
+    const node = raw.type === "ExportNamedDeclaration" && raw.declaration ? raw.declaration : raw;
+    if (node.type !== "VariableDeclaration") continue;
+    const match = node.declarations.find((d) => d.id?.name === name2);
+    if (match) return match;
+  }
+  return null;
+}
+function componentFn(declaration) {
+  if (isComponent(declaration)) return declaration;
+  const init = declaration.init;
+  if (init && isComponent(init)) return init;
+  if (init?.type === "CallExpression") {
+    const inner = init.arguments?.find((argument) => isComponent(argument));
+    if (inner) return inner;
+  }
+  return void 0;
+}
+function propsType(declaration) {
+  const annotation = componentFn(declaration)?.params?.[0]?.typeAnnotation?.typeAnnotation;
+  if (annotation) return annotation;
+  return declaration.id?.typeAnnotation?.typeAnnotation?.typeArguments?.params?.[0] ?? declaration.init?.typeArguments?.params?.[0];
+}
+function destructuredNames(declaration) {
+  const param = componentFn(declaration)?.params?.[0];
+  if (param?.type !== "ObjectPattern") return [];
+  return param.properties.filter((p) => p.type === "Property" && p.key?.type === "Identifier").map((p) => p.key.name);
+}
+function takesProps(declaration) {
+  const fn = componentFn(declaration);
+  if (fn) return Boolean(fn.params?.length) || Boolean(propsType(declaration));
+  return propsType(declaration) ? true : "unknown";
+}
+function toSpec(name2, kind) {
+  if (/^on[A-Z]/.test(name2)) return { name: name2, kind: "event", event: eventName(name2) };
+  if (kind === "event" || kind === "function") return { name: name2, kind: "function" };
+  return { name: name2, attribute: kebab(name2), kind };
+}
+var VUE_CTOR = {
+  String: "string",
+  Number: "number",
+  Boolean: "boolean",
+  Array: "json",
+  Object: "json",
+  Function: "function"
+};
+function vueOptions(body) {
+  const exported = body.find((n) => n.type === "ExportDefaultDeclaration")?.declaration;
+  if (!exported) return null;
+  const object = exported.type === "CallExpression" ? exported.arguments?.[0] : exported;
+  if (object?.type !== "ObjectExpression") return null;
+  for (const property of object.properties) {
+    if (property.type === "SpreadElement") return null;
+    const key = keyOf(property);
+    if (key === "mixins" || key === "extends") return null;
+  }
+  const entry = (key) => object.properties.find((p) => p.type === "Property" && keyOf(p) === key)?.value;
+  const declaredProps = entry("props");
+  const specs = [];
+  if (declaredProps?.type === "ArrayExpression") {
+    for (const element of declaredProps.elements) {
+      if (typeof element?.value !== "string") return null;
+      specs.push(toSpec(element.value, "auto"));
+    }
+  } else if (declaredProps?.type === "ObjectExpression") {
+    for (const property of declaredProps.properties) {
+      const name2 = keyOf(property);
+      if (!name2) return null;
+      const value = property.value;
+      const ctor = value?.type === "ObjectExpression" ? value.properties.find((q) => keyOf(q) === "type")?.value?.name : value?.name;
+      specs.push(toSpec(name2, ctor ? VUE_CTOR[ctor] ?? "json" : "auto"));
+    }
+  } else if (declaredProps) {
+    return null;
+  }
+  const declaredEmits = entry("emits");
+  if (declaredEmits?.type === "ArrayExpression") {
+    for (const element of declaredEmits.elements) {
+      if (typeof element?.value !== "string") return null;
+      specs.push({ name: onProp(element.value), kind: "event", event: element.value });
+    }
+  } else if (declaredEmits) {
+    return null;
+  }
+  return specs.length || declaredProps || declaredEmits ? specs : null;
+}
+function onProp(event) {
+  return `on${event.replace(/(^|-)([a-z])/g, (_m, _dash, char) => char.toUpperCase())}`;
+}
+function scriptOf(code) {
+  const blocks = [...code.matchAll(/<script\b[^>]*>([\s\S]*?)<\/script>/g)].map((m) => m[1]);
+  return blocks.join("\n");
+}
+function keyOf(node) {
+  if (node.key?.type === "Identifier") return node.key.name;
+  if (node.key?.type === "Literal" && typeof node.key.value === "string") return node.key.value;
+  return null;
+}
+function specsFrom(members, types) {
+  const specs = [];
+  for (const member2 of members) {
+    if (member2.type !== "TSPropertySignature" && member2.type !== "TSMethodSignature") continue;
+    const name2 = keyOf(member2);
+    if (!name2) continue;
+    specs.push(
+      member2.type === "TSMethodSignature" ? toSpec(name2, "function") : toSpec(name2, kindOf(member2.typeAnnotation?.typeAnnotation, types))
+    );
+  }
+  return specs;
+}
+function macroCall(body, macro) {
+  const find = (node, depth = 0) => {
+    if (!node || node.type !== "CallExpression" || depth > 3) return void 0;
+    if (node.callee?.name === macro) return node;
+    for (const argument of node.arguments ?? []) {
+      const nested = find(argument, depth + 1);
+      if (nested) return nested;
+    }
+    return void 0;
+  };
+  for (const raw of body) {
+    if (raw.type !== "VariableDeclaration" && raw.type !== "ExpressionStatement") continue;
+    const roots = raw.type === "VariableDeclaration" ? raw.declarations.map((d) => d.init) : [raw.expression];
+    for (const root of roots) {
+      const call = find(root);
+      if (call) return call;
+    }
+  }
+  return void 0;
+}
+function vueEvents(body, types) {
+  const call = macroCall(body, "defineEmits");
+  if (!call) return [];
+  const array = call.arguments?.[0];
+  if (array?.type === "ArrayExpression") {
+    const names2 = array.elements.map((element) => element?.value);
+    return names2.every((name2) => typeof name2 === "string") ? names2.map((event) => ({ name: onProp(event), kind: "event", event })) : null;
+  }
+  const members = membersOf(call.typeArguments?.params?.[0], types);
+  if (!members) return null;
+  const names = members.flatMap((m) => {
+    if (m.type === "TSPropertySignature") return [m.key?.value ?? m.key?.name];
+    const literal = m.params?.[0]?.typeAnnotation?.typeAnnotation?.literal?.value;
+    return literal ? [literal] : [];
+  });
+  if (!names.every((name2) => typeof name2 === "string")) return null;
+  return names.map((event) => ({ name: onProp(event), kind: "event", event }));
+}
+function svelteProps(body) {
+  for (const raw of body) {
+    if (raw.type !== "VariableDeclaration") continue;
+    for (const declarator of raw.declarations) {
+      if (declarator.init?.type === "CallExpression" && declarator.init.callee?.name === "$props") {
+        return declarator;
+      }
+    }
+  }
+  return null;
+}
+function extractProps(code, options = {}) {
+  const file = options.file ?? "component.tsx";
+  const sfc = /\.(vue|svelte)$/.exec(file)?.[1];
+  const source = sfc ? scriptOf(code) : code;
+  const body = parseAst(source, { lang: sfc ? "ts" : "tsx" }).body;
+  const types = localTypes(body);
+  if (sfc === "vue") {
+    const events = vueEvents(body, types);
+    if (!events) return null;
+    const call = macroCall(body, "defineProps");
+    if (call) {
+      const members2 = membersOf(call.typeArguments?.params?.[0], types);
+      if (!members2) return null;
+      return [...specsFrom(members2, types), ...events];
+    }
+    const options2 = vueOptions(body);
+    if (options2) return [...options2, ...events];
+    return events.length ? events : null;
+  }
+  if (sfc === "svelte") {
+    const declarator = svelteProps(body);
+    if (!declarator) return null;
+    const declared2 = declarator.id?.typeAnnotation?.typeAnnotation;
+    const members2 = membersOf(declared2, types);
+    if (members2) return specsFrom(members2, types);
+    if (declared2) return null;
+    const names = (declarator.id?.properties ?? []).filter((p) => p.type === "Property" && p.key?.type === "Identifier").map((p) => p.key.name);
+    return names.length ? names.map((name2) => toSpec(name2, "auto")) : null;
+  }
+  const declaration = findExport(body, options.exportName ?? "default");
+  if (!declaration) return null;
+  const declared = propsType(declaration);
+  const members = membersOf(declared, types);
+  if (members) return specsFrom(members, types);
+  if (declared) return null;
+  const destructured = destructuredNames(declaration);
+  if (destructured.length) return destructured.map((name2) => toSpec(name2, "auto"));
+  return takesProps(declaration) === false ? [] : null;
+}
+
+// src/embed.ts
+function frameworkFor(file) {
+  if (file.endsWith(".vue")) return "vue";
+  if (file.endsWith(".svelte")) return "svelte";
+  return "react";
+}
+var TS_TYPE = {
+  string: "string",
+  number: "number",
+  boolean: "boolean",
+  json: "unknown",
+  auto: "unknown",
+  function: "(...args: never[]) => unknown"
+};
+function tagFor(file, prefix) {
+  return `${prefix}-${kebab(basename(file, extname(file)))}`;
+}
+function normalize(options, root) {
+  const prefix = kebab(options.prefix);
+  const seen = /* @__PURE__ */ new Set();
+  const unique = (entries2) => {
+    for (const [tag, entry] of entries2) {
+      if (seen.has(tag)) {
+        throw new Error(`[mountly] two components both map to <${tag}>: ${entry.component}`);
+      }
+      seen.add(tag);
+    }
+    return entries2;
+  };
+  if (typeof options.elements === "string" || Array.isArray(options.elements)) {
+    const patterns = [options.elements].flat();
+    const files = patterns.flatMap((pattern) => globSync(pattern, { cwd: root }).sort());
+    if (!files.length) {
+      throw new Error(`[mountly] no components matched ${patterns.join(", ")}`);
+    }
+    return unique(files.map((file) => [tagFor(file, prefix), { component: file }]));
+  }
+  const entries = Object.entries(options.elements).map(
+    ([name2, entry]) => [
+      // The namespace is the point of `prefix`, so it always applies. Naming a
+      // key that already carries it is allowed, and means the same tag.
+      name2.startsWith(`${prefix}-`) ? name2 : `${prefix}-${kebab(name2)}`,
+      typeof entry === "string" ? { component: entry } : entry
+    ]
+  );
+  if (!entries.length) throw new Error("[mountly] elements must contain at least one component");
+  return unique(entries);
+}
+function declarations(elements) {
+  const blocks = elements.map(({ tag, props }) => {
+    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 block = (kind, lines) => lines.length ? `export interface ${id}${kind} {
+${lines.join("\n")}
+}` : `export interface ${id}${kind} {}`;
+    return `${block("Props", members)}
+
+${block("EventMap", events)}
+
+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,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: ${id}Element, event: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+}`;
+  });
+  const tagMap = elements.map(({ tag }) => `    ${JSON.stringify(tag)}: ${name(tag)}Element;`);
+  const jsx = elements.map(
+    ({ tag }) => `      ${JSON.stringify(tag)}: ${name(tag)}Props & { children?: unknown; class?: string; id?: string };`
+  );
+  return `// Generated by mountly-vite-plugin. Do not edit.
+// Self-contained: a consumer with only the script tag needs no package installed.
+
+type MountlyElement<Props> = HTMLElement &
+  Partial<Props> & {
+    /** Retry a failed load, or mount before the configured trigger. */
+    mount(): Promise<void>;
+  };
+
+${blocks.join("\n\n")}
+
+declare global {
+  interface HTMLElementTagNameMap {
+${tagMap.join("\n")}
+  }
+  // The global JSX namespace, which Preact, Solid and Vue JSX read.
+  namespace JSX {
+    interface IntrinsicElements {
+${jsx.join("\n")}
+    }
+  }
+}
+`;
+}
+function reactDeclarations(elements) {
+  const jsx = elements.map(
+    ({ tag }) => `      ${JSON.stringify(tag)}: ${name(tag)}Props & { children?: React.ReactNode; class?: string; id?: string; ref?: React.Ref<HTMLElement> };`
+  );
+  const imports = elements.map(({ tag }) => `${name(tag)}Props`).join(", ");
+  return `// Generated by mountly-vite-plugin. Do not edit.
+// Reference this file instead of embed.d.ts in a React host.
+/// <reference path="./embed.d.ts" />
+import type * as React from "react";
+import type { ${imports} } from "./embed.js";
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+${jsx.join("\n")}
+    }
+  }
+}
+`;
+}
+function member(prop) {
+  return /^[A-Za-z_$][\w$]*$/.test(prop) ? prop : JSON.stringify(prop);
+}
+function name(tag) {
+  return tag.replace(/(^|-)([a-z])/g, (_m, _d, char) => char.toUpperCase());
+}
+function manifest(elements) {
+  return JSON.stringify(
+    {
+      schemaVersion: "1.0.0",
+      readme: "",
+      modules: elements.map(({ tag, entry, props }) => ({
+        kind: "javascript-module",
+        path: entry.component,
+        declarations: [
+          {
+            kind: "class",
+            name: name(tag),
+            customElement: true,
+            tagName: tag,
+            members: props.filter((spec) => spec.kind !== "event").map((spec) => ({
+              kind: "field",
+              name: spec.name,
+              type: { text: TS_TYPE[spec.kind] ?? "unknown" }
+            })),
+            attributes: props.filter((spec) => spec.attribute).map((spec) => ({
+              name: spec.attribute,
+              fieldName: spec.name,
+              type: { text: TS_TYPE[spec.kind] ?? "unknown" }
+            })),
+            events: props.filter((spec) => spec.kind === "event").map((spec) => ({ name: spec.event, type: { text: "CustomEvent" } }))
+          }
+        ],
+        exports: [
+          {
+            kind: "custom-element-definition",
+            name: tag,
+            declaration: { name: name(tag), module: entry.component }
+          }
+        ]
+      }))
+    },
+    null,
+    2
+  );
+}
+var FRAMEWORK_PLUGIN = {
+  vue: {
+    prefix: "vite:vue",
+    module: "@vitejs/plugin-vue",
+    load: async () => [(await import("@vitejs/plugin-vue")).default()].flat()
+  },
+  svelte: {
+    prefix: "vite-plugin-svelte",
+    module: "@sveltejs/vite-plugin-svelte",
+    load: async () => [(await import("@sveltejs/vite-plugin-svelte")).svelte()].flat()
+  }
+  // React needs none: `oxc.jsx` below already transforms JSX.
+};
+async function frameworkPlugins(frameworks) {
+  const added = [];
+  for (const framework of frameworks) {
+    const entry = FRAMEWORK_PLUGIN[framework];
+    if (!entry) continue;
+    try {
+      added.push(...await entry.load());
+    } catch {
+      throw new Error(
+        `[mountly] ${framework} components need ${entry.module}. Install it, or add your own compiler plugin to the config.`
+      );
+    }
+  }
+  return added;
+}
+function assertSingleCompiler(plugins = []) {
+  for (const entry of Object.values(FRAMEWORK_PLUGIN)) {
+    const count = plugins.filter((plugin) => plugin?.name === entry.prefix).length;
+    if (count > 1) {
+      throw new Error(
+        `[mountly] ${entry.module} is registered ${count} times. defineElementsConfig adds it for you \u2014 remove it from your own plugins array.`
+      );
+    }
+  }
+}
+var CSS_TOKEN = "__MOUNTLY_EMBED_CSS__";
+function resolveCssToken(bundle) {
+  const stylesheet = Object.keys(bundle).find((file) => file.endsWith(".css"));
+  const token = new RegExp(`(["'\`])${CSS_TOKEN}\\1`, "g");
+  for (const output of Object.values(bundle)) {
+    if (output.type !== "chunk" || !output.code.includes(CSS_TOKEN)) continue;
+    if (!stylesheet) {
+      output.code = output.code.replace(token, "void 0");
+      continue;
+    }
+    const href = relative3(dirname3(output.fileName), stylesheet).replace(/\\/g, "/");
+    output.code = output.code.replace(
+      token,
+      `new URL(${JSON.stringify(`./${href}`)}, import.meta.url).href`
+    );
+  }
+}
+var WORKER_SHIM = 'function __mountlyWorker(u,o){var h=String(u);if(new URL(h,location.href).origin===location.origin)return new Worker(u,o);var s=o&&o.type==="module"?"import "+JSON.stringify(h)+";":"importScripts("+JSON.stringify(h)+");";return new Worker(URL.createObjectURL(new Blob([s],{type:"text/javascript"})),o)}';
+var FUNCTIONS = /* @__PURE__ */ new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression"]);
+var VAR_SCOPES = /* @__PURE__ */ new Set([...FUNCTIONS, "StaticBlock"]);
+function patternNames(pattern) {
+  if (!pattern) return [];
+  switch (pattern.type) {
+    case "Identifier":
+      return [pattern.name];
+    case "ObjectPattern":
+      return pattern.properties.flatMap(
+        (p) => patternNames(p.type === "RestElement" ? p.argument : p.value)
+      );
+    case "ArrayPattern":
+      return pattern.elements.flatMap(patternNames);
+    case "RestElement":
+      return patternNames(pattern.argument);
+    case "AssignmentPattern":
+      return patternNames(pattern.left);
+    default:
+      return [];
+  }
+}
+function children(node) {
+  const out = [];
+  for (const key in node) {
+    if (key === "parent") continue;
+    const value = node[key];
+    if (Array.isArray(value)) {
+      for (const item of value) if (item && typeof item.type === "string") out.push(item);
+    } else if (value && typeof value.type === "string") out.push(value);
+  }
+  return out;
+}
+function varNames(node) {
+  if (VAR_SCOPES.has(node.type)) return [];
+  const own = node.type === "VariableDeclaration" && node.kind === "var" ? node.declarations.flatMap((d) => patternNames(d.id)) : [];
+  return [...own, ...children(node).flatMap(varNames)];
+}
+function lexicalNames(statements) {
+  return statements.flatMap((statement) => {
+    const declared = statement.type === "ExportNamedDeclaration" || statement.type === "ExportDefaultDeclaration" ? statement.declaration : statement;
+    if (!declared) return [];
+    switch (declared.type) {
+      case "VariableDeclaration":
+        return declared.kind === "var" ? [] : declared.declarations.flatMap((d) => patternNames(d.id));
+      case "FunctionDeclaration":
+      case "ClassDeclaration":
+        return declared.id ? [declared.id.name] : [];
+      case "ImportDeclaration":
+        return declared.specifiers.map((spec) => spec.local.name);
+      default:
+        return [];
+    }
+  });
+}
+function scopeOf(node, parent) {
+  switch (node.type) {
+    case "Program":
+      return [...lexicalNames(node.body), ...varNames({ type: "Block", body: node.body })];
+    case "FunctionDeclaration":
+    case "FunctionExpression":
+    case "ArrowFunctionExpression":
+      return [
+        ...node.params.flatMap(patternNames),
+        // A named function expression sees its own name.
+        ...node.type === "FunctionExpression" && node.id ? [node.id.name] : []
+      ];
+    case "BlockStatement":
+      return FUNCTIONS.has(parent?.type) && parent?.body === node ? [...lexicalNames(node.body), ...node.body.flatMap(varNames)] : lexicalNames(node.body);
+    case "StaticBlock":
+      return [...lexicalNames(node.body), ...node.body.flatMap(varNames)];
+    case "SwitchStatement":
+      return lexicalNames(node.cases.flatMap((c) => c.consequent));
+    case "ForStatement":
+    case "ForInStatement":
+    case "ForOfStatement": {
+      const head = node.type === "ForStatement" ? node.init : node.left;
+      return head?.type === "VariableDeclaration" && head.kind !== "var" ? head.declarations.flatMap((d) => patternNames(d.id)) : [];
+    }
+    case "CatchClause":
+      return patternNames(node.param);
+    case "ClassExpression":
+      return node.id ? [node.id.name] : [];
+    default:
+      return null;
+  }
+}
+function shimWorkers(code) {
+  if (!code.includes("Worker")) return null;
+  const callees = [];
+  const walk = (node, parent, shadowed) => {
+    const scope = scopeOf(node, parent);
+    const hidden = shadowed || Boolean(scope?.includes("Worker"));
+    if (!hidden && node.type === "NewExpression" && node.callee.type === "Identifier" && node.callee.name === "Worker") {
+      callees.push(node.callee);
+    }
+    for (const child of children(node)) {
+      const outside = node.type === "SwitchStatement" && child === node.discriminant;
+      walk(child, node, outside ? shadowed : hidden);
+    }
+  };
+  walk(parseAst2(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)) {
+    out = out.slice(0, start) + "__mountlyWorker" + out.slice(end);
+  }
+  return WORKER_SHIM + out;
+}
+function readPropTable(entry, tag, root) {
+  const file = resolve3(root, entry.component);
+  const props = extractProps(readFileSync2(file, "utf8"), {
+    file,
+    exportName: entry.exportName
+  });
+  if (!props) {
+    throw new Error(
+      `[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;
+}
+function defineElementsConfig(options) {
+  const entryId = "virtual:mountly-embed";
+  const widgetPrefix = "virtual:mountly-widget/";
+  const shadow = options.shadow === true;
+  let elements = [];
+  let root = options.root ?? process.cwd();
+  const frameworks = new Set(
+    normalize(options, root).map(([, entry]) => entry.framework ?? frameworkFor(entry.component))
+  );
+  const plugin = {
+    name: "mountly:elements",
+    configResolved(config) {
+      root = config.root;
+      assertSingleCompiler(config.plugins);
+      elements = normalize(options, root).map(([tag, entry]) => ({
+        tag,
+        entry,
+        props: entry.props ?? readPropTable(entry, tag, root),
+        framework: entry.framework ?? frameworkFor(entry.component)
+      }));
+    },
+    resolveId(id) {
+      if (id === entryId || id.startsWith(widgetPrefix)) return `\0${id}`;
+    },
+    load(id) {
+      if (id === `\0${entryId}`) {
+        const definitions = elements.map(
+          ({ tag, entry, props }) => `${JSON.stringify(tag)}: {
+    load: () => import(${JSON.stringify(widgetPrefix + tag)}),
+    props: ${JSON.stringify(props)},
+    trigger: ${JSON.stringify(entry.trigger ?? "connected")}
+  }`
+        );
+        return `import { defineElements } from "mountly/embed";
+defineElements({
+  ${definitions.join(",\n  ")}
+});`;
+      }
+      if (id.startsWith(`\0${widgetPrefix}`)) {
+        const tag = id.slice(widgetPrefix.length + 1);
+        const element = elements.find((candidate) => candidate.tag === tag);
+        if (!element) return;
+        const path = resolve3(root, element.entry.component).replace(/\\/g, "/");
+        const widgetOptions = shadow ? `, { shadow: true, cssUrl: ${JSON.stringify(CSS_TOKEN)} }` : "";
+        return `import * as component from ${JSON.stringify(path)};
+import { createWidget } from ${JSON.stringify(`mountly-${element.framework}`)};
+export default createWidget(component[${JSON.stringify(element.entry.exportName ?? "default")}]${widgetOptions});`;
+      }
+    },
+    // Vite has already rewritten `new Worker(new URL(…))` to the emitted file by
+    // now, so only the constructor call needs rerouting.
+    renderChunk(code) {
+      const shimmed = shimWorkers(code);
+      return shimmed ? { code: shimmed, map: null } : null;
+    },
+    // Vite writes the stylesheet from its own `generateBundle`, so the name to
+    // point at only exists once every other plugin has had its turn.
+    generateBundle: {
+      order: "post",
+      handler(_options, bundle) {
+        if (shadow) resolveCssToken(bundle);
+        this.emitFile({ type: "asset", fileName: "embed.d.ts", source: declarations(elements) });
+        this.emitFile({
+          type: "asset",
+          fileName: "embed.react.d.ts",
+          source: reactDeclarations(elements)
+        });
+        this.emitFile({
+          type: "asset",
+          fileName: "custom-elements.json",
+          source: manifest(
+            elements.map((element) => ({
+              ...element,
+              entry: {
+                ...element.entry,
+                component: relative3(root, resolve3(root, element.entry.component))
+              }
+            }))
+          )
+        });
+      }
+    }
+  };
+  return {
+    ...options.root ? { root: options.root } : {},
+    // Vite's application pipeline already handles lazy CSS, asset rebasing,
+    // and shared framework chunks. A library build would make us recreate it.
+    base: "./",
+    // Only enable the JSX transform when React is in play: it would otherwise
+    // try to parse a `.vue` or `.svelte` file before its compiler sees it.
+    oxc: frameworks.has("react") ? { jsx: { runtime: "automatic" } } : void 0,
+    plugins: [plugin, frameworkPlugins(frameworks)],
+    // ES workers keep their own `import.meta.url` when the shim imports them
+    // from a blob:, so their relative URLs still resolve against the provider.
+    // Classic (iife) workers would see the blob's URL instead.
+    worker: { format: "es" },
+    build: {
+      sourcemap: true,
+      // Light DOM wants Vite's per-chunk stylesheets, which arrive with the
+      // component that needs them. Shadow roots need the opposite: one
+      // stylesheet nothing injects, which each element adopts for itself.
+      cssCodeSplit: !shadow,
+      rollupOptions: {
+        input: entryId,
+        output: { entryFileNames: "embed.js", chunkFileNames: "assets/[name]-[hash].js" }
+      }
+    }
+  };
+}
+
 // src/index.ts
 var PLATFORM_EXTERNALS = ["mountly", /^mountly\//];
 var FRAMEWORK_EXTERNALS = {
@@ -608,10 +1381,7 @@ function getFrameworkPeerExternals(framework) {
   return [...PLATFORM_EXTERNALS, ...FRAMEWORK_EXTERNALS[framework]];
 }
 function getSelfContainedExternals(framework) {
-  return [
-    ...PLATFORM_EXTERNALS,
-    ...FRAMEWORK_EXTERNALS[framework].filter((id) => !FRAMEWORK_BUNDLE[framework].includes(id))
-  ];
+  return FRAMEWORK_EXTERNALS[framework].filter((id) => !FRAMEWORK_BUNDLE[framework].includes(id));
 }
 function matchesFilter(id, include) {
   return include.some(
@@ -626,7 +1396,7 @@ function mountlyCssAsText(options = {}) {
     load(id) {
       if (!id.endsWith(".css")) return null;
       if (includePatterns && !matchesFilter(id, includePatterns)) return null;
-      const source = readFileSync2(id, "utf8");
+      const source = readFileSync3(id, "utf8");
       return {
         code: `export default ${JSON.stringify(source)};`,
         map: { mappings: "" }
@@ -784,7 +1554,9 @@ function defineMountlyWidgetConfig(options = {}) {
   return configs;
 }
 export {
+  defineElementsConfig,
   defineMountlyWidgetConfig,
+  extractProps,
   getFrameworkPeerExternals,
   getSelfContainedExternals,
   mountlyCssAsText,

package/dist/props.d.ts

@@ -0,0 +1,41 @@
+/**
+ * How an attribute string becomes a prop value. Derived from the component's
+ * own TypeScript types, so `currency="GBP"` stays a string and `balance="1250"`
+ * becomes a number without either side declaring anything.
+ *
+ * `event` is a callback the component calls out (`onSave`), dispatched as a DOM
+ * event. `function` is one the host passes in (`getToken`, `formatPrice`): a
+ * property only, never an attribute, and its return value reaches the component.
+ */
+export type PropKind = "string" | "number" | "boolean" | "json" | "auto" | "event" | "function";
+export interface PropSpec {
+    /** Prop name the component reads. */
+    name: string;
+    /** Attribute the consumer writes. Kebab-case of `name`; absent for events. */
+    attribute?: string;
+    kind: PropKind;
+    /** DOM event dispatched for a callback prop. */
+    event?: string;
+}
+export declare function kebab(name: string): string;
+/** `onViewDetails` → `view-details`. */
+export declare function eventName(prop: string): string;
+export interface ExtractOptions {
+    /** Path or filename. Its extension selects the component dialect. */
+    file?: string;
+    /** Named export to read, for `.tsx`/`.ts` components. Defaults to the default export. */
+    exportName?: string;
+}
+/**
+ * Read a component's prop table from its source. This is what lets the element
+ * expose real attributes, real properties and real events without the author
+ * restating anything they already wrote — in React, Vue or Svelte.
+ *
+ * Returns `null` when the component takes props but none of them could be read —
+ * the caller must fail loudly rather than publish an element that silently
+ * ignores everything the consumer sets.
+ *
+ * Analysis is single-file. A props type imported from another module reads as
+ * `null`; declare `props` on the element entry for those.
+ */
+export declare function extractProps(code: string, options?: ExtractOptions): PropSpec[] | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mountly-vite-plugin",
-  "version": "1.2.3",
+  "version": "1.5.0",
   "description": "Vite lib build plugin for mountly vertical widgets (dual ESM output)",
   "license": "Apache-2.0",
   "repository": {
@@ -24,17 +24,27 @@
     "access": "public"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@vitejs/plugin-vue": "^6.0.8",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2",
     "vite": "^8.1.5",
-    "mountly-manifest": "1.1.0"
+    "mountly-manifest": "1.1.1"
   },
   "peerDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@vitejs/plugin-vue": "^6.0.0",
     "typescript": ">=7.0.0",
     "vite": "^8.2.1",
-    "mountly-manifest": "1.1.0"
+    "mountly-manifest": "1.1.1"
   },
   "peerDependenciesMeta": {
+    "@sveltejs/vite-plugin-svelte": {
+      "optional": true
+    },
+    "@vitejs/plugin-vue": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     }