omi-reactify/dist/index.es.js

Bridge between omi and react

import b, { forwardRef as x, createElement as l, Component as w, createRef as H } from "react";
import p from "react-dom";
import { createRoot as C } from "react-dom/client";
const g = () => typeof C < "u", d = /* @__PURE__ */ new WeakMap(), y = (n) => {
  if (g()) {
    let r = d.get(n);
    return r || (r = C(n), d.set(n, r)), {
      render: (s) => {
        r.render(s);
      },
      unmount: () => {
        r.unmount(), d.delete(n);
      }
    };
  } else
    return {
      render: (r) => {
        p.render(r, n);
      },
      unmount: () => {
        p.unmountComponentAtNode(n);
      }
    };
}, A = (n) => {
  if (typeof n != "function") return !1;
  const r = n.toString();
  return [
    "useState",
    "useEffect",
    "useRef",
    "useContext",
    "useMemo",
    "useCallback",
    "useReducer"
  ].some((e) => r.includes(e));
}, S = (n) => {
  var s;
  return !!(typeof n == "function" && ((s = n.prototype) != null && s.render));
}, E = /\B([A-Z])/g;
function $(n) {
  return n.replace(E, "-$1").toLowerCase();
}
const O = (n) => {
  const r = /* @__PURE__ */ new Set([
    "animationIterationCount",
    "boxFlex",
    "boxFlexGroup",
    "boxOrdinalGroup",
    "columnCount",
    "fillOpacity",
    "flex",
    "flexGrow",
    "flexShrink",
    "fontWeight",
    "lineClamp",
    "lineHeight",
    "opacity",
    "order",
    "orphans",
    "tabSize",
    "widows",
    "zIndex",
    "zoom"
  ]);
  return Object.entries(n).filter(([s, e]) => e != null && e !== "").map(([s, e]) => {
    const t = s.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
    let o = e;
    return typeof e == "number" && e !== 0 && !r.has(s) && (o = `${e}px`), `${t}:${o};`;
  }).join(" ");
}, L = (n) => {
  class r extends w {
    constructor(e) {
      super(e), this.eventHandlers = [], this.renderUnmountHandlers = /* @__PURE__ */ new Map();
      const { innerRef: t } = e;
      this.ref = t || H();
    }
    setEvent(e, t) {
      var o;
      this.eventHandlers.push([e, t]), (o = this.ref.current) == null || o.addEventListener(e, t);
    }
    update() {
      this.clearEventHandlers(), this.ref.current && Object.entries(this.props).forEach(([e, t]) => {
        var o, c, a, h;
        if (!["innerRef", "children"].includes(e)) {
          if (typeof t == "function") {
            if (e.match(/^on[A-Za-z]/)) {
              const i = e.slice(2), u = i[0].toLowerCase() + i.slice(1);
              this.setEvent(u, t);
            } else if (e.match(/^render[A-Za-z]/)) {
              const i = t, u = (f, m) => {
                let R = A(t) || S(t) ? /* @__PURE__ */ b.createElement(i, { ...f }) : i(f);
                return y(m || document.createElement("div")).render(R), m;
              };
              this.ref.current[e] = u;
            }
            return;
          }
          if (typeof t == "object") {
            if ((o = t == null ? void 0 : t.$$typeof) != null && o.toString().match(/react/)) {
              const i = (u) => (y(u || document.createElement("div")).render(t), u);
              this.ref.current[e] = i;
              return;
            }
            if (e === "style") {
              (c = this.ref.current) == null || c.setAttribute("style", O(t));
              return;
            }
            this.ref.current[e] = t;
            return;
          }
          if (e.match(E)) {
            (a = this.ref.current) == null || a.setAttribute($(e), t), (h = this.ref.current) == null || h.removeAttribute(e);
            return;
          }
        }
      });
    }
    componentDidUpdate() {
      this.update();
    }
    componentDidMount() {
      this.update();
    }
    componentWillUnmount() {
      this.clearEventHandlers();
    }
    clearEventHandlers() {
      this.eventHandlers.forEach(([e, t]) => {
        var o;
        (o = this.ref.current) == null || o.removeEventListener(e, t);
      }), this.eventHandlers = [];
    }
    render() {
      const { children: e, className: t, innerRef: o, ...c } = this.props;
      return l(
        n,
        { class: t, ...c, ref: this.ref },
        e
      );
    }
  }
  return x((s, e) => l(r, { ...s, innerRef: e }));
};
export {
  L as default,
  $ as hyphenate
};