feat(blockTools): move module fed functions to blockTools

closes #219

packages/blockTools/src/index.js

@@ -19,6 +19,7 @@ import BlockSchemaErrors from './BlockSchemaErrors';
 import ErrorBoundary from './ErrorBoundary';
 import IconSpinner from './Spinner/IconSpinner';
 import Loading from './Loading';
+import loadWebpackFederatedModule from './loadWebpackFederatedModule';
 import makeCssClass from './makeCssClass.js';
 import mediaToCssObject from './mediaToCssObject.js';
 import mockBlock from './mockBlock';
@@ -33,6 +34,7 @@ import SkeletonInput from './Skeleton/SkeletonInput';
 import SkeletonParagraph from './Skeleton/SkeletonParagraph';
 import Spinner from './Spinner/Spinner';
 import stubBlockProps from './stubBlockProps';
+import useDynamicScript from './useDynamicScript';
 import useRunAfterUpdate from './useRunAfterUpdate';
 
 export {
@@ -41,6 +43,7 @@ export {
   ErrorBoundary,
   IconSpinner,
   Loading,
+  loadWebpackFederatedModule,
   makeCssClass,
   mediaToCssObject,
   mockBlock,
@@ -55,5 +58,6 @@ export {
   SkeletonParagraph,
   Spinner,
   stubBlockProps,
+  useDynamicScript,
   useRunAfterUpdate,
 };

packages/blockTools/src/loadWebpackFederatedModule.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 /*
   Copyright 2020 Lowdefy, Inc
 
@@ -16,11 +14,13 @@
   limitations under the License.
 */
 
-function loadComponent(scope, module) {
+/*global __webpack_share_scopes__, __webpack_init_sharing__*/
+
+function loadWebpackFederatedModule(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
+    const container = window[scope];
     // Initialize the container, it may provide shared modules
     await container.init(__webpack_share_scopes__.default);
     const factory = await window[scope].get(`./${module}`);
@@ -29,4 +29,4 @@ function loadComponent(scope, module) {
   };
 }
 
-export default loadComponent;
+export default loadWebpackFederatedModule;

packages/blockTools/src/useDynamicScript.js

@@ -16,42 +16,44 @@
 
 import React from 'react';
 
-const useDynamicScript = (args) => {
+const scripts = new Set();
+
+const useDynamicScript = ({ src }) => {
   const [ready, setReady] = React.useState(false);
   const [failed, setFailed] = React.useState(false);
 
   React.useEffect(() => {
-    if (!args.url) {
+    console.log(scripts);
+
+    if (!src) return;
+
+    // Check if script is already added to DOM
+    if (scripts.has(src)) {
+      setReady(true);
       return;
     }
 
     const element = document.createElement('script');
 
-    element.src = args.url;
+    element.src = src;
     element.type = 'text/javascript';
     element.async = true;
 
-    setReady(false);
-    setFailed(false);
-
     element.onload = () => {
-      console.log(`Dynamic Script Loaded: ${args.url}`);
+      scripts.add(src);
       setReady(true);
     };
 
-    element.onerror = () => {
-      console.error(`Dynamic Script Error: ${args.url}`);
+    element.onerror = (error) => {
+      console.error(`Dynamic Script Error: ${src}`, error);
       setReady(false);
       setFailed(true);
     };
 
     document.head.appendChild(element);
 
-    return () => {
-      console.log(`Dynamic Script Removed: ${args.url}`);
-      document.head.removeChild(element);
-    };
-  }, [args.url]);
+    return () => {};
+  }, [src]);
 
   return {
     ready,

packages/cli/src/commands/dev/shell/bootstrap.js

@@ -14,71 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/*global __webpack_share_scopes__, __webpack_init_sharing__*/
-
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Loading } from '@lowdefy/block-tools';
-
-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 element = document.createElement('script');
-
-    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);
-
-    return () => {
-      console.log(`Dynamic Script Removed: ${args.url}`);
-      document.head.removeChild(element);
-    };
-  }, [args.url]);
-
-  return {
-    ready,
-    failed,
-  };
-};
+import { Loading, loadWebpackFederatedModule, useDynamicScript } from '@lowdefy/block-tools';
 
 function Shell({ version }) {
   const { ready, failed } = useDynamicScript({
-    url: `http://unpkg.com/@lowdefy/renderer@${version}/dist/remoteEntry.js`,
+    src: `http://unpkg.com/@lowdefy/renderer@${version}/dist/remoteEntry.js`,
   });
 
   if (!ready) {
@@ -89,7 +31,7 @@ function Shell({ version }) {
     return <h2>Failed to load dynamic script</h2>;
   }
 
-  const Component = React.lazy(loadComponent('lowdefy_renderer', 'Renderer'));
+  const Component = React.lazy(loadWebpackFederatedModule('lowdefy_renderer', 'Renderer'));
 
   return (
     <React.Suspense fallback={<Loading type="Spinner" properties={{ height: '100vh' }} />}>

packages/renderer/src/page/block/LoadBlock.js

@@ -15,18 +15,15 @@
 */
 
 import React, { lazy } from 'react';
-import { Loading } from '@lowdefy/block-tools';
+import { Loading, loadWebpackFederatedModule, useDynamicScript } from '@lowdefy/block-tools';
 import { get } from '@lowdefy/helpers';
 
-import useDynamicScript from '../../utils/useDynamicScript';
-import loadComponent from '../../utils/loadComponent';
-
 const Components = {};
 
 const LoadBlock = ({ meta, render }) => {
   const typeId = `${meta.moduleFederation.scope}:${meta.moduleFederation.module}`;
   const { ready, failed } = useDynamicScript({
-    url: meta.moduleFederation.remoteEntryUrl,
+    src: meta.moduleFederation.remoteEntryUrl,
   });
   if (!Components[typeId]) {
     if (!ready) {
@@ -39,7 +36,7 @@ const LoadBlock = ({ meta, render }) => {
       return <h2>Failed to load dynamic script: {meta.moduleFederation.remoteEntryUrl}</h2>;
     }
     Components[typeId] = lazy(
-      loadComponent(meta.moduleFederation.scope, meta.moduleFederation.module)
+      loadWebpackFederatedModule(meta.moduleFederation.scope, meta.moduleFederation.module)
     );
   }
   return render(Components[typeId]);