@zeus-js/output-wc 0.1.1-beta.12 → 0.1.1-beta.14

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

@@ -1,14 +1,90 @@
 /**
-* output-wc v0.1.1-beta.12
+* output-wc v0.1.1-beta.14
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { resolvePluginDts } from "@zeus-js/bundler-plugin";
 import { generateLoaderDts, generateWCDtsFiles, generateWCJsxDts } from "@zeus-js/component-dts";
+//#region packages/web-c/output-wc/src/generateManifest.ts
+function generateZeusComponentsManifest(manifest) {
+	validateComponentManifest(manifest);
+	return `${JSON.stringify(manifest, null, 2)}\n`;
+}
+function validateComponentManifest(manifest) {
+	if ((manifest === null || manifest === void 0 ? void 0 : manifest.schemaVersion) !== 1) throw new Error("[ZEUS_WC_ABI_VERSION] Component manifest schemaVersion must be 1.");
+	if (!Array.isArray(manifest.components)) throw new Error("[ZEUS_WC_INVALID_MANIFEST] Component manifest components must be an array.");
+	const tags = /* @__PURE__ */ new Set();
+	for (const [componentIndex, component] of manifest.components.entries()) {
+		if (!component || typeof component.tag !== "string") throw new Error(`[ZEUS_WC_INVALID_MANIFEST] components[${componentIndex}].tag must be a string.`);
+		if (tags.has(component.tag)) throw new Error(`[ZEUS_WC_DUPLICATE_TAG] Component tag "${component.tag}" is declared more than once.`);
+		tags.add(component.tag);
+	}
+	for (const [componentIndex, component] of manifest.components.entries()) {
+		var _component$props, _component$events, _component$props2;
+		const componentPath = `components[${componentIndex}]`;
+		if (!component || typeof component.tag !== "string" || typeof component.exportName !== "string") throw new Error(`[ZEUS_WC_INVALID_MANIFEST] ${componentPath} requires tag and exportName strings.`);
+		const attributes = /* @__PURE__ */ new Map();
+		for (const [propName, prop] of Object.entries((_component$props = component.props) !== null && _component$props !== void 0 ? _component$props : {})) {
+			const attrName = prop.attr === false ? false : typeof prop.attr === "string" ? prop.attr : [
+				"string",
+				"number",
+				"boolean"
+			].includes(prop.type) ? propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`) : false;
+			if (attrName !== false) {
+				const previous = attributes.get(attrName);
+				if (previous && previous !== propName) throw new Error(`[ZEUS_WC_ATTR_COLLISION] ${componentPath}.props.${propName} and ${previous} both use attribute "${attrName}".`);
+				attributes.set(attrName, propName);
+			}
+		}
+		for (const [eventKey, event] of Object.entries((_component$events = component.events) !== null && _component$events !== void 0 ? _component$events : {})) if (event.name !== void 0 && typeof event.name !== "string" || event.reactName !== void 0 && typeof event.reactName !== "string" || event.bubbles !== void 0 && typeof event.bubbles !== "boolean" || event.composed !== void 0 && typeof event.composed !== "boolean" || event.cancelable !== void 0 && typeof event.cancelable !== "boolean") throw new Error(`[ZEUS_WC_EVENT_ABI] ${componentPath}.events.${eventKey} contains invalid names or bubbles/composed/cancelable flags.`);
+		for (const [propName, prop] of Object.entries((_component$props2 = component.props) !== null && _component$props2 !== void 0 ? _component$props2 : {})) {
+			if (prop.hasDefault !== void 0 && typeof prop.hasDefault !== "boolean") throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName}.hasDefault must be boolean.`);
+			if (prop.defaultStrategy !== void 0 && prop.defaultStrategy !== "static" && prop.defaultStrategy !== "factory") throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName}.defaultStrategy is invalid.`);
+			if (prop.defaultStrategy === "factory" && prop.default !== void 0) throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName} factory defaults cannot be serialized as values.`);
+			if (prop.defaultStrategy === "static" && !Object.prototype.hasOwnProperty.call(prop, "default")) throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName} static defaults require a value.`);
+			if (Object.prototype.hasOwnProperty.call(prop, "default")) {
+				if (prop.default === void 0) throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName}.default cannot be undefined.`);
+				assertJsonSafe(prop.default, `${componentPath}.props.${propName}.default`, /* @__PURE__ */ new Set(), "ZEUS_WC_INVALID_DEFAULT_META", true);
+			}
+		}
+	}
+	assertJsonSafe(manifest, "manifest");
+}
+function assertJsonSafe(value, path, parents = /* @__PURE__ */ new Set(), code = "ZEUS_WC_INVALID_MANIFEST", rejectUndefined = false) {
+	if (value === void 0) {
+		if (rejectUndefined) throw invalidManifest(path, "undefined values are not supported", code);
+		return;
+	}
+	if (value === null) return;
+	if (typeof value === "string" || typeof value === "boolean") return;
+	if (typeof value === "number") {
+		if (!Number.isFinite(value) || Object.is(value, -0)) throw invalidManifest(path, "numbers must be finite and cannot be -0", code);
+		return;
+	}
+	if (typeof value === "function" || typeof value === "symbol" || typeof value === "bigint") throw invalidManifest(path, "functions, symbols, and bigint values are not supported", code);
+	if (typeof value !== "object") throw invalidManifest(path, "value is not JSON-safe", code);
+	if (parents.has(value)) throw invalidManifest(path, "cyclic values are not supported", code);
+	const prototype = Object.getPrototypeOf(value);
+	if (!Array.isArray(value) && prototype !== Object.prototype && prototype !== null) throw invalidManifest(path, "only plain objects and arrays are supported", code);
+	if (Object.getOwnPropertySymbols(value).length > 0) throw invalidManifest(path, "symbol keys are not supported", code);
+	parents.add(value);
+	for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(value))) {
+		if ("get" in descriptor || "set" in descriptor) throw invalidManifest(`${path}.${key}`, "accessor properties are not supported", code);
+		if (descriptor.value === void 0 && !rejectUndefined) continue;
+		assertJsonSafe(descriptor.value, Array.isArray(value) ? `${path}[${key}]` : `${path}.${key}`, parents, code, rejectUndefined);
+	}
+	parents.delete(value);
+}
+function invalidManifest(path, reason, code) {
+	return /* @__PURE__ */ new Error(`[${code}] ${path}: ${reason}.`);
+}
+//#endregion
 //#region packages/web-c/output-wc/src/generateCustomElementsJson.ts
 function generateCustomElementsJson(options) {
 	const { manifest, getModulePath } = options;
+	validateComponentManifest(manifest);
 	const result = {
 		schemaVersion: "1.0.0",
 		modules: manifest.components.map((component) => {
@@ -70,14 +146,24 @@ 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
-		};
-	});
+	const methods = Object.entries((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {}).map(([name, method]) => generateMethodMember(name, method));
 	return [...fields, ...methods];
 }
+function generateMethodMember(name, method) {
+	var _method$returns, _method$returns2;
+	const member = {
+		kind: "method",
+		name,
+		return: { type: { text: method.async ? `Promise<${(_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown"}>` : (_method$returns2 = method.returns) !== null && _method$returns2 !== void 0 ? _method$returns2 : "unknown" } }
+	};
+	if (method.parameters) member.parameters = method.parameters.map((parameter) => ({
+		name: parameter.name,
+		type: { text: parameter.type },
+		optional: parameter.optional,
+		rest: parameter.rest
+	}));
+	return member;
+}
 function generateEvents(component) {
 	return Object.entries(component.events).map(([key, event]) => {
 		var _event$name, _event$key;
@@ -152,6 +238,15 @@ function generateWCEntry(options) {
 		`import { ${component.exportName} } from ${JSON.stringify(source)};`,
 		"",
 		`export { ${component.exportName} };`,
+		"",
+		`export function defineCustomElement(options = {}) {`,
+		`  const registry = options.registry ?? (typeof customElements === 'undefined' ? undefined : customElements);`,
+		`  if (!registry) return;`,
+		`  const existing = registry.get(${JSON.stringify(component.tag)});`,
+		`  if (existing === ${component.exportName}) return;`,
+		`  if (existing) throw new Error(${JSON.stringify(`[ZEUS_WC_DUPLICATE_TAG] <${component.tag}> is already registered with a different definition.`)});`,
+		`  registry.define(${JSON.stringify(component.tag)}, ${component.exportName});`,
+		`}`,
 		""
 	].join("\n");
 }
@@ -177,16 +272,19 @@ function getVirtualIndexId() {
 //#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);
+	const source = `${sourceImport !== null && sourceImport !== void 0 ? sourceImport : toRelativeImport(component.source, outPath)}?zeus-lazy-component=${component.exportName}`;
 	return [
-		`import { createCustomElementMountLifecycle, mountElementDefinition } from "@zeus-js/runtime-dom";`,
+		`import { createCustomElementMountLifecycle, getElementDefinition, mountElementDefinition } from "@zeus-js/runtime-dom";`,
+		`import { resolveHostProperties } from "@zeus-js/web-c-runtime";`,
 		`import { ${component.exportName} } from ${JSON.stringify(source)};`,
 		"",
 		`export function createComponent(hostRef) {`,
+		`  resolveHostProperties(hostRef, getElementDefinition(${component.exportName}).propDefs);`,
 		`  const mountState = {`,
 		`    attributeProps: hostRef.attributeProps,`,
 		`    internals: hostRef.internals,`,
 		`    reflectingAttrs: hostRef.reflectingAttrs,`,
+		`    exposedMethods: hostRef.exposedMethods,`,
 		`  };`,
 		`  const lifecycle = createCustomElementMountLifecycle(() =>`,
 		`    mountElementDefinition(`,
@@ -206,8 +304,8 @@ function generateLazyEntry(options) {
 		`      lifecycle.disconnect();`,
 		`    },`,
 		"",
-		`    propertyChanged(name, oldValue, newValue) {`,
-		`      lifecycle.current()?.propertyChanged(name, oldValue, newValue);`,
+		`    propertyChanged(change) {`,
+		`      lifecycle.current()?.propertyChanged(change);`,
 		`    },`,
 		"",
 		`    formAssociated(form) {`,
@@ -241,6 +339,60 @@ function toRelativeImport(source, outPath) {
 	return [...outParts.slice(common).map(() => ".."), ...sourceParts.slice(common)].join("/");
 }
 //#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";
+
+const componentsByTagName = new Map(
+  components.map(component => [component.tagName, component]),
+);
+
+function resolveRegistry(options) {
+  return options.registry ??
+    (typeof customElements === "undefined" ? undefined : customElements);
+}
+
+export function defineCustomElement(tagName, options = {}) {
+  const registry = resolveRegistry(options);
+
+  if (!registry) {
+    return;
+  }
+
+  const component = componentsByTagName.get(tagName);
+
+  if (!component) {
+    throw new Error(\`[zeus:web-c] Unknown custom element: <\${tagName}>.\`);
+  }
+
+  bootstrapLazy([component], { registry });
+}
+
+export function defineCustomElements(options = {}) {
+  for (const component of components) {
+    defineCustomElement(component.tagName, options);
+  }
+}
+
+`;
+}
+function generateAutoEntry() {
+	return `import { defineCustomElements } from "./loader.js";
+
+defineCustomElements();
+
+export {};
+`;
+}
+function generateLazyIndex() {
+	return `export {
+  defineCustomElement,
+  defineCustomElements,
+} from "./loader.js";
+`;
+}
+//#endregion
 //#region packages/web-c/output-wc/src/generateLazyManifest.ts
 function generateLazyManifest(options) {
 	const { components, getEntryFileName } = options;
@@ -276,12 +428,28 @@ function generatePropsArray(props) {
 			if (attrName !== toKebabCase(name)) parts.push(`attrName: ${JSON.stringify(attrName)}`);
 		}
 		parts.push(`type: ${JSON.stringify(prop.type)}`);
+		if (isJsonSafeDefault(prop.default)) {
+			const encoded = JSON.stringify(prop.default);
+			parts.push(`default: ${typeof prop.default === "object" && prop.default !== null ? `JSON.parse(${JSON.stringify(encoded)})` : encoded}`);
+		}
 		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 isJsonSafeDefault(value, parents = /* @__PURE__ */ new Set()) {
+	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+	if (typeof value === "number") return Number.isFinite(value) && !Object.is(value, -0);
+	if (typeof value !== "object" || parents.has(value)) return false;
+	if (!Array.isArray(value) && Object.getPrototypeOf(value) !== Object.prototype) return false;
+	if (Object.getOwnPropertySymbols(value).length) return false;
+	parents.add(value);
+	const descriptors = Object.getOwnPropertyDescriptors(value);
+	const valid = Array.isArray(value) ? Array.from({ length: value.length }, (_, index) => descriptors[index]).every((descriptor) => descriptor && "value" in descriptor && isJsonSafeDefault(descriptor.value, parents)) : Object.values(descriptors).every((descriptor) => "value" in descriptor && isJsonSafeDefault(descriptor.value, parents));
+	parents.delete(value);
+	return valid;
+}
 function isAttributeBackedType(type) {
 	return type === "string" || type === "number" || type === "boolean";
 }
@@ -289,92 +457,134 @@ function toKebabCase(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
-//#region packages/web-c/output-wc/src/generateLoader.ts
-function generateLoader() {
+//#region packages/web-c/output-wc/src/generateRegistration.ts
+function generateLazyRegistration(component, entryFileName) {
 	return `import { bootstrapLazy } from "@zeus-js/web-c-runtime";
-import { components } from "./components.manifest.js";
-
-const componentsByTagName = new Map(
-  components.map(component => [component.tagName, component]),
-);
-
-const definedTagsByRegistry = new WeakMap();
+${generateLazyManifest({
+		components: [component],
+		getEntryFileName: () => entryFileName
+	})}
+export const component = components[0];
 
-function resolveRegistry(options) {
-  return options.registry ??
-    (typeof customElements === "undefined" ? undefined : customElements);
+export function defineCustomElement(options = {}) {
+  bootstrapLazy([component], options);
 }
-
-function getDefinedTags(registry) {
-  let definedTags = definedTagsByRegistry.get(registry);
-
-  if (!definedTags) {
-    definedTags = new Set();
-    definedTagsByRegistry.set(registry, definedTags);
-  }
-
-  return definedTags;
+`;
 }
-
-export function defineCustomElement(tagName, options = {}) {
-  const registry = resolveRegistry(options);
-
-  if (!registry) {
-    return;
-  }
-
-  const component = componentsByTagName.get(tagName);
-
-  if (!component) {
-    throw new Error(\`[zeus:web-c] Unknown custom element: <\${tagName}>.\`);
-  }
-
-  const definedTags = getDefinedTags(registry);
-
-  if (definedTags.has(tagName) || registry.get(tagName)) {
-    definedTags.add(tagName);
-    return;
-  }
-
-  bootstrapLazy([component], { registry });
-
-  definedTags.add(tagName);
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
 }
-
-export function defineCustomElements(options = {}) {
-  for (const component of components) {
-    defineCustomElement(component.tagName, options);
-  }
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
 }
-
-export const defineLazyElement = defineCustomElement;
-export const defineLazyElements = defineCustomElements;
-`;
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
 }
-function generateAutoEntry() {
-	return `import { defineCustomElements } from "./loader.js";
-
-defineCustomElements();
-
-export {};
-`;
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
 }
-function generateLazyIndex() {
-	return `export {
-  defineCustomElement,
-  defineCustomElements,
-  defineLazyElement,
-  defineLazyElements,
-} from "./loader.js";
-`;
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
 }
 //#endregion
-//#region packages/web-c/output-wc/src/generateManifest.ts
-function generateZeusComponentsManifest(manifest) {
-	return `${JSON.stringify(manifest, null, 2)}\n`;
+//#region packages/web-c/output-wc/src/generateVSCodeCustomData.ts
+function generateVSCodeCustomData(customElementsJson) {
+	let manifest;
+	try {
+		manifest = JSON.parse(customElementsJson);
+	} catch (_unused) {
+		throw new Error("[ZEUS_VSCODE_CUSTOM_DATA_INVALID] CEM input is not valid JSON.");
+	}
+	if ((manifest === null || manifest === void 0 ? void 0 : manifest.schemaVersion) !== "1.0.0" || !Array.isArray(manifest.modules)) throw new Error("[ZEUS_VSCODE_CUSTOM_DATA_INVALID] CEM input must use schemaVersion 1.0.0 and contain modules.");
+	const tags = manifest.modules.flatMap((module) => {
+		var _module$declarations;
+		return ((_module$declarations = module.declarations) !== null && _module$declarations !== void 0 ? _module$declarations : []).filter((declaration) => declaration.kind === "class" && declaration.customElement === true && typeof declaration.tagName === "string").map((declaration) => {
+			var _declaration$attribut;
+			const tagName = declaration.tagName;
+			const attributes = ((_declaration$attribut = declaration.attributes) !== null && _declaration$attribut !== void 0 ? _declaration$attribut : []).map((attribute) => {
+				var _attribute$type;
+				if (typeof attribute.name !== "string") throw new Error(`[ZEUS_VSCODE_CUSTOM_DATA_INVALID] <${tagName}> contains an attribute without a name.`);
+				const values = parseStringLiteralUnion((_attribute$type = attribute.type) === null || _attribute$type === void 0 ? void 0 : _attribute$type.text);
+				return _objectSpread2(_objectSpread2({ name: attribute.name }, attribute.description ? { description: attribute.description } : {}), values ? { values: values.map((name) => ({ name })) } : {});
+			});
+			return _objectSpread2(_objectSpread2({ name: tagName }, declaration.description ? { description: declaration.description } : {}), attributes.length > 0 ? { attributes } : {});
+		});
+	});
+	const names = /* @__PURE__ */ new Set();
+	for (const tag of tags) {
+		if (names.has(tag.name)) throw new Error(`[ZEUS_VSCODE_CUSTOM_DATA_INVALID] CEM declares <${tag.name}> more than once.`);
+		names.add(tag.name);
+	}
+	return `${JSON.stringify({
+		version: 1.1,
+		tags
+	}, null, 2)}\n`;
+}
+function parseStringLiteralUnion(typeText) {
+	if (!typeText) return void 0;
+	const parts = typeText.split(/\s+\|\s+/);
+	const values = [];
+	for (const part of parts) {
+		if (!part.startsWith("\"") || !part.endsWith("\"")) return void 0;
+		try {
+			const value = JSON.parse(part);
+			if (typeof value !== "string") return void 0;
+			values.push(value);
+		} catch (_unused2) {
+			return;
+		}
+	}
+	return values.length > 0 ? values : void 0;
 }
 //#endregion
 //#region packages/web-c/output-wc/src/index.ts
+const outputWcModulePath = fileURLToPath(import.meta.url);
 function wc(options = {}) {
 	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";
@@ -449,15 +659,13 @@ function wc(options = {}) {
 				modules.push({
 					id: "zeus:wc:components.manifest",
 					fileName: joinPath("components.manifest.js"),
-					code: generateLazyManifest({
-						components: ctx.manifest.components,
-						getEntryFileName: (tag) => getLazyEntryFileName(normalized.entryFileName, tag)
-					})
+					code: [...ctx.manifest.components.map((component, index) => `import { component as c${index} } from ${JSON.stringify(getVirtualComponentId(component))};`), `export const components = [${ctx.manifest.components.map((_, index) => `c${index}`).join(", ")}];`].join("\n")
 				});
 				modules.push({
 					id: "zeus:wc:loader",
 					fileName: joinPath("loader.js"),
-					code: generateLoader()
+					code: generateLoader(),
+					resolveFrom: outputWcModulePath
 				});
 				if (normalized.auto) modules.push({
 					id: "zeus:wc:auto",
@@ -474,13 +682,9 @@ function wc(options = {}) {
 				*/
 				modules.push({
 					id: getVirtualComponentId(component),
-					code: `
-import { defineCustomElements } from "zeus:wc:loader";
-
-defineCustomElements();
-
-export {};
-`.trimStart()
+					fileName: joinPath(getFileName(component.tag)),
+					code: generateLazyRegistration(component, path.posix.relative(path.posix.dirname(joinPath(getFileName(component.tag))), joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)))),
+					resolveFrom: outputWcModulePath
 				});
 				const fileName = joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag));
 				modules.push({
@@ -490,7 +694,8 @@ export {};
 						component,
 						outPath: fileName,
 						sourceImport: toAbsoluteImportPath(ctx.root, component.source)
-					})
+					}),
+					resolveFrom: outputWcModulePath
 				});
 			} else {
 				const fileName = joinPath(getFileName(component.tag));
@@ -541,6 +746,11 @@ export {};
 						fileName: joinPath("loader.d.ts"),
 						source: loaderDts
 					});
+					for (const component of ctx.manifest.components) files.push({
+						type: "asset",
+						fileName: joinPath(getFileName(component.tag).replace(/\.js$/, ".d.ts")),
+						source: "export declare function defineCustomElement(options?: { registry?: CustomElementRegistry }): void\n"
+					});
 					if (normalized.index) files.push({
 						type: "asset",
 						fileName: joinPath("index.d.ts"),
@@ -558,14 +768,22 @@ export {};
 				fileName: normalized.manifestFile,
 				source: generateZeusComponentsManifest(ctx.manifest)
 			});
-			if (normalized.customElementsFile) files.push({
-				type: "asset",
-				fileName: normalized.customElementsFile,
-				source: generateCustomElementsJson({
+			if (normalized.customElementsFile) {
+				const customElementsJson = generateCustomElementsJson({
 					manifest: ctx.manifest,
 					getModulePath: (component) => isLazy ? joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)) : joinPath(getFileName(component.tag))
-				})
-			});
+				});
+				files.push({
+					type: "asset",
+					fileName: normalized.customElementsFile,
+					source: customElementsJson
+				});
+				files.push({
+					type: "asset",
+					fileName: "vscode.html-custom-data.json",
+					source: generateVSCodeCustomData(customElementsJson)
+				});
+			}
 			if (!isLazy && (dts || jsxDts)) {
 				const dtsFiles = generateWCDtsFiles(ctx.manifest, {
 					outDir: _outDir,