App shell for optimally small bundle size.

Author: jdillick

.core/app/index.js

@@ -8,8 +8,6 @@ import _ from 'underscore';
 import deps from 'dependencies';
 import 'externals';
 
-export const Loader = async () => {};
-
 const loadFramework = async () => {
     console.log('Loading Core SDK');
     const { default: Reactium } = await import('reactium-core/sdk');

.core/app/shell.js

@@ -0,0 +1,20 @@
+export const Shell = async () => {
+    const { default: React, useRef } = await import('react');
+    const { default: _ } = await import('underscore');
+    const { createRoot } = await import('react-dom/client');
+    const { Loading } = await import('../components/Loading');
+
+    const Shell = () => {
+        window.LoadingRef = useRef();
+        return <Loading ref={window.LoadingRef} />;
+    };
+
+    const something = createRoot(
+        document.body.appendChild(document.createElement('div')),
+    ).render(<Shell />);
+
+    const { App } = await import('./index');
+    await App();
+
+    _.defer(() => window.LoadingRef.current.setVisible(false));
+};

.core/components/Loading/domain.js

@@ -0,0 +1,9 @@
+/**
+ * -----------------------------------------------------------------------------
+ * DDD Domain Loading - Change name to place domain artifacts in this directory
+ * in a different domain.
+ * -----------------------------------------------------------------------------
+ */
+module.exports = {
+    name: 'LoadingSpinner',
+};

.core/components/Loading/index.js

@@ -0,0 +1,146 @@
+import op from 'object-path';
+import ReactDom from 'react-dom';
+import PropTypes from 'prop-types';
+
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+
+/**
+ * -----------------------------------------------------------------------------
+ * Functional Component: Loading
+ * -----------------------------------------------------------------------------
+ */
+let Loading = (
+    { controlled, visible: initVisible, style: initStyle, ...props },
+    ref,
+) => {
+    const containerRef = useRef();
+    const ival = useRef();
+    const opacity = useRef(initVisible === true ? 1 : 0);
+
+    const [visible, setVisible] = useState(initVisible);
+
+    const [init, setInit] = useState(false);
+
+    const [style, setStyle] = useState({
+        ...initStyle,
+        display: opacity.current === 1 ? null : 'none',
+        opacity: opacity.current,
+    });
+
+    const show = () => {
+        let i = ival.current;
+        if (i) clearInterval(i);
+
+        const cont = containerRef.current;
+        if (cont) {
+            cont.style.display = null;
+            if (init !== true) {
+                cont.style.opacity = 0;
+            }
+        }
+
+        i = setInterval(() => {
+            opacity.current = opacity.current + 0.0125;
+            opacity.current = Math.min(opacity.current, 1);
+
+            if (cont) cont.style.opacity = opacity.current;
+
+            if (opacity.current === 1) {
+                clearInterval(i);
+                setStyle({ ...style, display: null });
+            }
+        }, 1);
+
+        ival.current = i;
+    };
+
+    const hide = () => {
+        let i = ival.current;
+        if (i) clearInterval(i);
+        const cont = containerRef.current;
+
+        i = setInterval(() => {
+            opacity.current = opacity.current - 0.0125;
+            opacity.current = Math.max(opacity.current, 0);
+
+            if (cont) cont.style.opacity = opacity.current;
+
+            if (opacity.current === 0) {
+                cont.style.display = 'none';
+                clearInterval(i);
+                setStyle({ ...style, opacity: null });
+            }
+        }, 1);
+
+        ival.current = i;
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            ...props,
+            hide,
+            show,
+            containerRef,
+            visible,
+            setStyle,
+            setVisible,
+        }),
+        [visible],
+    );
+
+    useEffect(() => {
+        if (controlled === true) {
+            const val = op.get(props, 'visible');
+            if (val !== visible) setVisible(val);
+        }
+    }, [controlled, initVisible]);
+
+    useEffect(() => {
+        if (controlled === true) {
+            const val = op.get(props, 'style');
+            if (val !== style) setStyle(val);
+        }
+    }, [controlled, initStyle]);
+
+    useEffect(() => {
+        if (visible === true) {
+            show();
+        } else {
+            hide();
+        }
+    }, [visible]);
+
+    useEffect(() => {
+        setInit(true);
+    }, []);
+
+    return ReactDom.createPortal(
+        <div ref={containerRef} style={style} {...props} />,
+        document.body,
+    );
+};
+
+Loading = forwardRef(Loading);
+
+Loading.propTypes = {
+    className: PropTypes.string,
+    controlled: PropTypes.bool,
+    style: PropTypes.object,
+    visible: PropTypes.bool,
+};
+
+Loading.defaultProps = {
+    className: 'reactium-loading',
+    controlled: false,
+    style: {},
+    visible: true,
+};
+
+export { Loading };

.core/components/Loading/reactium-hooks.js

@@ -0,0 +1,12 @@
+/**
+ * -----------------------------------------------------------------------------
+ * Reactium Plugin Loading
+ * -----------------------------------------------------------------------------
+ */
+
+import { Loading } from './index';
+import Reactium from 'reactium-core/sdk';
+
+(async () => {
+    Reactium.Component.register('Loading', Loading);
+})();

.core/server/renderer/index.js

@@ -151,7 +151,7 @@ ReactiumBoot.Hook.registerSync(
     (req, AppBindings) => {
         AppBindings.register('router', {
             template: () => {
-                const binding = `<div id="router">${req.content || ''}</div>`;
+                const binding = ` <div data-reactium-bind="App"></div>`;
                 return binding;
             },
             requestParams: ['content'],
@@ -585,7 +585,7 @@ export default async (req, res, context) => {
 
              // Add ordinary markup for React to bind to
              AppBindings.register('router', {
-                 markup: '<div id="router"></div>',
+                 markup: ' <div data-reactium-bind="App"></div>',
              });
          },
          ReactiumBoot.Enums.priority.highest,

.core/server/template/feo.js

@@ -13,11 +13,6 @@ module.exports = {
                 ${req.headerScripts}
                 ${req.appBindings}
 
-                <div data-reactium-bind="Loader"></div>
-                <div data-reactium-bind="App"></div>
-                <div data-reactium-bind="Foo"></div>
-                <div data-reactium-bind="Bar"></div>
-
                 <script>
                     window.defines = ${serialize(defines)};
                     ${req.appGlobals}

src/app/components/Welcome/_reactium-style-organisms.scss

@@ -0,0 +1,10 @@
+body {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+
+    iframe {
+        outline: none;
+        border: none;
+    }
+}

src/app/components/Welcome/domain.js

@@ -0,0 +1,9 @@
+/**
+ * -----------------------------------------------------------------------------
+ * DDD Domain Welcome - Change name to place domain artifacts in this directory
+ * in a different domain.
+ * -----------------------------------------------------------------------------
+ */
+module.exports = {
+    name: 'Welcome',
+};

src/app/components/Welcome/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+/**
+ * -----------------------------------------------------------------------------
+ * Functional Component: Welcome
+ * -----------------------------------------------------------------------------
+ */
+const Welcome = () => {
+    return (
+        <div style={{ width: '100vw', height: '100vh' }}>
+            <iframe width='100%' height='100%' src='https://reactium.io/' />
+        </div>
+    );
+};
+
+export { Welcome };

src/app/components/Welcome/reactium-hooks.js

@@ -0,0 +1,12 @@
+/**
+ * -----------------------------------------------------------------------------
+ * Reactium Plugin Welcome
+ * -----------------------------------------------------------------------------
+ */
+
+import { Welcome } from './index';
+import Reactium from 'reactium-core/sdk';
+
+(async () => {
+    Reactium.Component.register('Welcome', Welcome);
+})();

src/app/components/Welcome/route.js

@@ -0,0 +1,7 @@
+import { Welcome } from './index';
+
+export default {
+    exact: true,
+    component: Welcome,
+    path: ['/'],
+};

src/app/main.js

@@ -2,18 +2,14 @@
 // import 'core-js/stable';
 // import 'regenerator-runtime/runtime';
 
-let App, AppError;
+import { Shell } from 'reactium-core/app/shell';
 
 (async () => {
-    const mod = await import('reactium-core/app');
-
-    App = mod.App;
-    AppError = mod.AppError;
-
     try {
-        App();
+        await Shell();
     } catch (error) {
-        AppError(error);
+        const { AppError } = await import('reactium-core/app');
+        await AppError(error);
     }
 
     /**

src/assets/style/_scss/_reactium-modules.scss

@@ -2,3 +2,5 @@
 // WARNING: Do not directly edit this file !!!!
 // File generated by gulp styles:partials task
 
+@import '_reactium-style-molecules';
+@import '../../../app/components/Welcome/_reactium-style-organisms';

src/assets/style/_scss/_reactium-style-molecules.scss

@@ -0,0 +1,59 @@
+$reactium-blue: #4f82ba !default;
+$reactium-white: #ffffff !default;
+
+.reactium-loading {
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    background-color: $reactium-white;
+
+    &,
+    * {
+        box-sizing: border-box;
+    }
+
+    &:before {
+        content: '';
+        width: 64px;
+        height: 64px;
+        border-radius: 100%;
+        z-index: 1;
+        left: 50%;
+        top: 50%;
+        position: absolute;
+        transform: translate(-50%, -50%);
+        box-shadow: 0 0 0 0 rgba($reactium-blue, 1);
+        animation: reactium-pulse 1.2s infinite;
+    }
+
+    &:after {
+        content: '';
+        width: 64px;
+        height: 64px;
+        z-index: 2;
+        left: 50%;
+        top: 50%;
+        position: absolute;
+        transform: translate(-50%, -50%);
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-image: url('/assets/images/logo.png');
+    }
+}
+
+@keyframes reactium-pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba($reactium-blue, 0.7);
+    }
+
+    70% {
+        box-shadow: 0 0 0 12px rgba($reactium-blue, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba($reactium-white, 0);
+    }
+}