mcfe-react-lib/mountComponent.mjs.map

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

{"version":3,"sources":["../src/mountComponent.tsx","../src/Components/LoadingSquare.tsx"],"sourcesContent":["import React, { Suspense, useEffect, useRef } from \"react\";\r\nimport { ICreateComponentSuspenseOptions, ICreateInitial } from \"./type\";\r\nimport LoadingSquare from \"./Components/LoadingSquare\";\r\n\r\nfunction generateUID() {\r\n    return 'uid-' + Date.now().toString(36) + '-' + Math.random().toString(36).substring(2, 5);\r\n}\r\nexport const MountComponent = (props: { initial: ICreateInitial, className?: string, mcfeId?: string }) => {\r\n    const { initial } = props\r\n    const id = useRef(props.mcfeId || generateUID())\r\n    useEffect(() => {\r\n        initial.mount('#' + id.current)\r\n        return () => {\r\n            initial.unmount()\r\n        }\r\n    }, [])\r\n    return <div id={id.current} className={props.className} />\r\n}\r\nexport const CreateMountComponent = (initial: ICreateInitial) => {\r\n    const Component = (props: any) => {\r\n        return <MountComponent  {...props} initial={initial} />\r\n    }\r\n    return Component\r\n}\r\n// import('LayoutReact/App1').\r\nexport const CreateComponent = (loading: Promise<any>) => {\r\n    const Comp = React.lazy(() => loading.then((module) => {\r\n        return { default: CreateMountComponent(module.default) };\r\n    }));\r\n    return Comp\r\n}\r\nexport const CreateComponentLazy = CreateComponent\r\n\r\nexport const CreateComponentSuspense = function <TProps extends { className?: string, mcfeId?: string }>(loading: Promise<any>, options?: ICreateComponentSuspenseOptions) {\r\n    const Comp = React.lazy(() => loading.then((module) => {\r\n        return { default: CreateMountComponent(module.default) };\r\n    }).catch(err => {\r\n        console.error(err);\r\n        throw err;\r\n        return {\r\n            default: (props: any) => {\r\n                const { id, mcfeId, ...rest } = props;\r\n                const tempId = id || mcfeId || options?.mcfeId || \"error-component\";\r\n                return <div id={tempId} {...rest}>Error...</div>;\r\n            }\r\n        }\r\n    }));\r\n    let LoadingComponent = options?.LoadingComponent\r\n    if (!LoadingComponent) {\r\n        LoadingComponent = LoadingSquare\r\n    }\r\n    return (props: TProps) => <Suspense fallback={<LoadingComponent />}>\r\n        <Comp {...props} mcfeId={props.mcfeId ?? options?.mcfeId} className={props.className ?? options?.className ?? \"mfe-module-mount\"} />\r\n    </Suspense>\r\n}","import React from 'react'\r\n// const colors = ['#e65a1e', '#f16022', '#f37643']\r\nconst colorsDefault = ['#b02a31', '#ef494c', '#e95961']\r\n\r\ninterface ILoadingSquareProps {\r\n    colors?: string[]\r\n}\r\nconst LoadingSquare: React.FC<ILoadingSquareProps> = ({ colors }) => {\r\n    colors = colors || colorsDefault\r\n    return (\r\n        <svg\r\n            xmlns='http://www.w3.org/2000/svg'\r\n            xmlnsXlink='http://www.w3.org/1999/xlink'\r\n            style={{ margin: 'auto', display: 'block', shapeRendering: 'auto', width: '72px', height: '72px' }}\r\n            viewBox='0 0 100 100'\r\n            preserveAspectRatio='xMidYMid'\r\n        >\r\n            <g transform='translate(20 20)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[0]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.4s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(50 20)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[1]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.3s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(80 20)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[2]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.2s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(20 50)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[1]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.3s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(50 50)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[2]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.2s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(80 50)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[0]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.1s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(20 80)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[2]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.2s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(50 80)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[0]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='-0.1s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n            <g transform='translate(80 80)'>\r\n                <rect x='-15' y='-15' width='30' height='30' fill={colors[1]}>\r\n                    <animateTransform\r\n                        attributeName='transform'\r\n                        type='scale'\r\n                        repeatCount='indefinite'\r\n                        calcMode='spline'\r\n                        dur='1s'\r\n                        values='1;1;0.2;1;1'\r\n                        keyTimes='0;0.2;0.5;0.8;1'\r\n                        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'\r\n                        begin='0s'\r\n                    ></animateTransform>\r\n                </rect>\r\n            </g>\r\n        </svg>\r\n    )\r\n}\r\n\r\nexport default LoadingSquare"],"mappings":"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","names":["React","React"]}