Widgets variant working

Author: Mads Thines

.eslintrc

@@ -22,6 +22,7 @@
       }
     ],
     "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/interface-name-prefix": 0,
     "arrow-body-style": 0,
     "arrow-parens": 0,
     "autoFix": true,

config/tsconfig.paths.json

@@ -3,9 +3,13 @@
     "baseUrl": "../.",
     "paths": {
       "*": ["*", "generated/*"],
+      "assets": ["src/assets"],
       "assets/*": ["src/assets/*"],
-      "state/*": ["src/state/*"],
+      "typings": ["src/typings"],
+      "typings/*": ["src/typings/*"],
+      "utilities": ["src/utilities"],
       "utilities/*": ["src/utilities/*"],
+      "views": ["src/views"],
       "views/*": ["src/views/*"]
     }
   }

config/webpack.config.common.js

@@ -38,6 +38,7 @@ module.exports = function(config, isProd) {
       assets: `${paths.appSrc}/assets`,
       state: `${paths.appSrc}/state`,
       utilities: `${paths.appSrc}/utilities`,
+      typings: `${paths.appSrc}/typings`,
       views: `${paths.appSrc}/views`,
     },
   };

src/index.tsx

@@ -1,18 +1,48 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import Loadable from "react-loadable";
+import { hot } from "react-hot-loader";
 
-// Utils
-import * as serviceWorker from "utilities/serviceWorker";
+// Types
+import { IWidget } from "typings/widgets";
 
-// Container
-import App from "views/containers/App/App";
+// Utilities
+import { isDev } from "utilities/development";
 
-// Styles
-import "assets/styles/main.scss";
+const widgets: IWidget[] = [
+  {
+    query: "#block-adaptoffices",
+    widget: Loadable({
+      loader: (): Promise<any> => import("views/widgets/Widget1/Widget1" /* webpackChunkName: "Widget1" */),
+      loading: (): null => null,
+    }),
+  },
+  {
+    query: "#block-contactinformation",
+    widget: Loadable({
+      loader: (): Promise<any> => import("views/widgets/Widget2/Widget2" /* webpackChunkName: "Widget2" */),
+      loading: (): null => null,
+    }),
+  },
+];
 
-ReactDOM.render(<App />, document.querySelector("#root"));
+// Initialize the Widgets
+widgets.forEach(
+  (widget): void => {
+    const { query, widget: component } = widget;
+    // let {  } = widget;
+    const querySelector = document.querySelector(query);
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.register();
+    if (!querySelector) {
+      // eslint-disable-next-line
+      console.warn(`The query selector doesn't exist: ${query}`);
+      return;
+    }
+
+    // Setting up React Hot Loader
+    const Component = isDev ? hot(module)(component) : component;
+
+    // Setting ReactDOM.render for each widget.
+    ReactDOM.render(<Component />, document.querySelector(query));
+  }
+);

src/typings/widgets.d.ts

@@ -0,0 +1,8 @@
+import Loadable from "react-loadable";
+
+export interface IWidget {
+  query: string;
+  widget:
+  | (React.ComponentClass<unknown, any> & Loadable.LoadableComponent)
+  | (React.FunctionComponent<unknown> & Loadable.LoadableComponent);
+}

src/utilities/development.ts

@@ -1 +1 @@
-export const isDev = (): boolean => process.env.NODE_ENV === "development";
+export const isDev: boolean = process.env.NODE_ENV === "development";

src/views/containers/App/App.test.js renamed to src/views/widgets/Widget1/Widget1.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App from "./Widget1";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");

src/views/containers/App/App.tsx renamed to src/views/widgets/Widget1/Widget1.tsx

@@ -1,9 +1,5 @@
 import React, { useState } from "react";
 import Loadable from "react-loadable";
-import { hot } from "react-hot-loader";
-
-// Utilities
-import { isDev } from "utilities/development";
 
 // Components
 import Header from "views/components/Header";
@@ -15,11 +11,11 @@ const Footer = Loadable({
   loading: Loading,
 });
 
-const App = (): JSX.Element => {
+const Widget1 = (): JSX.Element => {
   const [value, setValue] = useState("1");
 
   return (
-    <div className="app">
+    <div className="widget1">
       <Header />
 
       <main>
@@ -40,4 +36,4 @@ const App = (): JSX.Element => {
   );
 };
 
-export default (isDev() ? hot(module)(App) : App);
+export default Widget1;

src/views/widgets/Widget2/Widget2.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+// Styles
+import "./widget2.scss";
+
+const Widget2 = (): JSX.Element => {
+  return (
+    <div className="widget2">
+      <h1>Widget 2</h1>
+      <h3>Loaded</h3>
+    </div>
+  );
+};
+
+export default Widget2;

src/views/widgets/Widget2/widget2.scss

@@ -0,0 +1,3 @@
+.widget1 {
+  background-color: #fff;
+}