refactor dynamic remote example (#3849)

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

advanced-api/dynamic-remotes/app1/src/App.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect, Suspense } from 'react';
+
 import { init,loadRemote } from '@module-federation/runtime'
 
 init({
@@ -16,104 +17,40 @@ init({
 })
 
 
-function loadComponent(scope, module) {
-  return async () => {
-    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
-    const Module = await loadRemote(`${scope}/${module.slice(2)}`);
-    return Module;
-  };
-}
-
-const urlCache = new Set();
-const useDynamicScript = url => {
-  const [ready, setReady] = React.useState(false);
-  const [errorLoading, setErrorLoading] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!url) return;
-
-    if (urlCache.has(url)) {
-      setReady(true);
-      setErrorLoading(false);
-      return;
-    }
-
-    setReady(false);
-    setErrorLoading(false);
-
-    const element = document.createElement('script');
-
-    element.src = url;
-    element.type = 'text/javascript';
-    element.async = true;
-
-    element.onload = () => {
-      urlCache.add(url);
-      setReady(true);
-    };
+function useDynamicImport({module,scope}) {
+  console.log(module,scope)
+  const [component, setComponent] = useState(null);
 
-    element.onerror = () => {
-      setReady(false);
-      setErrorLoading(true);
+  useEffect(() => {
+    if(!module && !scope) return
+    const loadComponent = async () => {
+      const { default: component } = await loadRemote(`${scope}/${module}`);
+      setComponent(() => component);
     };
-
-    document.head.appendChild(element);
-
-    return () => {
-      urlCache.delete(url);
-      document.head.removeChild(element);
-    };
-  }, [url]);
-
-  return {
-    errorLoading,
-    ready,
-  };
-};
-
-const componentCache = new Map();
-export const useFederatedComponent = (remoteUrl, scope, module) => {
-  const key = `${remoteUrl}-${scope}-${module}`;
-  const [Component, setComponent] = React.useState(null);
-
-  const { ready, errorLoading } = useDynamicScript(remoteUrl);
-  React.useEffect(() => {
-    if (Component) setComponent(null);
-    // Only recalculate when key changes
-  }, [key]);
-
-  React.useEffect(() => {
-    if (ready && !Component) {
-      const Comp = React.lazy(loadComponent(scope, module));
-      componentCache.set(key, Comp);
-      setComponent(Comp);
-    }
-    // key includes all dependencies (scope/module)
-  }, [Component, ready, key]);
-
-  return { errorLoading, Component };
-};
+    loadComponent();
+  }, [module,scope]);
+  const fallback = ()=> null
+  return component || fallback
+}
 
 function App() {
-  const [{ module, scope, url }, setSystem] = React.useState({});
+  const [{ module, scope }, setSystem] = React.useState({});
 
   function setApp2() {
     setSystem({
-      url: 'http://localhost:3002/remoteEntry.js',
       scope: 'app2',
-      module: './Widget',
+      module: 'Widget',
     });
   }
 
   function setApp3() {
     setSystem({
-      url: 'http://localhost:3003/remoteEntry.js',
       scope: 'app3',
-      module: './Widget',
+      module: 'Widget',
     });
   }
 
-  const { Component: FederatedComponent, errorLoading } = useFederatedComponent(url, scope, module);
+  const Component = useDynamicImport({module,scope});
 
   return (
     <div
@@ -132,9 +69,7 @@ function App() {
       <button onClick={setApp3}>Load App 3 Widget</button>
       <div style={{ marginTop: '2em' }}>
         <React.Suspense fallback="Loading System">
-          {errorLoading
-            ? `Error loading module "${module}"`
-            : FederatedComponent && <FederatedComponent />}
+         <Component />
         </React.Suspense>
       </div>
     </div>