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

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

@@ -1,5 +1,5 @@
 /**
-* output-react-wrapper v0.1.0-beta.3
+* output-react-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 _lit_react = require("@lit/react");
 //#region packages/web-c/output-react-wrapper/src/generateReactIndex.ts
 function generateReactIndex(components, options) {
 	const lines = [];
@@ -20,211 +21,362 @@ function generateReactIndex(components, options) {
 	return lines.join("\n");
 }
 //#endregion
-//#region packages/web-c/output-react-wrapper/src/naming.ts
-function toReactEventProp(eventName) {
-	return "on" + eventName.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
-}
-//#endregion
 //#region packages/web-c/output-react-wrapper/src/generateReactWrapper.ts
 function generateReactWrapper(input) {
-	const { mode = "minimal" } = input;
-	if (mode === "minimal") return generateMinimalReactWrapper(input);
-	return generateEventBridgeReactWrapper(input);
-}
-function createBindings(names, prefix) {
-	return names.map((sourceName, index) => ({
-		sourceName,
-		localName: `${prefix}${index}`
-	}));
-}
-function createEventBindings(eventNames) {
-	return eventNames.map((eventName, index) => ({
-		eventName,
-		sourceName: toReactEventProp(eventName),
-		localName: `eventHandler${index}`
-	}));
-}
-function generateDestructuredBindings(bindings) {
-	if (!bindings.length) return "";
-	return bindings.map(({ sourceName, localName }) => {
-		return `${JSON.stringify(sourceName)}: ${localName},`;
-	}).join("\n    ");
+	return input.mode === "runtime" ? generateRuntimeReactWrapper(input) : input.mode === "event-bridge" ? generateEventBridgeReactWrapper(input) : generateMinimalReactWrapper(input);
 }
 function generateMinimalReactWrapper(input) {
 	const { component, namedSlots, wcModuleId } = input;
 	const slotBindings = createBindings(getNamedSlots(component, namedSlots), "slotValue");
-	const slotDestructure = slotBindings.length ? `\n    ${generateDestructuredBindings(slotBindings)}` : "";
+	const omittedKeys = ["children", ...slotBindings.map(({ sourceName }) => sourceName)];
+	const slotAssignments = generatePropAssignments(slotBindings);
 	const namedSlotLines = generateMinimalNamedSlots(slotBindings);
+	const childSetup = slotBindings.length ? `${namedSlotLines}
+    const childArgs = [];
+    pushAll(childArgs, slotNodes);
+    if (children != null) childArgs.push(children);` : "";
+	const render = slotBindings.length ? `React.createElement.apply(
+      React,
+      [${JSON.stringify(component.tag)}, rest].concat(childArgs),
+    )` : `React.createElement(${JSON.stringify(component.tag)}, rest, children)`;
 	return `
 import * as React from 'react';
 
 import ${JSON.stringify(wcModuleId)};
 
+const OMITTED_PROPS = new Set(${JSON.stringify(omittedKeys)});
+
 export const ${component.name} = React.forwardRef(
-  function ${component.name}({
-    children,${slotDestructure}
-    ...rest
-  } = {}, ref) {
-${namedSlotLines}
-    return React.createElement(
-      ${JSON.stringify(component.tag)},
-      {
-        ...rest,
-        ref,
-      },
-${namedSlotLines ? "      ...slotNodes,\n" : ""}      children,
-    );
+  function ${component.name}(inputProps, ref) {
+    const props = inputProps || {};
+    const children = props.children;
+${slotAssignments}
+    const rest = omitProps(props);
+    rest.ref = ref;
+${childSetup}
+
+    return ${render};
   },
 );
+
+function omitProps(source) {
+  const output = {};
+  for (const key in source) {
+    if (hasOwn(source, key) && !OMITTED_PROPS.has(key)) {
+      output[key] = source[key];
+    }
+  }
+  return output;
+}
+
+function hasOwn(source, key) {
+  return Object.prototype.hasOwnProperty.call(source, key);
+}
+${slotBindings.length ? PUSH_ALL_HELPER : ""}
 `.trimStart();
 }
 function generateEventBridgeReactWrapper(input) {
 	const { component, namedSlots, wcModuleId } = input;
 	const propBindings = createBindings(Object.keys(component.props), "propValue");
-	const eventBindings = createEventBindings(Object.keys(component.events));
+	const eventBindings = createEventBindings(component.events);
+	if (!propBindings.length && !eventBindings.length) return generateMinimalReactWrapper(input);
 	const slotBindings = createBindings(getNamedSlots(component, namedSlots), "slotValue");
-	const destructuredProps = generateDestructuredBindings([
+	const destructuredBindings = [
 		...propBindings,
 		...eventBindings,
 		...slotBindings
-	]);
+	];
+	const omittedKeys = [
+		"children",
+		"className",
+		"style",
+		...destructuredBindings.map(({ sourceName }) => sourceName)
+	];
 	return `
 import {
-  createElement,
-  cloneElement,
-  Fragment,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useImperativeHandle,
-  useRef,
+  ${[
+		"createElement",
+		...slotBindings.length ? [
+			"cloneElement",
+			"Fragment",
+			"isValidElement"
+		] : [],
+		"forwardRef",
+		...propBindings.length || eventBindings.length ? ["useEffect"] : [],
+		"useImperativeHandle",
+		"useRef"
+	].join(",\n  ")},
 } from 'react';
 
 import ${JSON.stringify(wcModuleId)};
 
-export const ${component.name} = forwardRef(function ${component.name}(props, ref) {
-  const {
-    children,
-    className,
-    style,
-    ${destructuredProps}
-    ...rest
-  } = props;
-
-  const innerRef = useRef(null);
-  const previousPropKeysRef = useRef(new Set());
-
-  useImperativeHandle(ref, () => innerRef.current);
-
-  ${generatePropSyncLines(propBindings)}
-
-  ${generateEventEffects(eventBindings)}
+const OMITTED_PROPS = new Set(${JSON.stringify(omittedKeys)});
+${eventBindings.length ? `const EVENT_NAMES = ${JSON.stringify(eventBindings.map((binding) => binding.eventName))};` : ""}
 
-  const slotChildren = [];
+export const ${component.name} = forwardRef(function ${component.name}(inputProps, ref) {
+  const props = inputProps || {};
+  const children = props.children;
+  const className = props.className;
+  const style = props.style;
+${generatePropAssignments(destructuredBindings)}
+${generatePropPresenceAssignments(propBindings)}
+  const rest = omitProps(props);
 
-  ${generateNamedSlotRenderLines(slotBindings)}
+  const innerRef = useRef(null);
+${generatePropRefs(propBindings)}
+${generateEventRefs(eventBindings)}
+  useImperativeHandle(ref, () => innerRef.current, []);
 
-  if (children != null) {
-    slotChildren.push(children);
-  }
+${generatePropSyncEffect(propBindings)}
+${generateEventEffect(eventBindings)}
+${generateChildrenSetup(slotBindings)}
+  rest.ref = innerRef;
+  rest.className = className;
+  rest.style = style;
 
-  return createElement(
-    ${JSON.stringify(component.tag)},
-    {
-      ...rest,
-      ref: innerRef,
-      className,
-      style,
-    },
-    ...slotChildren,
-  );
+  return ${generateReactRender(component.tag, slotBindings)};
 });
-
-function createNamedSlot(name, value) {
-  if (value == null || value === false) return null;
-
-  if (
-    isValidElement(value) &&
-    value.type !== Fragment
-  ) {
-    return cloneElement(value, { slot: name });
+${slotBindings.length ? NAMED_SLOT_HELPER : ""}
+function omitProps(source) {
+  const output = {};
+  for (const key in source) {
+    if (hasOwn(source, key) && !OMITTED_PROPS.has(key)) {
+      output[key] = source[key];
+    }
   }
+  return output;
+}
 
-  return createElement(
-    'span',
-    {
-      slot: name,
-      style: { display: 'contents' },
-    },
-    value,
-  );
+function hasOwn(source, key) {
+  return Object.prototype.hasOwnProperty.call(source, key);
 }
 `.trimStart();
 }
-function generatePropSyncLines(bindings) {
-	if (!bindings.length) return "// no props";
-	return `useEffect(() => {
+function createBindings(names, prefix) {
+	return names.map((sourceName, index) => ({
+		sourceName,
+		localName: `${prefix}${index}`
+	}));
+}
+function createEventBindings(events) {
+	return Object.entries(events).map(([key, event], index) => {
+		var _event$key, _event$name, _event$reactName;
+		const sourceEventName = (_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key;
+		return {
+			eventName: (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase(sourceEventName),
+			sourceName: (_event$reactName = event.reactName) !== null && _event$reactName !== void 0 ? _event$reactName : toReactEventProp(sourceEventName),
+			localName: `eventHandler${index}`
+		};
+	});
+}
+function generatePropAssignments(bindings) {
+	return bindings.map(({ sourceName, localName }) => `  const ${localName} = props[${JSON.stringify(sourceName)}];`).join("\n");
+}
+function generatePropPresenceAssignments(bindings) {
+	return bindings.map(({ sourceName }, index) => `  const propPresent${index} = hasOwn(props, ${JSON.stringify(sourceName)});`).join("\n");
+}
+function generatePropRefs(bindings) {
+	if (!bindings.length) return "";
+	return `  const previousPropPresenceRef = useRef([]);
+  const previousPropValuesRef = useRef([]);`;
+}
+function generateEventRefs(bindings) {
+	if (!bindings.length) return "";
+	return `  const eventHandlersRef = useRef([]);
+${bindings.map(({ localName }, index) => `  eventHandlersRef.current[${index}] = ${localName};`).join("\n")}`;
+}
+function generatePropSyncEffect(bindings) {
+	if (!bindings.length) return "";
+	return `  useEffect(() => {
     const el = innerRef.current;
     if (!el) return;
 
-    const previousPropKeys = previousPropKeysRef.current;
+    const previousPropPresence = previousPropPresenceRef.current;
+    const previousPropValues = previousPropValuesRef.current;
 
-    ${bindings.map(({ sourceName, localName }) => {
+${bindings.map(({ sourceName, localName }, index) => {
 		const key = JSON.stringify(sourceName);
-		return `if (Object.prototype.hasOwnProperty.call(props, ${key})) {
-      el[${key}] = ${localName};
-      previousPropKeys.add(${key});
-    } else if (previousPropKeys.has(${key})) {
+		return `    if (propPresent${index}) {
+      if (
+        !previousPropPresence[${index}] ||
+        !Object.is(previousPropValues[${index}], ${localName})
+      ) {
+        el[${key}] = ${localName};
+        previousPropValues[${index}] = ${localName};
+      }
+      previousPropPresence[${index}] = true;
+    } else if (previousPropPresence[${index}]) {
       el[${key}] = undefined;
-      previousPropKeys.delete(${key});
+      previousPropPresence[${index}] = false;
+      previousPropValues[${index}] = undefined;
     }`;
-	}).join("\n\n    ")}
-  }, [props, ${bindings.map((binding) => binding.localName).join(", ")}]);`;
+	}).join("\n\n")}
+  }, [${bindings.flatMap((binding, index) => [`propPresent${index}`, binding.localName]).join(", ")}]);
+`;
 }
-function generateEventEffects(bindings) {
-	return bindings.map(({ eventName, localName }) => {
-		return `
-  useEffect(() => {
+function generateEventEffect(bindings) {
+	if (!bindings.length) return "";
+	return `  useEffect(() => {
     const el = innerRef.current;
-    if (!el || !${localName}) return;
+    if (!el) return;
 
-    const handler = event => {
-      ${localName}(event);
-    };
+    const listeners = EVENT_NAMES.map(
+      (_eventName, index) => event => {
+        const handler = eventHandlersRef.current[index];
+        if (handler) handler(event);
+      },
+    );
 
-    el.addEventListener(${JSON.stringify(eventName)}, handler);
+    for (let index = 0; index < EVENT_NAMES.length; index += 1) {
+      el.addEventListener(EVENT_NAMES[index], listeners[index]);
+    }
 
     return () => {
-      el.removeEventListener(${JSON.stringify(eventName)}, handler);
+      for (let index = 0; index < EVENT_NAMES.length; index += 1) {
+        el.removeEventListener(EVENT_NAMES[index], listeners[index]);
+      }
     };
-  }, [${localName}]);
+  }, []);
 `;
-	}).join("");
-}
-function getNamedSlots(component, namedSlots) {
-	if (namedSlots === "none") return [];
-	return Object.keys(component.slots).filter((name) => name !== "default");
 }
-function generateNamedSlotRenderLines(bindings) {
-	return bindings.map(({ sourceName, localName }) => {
-		return `
-  {
+function generateChildrenSetup(bindings) {
+	if (!bindings.length) return "";
+	return `  const slotChildren = [];
+${bindings.map(({ sourceName, localName }) => `  {
     const node = createNamedSlot(${JSON.stringify(sourceName)}, ${localName});
     if (node != null) slotChildren.push(node);
-  }
+  }`).join("\n")}
+  if (children != null) slotChildren.push(children);
 `;
-	}).join("");
+}
+function generateReactRender(tag, slotBindings) {
+	if (!slotBindings.length) return `createElement(${JSON.stringify(tag)}, rest, children)`;
+	return `createElement.apply(
+    null,
+    [${JSON.stringify(tag)}, rest].concat(slotChildren),
+  )`;
+}
+function getNamedSlots(component, namedSlots) {
+	return namedSlots === "none" ? [] : Object.keys(component.slots).filter((name) => name !== "default");
 }
 function generateMinimalNamedSlots(bindings) {
 	if (!bindings.length) return "";
-	return bindings.map(({ sourceName, localName }, index) => {
-		return `    const ${`slotNode${index}`} = ${localName} != null && ${localName} !== false
+	return `${bindings.map(({ sourceName, localName }, index) => {
+		return `    const slotNode${index} = ${localName} != null && ${localName} !== false
       ? (React.isValidElement(${localName}) && ${localName}.type !== React.Fragment
           ? React.cloneElement(${localName}, { slot: ${JSON.stringify(sourceName)} })
           : React.createElement('span', { slot: ${JSON.stringify(sourceName)}, style: { display: 'contents' } }, ${localName}))
-      : null;
+      : null;`;
+	}).join("\n")}
+    const slotNodes = [${bindings.map((_, index) => `slotNode${index}`).join(", ")}].filter(Boolean);`;
+}
+function toKebabCase(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+function toReactEventProp(value) {
+	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
+}
+function generateRuntimeReactWrapper(input) {
+	const { component, namedSlots } = input;
+	const events = createRuntimeEventMap(component);
+	const slots = getNamedSlots(component, namedSlots);
+	return [
+		`import React from 'react'`,
+		`import { createComponent } from '@zeus-js/output-react-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = createComponent({`,
+		`  react: React,`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  events: ${formatEventObject(events)},`,
+		`  slots: ${JSON.stringify(slots)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`})`,
+		``
+	].join("\n");
+}
+function createRuntimeEventMap(component) {
+	const events = {};
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$key2, _event$name2, _event$reactName2;
+		const sourceEventName = (_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key;
+		const domEventName = (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase(sourceEventName);
+		const reactPropName = (_event$reactName2 = event.reactName) !== null && _event$reactName2 !== void 0 ? _event$reactName2 : toReactEventProp(sourceEventName);
+		events[reactPropName] = domEventName;
+	}
+	return events;
+}
+function formatEventObject(value) {
+	const entries = Object.entries(value);
+	if (!entries.length) return "{}";
+	return `{\n${entries.map(([key, item]) => `    ${JSON.stringify(key)}: ${JSON.stringify(item)}`).join(",\n")}\n  }`;
+}
+const PUSH_ALL_HELPER = `
+function pushAll(target, values) {
+  for (const value of values) target.push(value);
+}
+`;
+const NAMED_SLOT_HELPER = `
+function createNamedSlot(name, value) {
+  if (value == null || value === false) return null;
+
+  if (isValidElement(value) && value.type !== Fragment) {
+    return cloneElement(value, { slot: name });
+  }
+
+  return createElement(
+    'span',
+    { slot: name, style: { display: 'contents' } },
+    value,
+  );
+}
 `;
-	}).join("") + "\n    const slotNodes = [" + bindings.map((_, index) => `slotNode${index}`).join(", ") + "].filter(Boolean);\n";
+//#endregion
+//#region packages/web-c/output-react-wrapper/src/runtime/createComponent.ts
+function createComponent(options) {
+	var _customElements$get;
+	const { defineCustomElement, react, tagName, transformTag, elementClass, events = {}, slots = [], displayName } = options;
+	const finalTagName = transformTag ? transformTag(tagName) : tagName;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const LitComponent = (0, _lit_react.createComponent)({
+		react,
+		tagName: finalTagName,
+		elementClass: elementClass !== null && elementClass !== void 0 ? elementClass : typeof customElements === "undefined" ? HTMLElement : (_customElements$get = customElements.get(finalTagName)) !== null && _customElements$get !== void 0 ? _customElements$get : HTMLElement,
+		events,
+		displayName
+	});
+	if (!slots.length) return LitComponent;
+	const slotSet = new Set(slots);
+	return react.forwardRef((inputProps, ref) => {
+		const rest = {};
+		const slottedChildren = [];
+		if (inputProps == null) {
+			rest.ref = ref;
+			return react.createElement(LitComponent, rest);
+		}
+		const props = inputProps;
+		for (const key in props) {
+			if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+			const value = props[key];
+			if (slotSet.has(key)) {
+				const child = createNamedSlot(react, key, value);
+				if (child != null) slottedChildren.push(child);
+				continue;
+			}
+			rest[key] = value;
+		}
+		rest.ref = ref;
+		if (props.children != null) slottedChildren.push(props.children);
+		return react.createElement(LitComponent, rest, ...slottedChildren);
+	});
+}
+function createNamedSlot(react, name, value) {
+	if (value == null || value === false) return null;
+	return react.createElement("span", {
+		slot: name,
+		style: { display: "contents" }
+	}, value);
 }
 //#endregion
 //#region packages/web-c/output-react-wrapper/src/index.ts
@@ -237,7 +389,7 @@ function reactWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
 		namedSlots: (_options$namedSlots = options.namedSlots) !== null && _options$namedSlots !== void 0 ? _options$namedSlots : "props",
-		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-react-wrapper",
@@ -280,4 +432,5 @@ function reactWrapper(options = {}) {
 	};
 }
 //#endregion
+exports.createComponent = createComponent;
 exports.default = reactWrapper;

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

@@ -1,6 +1,6 @@
 import { DtsMode, ZeusComponentPlugin } from '@zeus-js/bundler-plugin';
 
-type ReactWrapperMode = 'minimal' | 'event-bridge';
+type ReactWrapperMode = 'runtime' | 'minimal' | 'event-bridge';
 export interface OutputReactWrapperOptions {
     /**
      * React wrapper output directory.
@@ -31,8 +31,12 @@ export interface OutputReactWrapperOptions {
      */
     index?: boolean;
     /**
+     * runtime:
+     *   Default. Generates thin proxies powered by @zeus-js/output-react-wrapper/runtime.
+     *   No useEffect, no addEventListener, no prop sync — delegates to @lit/react.
+     *
      * minimal:
-     *   Default. Requires React 19+.
+     *   Requires React 19+.
      *   React wrapper only renders the custom element tag.
      *   No useEffect prop sync, no event listeners.
      *
@@ -55,6 +59,44 @@ export interface OutputReactWrapperOptions {
     namedSlots?: 'props' | 'none';
 }
 
+export type EventName<T extends Event = Event> = string & {
+    __eventType: T;
+};
+type EventNames = Record<string, EventName | string>;
+type ElementProps<I extends HTMLElement> = Partial<Omit<I, keyof HTMLElement>>;
+type ReactRef<I extends HTMLElement> = ((instance: I | null) => void) | {
+    current: I | null;
+} | null;
+export interface ReactModule {
+    createElement: (...args: unknown[]) => unknown;
+    forwardRef: (...args: unknown[]) => unknown;
+}
+type EventListeners<E extends EventNames> = {
+    [K in keyof E]?: E[K] extends EventName<infer T> ? (event: T) => void : (event: Event) => void;
+};
+type ComponentProps<I extends HTMLElement, E extends EventNames> = {
+    children?: unknown;
+    className?: string;
+    ref?: ReactRef<I>;
+    style?: unknown;
+} & {
+    [key: string]: unknown;
+} & EventListeners<E> & ElementProps<I>;
+export type ZeusReactComponent<I extends HTMLElement, E extends EventNames = {}> = (props: ComponentProps<I, E>) => unknown;
+export interface ZeusReactCreateComponentOptions<I extends HTMLElement, E extends EventNames> {
+    tagName: string;
+    react: ReactModule;
+    defineCustomElement?: () => void;
+    elementClass?: {
+        new (): I;
+    };
+    events?: E;
+    slots?: string[];
+    displayName?: string;
+    transformTag?: (tagName: string) => string;
+}
+export declare function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: ZeusReactCreateComponentOptions<I, E>): ZeusReactComponent<I, E>;
+
 export declare function reactWrapper(options?: OutputReactWrapperOptions): ZeusComponentPlugin;
 
 export { reactWrapper as default };