Web: Editor: Components: added dynamic component
This commit is contained in:
parent
b0e5f7e335
commit
260d00202c
108
web/ASC.Web.Editor/src/components/dynamic.js
Normal file
108
web/ASC.Web.Editor/src/components/dynamic.js
Normal file
@ -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 <div>Loading</div>;
|
||||
}
|
||||
|
||||
if (failed) {
|
||||
console.log(`Failed to load dynamic script: ${system.url}`);
|
||||
throw Error("failed");
|
||||
}
|
||||
|
||||
const Component = React.lazy(loadComponent(system.scope, system.module));
|
||||
|
||||
return (
|
||||
<React.Suspense fallback={<div>Loading</div>}>
|
||||
<Component {...rest} />
|
||||
</React.Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export default DynamicComponent;
|
Loading…
Reference in New Issue
Block a user