@zeus-js/output-vue-wrapper 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/output-vue-wrapper.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* output-vue-wrapper v0.1.0-beta.3
+* output-vue-wrapper v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,6 +9,7 @@ Object.defineProperties(exports, {
 });
 let _zeus_js_bundler_plugin = require("@zeus-js/bundler-plugin");
 let _zeus_js_component_dts = require("@zeus-js/component-dts");
+let vue = require("vue");
 //#region packages/web-c/output-vue-wrapper/src/generateVueIndex.ts
 function generateVueIndex(components, options) {
 	const lines = [];
@@ -22,163 +23,192 @@ function generateVueIndex(components, options) {
 //#endregion
 //#region packages/web-c/output-vue-wrapper/src/generateVueWrapper.ts
 function generateVueWrapper(input) {
-	const { mode = "minimal" } = input;
-	if (mode === "minimal") return generateMinimalVueWrapper(input);
-	return generateEventBridgeVueWrapper(input);
+	var _input$component$mode;
+	return input.mode === "runtime" ? generateRuntimeVueWrapper(input) : input.mode === "event-bridge" || ((_input$component$mode = input.component.models) === null || _input$component$mode === void 0 ? void 0 : _input$component$mode.length) ? generateEventBridgeVueWrapper(input) : generateMinimalVueWrapper(input);
 }
 function generateMinimalVueWrapper(input) {
 	const { component, wcModuleId } = input;
-	const slotNames = Object.keys(component.slots).filter((name) => name !== "default");
+	const slotNames = getNamedSlots(component);
 	const hasNamedSlots = slotNames.length > 0;
-	const vueImports = hasNamedSlots ? `cloneVNode, defineComponent, h` : `defineComponent, h`;
-	const namedSlotBlock = hasNamedSlots ? `
-      for (const name of NAMED_SLOTS) {
-        const slot = slots[name];
-        if (!slot) continue;
-
-        for (const vnode of slot()) {
-          children.push(withSlot(name, vnode));
-        }
-      }
-` : "";
-	const withSlotHelper = hasNamedSlots ? `
-function withSlot(name, vnode) {
-  if (!vnode) return vnode;
-
-  if (typeof vnode === 'string') {
-    return h('span', { slot: name, style: 'display: contents' }, vnode);
-  }
-
-  return cloneVNode(vnode, { slot: name });
-}
-` : "";
 	return `
-import { ${vueImports} } from 'vue';
+import { ${hasNamedSlots ? "cloneVNode, defineComponent, h" : "defineComponent, h"} } from 'vue';
 
 import ${JSON.stringify(wcModuleId)};
-
-const NAMED_SLOTS = ${JSON.stringify(slotNames)};
-
+${hasNamedSlots ? `\nconst NAMED_SLOTS = ${JSON.stringify(slotNames)};\n` : ""}
 export const ${component.name} = defineComponent({
   name: ${JSON.stringify(component.name)},
   inheritAttrs: false,
 
   setup(_props, { attrs, slots }) {
     return () => {
-      const children = [];
-
-      if (slots.default) {
-        children.push(...slots.default());
-      }
-${namedSlotBlock}
-      return h(
-        ${JSON.stringify(component.tag)},
-        {
-          ...attrs,
-        },
-        children,
-      );
+${generateVueChildren(slotNames)}
+      return h(${JSON.stringify(component.tag)}, attrs, children);
     };
   },
 });
-${withSlotHelper}
+${hasNamedSlots ? VUE_NAMED_SLOT_HELPERS : ""}
 `.trimStart();
 }
 function generateEventBridgeVueWrapper(input) {
 	const { component, wcModuleId } = input;
-	const propNames = Object.keys(component.props);
-	const eventNames = Object.keys(component.events);
-	const slotNames = Object.keys(component.slots).filter((name) => name !== "default");
-	const propInputKeys = createVuePropInputKeys(propNames);
+	const capabilities = getCapabilities(component);
+	const { eventNames, models, propNames, slotNames } = capabilities;
+	if (!propNames.length && !eventNames.length) return generateMinimalVueWrapper(input);
+	const hasProps = propNames.length > 0;
+	const hasEvents = eventNames.length > 0;
+	const emitNames = Array.from(new Set([...eventNames, ...models.map((model) => model.updateEvent)]));
+	const hasNamedSlots = slotNames.length > 0;
 	return `
 import {
-  cloneVNode,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  onUpdated,
-  ref,
+  ${[
+		...hasNamedSlots ? ["cloneVNode"] : [],
+		"defineComponent",
+		...hasProps ? ["getCurrentInstance"] : [],
+		"h",
+		...hasEvents ? ["onBeforeUnmount"] : [],
+		...hasProps || hasEvents ? ["onMounted"] : [],
+		...hasProps ? ["onUpdated"] : [],
+		"ref"
+	].join(",\n  ")},
 } from 'vue';
 
 import ${JSON.stringify(wcModuleId)};
-
-const PROP_KEYS = ${JSON.stringify(propNames)};
-const PROP_INPUT_KEYS = ${JSON.stringify(propInputKeys)};
-const EVENT_NAMES = ${JSON.stringify(eventNames)};
-const NAMED_SLOTS = ${JSON.stringify(slotNames)};
-
+${generateVueConstants(capabilities)}
 export const ${component.name} = defineComponent({
   name: ${JSON.stringify(component.name)},
   inheritAttrs: false,
-
-  props: {
-    ${generateVueProps(component)}
-  },
-
-  emits: EVENT_NAMES,
-
-  setup(props, { attrs, slots, emit }) {
+${hasProps ? `\n  props: {\n    ${generateVueProps(component)}\n  },\n` : ""}
+${hasEvents ? `  emits: ${models.length ? JSON.stringify(emitNames) : "EVENT_NAMES"},\n` : ""}
+  setup(${hasProps ? "props" : "_props"}, { attrs, slots${hasEvents ? ", emit" : ""} }) {
     const elRef = ref(null);
-    const instance = getCurrentInstance();
-    const cleanups = [];
-    const syncedPropKeys = new Set();
-
-    const hasRawProp = name => {
-      const rawProps = instance?.vnode.props ?? {};
-      const keys = PROP_INPUT_KEYS[name] ?? [name];
+${generateVuePropSetup(hasProps)}
+${generateVueEventSetup(hasEvents, models.length > 0)}
+${generateVueMountHook(hasProps, hasEvents)}
+${hasProps ? "    onUpdated(syncProps);\n" : ""}
+${generateVueUnmountHook(hasEvents)}
+    return () => {
+${generateVueChildren(slotNames)}
+      const hostProps = Object.assign({}, attrs);
+      hostProps.ref = elRef;
 
-      return keys.some(key =>
-        Object.prototype.hasOwnProperty.call(rawProps, key),
-      );
+      return h(${JSON.stringify(component.tag)}, hostProps, children);
     };
+  },
+});
+${hasProps ? VUE_PROP_HELPERS : ""}
+${hasNamedSlots ? VUE_NAMED_SLOT_HELPERS : ""}
+${models.length ? VUE_MODEL_HELPERS : ""}
+`.trimStart();
+}
+function getCapabilities(component) {
+	var _component$models;
+	const models = ((_component$models = component.models) !== null && _component$models !== void 0 ? _component$models : []).map((model) => ({
+		event: model.event,
+		eventPath: model.eventPath,
+		updateEvent: `update:${model.prop}`
+	}));
+	return {
+		propNames: Object.keys(component.props),
+		eventNames: Array.from(new Set([...Object.entries(component.events).map(([key, event]) => {
+			var _event$name, _event$key;
+			return (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key);
+		}), ...models.map((model) => model.event)])),
+		models,
+		slotNames: getNamedSlots(component)
+	};
+}
+function getNamedSlots(component) {
+	return Object.keys(component.slots).filter((name) => name !== "default");
+}
+function generateVueConstants(capabilities) {
+	const { eventNames, models, propNames, slotNames } = capabilities;
+	const lines = [];
+	if (propNames.length) {
+		lines.push(`const PROP_KEYS = ${JSON.stringify(propNames)};`);
+		lines.push(`const PROP_INPUT_KEYS = ${JSON.stringify(createVuePropInputKeys(propNames))};`);
+		lines.push("const EMPTY_PROPS = {};");
+	}
+	if (eventNames.length) lines.push(`const EVENT_NAMES = ${JSON.stringify(eventNames)};`);
+	if (models.length) lines.push(`const MODEL_BINDINGS = ${JSON.stringify(models)};`);
+	if (slotNames.length) lines.push(`const NAMED_SLOTS = ${JSON.stringify(slotNames)};`);
+	return lines.length ? `${lines.join("\n")}\n` : "";
+}
+function generateVuePropSetup(hasProps) {
+	if (!hasProps) return "";
+	return `    const instance = getCurrentInstance();
+    const syncedPropPresence = [];
+    const syncedPropValues = [];
 
     const syncProps = () => {
       const el = elRef.value;
       if (!el) return;
 
-      for (const name of PROP_KEYS) {
-        if (hasRawProp(name)) {
-          el[name] = props[name];
-          syncedPropKeys.add(name);
-          continue;
-        }
-
-        if (syncedPropKeys.has(name)) {
+      const rawProps = instance?.vnode.props || EMPTY_PROPS;
+
+      for (let index = 0; index < PROP_KEYS.length; index += 1) {
+        const name = PROP_KEYS[index];
+
+        if (hasRawProp(rawProps, name)) {
+          const nextValue = props[name];
+          if (
+            !syncedPropPresence[index] ||
+            !Object.is(syncedPropValues[index], nextValue)
+          ) {
+            el[name] = nextValue;
+            syncedPropValues[index] = nextValue;
+          }
+          syncedPropPresence[index] = true;
+        } else if (syncedPropPresence[index]) {
           el[name] = undefined;
-          syncedPropKeys.delete(name);
+          syncedPropPresence[index] = false;
+          syncedPropValues[index] = undefined;
         }
       }
     };
-
-    onMounted(() => {
-      syncProps();
-
-      const el = elRef.value;
-      if (!el) return;
-
-      for (const eventName of EVENT_NAMES) {
-        const handler = event => emit(eventName, event);
-        el.addEventListener(eventName, handler);
-        cleanups.push(() => el.removeEventListener(eventName, handler));
+`;
+}
+function generateVueEventSetup(hasEvents, hasModels) {
+	if (!hasEvents) return "";
+	return `    const eventHandlers = EVENT_NAMES.map(eventName => event => {
+      emit(eventName, event);
+${hasModels ? `
+      for (const model of MODEL_BINDINGS) {
+        if (model.event !== eventName) continue;
+        emit(model.updateEvent, readEventPath(event, model.eventPath));
       }
-    });
-
-    onUpdated(syncProps);
-
-    onBeforeUnmount(() => {
-      for (const cleanup of cleanups) cleanup();
-      cleanups.length = 0;
-      syncedPropKeys.clear();
-    });
-
-    return () => {
-      const children = [];
+` : ""}    });
+    let mountedEl = null;
+`;
+}
+function generateVueMountHook(hasProps, hasEvents) {
+	if (!hasProps && !hasEvents) return "";
+	return `    onMounted(() => {
+${hasProps ? "      syncProps();\n" : ""}${hasEvents ? `
+      mountedEl = elRef.value;
+      if (!mountedEl) return;
+
+      for (let index = 0; index < EVENT_NAMES.length; index += 1) {
+        mountedEl.addEventListener(EVENT_NAMES[index], eventHandlers[index]);
+      }
+` : ""}    });
+`;
+}
+function generateVueUnmountHook(hasEvents) {
+	if (!hasEvents) return "";
+	return `    onBeforeUnmount(() => {
+      if (!mountedEl) return;
 
-      if (slots.default) {
-        children.push(...slots.default());
+      for (let index = 0; index < EVENT_NAMES.length; index += 1) {
+        mountedEl.removeEventListener(EVENT_NAMES[index], eventHandlers[index]);
       }
+      mountedEl = null;
+    });
+`;
+}
+function generateVueChildren(slotNames) {
+	if (!slotNames.length) return `      const children = slots.default ? slots.default() : undefined;
+`;
+	return `      const children = slots.default ? slots.default() : [];
 
       for (const name of NAMED_SLOTS) {
         const slot = slots[name];
@@ -188,35 +218,49 @@ export const ${component.name} = defineComponent({
           children.push(withSlot(name, vnode));
         }
       }
-
-      return h(
-        ${JSON.stringify(component.tag)},
-        {
-          ...attrs,
-          ref: elRef,
-        },
-        children,
-      );
-    };
-  },
-});
-
-function withSlot(name, vnode) {
-  if (!vnode) return vnode;
-
-  if (typeof vnode === 'string') {
-    return h('span', { slot: name, style: 'display: contents' }, vnode);
-  }
-
-  return cloneVNode(vnode, { slot: name });
-}
-`.trimStart();
+`;
 }
 function generateVueProps(component) {
 	return Object.entries(component.props).map(([name, prop]) => {
 		return `${JSON.stringify(name)}: ${toVuePropOption(prop)}`;
 	}).join(",\n    ");
 }
+function generateRuntimeVueWrapper(input) {
+	var _component$models2;
+	const { component } = input;
+	const propNames = Object.keys(component.props);
+	const eventNames = getEventNames(component);
+	const slotNames = Object.keys(component.slots).filter((name) => name !== "default");
+	const model = (_component$models2 = component.models) === null || _component$models2 === void 0 ? void 0 : _component$models2[0];
+	return [
+		`import { defineContainer } from '@zeus-js/output-vue-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = defineContainer({`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  props: ${JSON.stringify(propNames)},`,
+		`  events: ${JSON.stringify(eventNames)},`,
+		`  slots: ${JSON.stringify(slotNames)},`,
+		`  model: ${model ? formatModel(model) : "undefined"},`,
+		`})`,
+		``
+	].join("\n");
+}
+function getEventNames(component) {
+	return Array.from(new Set(Object.entries(component.events).map(([key, event]) => {
+		var _event$name2, _event$key2;
+		return (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase((_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key);
+	})));
+}
+function formatModel(model) {
+	return `{
+    prop: ${JSON.stringify(model.prop)},
+    event: ${JSON.stringify(model.event)},
+    eventPath: ${JSON.stringify(model.eventPath)},
+  }`;
+}
 function toVuePropOption(prop) {
 	var _typeMap$prop$type;
 	return `{ type: ${(_typeMap$prop$type = {
@@ -225,6 +269,7 @@ function toVuePropOption(prop) {
 		boolean: "Boolean",
 		object: "Object",
 		array: "Array",
+		function: "Function",
 		unknown: "null"
 	}[prop.type]) !== null && _typeMap$prop$type !== void 0 ? _typeMap$prop$type : "null"}, required: ${prop.required === true ? "true" : "false"} }`;
 }
@@ -234,6 +279,145 @@ function createVuePropInputKeys(propNames) {
 function toKebabCase(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
+const VUE_PROP_HELPERS = `
+function hasRawProp(rawProps, name) {
+  const keys = PROP_INPUT_KEYS[name];
+  for (const key of keys) {
+    if (hasOwn(rawProps, key)) return true;
+  }
+  return false;
+}
+
+function hasOwn(source, key) {
+  return Object.prototype.hasOwnProperty.call(source, key);
+}
+`;
+const VUE_NAMED_SLOT_HELPERS = `
+function withSlot(name, vnode) {
+  if (!vnode) return vnode;
+
+  if (typeof vnode === 'string') {
+    return h('span', { slot: name, style: 'display: contents' }, vnode);
+  }
+
+  return cloneVNode(vnode, { slot: name });
+}
+`;
+const VUE_MODEL_HELPERS = `
+function readEventPath(event, path) {
+  if (!path) return event.detail;
+
+  let value = event;
+  for (const segment of path.split('.')) {
+    if (value == null) return undefined;
+    value = value[segment];
+  }
+  return value;
+}
+`;
+//#endregion
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return (0, vue.defineComponent)((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = (0, vue.ref)();
+		const listeners = [];
+		(0, vue.onMounted)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = (0, vue.h)(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? (0, vue.withDirectives)(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return (0, vue.h)("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return (0, vue.cloneVNode)(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
 //#endregion
 //#region packages/web-c/output-vue-wrapper/src/index.ts
 function vueWrapper(options = {}) {
@@ -245,7 +429,7 @@ function vueWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		globalDts: (_options$globalDts = options.globalDts) !== null && _options$globalDts !== void 0 ? _options$globalDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
-		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "minimal"
+		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "runtime"
 	};
 	return {
 		name: "zeus-output-vue-wrapper",
@@ -294,3 +478,4 @@ function vueWrapper(options = {}) {
 }
 //#endregion
 exports.default = vueWrapper;
+exports.defineContainer = defineContainer;

package/dist/output-vue-wrapper.d.ts

@@ -1,6 +1,7 @@
 import { DtsMode, ZeusComponentPlugin } from '@zeus-js/bundler-plugin';
+import * as vue from 'vue';
 
-type VueWrapperMode = 'minimal' | 'event-bridge';
+type VueWrapperMode = 'runtime' | 'minimal' | 'event-bridge';
 export interface OutputVueWrapperOptions {
     /**
      * Vue wrapper output directory.
@@ -37,16 +38,43 @@ export interface OutputVueWrapperOptions {
      */
     index?: boolean;
     /**
+     * runtime:
+     *   Default. Generates thin proxies powered by @zeus-js/output-vue-wrapper/runtime.
+     *   No watch, no onMounted, no addEventListener — Vue-native props/events/model/slots.
+     *
      * minimal:
-     *   Default. Vue wrapper only renders the custom element tag.
+     *   Vue wrapper only renders the custom element tag.
      *   No watch, no prop sync, no event listeners.
      *
      * event-bridge:
-     *   Additional mode for React CustomEvent bridging.
+     *   Additional mode with explicit prop syncing and CustomEvent bridging.
      */
     wrapper?: VueWrapperMode;
 }
 
+export interface ZeusVueModelOptions {
+    prop: string;
+    event: string | string[];
+    eventPath?: string;
+}
+export interface ZeusVueContainerOptions {
+    tagName: string;
+    displayName?: string;
+    defineCustomElement?: () => void;
+    props?: string[];
+    events?: string[];
+    slots?: string[];
+    model?: ZeusVueModelOptions;
+    transformTag?: (tagName: string) => string;
+}
+export declare function defineContainer(options: ZeusVueContainerOptions): vue.DefineSetupFnComponent<{
+    [x: string]: /*elided*/ any;
+}, string[], {}, {
+    [x: string]: /*elided*/ any;
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue.PublicProps>;
+
 export declare function vueWrapper(options?: OutputVueWrapperOptions): ZeusComponentPlugin;
 
 export { vueWrapper as default };