@zeus-js/output-wc 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/output-wc.esm-bundler.js

@@ -1,11 +1,11 @@
 /**
-* output-wc v0.1.0-beta.2
+* output-wc v0.1.0-beta.4
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 import path from "node:path";
 import { resolvePluginDts } from "@zeus-js/bundler-plugin";
-import { generateWCDtsFiles } from "@zeus-js/component-dts";
+import { generateLoaderDts, generateWCDtsFiles, generateWCJsxDts } from "@zeus-js/component-dts";
 //#region packages/web-c/output-wc/src/generateCustomElementsJson.ts
 function generateCustomElementsJson(options) {
 	const { manifest, getModulePath } = options;
@@ -27,7 +27,10 @@ function generateCustomElementsJson(options) {
 					events: generateEvents(component),
 					slots: generateSlots(component),
 					cssParts: component.cssParts.map((name) => ({ name })),
-					cssProperties: component.cssVars.map((name) => ({ name }))
+					cssProperties: getCssVars(component).map((variable) => ({
+						name: variable.name,
+						description: variable.description
+					}))
 				}],
 				exports: [{
 					kind: "js",
@@ -57,7 +60,8 @@ function generateAttributes(component) {
 	return result;
 }
 function generateMembers(component) {
-	return Object.entries(component.props).map(([name, prop]) => {
+	var _component$methods;
+	const fields = Object.entries(component.props).map(([name, prop]) => {
 		return {
 			kind: "field",
 			name,
@@ -66,18 +70,28 @@ function generateMembers(component) {
 			default: prop.default === void 0 ? void 0 : JSON.stringify(prop.default)
 		};
 	});
+	const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {}).map((name) => {
+		return {
+			kind: "method",
+			name
+		};
+	});
+	return [...fields, ...methods];
 }
 function generateEvents(component) {
-	return Object.entries(component.events).map(([name, event]) => {
+	return Object.entries(component.events).map(([key, event]) => {
+		var _event$name, _event$key;
 		return {
-			name,
+			name: (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key),
 			description: event.description,
 			type: { text: event.detail ? `CustomEvent<${formatDetailType(event.detail)}>` : "CustomEvent" }
 		};
 	});
 }
 function generateSlots(component) {
-	return Object.entries(component.slots).map(([name, slot]) => {
+	return Object.entries(component.slots).map(([key, slot]) => {
+		var _slot$name;
+		const name = (_slot$name = slot.name) !== null && _slot$name !== void 0 ? _slot$name : key;
 		return {
 			name: name === "default" ? "" : name,
 			description: slot.description
@@ -87,6 +101,7 @@ function generateSlots(component) {
 function getAttributeName(propName, prop) {
 	if (prop.attr === false) return false;
 	if (typeof prop.attr === "string") return prop.attr;
+	if (!isAttributeBackedType$1(prop.type)) return false;
 	return propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 function formatPropType(prop) {
@@ -98,15 +113,25 @@ function formatPropType(prop) {
 		case "boolean": return "boolean";
 		case "array": return "unknown[]";
 		case "object": return "Record<string, unknown>";
+		case "function": return "Function";
 		default: return "unknown";
 	}
 }
+function isAttributeBackedType$1(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
 function formatDetailType(detail) {
 	return `{ ${Object.entries(detail).map(([name, type]) => `${name}: ${type}`).join("; ")} }`;
 }
 function normalizeModulePath(value) {
 	return value.replace(/\\/g, "/");
 }
+function getCssVars(component) {
+	return Object.values(component.cssVars);
+}
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 //#endregion
 //#region packages/web-c/output-wc/src/imports.ts
 function toAbsoluteImportPath(root, source) {
@@ -149,6 +174,162 @@ function getVirtualIndexId() {
 	return "zeus:wc:index";
 }
 //#endregion
+//#region packages/web-c/output-wc/src/generateLazyEntry.ts
+function generateLazyEntry(options) {
+	const { component, outPath, sourceImport } = options;
+	const source = sourceImport !== null && sourceImport !== void 0 ? sourceImport : toRelativeImport(component.source, outPath);
+	return [
+		`import { mountElementDefinition } from "@zeus-js/runtime-dom";`,
+		`import { ${component.exportName} } from ${JSON.stringify(source)};`,
+		"",
+		`export function createComponent(hostRef) {`,
+		`  let mounted;`,
+		`  const mountState = {`,
+		`    attributeProps: hostRef.attributeProps,`,
+		`    internals: hostRef.internals,`,
+		`    reflectingAttrs: hostRef.reflectingAttrs,`,
+		`  };`,
+		"",
+		`  return {`,
+		`    connected() {`,
+		`      if (mounted) return;`,
+		"",
+		`      mounted = mountElementDefinition(`,
+		`        ${component.exportName},`,
+		`        hostRef.host,`,
+		`        hostRef.values,`,
+		`        mountState,`,
+		`      );`,
+		`    },`,
+		"",
+		`    disconnected() {`,
+		`      mounted?.dispose();`,
+		`      mounted = undefined;`,
+		`    },`,
+		"",
+		`    propertyChanged(name, oldValue, newValue) {`,
+		`      mounted?.propertyChanged(name, oldValue, newValue);`,
+		`    },`,
+		"",
+		`    formAssociated(form) {`,
+		`      mounted?.formAssociated(form);`,
+		`    },`,
+		"",
+		`    formDisabled(disabled) {`,
+		`      mounted?.formDisabled(disabled);`,
+		`    },`,
+		"",
+		`    formReset() {`,
+		`      mounted?.formReset();`,
+		`    },`,
+		"",
+		`    formStateRestore(state, mode) {`,
+		`      mounted?.formStateRestore(state, mode);`,
+		`    },`,
+		`  };`,
+		`}`,
+		"",
+		`export default { createComponent };`,
+		""
+	].join("\n");
+}
+function toRelativeImport(source, outPath) {
+	const sourceParts = normalizePath(source).split("/");
+	const outParts = normalizePath(outPath).split("/");
+	let common = 0;
+	for (let i = 0; i < Math.min(sourceParts.length, outParts.length); i++) if (sourceParts[i] === outParts[i]) common++;
+	else break;
+	return [...outParts.slice(common).map(() => ".."), ...sourceParts.slice(common)].join("/");
+}
+//#endregion
+//#region packages/web-c/output-wc/src/generateLazyManifest.ts
+function generateLazyManifest(options) {
+	const { components, getEntryFileName } = options;
+	return `export const components = [
+${components.map((component) => {
+		var _component$runtimePro, _component$methods, _component$meta$shado, _component$meta, _component$meta$formA, _component$meta2;
+		const entryFile = getEntryFileName(component.tag).replace(/\\/g, "/");
+		const props = generatePropsArray((_component$runtimePro = component.runtimeProps) !== null && _component$runtimePro !== void 0 ? _component$runtimePro : component.props);
+		const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {});
+		const importPath = entryFile.startsWith(".") ? JSON.stringify(entryFile) : JSON.stringify(`./${entryFile}`);
+		const methodLine = methods.length ? `    methods: ${JSON.stringify(methods)},\n` : "";
+		return `  {
+    tagName: ${JSON.stringify(component.tag)},
+    shadow: ${(_component$meta$shado = (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.shadow) !== null && _component$meta$shado !== void 0 ? _component$meta$shado : false},
+    formAssociated: ${(_component$meta$formA = (_component$meta2 = component.meta) === null || _component$meta2 === void 0 ? void 0 : _component$meta2.formAssociated) !== null && _component$meta$formA !== void 0 ? _component$meta$formA : false},
+    load: () => import(${importPath}),
+    props: ${props},
+${methodLine}
+  }`;
+	}).join(",\n")}
+];
+`;
+}
+function generatePropsArray(props) {
+	const entries = Object.entries(props);
+	if (entries.length === 0) return "[]";
+	return `[\n${entries.map(([name, prop]) => {
+		const parts = [`name: ${JSON.stringify(name)}`];
+		if (!isAttributeBackedType(prop.type) && !prop.deserialize || prop.attr === false) parts.push("attrName: false");
+		else {
+			var _prop$attr;
+			const attrName = (_prop$attr = prop.attr) !== null && _prop$attr !== void 0 ? _prop$attr : toKebabCase(name);
+			if (attrName !== toKebabCase(name)) parts.push(`attrName: ${JSON.stringify(attrName)}`);
+		}
+		parts.push(`type: ${JSON.stringify(prop.type)}`);
+		if (prop.reflect && (isAttributeBackedType(prop.type) || Boolean(prop.serialize))) parts.push("reflect: true");
+		if (prop.serialize) parts.push("serialize: true");
+		if (prop.deserialize) parts.push("deserialize: true");
+		return `      { ${parts.join(", ")} }`;
+	}).join(",\n")}\n    ]`;
+}
+function isAttributeBackedType(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
+function toKebabCase(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+//#endregion
+//#region packages/web-c/output-wc/src/generateLoader.ts
+function generateLoader() {
+	return `import { bootstrapLazy } from "@zeus-js/web-c-runtime";
+import { components } from "./components.manifest.js";
+
+let defined = false;
+
+export function defineCustomElements() {
+  if (defined) {
+    return;
+  }
+
+  if (typeof customElements === "undefined") {
+    return;
+  }
+
+  bootstrapLazy(components);
+
+  defined = true;
+}
+
+export const defineLazyElements = defineCustomElements;
+`;
+}
+function generateAutoEntry() {
+	return `import { defineCustomElements } from "./loader.js";
+
+defineCustomElements();
+
+export {};
+`;
+}
+function generateLazyIndex() {
+	return `export {
+  defineCustomElements,
+  defineLazyElements,
+} from "./loader.js";
+`;
+}
+//#endregion
 //#region packages/web-c/output-wc/src/generateManifest.ts
 function generateZeusComponentsManifest(manifest) {
 	return `${JSON.stringify(manifest, null, 2)}\n`;
@@ -156,17 +337,21 @@ function generateZeusComponentsManifest(manifest) {
 //#endregion
 //#region packages/web-c/output-wc/src/index.ts
 function wc(options = {}) {
-	var _options$outDir, _options$stripPrefix, _options$manifestFile, _options$customElemen, _options$dts, _options$jsxDts, _options$index, _options$warnOnFileNa;
+	var _options$register, _options$outDir, _options$stripPrefix, _options$manifestFile, _options$customElemen, _options$dts, _options$jsxDts, _options$index, _options$warnOnFileNa, _options$auto, _options$entryFileNam;
+	const registerMode = (_options$register = options.register) !== null && _options$register !== void 0 ? _options$register : "lazy";
 	const normalized = {
 		outDir: (_options$outDir = options.outDir) !== null && _options$outDir !== void 0 ? _options$outDir : "wc",
 		stripPrefix: (_options$stripPrefix = options.stripPrefix) !== null && _options$stripPrefix !== void 0 ? _options$stripPrefix : false,
 		fileName: options.fileName,
 		manifestFile: (_options$manifestFile = options.manifestFile) !== null && _options$manifestFile !== void 0 ? _options$manifestFile : "zeus.components.json",
 		customElementsFile: (_options$customElemen = options.customElementsFile) !== null && _options$customElemen !== void 0 ? _options$customElemen : "custom-elements.json",
-		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : "auto",
-		jsxDts: (_options$jsxDts = options.jsxDts) !== null && _options$jsxDts !== void 0 ? _options$jsxDts : "auto",
+		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
+		jsxDts: (_options$jsxDts = options.jsxDts) !== null && _options$jsxDts !== void 0 ? _options$jsxDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
-		warnOnFileNameCollision: (_options$warnOnFileNa = options.warnOnFileNameCollision) !== null && _options$warnOnFileNa !== void 0 ? _options$warnOnFileNa : true
+		warnOnFileNameCollision: (_options$warnOnFileNa = options.warnOnFileNameCollision) !== null && _options$warnOnFileNa !== void 0 ? _options$warnOnFileNa : true,
+		register: registerMode,
+		auto: (_options$auto = options.auto) !== null && _options$auto !== void 0 ? _options$auto : true,
+		entryFileName: (_options$entryFileNam = options.entryFileName) !== null && _options$entryFileNam !== void 0 ? _options$entryFileNam : ((tag) => `${tag}.entry`)
 	};
 	let _outDir = normalized.outDir;
 	return {
@@ -181,7 +366,32 @@ function wc(options = {}) {
 		},
 		buildStart(ctx) {
 			if (!ctx.manifest) return;
-			checkFileNameCollisions(ctx.manifest.components, normalized, { warn: ctx.warn });
+			if (normalized.register === "lazy") for (const component of ctx.manifest.components) {
+				var _component$runtimePro, _component$runtimePro2;
+				const diagnostics = (_component$runtimePro = component.runtimePropsDiagnostics) !== null && _component$runtimePro !== void 0 ? _component$runtimePro : [];
+				if (diagnostics.length > 0) ctx.error([`[zeus-output-wc] <${component.tag}> cannot be emitted with register:"lazy" because its runtime props are not statically analyzable.`, ...diagnostics.map((message) => `- ${message}`)].join("\n"));
+				const runtimeProps = (_component$runtimePro2 = component.runtimeProps) !== null && _component$runtimePro2 !== void 0 ? _component$runtimePro2 : {};
+				for (const [name, prop] of Object.entries(runtimeProps)) {
+					if (isAttributeBackedRuntimeProp(prop.type)) continue;
+					if (prop.attr !== void 0 && prop.attr !== false && !prop.deserialize) ctx.error([
+						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use attr:${JSON.stringify(prop.attr)} with register:"lazy".`,
+						"Non-primitive lazy attributes require a custom deserialize function.",
+						"Add deserialize or use attr:false and pass the value as a property."
+					].join("\n"));
+					if (prop.reflect && !prop.serialize) ctx.error([
+						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use reflect:true with register:"lazy".`,
+						"Non-primitive lazy reflection requires a custom serialize function.",
+						"Add serialize or remove reflect:true."
+					].join("\n"));
+				}
+			}
+			checkFileNameCollisions(ctx.manifest.components, {
+				getFileName: (tag) => {
+					if (normalized.register === "lazy") return getLazyEntryFileName(normalized.entryFileName, tag);
+					return normalizeFileName(tag, normalized.stripPrefix, normalized.fileName);
+				},
+				warnOnFileNameCollision: normalized.warnOnFileNameCollision
+			}, { warn: ctx.warn });
 		},
 		virtualModules(ctx) {
 			if (!ctx.manifest) return [];
@@ -195,7 +405,55 @@ function wc(options = {}) {
 				if (hasOutputs) return ctx.outputs.join("wc", fileName);
 				return path.posix.join(_outDir, fileName);
 			};
-			for (const component of ctx.manifest.components) {
+			const isLazy = normalized.register === "lazy";
+			if (isLazy) {
+				modules.push({
+					id: "zeus:wc:components.manifest",
+					fileName: joinPath("components.manifest.js"),
+					code: generateLazyManifest({
+						components: ctx.manifest.components,
+						getEntryFileName: (tag) => getLazyEntryFileName(normalized.entryFileName, tag)
+					})
+				});
+				modules.push({
+					id: "zeus:wc:loader",
+					fileName: joinPath("loader.js"),
+					code: generateLoader()
+				});
+				if (normalized.auto) modules.push({
+					id: "zeus:wc:auto",
+					fileName: joinPath("auto.js"),
+					code: generateAutoEntry()
+				});
+			}
+			for (const component of ctx.manifest.components) if (isLazy) {
+				/**
+				* Registration bridge module consumed by Vue / React wrappers.
+				*
+				* It only registers lazy Proxy Elements.
+				* It does not import the real component implementation.
+				*/
+				modules.push({
+					id: getVirtualComponentId(component),
+					code: `
+import { defineCustomElements } from "zeus:wc:loader";
+
+defineCustomElements();
+
+export {};
+`.trimStart()
+				});
+				const fileName = joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag));
+				modules.push({
+					id: `zeus:wc:entry:${component.tag}`,
+					fileName,
+					code: generateLazyEntry({
+						component,
+						outPath: fileName,
+						sourceImport: toAbsoluteImportPath(ctx.root, component.source)
+					})
+				});
+			} else {
 				const fileName = joinPath(getFileName(component.tag));
 				modules.push({
 					id: getVirtualComponentId(component),
@@ -206,7 +464,7 @@ function wc(options = {}) {
 					})
 				});
 			}
-			if (normalized.index) modules.push({
+			if (normalized.index && !isLazy) modules.push({
 				id: getVirtualIndexId(),
 				fileName: joinPath("index.js"),
 				code: generateWCIndex({
@@ -214,16 +472,18 @@ function wc(options = {}) {
 					getFileName
 				})
 			});
+			if (isLazy && normalized.index) modules.push({
+				id: getVirtualIndexId(),
+				fileName: joinPath("index.js"),
+				code: generateLazyIndex()
+			});
 			return modules;
 		},
 		generateBundle(ctx) {
 			if (!ctx.manifest) return [];
 			const files = [];
-			if (normalized.manifestFile) files.push({
-				type: "asset",
-				fileName: normalized.manifestFile,
-				source: generateZeusComponentsManifest(ctx.manifest)
-			});
+			const dts = resolvePluginDts(normalized.dts, ctx);
+			const jsxDts = resolvePluginDts(normalized.jsxDts, ctx);
 			const hasOutputs = ctx.outputs.has("wc");
 			const getFileName = (tag) => {
 				if (hasOutputs) return ctx.outputs.getFileName("wc", tag);
@@ -233,17 +493,41 @@ function wc(options = {}) {
 				if (hasOutputs) return ctx.outputs.join("wc", fileName);
 				return path.posix.join(_outDir, fileName);
 			};
+			const isLazy = normalized.register === "lazy";
+			if (isLazy) {
+				if (dts) {
+					const loaderDts = generateLoaderDts(ctx.manifest);
+					files.push({
+						type: "asset",
+						fileName: joinPath("loader.d.ts"),
+						source: loaderDts
+					});
+					if (normalized.index) files.push({
+						type: "asset",
+						fileName: joinPath("index.d.ts"),
+						source: loaderDts
+					});
+				}
+				if (jsxDts) files.push({
+					type: "asset",
+					fileName: joinPath("types/jsx.d.ts"),
+					source: generateWCJsxDts(ctx.manifest)
+				});
+			}
+			if (normalized.manifestFile) files.push({
+				type: "asset",
+				fileName: normalized.manifestFile,
+				source: generateZeusComponentsManifest(ctx.manifest)
+			});
 			if (normalized.customElementsFile) files.push({
 				type: "asset",
 				fileName: normalized.customElementsFile,
 				source: generateCustomElementsJson({
 					manifest: ctx.manifest,
-					getModulePath: (component) => joinPath(getFileName(component.tag))
+					getModulePath: (component) => isLazy ? joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)) : joinPath(getFileName(component.tag))
 				})
 			});
-			const dts = resolvePluginDts(normalized.dts, ctx);
-			const jsxDts = resolvePluginDts(normalized.jsxDts, ctx);
-			if (dts || jsxDts) {
+			if (!isLazy && (dts || jsxDts)) {
 				const dtsFiles = generateWCDtsFiles(ctx.manifest, {
 					outDir: _outDir,
 					stripPrefix: normalized.stripPrefix,
@@ -272,12 +556,22 @@ function normalizeFileName(tag, stripPrefix, fileName) {
 	if (!name.endsWith(".js")) name = `${name}.js`;
 	return name;
 }
+function normalizeLazyEntryFileName(fileName) {
+	const normalized = fileName.replace(/\\/g, "/");
+	return normalized.endsWith(".js") ? normalized : `${normalized}.js`;
+}
+function getLazyEntryFileName(entryFileName, tag) {
+	return normalizeLazyEntryFileName(entryFileName(tag));
+}
+function isAttributeBackedRuntimeProp(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
 function checkFileNameCollisions(components, options, reporter) {
 	if (options.warnOnFileNameCollision === false) return;
 	const map = /* @__PURE__ */ new Map();
 	for (const component of components) {
 		var _map$get;
-		const fileName = normalizeFileName(component.tag, options.stripPrefix, options.fileName);
+		const fileName = options.getFileName(component.tag);
 		const list = (_map$get = map.get(fileName)) !== null && _map$get !== void 0 ? _map$get : [];
 		list.push(component);
 		map.set(fileName, list);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeus-js/output-wc",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.4",
   "description": "Zeus Web Component output plugin",
   "type": "module",
   "main": "index.js",
@@ -13,24 +13,24 @@
   "exports": {
     ".": {
       "types": "./dist/output-wc.d.ts",
+      "module": "./dist/output-wc.esm-bundler.js",
+      "import": "./dist/output-wc.esm-bundler.js",
+      "require": "./index.js",
       "node": {
         "production": "./dist/output-wc.cjs.prod.js",
         "development": "./dist/output-wc.cjs.js",
         "default": "./index.js"
-      },
-      "module": "./dist/output-wc.esm-bundler.js",
-      "import": "./dist/output-wc.esm-bundler.js",
-      "require": "./index.js"
+      }
     },
     "./capabilities": {
       "types": "./dist/capabilities.d.ts",
+      "import": "./dist/capabilities.js",
+      "require": "./dist/capabilities.cjs.js",
       "node": {
         "production": "./dist/capabilities.cjs.prod.js",
         "development": "./dist/capabilities.cjs.js",
         "default": "./dist/capabilities.cjs.js"
-      },
-      "import": "./dist/capabilities.js",
-      "require": "./dist/capabilities.cjs.js"
+      }
     }
   },
   "sideEffects": false,
@@ -52,9 +52,11 @@
     ]
   },
   "dependencies": {
-    "@zeus-js/bundler-plugin": "0.1.0-beta.2",
-    "@zeus-js/component-analyzer": "0.1.0-beta.2",
-    "@zeus-js/component-dts": "0.1.0-beta.2"
+    "@zeus-js/bundler-plugin": "0.1.0-beta.4",
+    "@zeus-js/component-analyzer": "0.1.0-beta.4",
+    "@zeus-js/runtime-dom": "0.1.0-beta.4",
+    "@zeus-js/component-dts": "0.1.0-beta.4",
+    "@zeus-js/web-c-runtime": "0.2.0"
   },
   "peerDependencies": {
     "rollup": "^4.0.0"