Refactor getComponents() to use useHookComponent. Remove all webpack contexts from default code manifest, and all except reactium-translation from the webpack configuration.

Author: jdillick

.core/dependencies/getComponents.js

@@ -1,76 +1,18 @@
-import { isBrowserWindow } from '@atomic-reactor/reactium-sdk-core';
+import {
+    isBrowserWindow,
+    useHookComponent,
+} from '@atomic-reactor/reactium-sdk-core';
 import React, { Suspense, lazy } from 'react';
 import manifestLoader from 'manifest';
 
-export default (elms = []) => {
-    let cmps = {};
-    if (isBrowserWindow()) {
-        const contexts = manifestLoader.contexts;
-
-        // Traverse the Array of bindable elements and require the components for them
-        elms.forEach(({ type, path }) => {
-            let req;
-
-            // The path to the component
-            path = !path ? type : path;
-            Object.entries(contexts).forEach(([name, context]) => {
-                [
-                    `./${path}/index.js`,
-                    `./${path}/index.jsx`,
-                    `./${path}.js`,
-                    `./${path}.jsx`,
-                ].forEach(attempt => {
-                    // Exit if the component has already been defined
-                    if (cmps[type]) {
-                        return;
-                    }
-
-                    const found = context.keys().find(key => key === attempt);
-                    if (found) {
-                        req = context(attempt);
-                    }
-
-                    if (req) {
-                        let Component;
-                        if ('default' in req) {
-                            // sync context
-                            Component = req.default;
-                        } else {
-                            let Fallback = () => (
-                                <div className='get-components-loading' />
-                            );
-
-                            try {
-                                Fallback = require('components/Fallback')
-                                    .default;
-                            } catch (err) {
-                                console.log(err);
-                                // left intentionally blank
-                            }
-
-                            // async context
-                            const Found = lazy(() => req);
-                            Component = () => (
-                                <Suspense fallback={<Fallback />}>
-                                    <Found />
-                                </Suspense>
-                            );
-                        }
-
-                        cmps[type] = Component;
-                    }
-                });
-            });
-        });
-    }
-
-    // SSR and not found component cases
-    elms.forEach(({ type, path }) => {
-        if (!cmps[type]) {
-            cmps[type] = () => null;
-        }
-    });
-
-    // Output the Components Object
-    return cmps;
+const hookableComponent = name => props => {
+    const Component = useHookComponent(name);
+    return <Component {...props} />;
 };
+
+export default (elms = []) =>
+    elms.reduce((cmps, { type, path }) => {
+        if (path) console.warn('path no longer supported in getComponents');
+        cmps[type] = hookableComponent(type);
+        return cmps;
+    }, {});

.core/manifest/manifest-tools.js

@@ -190,7 +190,6 @@ module.exports = function({
     let fileContents = template(
         manifestProcessor({
             manifest,
-            contexts: manifestConfig.contexts,
             manifestConfig,
         }),
     );

.core/manifest/processors/manifest.js

@@ -63,20 +63,8 @@ module.exports = data => {
         };
     });
 
-    const contexts = Object.entries(data.contexts).map(([context, pattern]) => {
-        const { modulePath, filePattern, mode } = pattern;
-        return {
-            context,
-            modulePath,
-            filePattern,
-            mode,
-        };
-    });
-
     return {
         types,
-        contexts,
-        contextObj: JSON.stringify(data.contexts, null, 2),
         manifest: JSON.stringify(data.manifest, null, 2),
     };
 };

.core/manifest/templates/manifest.hbs

@@ -54,14 +54,6 @@ const manifest = {
 
         return domainLoaders;
     },
-    contexts: {
-        {{#each contexts}}
-        '{{context}}': isBrowserWindow() && require.context('{{modulePath}}', true, /{{filePattern}}/, '{{mode}}'),
-        {{/each}}
-    },
-    listContexts: () => {
-        return {{{contextObj}}}
-    },
     list: () => {
         return {{{manifest}}};
     },

.core/reactium-config.js

@@ -6,17 +6,6 @@ const gulpConfig = require('./gulp.config');
 
 const version = '4.0.1';
 
-const contextMode = () => {
-    if (
-        process.env.NODE_ENV !== 'development' &&
-        process.env.LAZY_GET_COMPONENTS !== 'off'
-    ) {
-        return 'lazy-once';
-    }
-
-    return 'sync';
-};
-
 const defaultLibraryExternals = {
     axios: {
         externalName: 'axios',
@@ -136,23 +125,6 @@ const defaultManifestConfig = {
         },
     ],
     pluginExternals: defaultLibraryExternals,
-    contexts: {
-        components: {
-            modulePath: 'components',
-            filePattern: '.js?$',
-            mode: contextMode(),
-        },
-        common: {
-            modulePath: 'components/common-ui/',
-            filePattern: '.js?$',
-            mode: contextMode(),
-        },
-        core: {
-            modulePath: 'reactium-core/components',
-            filePattern: '.js?$',
-            mode: contextMode(),
-        },
-    },
     umd: {
         defaultLibraryExternals,
         patterns: [

.core/webpack.config.js

@@ -77,22 +77,6 @@ module.exports = config => {
 
     sdk.addPlugin('defines', new webpack.DefinePlugin(config.defines));
 
-    sdk.addContext('common-ui-context', {
-        from: /^components\/common-ui/,
-        to: path.resolve('./src/app/components/common-ui'),
-    });
-    sdk.addContext('components-context', {
-        from: /^components/,
-        to: path.resolve('./src/app/components'),
-    });
-    sdk.addContext('core-context', {
-        from: /^reactium-core\/components/,
-        to: path.resolve('./.core/components'),
-    });
-    sdk.addContext('reactium-modules-context', {
-        from: /^reactium_modules/,
-        to: path.resolve('./reactium_modules'),
-    });
     sdk.addContext('reactium-modules-context', {
         from: /reactium-translations$/,
         to: path.resolve('./src/reactium-translations'),