feat: add useScript, react cdn's

.babelrc

@@ -1,16 +1,4 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-typescript",
-        "@babel/react"
-    ],
-    "plugins": [
-        "@babel/plugin-proposal-class-properties",
-        [
-            "@babel/plugin-transform-typescript",
-            {
-                "allowNamespaces": true
-            }
-        ]
-    ]
-}
+  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/react"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

src/App.tsx

@@ -13,6 +13,7 @@ import { openApp, closeApp, bringToTop } from "base/store";
 
 const App = () => {
   // move to more apporpiate place
+
   React.useEffect(() => {
     // init global object
     window.os = {

src/index.html

@@ -7,12 +7,21 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+    ></script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
+
     <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/index.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { render } from "react-dom";
+import * as ReactDOM from "react-dom";
 import App from "./App";
 //@ts-ignore
 import { initializeIcons } from "@fluentui/react";
 
 initializeIcons();
 
-render(<App />, document.getElementById("web-os-root"));
+ReactDOM.render(<App />, document.getElementById("web-os-root"));

src/utils/hooks/useScript/index.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+function useScript(src: string) {
+  // Keep track of script status ("idle", "loading", "ready", "error")
+  const [status, setStatus] = React.useState(src ? "loading" : "idle");
+  React.useEffect(
+    () => {
+      // Allow falsy src value if waiting on other data needed for
+      // constructing the script URL passed to this hook.
+      if (!src) {
+        setStatus("idle");
+        return;
+      }
+      // Fetch existing script element by src
+      // It may have been added by another intance of this hook
+      let script = document.querySelector(
+        `script[src="${src}"]`
+      ) as HTMLScriptElement;
+      if (!script) {
+        // Create script
+        script = document.createElement("script") as HTMLScriptElement;
+        script.src = src;
+        script.async = true;
+        script.setAttribute("data-status", "loading");
+        // Add script to document body
+        document.body.appendChild(script);
+        // Store status in attribute on script
+        // This can be read by other instances of this hook
+        const setAttributeFromEvent = (event: any) => {
+          script!.setAttribute(
+            "data-status",
+            event.type === "load" ? "ready" : "error"
+          );
+        };
+        script.addEventListener("load", setAttributeFromEvent);
+        script.addEventListener("error", setAttributeFromEvent);
+      } else {
+        // Grab existing script status from attribute and set to state.
+        setStatus(script!.getAttribute("data-status")!);
+      }
+      // Script event handler to update status in state
+      // Note: Even if the script already exists we still need to add
+      // event handlers to update the state for *this* hook instance.
+      const setStateFromEvent = (event: any) => {
+        setStatus(event.type === "load" ? "ready" : "error");
+      };
+      // Add event listeners
+      script.addEventListener("load", setStateFromEvent);
+      script.addEventListener("error", setStateFromEvent);
+      // Remove event listeners on cleanup
+      return () => {
+        if (script) {
+          script.removeEventListener("load", setStateFromEvent);
+          script.removeEventListener("error", setStateFromEvent);
+        }
+      };
+    },
+    [src] // Only re-run effect if script src changes
+  );
+  return status;
+}
+
+export default useScript;

tsconfig.json

@@ -5,6 +5,7 @@
     "target": "es5",
     "jsx": "react",
     "module": "commonjs",
+    "allowJs": true,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
@@ -22,7 +23,5 @@
     "esModuleInterop": true
   },
   "include": ["src"],
-  "exclude": [
-    "src/**/*.test.ts"
-  ],
+  "exclude": ["src/**/*.test.ts"]
 }

webpack.common.ts

@@ -74,6 +74,22 @@ const config = {
       },
     ],
   },
+  externals: {
+    // react: {
+    //   root: "React",
+    //   commonjs2: "react",
+    //   commonjs: "react",
+    //   amd: "react",
+    //   umd: "react",
+    // },
+    // "react-dom": {
+    //   root: "ReactDOM",
+    //   commonjs2: "react-dom",
+    //   commonjs: "react-dom",
+    //   amd: "react-dom",
+    //   umd: "react-dom",
+    // },
+  },
 };
 
 module.exports = config;