From 1edc0e1ccf15a0c8ff50df9b0daa3ead0ad1dcd4 Mon Sep 17 00:00:00 2001
From: Mukul Jain <jainmukul1996@gmail.com>
Date: Fri, 14 May 2021 00:45:08 +0530
Subject: [PATCH] feat: add useScript, react cdn's

---
 .babelrc                           | 18 ++-------
 src/App.tsx                        |  1 +
 src/index.html                     |  9 +++++
 src/index.tsx                      |  4 +-
 src/utils/hooks/useScript/index.ts | 63 ++++++++++++++++++++++++++++++
 tsconfig.json                      |  5 +--
 webpack.common.ts                  | 16 ++++++++
 7 files changed, 96 insertions(+), 20 deletions(-)
 create mode 100644 src/utils/hooks/useScript/index.ts

diff --git a/.babelrc b/.babelrc
index 6ea5938..8e66666 100644
--- a/.babelrc
+++ b/.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
-            }
-        ]
-    ]
-}
\ No newline at end of file
+  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/react"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}
diff --git a/src/App.tsx b/src/App.tsx
index 70ffd67..e7bd5fb 100644
--- a/src/App.tsx
+++ b/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 = {
diff --git a/src/index.html b/src/index.html
index 0e583d1..3b18d02 100644
--- a/src/index.html
+++ b/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
diff --git a/src/index.tsx b/src/index.tsx
index 709d36b..a5518df 100644
--- a/src/index.tsx
+++ b/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"));
diff --git a/src/utils/hooks/useScript/index.ts b/src/utils/hooks/useScript/index.ts
new file mode 100644
index 0000000..cea6571
--- /dev/null
+++ b/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;
diff --git a/tsconfig.json b/tsconfig.json
index d7d645f..db51d6d 100644
--- a/tsconfig.json
+++ b/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"]
 }
diff --git a/webpack.common.ts b/webpack.common.ts
index 7e654c0..933ec97 100644
--- a/webpack.common.ts
+++ b/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;