diff --git a/web/ASC.Web.Editor/src/components/dynamic.js b/web/ASC.Web.Editor/src/components/dynamic.js new file mode 100644 index 0000000000..3dd024dc7b --- /dev/null +++ b/web/ASC.Web.Editor/src/components/dynamic.js @@ -0,0 +1,108 @@ +import React from "react"; +// import AppLoader from "@appserver/common/components/AppLoader"; +// import ErrorBoundary from "@appserver/common/components/ErrorBoundary"; +// import Error520 from "studio/Error520"; +// import Error404 from "studio/Error404"; + +function loadComponent(scope, module) { + return async () => { + // Initializes the share scope. This fills it with known provided modules from this build and all remotes + await __webpack_init_sharing__("default"); + const container = window[scope]; // or get the container somewhere else + // Initialize the container, it may provide shared modules + await container.init(__webpack_share_scopes__.default); + const factory = await window[scope].get(module); + const Module = factory(); + return Module; + }; +} + +const useDynamicScript = (args) => { + const [ready, setReady] = React.useState(false); + const [failed, setFailed] = React.useState(false); + + React.useEffect(() => { + if (!args.url) { + return; + } + + const exists = document.getElementById(args.id); + console.log(exists); + if (exists) { + setReady(true); + setFailed(false); + return; + } + + const element = document.createElement("script"); + + element.id = args.id; + element.src = args.url; + element.type = "text/javascript"; + element.async = true; + + setReady(false); + setFailed(false); + + element.onload = () => { + console.log(`Dynamic Script Loaded: ${args.url}`); + setReady(true); + }; + + element.onerror = () => { + console.error(`Dynamic Script Error: ${args.url}`); + setReady(false); + setFailed(true); + }; + + document.head.appendChild(element); + + //TODO: Comment if you don't want to remove loaded remoteEntry + return () => { + console.log(`Dynamic Script Removed: ${args.url}`); + document.head.removeChild(element); + }; + }, [args.url]); + + return { + ready, + failed, + }; +}; + +const DynamicComponent = ({ system, ...rest }) => { + const { ready, failed } = useDynamicScript({ + url: system && system.url, + id: system && system.scope, + }); + + React.useEffect(() => { + require("react-dom"); + window.React2 = require("react"); + console.log(window.React1 === window.React2); + }); + if (!system) { + console.log(`Not system specified`); + throw Error("Not system specified"); + } + + if (!ready) { + console.log(`Loading dynamic script: ${system.url}`); + return
Loading
; + } + + if (failed) { + console.log(`Failed to load dynamic script: ${system.url}`); + throw Error("failed"); + } + + const Component = React.lazy(loadComponent(system.scope, system.module)); + + return ( + Loading}> + + + ); +}; + +export default DynamicComponent;