@aidenlx/player/dist/react/lib/createComponent.js

Headless web components that make integrating media on the a web a breeze.

import "../../chunks/chunk.S6UZ27SZ.js";
const reservedReactProperties = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]);
const listenedEvents = /* @__PURE__ */ new WeakMap();
const addOrUpdateEventListener = (node, event, listener) => {
  let events = listenedEvents.get(node);
  if (events === void 0) {
    listenedEvents.set(node, events = /* @__PURE__ */ new Map());
  }
  let handler = events.get(event);
  if (listener !== void 0) {
    if (handler === void 0) {
      events.set(event, handler = { handleEvent: listener });
      node.addEventListener(event, handler);
    } else {
      handler.handleEvent = listener;
    }
  } else if (handler !== void 0) {
    events.delete(event);
    node.removeEventListener(event, handler);
  }
};
const setProperty = (node, name, value, old, events) => {
  const event = events?.[name];
  if (event !== void 0) {
    if (value !== old) {
      addOrUpdateEventListener(node, event, value);
    }
  } else {
    node[name] = value;
  }
};
const setRef = (ref, value) => {
  if (typeof ref === "function") {
    ref(value);
  } else {
    ref.current = value;
  }
};
const createComponent = (React, tagName, elementClass, events, displayName) => {
  const Component = React.Component;
  const createElement = React.createElement;
  const elementClassProps = new Set(Object.keys(events ?? {}));
  for (const p in elementClass.prototype) {
    if (!(p in HTMLElement.prototype)) {
      if (reservedReactProperties.has(p)) {
        console.warn(`${tagName} contains property ${p} which is a React reserved property. It will be used by React and not set on the element.`);
      } else {
        elementClassProps.add(p);
      }
    }
  }
  class ReactComponent extends Component {
    constructor() {
      super(...arguments);
      this._element = null;
    }
    _updateElement(oldProps) {
      if (this._element === null) {
        return;
      }
      for (const prop in this._elementProps) {
        setProperty(this._element, prop, this.props[prop], oldProps ? oldProps[prop] : void 0, events);
      }
    }
    componentDidMount() {
      this._updateElement();
    }
    componentDidUpdate(old) {
      this._updateElement(old);
    }
    render() {
      const userRef = this.props.__forwardedRef;
      if (this._ref === void 0 || this._userRef !== userRef) {
        this._ref = (value) => {
          if (this._element === null) {
            this._element = value;
          }
          if (userRef !== null) {
            setRef(userRef, value);
          }
          this._userRef = userRef;
        };
      }
      const props = { ref: this._ref };
      this._elementProps = {};
      for (const [k, v] of Object.entries(this.props)) {
        if (elementClassProps.has(k)) {
          this._elementProps[k] = v;
        } else {
          props[k === "className" ? "class" : k] = v;
        }
      }
      return createElement(tagName, props);
    }
  }
  ReactComponent.displayName = displayName ?? elementClass.name;
  const ForwardedComponent = React.forwardRef((props, ref) => createElement(ReactComponent, { ...props, __forwardedRef: ref }, props?.children));
  ForwardedComponent.displayName = ReactComponent.displayName;
  return ForwardedComponent;
};
export {
  createComponent
};
//# sourceMappingURL=createComponent.js.map