@codedia/react-web-component-bridge 0.1.0

package/dist/react.cjs

@@ -0,0 +1,912 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  Children: () => import_react3.Children,
+  Component: () => import_react3.Component,
+  Fragment: () => import_react3.Fragment,
+  Profiler: () => import_react3.Profiler,
+  PureComponent: () => import_react3.PureComponent,
+  StrictMode: () => import_react3.StrictMode,
+  Suspense: () => import_react3.Suspense,
+  cloneElement: () => import_react3.cloneElement,
+  configureReactApi: () => configureReactApi,
+  configureReactElements: () => configureReactElements,
+  createComponentTag: () => createComponentTag,
+  createContext: () => import_react3.createContext,
+  createElement: () => import_react3.createElement,
+  createReactElement: () => createReactElement,
+  createRef: () => import_react3.createRef,
+  createWebComponent: () => createWebComponent,
+  default: () => react_default,
+  defineComponentTag: () => defineComponentTag,
+  defineReactElement: () => defineReactElement,
+  defineReactElements: () => defineReactElements,
+  defineWebComponent: () => defineWebComponent,
+  forwardRef: () => import_react3.forwardRef,
+  getReactElementDefinition: () => getReactElementDefinition,
+  getReactElementGlobalConfig: () => getReactElementGlobalConfig,
+  isReactElementDefined: () => isReactElementDefined,
+  isValidElement: () => import_react3.isValidElement,
+  lazy: () => import_react3.lazy,
+  listReactElementDefinitions: () => listReactElementDefinitions,
+  memo: () => import_react3.memo,
+  startTransition: () => import_react3.startTransition,
+  useCallback: () => import_react3.useCallback,
+  useContext: () => import_react3.useContext,
+  useDebugValue: () => import_react3.useDebugValue,
+  useDeferredValue: () => import_react3.useDeferredValue,
+  useEffect: () => import_react3.useEffect,
+  useId: () => import_react3.useId,
+  useImperativeHandle: () => import_react3.useImperativeHandle,
+  useInsertionEffect: () => import_react3.useInsertionEffect,
+  useLayoutEffect: () => import_react3.useLayoutEffect,
+  useMemo: () => import_react3.useMemo,
+  useReducer: () => import_react3.useReducer,
+  useRef: () => import_react3.useRef,
+  useState: () => import_react3.useState,
+  useSyncExternalStore: () => import_react3.useSyncExternalStore,
+  useTransition: () => import_react3.useTransition,
+  version: () => import_react3.version
+});
+module.exports = __toCommonJS(react_exports);
+var import_react3 = __toESM(require("react"), 1);
+
+// src/configuration/global-config.ts
+var globalConfig = {
+  development: readNodeEnv() !== "production"
+};
+function configureReactElements(config) {
+  globalConfig = { ...globalConfig, ...config };
+  return getReactElementGlobalConfig();
+}
+function getReactElementGlobalConfig() {
+  return { ...globalConfig };
+}
+function readNodeEnv() {
+  const global = globalThis;
+  return global.process?.env?.NODE_ENV;
+}
+
+// src/configuration/registry.ts
+var definitions = /* @__PURE__ */ new Map();
+function registerDefinition(definition) {
+  definitions.set(definition.tagName, definition);
+}
+function getReactElementDefinition(tagName) {
+  return definitions.get(tagName.toLowerCase());
+}
+function isReactElementDefined(tagName) {
+  const normalized = tagName.toLowerCase();
+  if (typeof customElements !== "undefined" && customElements.get(normalized)) {
+    return true;
+  }
+  return definitions.has(normalized);
+}
+function listReactElementDefinitions() {
+  return [...definitions.values()];
+}
+
+// src/utilities/casing.ts
+function camelToKebab(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").toLowerCase();
+}
+function normalizeCustomElementName(tagName) {
+  const normalized = tagName.trim().toLowerCase();
+  if (!/^[a-z][.0-9_a-z]*-[-.0-9_a-z]*$/.test(normalized)) {
+    throw new Error(`Custom element names must be valid kebab-case names: "${tagName}".`);
+  }
+  return normalized;
+}
+
+// src/metadata/create-metadata.ts
+function createMetadata(tagName, options) {
+  const props = options.props ?? {};
+  const events = options.events ?? {};
+  const slots = options.slots ?? {};
+  const methods = options.methods ?? {};
+  return {
+    tagName,
+    properties: Object.entries(props).map(
+      ([name, rawDefinition]) => {
+        const definition = rawDefinition;
+        const property = { name };
+        if (definition?.attribute !== false)
+          property.attribute = definition?.attribute ?? camelToKebab(name);
+        if (definition?.type) property.type = definition.type;
+        if (definition?.required !== void 0) property.required = definition.required;
+        return property;
+      }
+    ),
+    attributes: Object.entries(props).filter(
+      ([, definition]) => definition?.attribute !== false
+    ).map(([name, rawDefinition]) => {
+      const definition = rawDefinition;
+      const attribute = {
+        name: definition?.attribute ?? camelToKebab(name),
+        property: name
+      };
+      if (definition?.reflect !== void 0) attribute.reflect = definition.reflect;
+      return attribute;
+    }),
+    events: Object.entries(events).map(([prop, rawDefinition]) => {
+      const definition = rawDefinition;
+      return {
+        name: definition?.name ?? camelToKebab(prop.replace(/^on/, "")),
+        prop,
+        bubbles: definition?.bubbles ?? true,
+        composed: definition?.composed ?? true
+      };
+    }),
+    slots: Object.entries(slots).map(([prop, definition]) => ({
+      prop,
+      name: definition === true ? null : typeof definition === "string" ? definition : definition?.name ?? null
+    })),
+    methods: Object.keys(methods).map((name) => ({ name })),
+    formAssociated: Boolean(options.form),
+    shadow: options.shadow !== false
+  };
+}
+
+// src/utilities/scheduling.ts
+function scheduleMicrotask(task) {
+  if (typeof queueMicrotask === "function") {
+    queueMicrotask(task);
+    return;
+  }
+  Promise.resolve().then(task);
+}
+
+// src/core/event-controller.ts
+var EventController = class {
+  constructor(host, options) {
+    this.host = host;
+    this.options = options;
+  }
+  host;
+  options;
+  createEventProps() {
+    const eventProps = {};
+    for (const [propName, definition] of Object.entries(this.options.events ?? {})) {
+      eventProps[propName] = (...args) => this.dispatch(propName, definition, args);
+    }
+    return eventProps;
+  }
+  dispatch(propName, definition, args) {
+    const eventName = definition?.name ?? camelToKebab(propName.replace(/^on/, ""));
+    const detail = definition?.detail ? definition.detail(...args) : args.length <= 1 ? args[0] : [...args];
+    const event = new CustomEvent(eventName, {
+      detail,
+      bubbles: definition?.bubbles ?? true,
+      composed: definition?.composed ?? true,
+      cancelable: definition?.cancelable ?? false
+    });
+    const accepted = this.host.dispatchEvent(event);
+    return definition?.cancelable ? accepted : void 0;
+  }
+};
+
+// src/core/form-controller.ts
+var FormController = class {
+  constructor(host, options) {
+    this.host = host;
+    this.options = options;
+  }
+  host;
+  options;
+  internals;
+  connect() {
+    if (!this.options.form || this.internals) {
+      return;
+    }
+    const attach = this.host.attachInternals;
+    if (attach) {
+      this.internals = attach.call(this.host);
+    }
+  }
+  update(name, value) {
+    if (!this.options.form || name !== this.options.form.valueProp) {
+      return;
+    }
+    const serialized = this.options.form.serializeValue ? this.options.form.serializeValue(value) : defaultSerializeValue(value);
+    this.internals?.setFormValue(serialized);
+    const validation = this.options.form.validate?.(value, this.host);
+    if (validation && validation !== true) {
+      this.internals?.setValidity({ customError: true }, validation);
+    } else {
+      this.internals?.setValidity({});
+    }
+  }
+  emitStandardChangeEvents() {
+    if (!this.options.form) {
+      return;
+    }
+    this.host.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.host.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+};
+function defaultSerializeValue(value) {
+  if (value === void 0 || value === null) return null;
+  if (value instanceof File) return value;
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+// src/core/lifecycle.ts
+var LifecycleController = class {
+  constructor(render, requestRender, cleanup) {
+    this.render = render;
+    this.requestRender = requestRender;
+    this.cleanup = cleanup;
+  }
+  render;
+  requestRender;
+  cleanup;
+  disconnectToken = 0;
+  connected() {
+    this.disconnectToken++;
+    this.render.reconnect();
+    this.requestRender();
+  }
+  disconnected(host) {
+    const token = ++this.disconnectToken;
+    queueMicrotask(() => {
+      if (token !== this.disconnectToken || host.isConnected) {
+        return;
+      }
+      this.cleanup();
+      this.render.unmount();
+    });
+  }
+};
+
+// src/core/method-controller.ts
+var MethodController = class {
+  constructor(options) {
+    this.options = options;
+  }
+  options;
+  ref;
+  queue = /* @__PURE__ */ new Map();
+  setRef(value) {
+    this.ref = value;
+    for (const [name, calls] of this.queue) {
+      for (const args of calls) {
+        this.call(name, args);
+      }
+    }
+    this.queue.clear();
+  }
+  createRefSetter() {
+    return (value) => this.setRef(value);
+  }
+  call(name, args, host) {
+    const definition = this.options.methods?.[name];
+    if (!definition) {
+      throw new Error(`Unknown public method "${name}".`);
+    }
+    if (!this.ref) {
+      if (definition.queue) {
+        const calls = this.queue.get(name) ?? [];
+        calls.push([...args]);
+        this.queue.set(name, calls);
+        return void 0;
+      }
+      throw new Error(`Cannot call "${name}" before the React component ref is mounted.`);
+    }
+    return definition.call(this.ref, host ?? void 0, ...args);
+  }
+};
+
+// src/core/portal-controller.ts
+var PortalController = class {
+  constructor(host, renderRoot, options) {
+    this.host = host;
+    this.renderRoot = renderRoot;
+    this.options = options;
+  }
+  host;
+  renderRoot;
+  options;
+  container;
+  getPortalProps() {
+    const portal = this.options.portal;
+    if (!portal?.enabled || !portal.prop) {
+      return {};
+    }
+    return { [portal.prop]: this.getContainer() };
+  }
+  cleanup() {
+    this.container?.remove();
+    this.container = void 0;
+  }
+  getContainer() {
+    if (this.container) {
+      return this.container;
+    }
+    const portal = this.options.portal;
+    const target = portal?.target;
+    if (target instanceof HTMLElement) {
+      this.container = target;
+      return target;
+    }
+    if (typeof target === "function") {
+      this.container = target(this.host);
+      return this.container;
+    }
+    const container = document.createElement("div");
+    container.setAttribute("part", portal?.part ?? "overlay-root");
+    container.setAttribute("data-rwcb-portal", "");
+    if (target === "body") {
+      document.body.append(container);
+    } else if (target === "host") {
+      this.host.append(container);
+    } else {
+      this.renderRoot.append(container);
+    }
+    this.container = container;
+    return container;
+  }
+};
+
+// src/utilities/errors.ts
+function warnDevelopment(enabled, message) {
+  if (enabled && typeof console !== "undefined") {
+    console.warn(`[react-web-component-bridge] ${message}`);
+  }
+}
+function assertBrowserApi(apiName, value) {
+  if (!value) {
+    throw new Error(
+      `${apiName} is unavailable. Custom element registration must run in a browser.`
+    );
+  }
+}
+
+// src/utilities/parsing.ts
+function parseAttributeValue(value, definition, host) {
+  if (definition.parseAttribute) {
+    return definition.parseAttribute(value, host);
+  }
+  switch (definition.type ?? "string") {
+    case "boolean":
+      return value !== null;
+    case "number": {
+      if (value === null || value.trim() === "") return void 0;
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : void 0;
+    }
+    case "json": {
+      if (value === null || value.trim() === "") return void 0;
+      try {
+        return JSON.parse(value);
+      } catch {
+        return void 0;
+      }
+    }
+    case "date": {
+      if (value === null || value.trim() === "") return void 0;
+      const date = new Date(value);
+      return Number.isNaN(date.getTime()) ? void 0 : date;
+    }
+    case "string":
+      return value;
+    default:
+      return value;
+  }
+}
+
+// src/utilities/serialization.ts
+function serializeAttributeValue(value, definition, host) {
+  if (definition.serializeAttribute) {
+    return definition.serializeAttribute(value, host);
+  }
+  if (value === void 0 || value === null || value === false) {
+    return null;
+  }
+  switch (definition.type ?? "string") {
+    case "boolean":
+      return value ? "" : null;
+    case "json":
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return null;
+      }
+    case "date":
+      return value instanceof Date && !Number.isNaN(value.getTime()) ? value.toISOString() : null;
+    case "number":
+      return typeof value === "number" && Number.isFinite(value) ? String(value) : null;
+    case "string":
+      return String(value);
+    default:
+      return String(value);
+  }
+}
+
+// src/core/property-controller.ts
+var PropertyController = class {
+  constructor(context) {
+    this.context = context;
+    for (const [prop, definition] of Object.entries(this.context.options.props ?? {})) {
+      const attribute = this.attributeName(prop, definition);
+      if (attribute) {
+        this.attributeToProp.set(attribute, prop);
+      }
+      if (definition?.default !== void 0) {
+        this.values.set(prop, definition.default);
+      }
+    }
+  }
+  context;
+  values = /* @__PURE__ */ new Map();
+  reflectingAttributes = /* @__PURE__ */ new Set();
+  attributeToProp = /* @__PURE__ */ new Map();
+  static observedAttributes(options) {
+    return Object.entries(options.props ?? {}).map(
+      ([prop, definition]) => definition?.attribute === false ? void 0 : definition?.attribute ?? camelToKebab(prop)
+    ).filter((value) => Boolean(value));
+  }
+  initializePreUpgradeProperties() {
+    for (const prop of Object.keys(this.context.options.props ?? {})) {
+      if (Object.prototype.hasOwnProperty.call(this.context.host, prop)) {
+        const value = this.context.host[prop];
+        delete this.context.host[prop];
+        this.setProperty(prop, value);
+      }
+    }
+  }
+  getProperty(name) {
+    return this.values.get(name);
+  }
+  getProps() {
+    return Object.fromEntries(this.values);
+  }
+  setProperty(name, rawValue) {
+    const definition = this.context.options.props?.[name];
+    const nextValue = this.normalizeValue(name, rawValue, definition);
+    if (Object.is(this.values.get(name), nextValue)) {
+      return;
+    }
+    this.values.set(name, nextValue);
+    this.reflectProperty(name, nextValue, definition);
+    this.context.formValueChanged(name, nextValue);
+    this.context.requestRender();
+  }
+  attributeChanged(attributeName, value) {
+    if (this.reflectingAttributes.has(attributeName)) {
+      return;
+    }
+    const prop = this.attributeToProp.get(attributeName);
+    if (!prop) {
+      return;
+    }
+    const definition = this.context.options.props?.[prop];
+    const parsed = parseAttributeValue(value, definition ?? {}, this.context.host);
+    this.setProperty(prop, parsed);
+  }
+  normalizeValue(name, rawValue, definition) {
+    let value = definition?.transform ? definition.transform(rawValue, this.context.host) : rawValue;
+    if (definition?.validate) {
+      const result = definition.validate(value, this.context.host);
+      if (result !== true) {
+        warnDevelopment(
+          this.context.development,
+          typeof result === "string" ? result : `Invalid value for property "${name}".`
+        );
+      }
+    }
+    if (definition?.required && (value === void 0 || value === null || value === "")) {
+      warnDevelopment(this.context.development, `Required property "${name}" is missing.`);
+    }
+    return value;
+  }
+  reflectProperty(name, value, definition) {
+    if (!definition?.reflect) {
+      return;
+    }
+    const attribute = this.attributeName(name, definition);
+    if (!attribute) {
+      return;
+    }
+    const serialized = serializeAttributeValue(value, definition, this.context.host);
+    this.reflectingAttributes.add(attribute);
+    try {
+      if (serialized === null) {
+        this.context.host.removeAttribute(attribute);
+      } else {
+        this.context.host.setAttribute(attribute, serialized);
+      }
+    } finally {
+      this.reflectingAttributes.delete(attribute);
+    }
+  }
+  attributeName(name, definition) {
+    if (definition?.attribute === false) {
+      return null;
+    }
+    return definition?.attribute ?? camelToKebab(name);
+  }
+};
+
+// src/core/render-controller.tsx
+var import_react = require("react");
+var import_client = require("react-dom/client");
+var RenderController = class {
+  constructor(context) {
+    this.context = context;
+  }
+  context;
+  root;
+  unmounted = false;
+  render() {
+    if (this.unmounted) {
+      return;
+    }
+    this.root ??= (0, import_client.createRoot)(this.context.mount);
+    try {
+      this.root.render(this.createTree());
+    } catch (error) {
+      this.context.config.renderError?.(error, this.context.host);
+      throw error;
+    }
+  }
+  unmount() {
+    this.unmounted = true;
+    this.root?.unmount();
+    this.root = void 0;
+  }
+  reconnect() {
+    this.unmounted = false;
+  }
+  createTree() {
+    const Component2 = this.context.component;
+    const props = {
+      ...this.context.getProps(),
+      ...this.context.getSlotProps(),
+      ...this.context.getPortalProps(),
+      ...this.context.getEventProps(),
+      ref: this.context.refSetter
+    };
+    let element = (0, import_react.createElement)(Component2, props);
+    const Boundary = this.context.options.errorBoundary;
+    if (Boundary) {
+      element = (0, import_react.createElement)(Boundary, { error: void 0 }, element);
+    }
+    if (this.context.options.fallback !== void 0) {
+      element = (0, import_react.createElement)(import_react.Suspense, { fallback: this.context.options.fallback }, element);
+    }
+    if (this.context.options.wrap) {
+      element = this.context.options.wrap(element, this.context.host);
+    }
+    if (this.context.config.wrap) {
+      element = this.context.config.wrap(element, this.context.host);
+    }
+    if (this.context.options.strictMode ?? this.context.config.strictMode) {
+      element = (0, import_react.createElement)(import_react.StrictMode, void 0, element);
+    }
+    return element;
+  }
+};
+
+// src/core/slot-controller.tsx
+var import_react2 = __toESM(require("react"), 1);
+var SlotController = class {
+  constructor(options) {
+    this.options = options;
+  }
+  options;
+  createSlotProps() {
+    const props = {};
+    for (const [propName, definition] of Object.entries(this.options.slots ?? {})) {
+      props[propName] = this.createSlot(definition);
+    }
+    return props;
+  }
+  createSlot(definition) {
+    if (definition === true || definition === void 0) {
+      return (0, import_react2.createElement)("slot");
+    }
+    if (typeof definition === "string") {
+      return (0, import_react2.createElement)("slot", { name: definition });
+    }
+    const children = definition.fallback ? import_react2.default.Children.toArray(definition.fallback) : void 0;
+    return (0, import_react2.createElement)("slot", definition.name ? { name: definition.name } : void 0, children);
+  }
+};
+
+// src/core/style-controller.ts
+var StyleController = class {
+  constructor(root, host, styles) {
+    this.root = root;
+    this.host = host;
+    this.styles = styles;
+  }
+  root;
+  host;
+  styles;
+  apply() {
+    if (!this.styles) {
+      return;
+    }
+    const inputs = this.resolveInputs(this.styles);
+    const sheets = inputs.filter((style) => typeof style !== "string");
+    const text = inputs.filter((style) => typeof style === "string");
+    if ("adoptedStyleSheets" in this.root && sheets.length > 0) {
+      const current = this.root.adoptedStyleSheets ?? [];
+      this.root.adoptedStyleSheets = [...current, ...sheets];
+    }
+    for (const styleText of text) {
+      const style = document.createElement("style");
+      style.textContent = styleText;
+      this.root.prepend(style);
+    }
+  }
+  resolveInputs(input) {
+    const resolved = typeof input === "function" ? input(this.host) : input;
+    if (Array.isArray(resolved)) {
+      return resolved.flatMap((item) => Array.isArray(item) ? [...item] : [item]);
+    }
+    return [resolved];
+  }
+};
+
+// src/core/create-react-element.ts
+function createReactElement(tagName, component, options = {}) {
+  const normalizedTagName = normalizeCustomElementName(tagName);
+  const runtimeOptions = options;
+  if (typeof HTMLElement === "undefined") {
+    return {
+      tagName: normalizedTagName,
+      component,
+      options,
+      elementClass: class {
+      },
+      metadata: createMetadata(normalizedTagName, runtimeOptions)
+    };
+  }
+  const observedAttributes = PropertyController.observedAttributes(runtimeOptions);
+  const formAssociated = Boolean(options.form);
+  class ReactBridgeElement extends HTMLElement {
+    static observedAttributes = observedAttributes;
+    static formAssociated = formAssociated;
+    config = getReactElementGlobalConfig();
+    mount;
+    renderRoot;
+    propertyController;
+    eventController = new EventController(this, runtimeOptions);
+    slotController = new SlotController(runtimeOptions);
+    methodController = new MethodController(runtimeOptions);
+    formController = new FormController(this, runtimeOptions);
+    portalController;
+    renderController;
+    lifecycleController;
+    renderScheduled = false;
+    constructor() {
+      super();
+      this.renderRoot = options.shadow === false ? this : this.attachShadow({
+        mode: options.shadow?.mode ?? "open",
+        ...options.shadow?.delegatesFocus === void 0 ? {} : { delegatesFocus: options.shadow.delegatesFocus }
+      });
+      this.mount = document.createElement("span");
+      this.mount.setAttribute("part", "react-mount");
+      this.mount.setAttribute("data-rwcb-mount", "");
+      this.renderRoot.append(this.mount);
+      new StyleController(this.renderRoot, this, runtimeOptions.styles).apply();
+      this.portalController = new PortalController(this, this.renderRoot, runtimeOptions);
+      this.propertyController = new PropertyController({
+        host: this,
+        options: runtimeOptions,
+        development: this.config.development ?? false,
+        requestRender: () => this.requestRender(),
+        formValueChanged: (name, value) => {
+          this.formController.update(name, value);
+          if (name === runtimeOptions.form?.valueProp) {
+            this.formController.emitStandardChangeEvents();
+          }
+        }
+      });
+      this.renderController = new RenderController({
+        host: this,
+        component,
+        options: runtimeOptions,
+        config: this.config,
+        mount: this.mount,
+        getProps: () => this.propertyController.getProps(),
+        getEventProps: () => this.eventController.createEventProps(),
+        getSlotProps: () => this.slotController.createSlotProps(),
+        getPortalProps: () => this.portalController.getPortalProps(),
+        refSetter: this.methodController.createRefSetter()
+      });
+      this.lifecycleController = new LifecycleController(
+        this.renderController,
+        () => this.requestRender(),
+        () => this.portalController.cleanup()
+      );
+      this.propertyController.initializePreUpgradeProperties();
+    }
+    connectedCallback() {
+      this.formController.connect();
+      this.lifecycleController.connected();
+    }
+    disconnectedCallback() {
+      this.lifecycleController.disconnected(this);
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+      this.propertyController.attributeChanged(name, newValue);
+    }
+    formResetCallback() {
+      const valueProp = runtimeOptions.form?.valueProp;
+      const defaultValue = valueProp ? runtimeOptions.props?.[valueProp]?.default : void 0;
+      if (valueProp) {
+        this.propertyController.setProperty(valueProp, defaultValue);
+      }
+    }
+    callReactMethod(name, ...args) {
+      return this.methodController.call(name, args, this);
+    }
+    requestRender() {
+      if (this.renderScheduled || !this.isConnected) {
+        return;
+      }
+      this.renderScheduled = true;
+      scheduleMicrotask(() => {
+        this.renderScheduled = false;
+        if (this.isConnected) {
+          this.renderController.render();
+        }
+      });
+    }
+  }
+  for (const prop of Object.keys(options.props ?? {})) {
+    Object.defineProperty(ReactBridgeElement.prototype, prop, {
+      get() {
+        return this.propertyController.getProperty(prop);
+      },
+      set(value) {
+        this.propertyController.setProperty(prop, value);
+      }
+    });
+  }
+  for (const methodName of Object.keys(options.methods ?? {})) {
+    if (methodName in ReactBridgeElement.prototype) {
+      throw new Error(`Cannot expose public method "${methodName}" because it already exists.`);
+    }
+    Object.defineProperty(ReactBridgeElement.prototype, methodName, {
+      value(...args) {
+        return this.callReactMethod(methodName, ...args);
+      }
+    });
+  }
+  return {
+    tagName: normalizedTagName,
+    component,
+    options,
+    elementClass: ReactBridgeElement,
+    metadata: createMetadata(normalizedTagName, runtimeOptions)
+  };
+}
+
+// src/core/define-react-element.ts
+function defineReactElement(tagName, component, options = {}) {
+  assertBrowserApi(
+    "customElements",
+    typeof customElements === "undefined" ? void 0 : customElements
+  );
+  const definition = createReactElement(tagName, component, options);
+  if (!customElements.get(definition.tagName)) {
+    customElements.define(definition.tagName, definition.elementClass);
+  }
+  registerDefinition(definition);
+  return definition;
+}
+function defineReactElements(definitions2) {
+  assertBrowserApi(
+    "customElements",
+    typeof customElements === "undefined" ? void 0 : customElements
+  );
+  for (const definition of definitions2) {
+    if (!customElements.get(definition.tagName)) {
+      customElements.define(definition.tagName, definition.elementClass);
+    }
+    registerDefinition(definition);
+  }
+  return [...definitions2];
+}
+
+// src/react.ts
+var react_default = import_react3.default;
+function createComponentTag(tagName, component, options = {}) {
+  const definition = createReactElement(tagName, component, options);
+  return Object.assign(definition, {
+    define: () => defineReactElement(tagName, component, options)
+  });
+}
+function defineComponentTag(tagName, component, options = {}) {
+  const definition = defineReactElement(tagName, component, options);
+  return Object.assign(definition, {
+    define: () => definition
+  });
+}
+var createWebComponent = createComponentTag;
+var defineWebComponent = defineComponentTag;
+function configureReactApi(config) {
+  return configureReactElements(config);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  cloneElement,
+  configureReactApi,
+  configureReactElements,
+  createComponentTag,
+  createContext,
+  createElement,
+  createReactElement,
+  createRef,
+  createWebComponent,
+  defineComponentTag,
+  defineReactElement,
+  defineReactElements,
+  defineWebComponent,
+  forwardRef,
+  getReactElementDefinition,
+  getReactElementGlobalConfig,
+  isReactElementDefined,
+  isValidElement,
+  lazy,
+  listReactElementDefinitions,
+  memo,
+  startTransition,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  version
+});
+//# sourceMappingURL=react.cjs.map