mcfe-react-lib/mountComponent.mjs

Mount/unmount React components flexibly with React 17 or 18 support

// src/mountComponent.tsx
import React2, { Suspense, useEffect, useRef } from "react";

// src/Components/LoadingSquare.tsx
import React from "react";
var colorsDefault = ["#b02a31", "#ef494c", "#e95961"];
var LoadingSquare = ({ colors }) => {
  colors = colors || colorsDefault;
  return /* @__PURE__ */ React.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      xmlnsXlink: "http://www.w3.org/1999/xlink",
      style: { margin: "auto", display: "block", shapeRendering: "auto", width: "72px", height: "72px" },
      viewBox: "0 0 100 100",
      preserveAspectRatio: "xMidYMid"
    },
    /* @__PURE__ */ React.createElement("g", { transform: "translate(20 20)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[0] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.4s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(50 20)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[1] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.3s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(80 20)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[2] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.2s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(20 50)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[1] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.3s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(50 50)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[2] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.2s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(80 50)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[0] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.1s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(20 80)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[2] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.2s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(50 80)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[0] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "-0.1s"
      }
    ))),
    /* @__PURE__ */ React.createElement("g", { transform: "translate(80 80)" }, /* @__PURE__ */ React.createElement("rect", { x: "-15", y: "-15", width: "30", height: "30", fill: colors[1] }, /* @__PURE__ */ React.createElement(
      "animateTransform",
      {
        attributeName: "transform",
        type: "scale",
        repeatCount: "indefinite",
        calcMode: "spline",
        dur: "1s",
        values: "1;1;0.2;1;1",
        keyTimes: "0;0.2;0.5;0.8;1",
        keySplines: "0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5",
        begin: "0s"
      }
    )))
  );
};
var LoadingSquare_default = LoadingSquare;

// src/mountComponent.tsx
function generateUID() {
  return "uid-" + Date.now().toString(36) + "-" + Math.random().toString(36).substring(2, 5);
}
var MountComponent = (props) => {
  const { initial } = props;
  const id = useRef(props.mcfeId || generateUID());
  useEffect(() => {
    initial.mount("#" + id.current);
    return () => {
      initial.unmount();
    };
  }, []);
  return /* @__PURE__ */ React2.createElement("div", { id: id.current, className: props.className });
};
var CreateMountComponent = (initial) => {
  const Component = (props) => {
    return /* @__PURE__ */ React2.createElement(MountComponent, { ...props, initial });
  };
  return Component;
};
var CreateComponent = (loading) => {
  const Comp = React2.lazy(() => loading.then((module) => {
    return { default: CreateMountComponent(module.default) };
  }));
  return Comp;
};
var CreateComponentLazy = CreateComponent;
var CreateComponentSuspense = function(loading, options) {
  const Comp = React2.lazy(() => loading.then((module) => {
    return { default: CreateMountComponent(module.default) };
  }).catch((err) => {
    console.error(err);
    throw err;
    return {
      default: (props) => {
        const { id, mcfeId, ...rest } = props;
        const tempId = id || mcfeId || options?.mcfeId || "error-component";
        return /* @__PURE__ */ React2.createElement("div", { id: tempId, ...rest }, "Error...");
      }
    };
  }));
  let LoadingComponent = options?.LoadingComponent;
  if (!LoadingComponent) {
    LoadingComponent = LoadingSquare_default;
  }
  return (props) => /* @__PURE__ */ React2.createElement(Suspense, { fallback: /* @__PURE__ */ React2.createElement(LoadingComponent, null) }, /* @__PURE__ */ React2.createElement(Comp, { ...props, mcfeId: props.mcfeId ?? options?.mcfeId, className: props.className ?? options?.className ?? "mfe-module-mount" }));
};
export {
  CreateComponent,
  CreateComponentLazy,
  CreateComponentSuspense,
  CreateMountComponent,
  MountComponent
};
//# sourceMappingURL=mountComponent.mjs.map