Add hookableComponent to named export in Reactium core. Clean up state usage in Router. Add IDs to number of hooks.

Author: jdillick

.core/app/index.js

@@ -21,7 +21,7 @@ export const App = async () => {
     console.log('Loading Core SDK');
     const {
         default: Reactium,
-        useHookComponent,
+        hookableComponent,
         isBrowserWindow,
         Zone,
     } = await import('reactium-core/sdk');
@@ -33,11 +33,6 @@ export const App = async () => {
     Reactium.Hook.runSync('sdk-init', Reactium);
     await Reactium.Hook.run('sdk-init', Reactium);
 
-    const hookableComponent = name => props => {
-        const Component = useHookComponent(name);
-        return <Component {...props} />;
-    };
-
     const context = {};
 
     /**

.core/app/reactium-hooks.js

@@ -74,6 +74,7 @@ import('reactium-core/sdk').then(async ({ default: Reactium }) => {
             return Promise.resolve();
         },
         Reactium.Enums.priority.highest,
+        'REACTIUM_COMPONENT_BINDINGS',
     );
 
     Reactium.Hook.register(
@@ -86,6 +87,7 @@ import('reactium-core/sdk').then(async ({ default: Reactium }) => {
             return Promise.resolve();
         },
         Reactium.Enums.priority.highest,
+        'REACTIUM_PLUGIN_DEPENDENCIES',
     );
 
     Reactium.Hook.register(
@@ -95,6 +97,7 @@ import('reactium-core/sdk').then(async ({ default: Reactium }) => {
             return Promise.resolve();
         },
         Reactium.Enums.priority.highest,
+        'REACTIUM_APP_BINDPOINT',
     );
 
     const getSaneZoneComponents = () => {
@@ -121,11 +124,16 @@ import('reactium-core/sdk').then(async ({ default: Reactium }) => {
         );
     };
 
-    Reactium.Hook.register('zone-defaults', async context => {
-        op.set(context, 'controls', deps().plugableConfig);
-        op.set(context, 'components', getSaneZoneComponents());
-        console.log('Initializing Content Zones');
-    });
+    Reactium.Hook.register(
+        'zone-defaults',
+        async context => {
+            op.set(context, 'controls', deps().plugableConfig);
+            op.set(context, 'components', getSaneZoneComponents());
+            console.log('Initializing Content Zones');
+        },
+        Reactium.Enums.priority.highest,
+        'REACTIUM_ZONE_DEFAULTS',
+    );
 
     const NoopProvider = ({ children }) => children;
     Reactium.Hook.register(
@@ -147,6 +155,7 @@ import('reactium-core/sdk').then(async ({ default: Reactium }) => {
             console.log('Defining Router.');
         },
         Reactium.Enums.priority.highest,
+        'REACTIUM_APP_ROUTER',
     );
 
     Reactium.Hook.register(
@@ -156,6 +165,7 @@ import('reactium-core/sdk').then(async ({ default: Reactium }) => {
             return Promise.resolve();
         },
         Reactium.Enums.priority.highest,
+        'REACTIUM_APP_SSR_MODE',
     );
 
     Reactium.Hook.register(
@@ -174,6 +184,7 @@ import('reactium-core/sdk').then(async ({ default: Reactium }) => {
             return Promise.resolve();
         },
         Reactium.Enums.priority.highest,
+        'REACTIUM_APP_BOOT_MESSAGE',
     );
 });
 

.core/components/Router/RoutedContent.js

@@ -1,35 +1,30 @@
-import React, { useRef, useState, useEffect, Fragment } from 'react';
-import Reactium, { useRouting } from 'reactium-core/sdk';
-import op from 'object-path';
-import { Route, useRouteMatch } from 'react-router';
+import React, { useEffect } from 'react';
+import Reactium, { useRouting, useSyncState } from 'reactium-core/sdk';
+import { Route } from 'react-router';
 
 const useRoutes = () => {
-    const routesRef = useRef(Reactium.Routing.get());
-    const [value, setValue] = useState(routesRef.current);
-
+    const routeState = useSyncState(Reactium.Routing.get());
     const setState = () => {
-        routesRef.current = Reactium.Routing.get();
-        setValue(routesRef.current);
+        routeState.set(Reactium.Routing.get());
     };
 
     useEffect(() => {
         setState();
         return Reactium.Routing.subscribe(setState);
-    }, [Reactium.Routing.updated]);
+    }, []);
 
-    return routesRef.current;
+    return routeState;
 };
 
 const RoutedContent = () => {
     // cause rerender if routes are added/removed at runtime
     useRoutes();
     const routing = useRouting();
-    const { active } = routing;
-    const route = op.get(active, 'match.route');
-    const Component = op.get(route, 'component');
+    const route = routing.get('active.match.route');
+    const Component = routing.get('active.match.route.component');
 
     // if we have a route with no component, let react-router handle it however it will
-    return Component ? <Component {...routing} /> : <Route {...route} />;
+    return Component ? <Component {...routing.get()} /> : <Route {...route} />;
 };
 
 export default RoutedContent;

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

@@ -1,27 +1,11 @@
-import Reactium, { isBrowserWindow } from 'reactium-core/sdk';
-import React, { forwardRef } from 'react';
-import op from 'object-path';
+import Reactium, {
+    hookableComponent,
+    isBrowserWindow,
+} from 'reactium-core/sdk';
 import _ from 'underscore';
-import getComponents from 'dependencies/getComponents';
 import RoutedContent from './RoutedContent';
 import deps from 'dependencies';
 
-const lookupRouteComponent = async route => {
-    let Found;
-    if (typeof route.component === 'string') {
-        route.component = Reactium.Component.get(
-            route.component,
-            op.get(
-                getComponents([{ type: route.component }]),
-                route.component,
-                forwardRef(() => null),
-            ),
-        );
-    }
-
-    return route;
-};
-
 Reactium.Hook.register(
     'routes-init',
     async Routing => {
@@ -65,16 +49,20 @@ Reactium.Hook.register(
         }
     },
     Reactium.Enums.priority.highest,
+    'REACTIUM_ROUTES_INIT',
 );
 
-Reactium.Hook.register('register-route', lookupRouteComponent);
+Reactium.Hook.register(
+    'register-route',
+    async route => {
+        if (typeof route.component === 'string') {
+            route.component = hookableComponent(route.component);
+        }
 
-let { NotFound = null } = getComponents([{ type: 'NotFound' }]);
-if (NotFound !== null)
-    Reactium.Component.register(
-        'NotFound',
-        NotFound,
-        Reactium.Enums.priority.highest,
-    );
+        return route;
+    },
+    Reactium.Enums.priority.highest,
+    'REACTIUM_REGISTER_ROUTE',
+);
 
 Reactium.Component.register('RoutedContent', RoutedContent);

.core/dependencies/getComponents.js

@@ -1,14 +1,4 @@
-import {
-    isBrowserWindow,
-    useHookComponent,
-} from '@atomic-reactor/reactium-sdk-core';
-import React, { Suspense, lazy } from 'react';
-import manifestLoader from 'manifest';
-
-const hookableComponent = name => props => {
-    const Component = useHookComponent(name);
-    return <Component {...props} />;
-};
+import { hookableComponent } from '../sdk/named-exports';
 
 export default (elms = []) =>
     elms.reduce((cmps, { type, path }) => {

.core/sdk/named-exports/hookable-component.js

@@ -0,0 +1,6 @@
+import { useHookComponent } from '@atomic-reactor/reactium-sdk-core';
+
+export const hookableComponent = name => props => {
+    const Component = useHookComponent(name);
+    return <Component {...props} />;
+};

.core/sdk/named-exports/index.js

@@ -4,3 +4,4 @@ export * from './setting';
 export * from './window';
 export * from './i18n';
 export * from './routing';
+export * from './hookable-component';

.core/sdk/named-exports/routing.js

@@ -1,10 +1,10 @@
 import uuid from 'uuid/v4';
-import { useState, useRef, useEffect } from 'react';
+import { useEffect } from 'react';
 import Routing from '../routing';
+import { useSyncState } from '@atomic-reactor/reactium-sdk-core';
 
 export const useRouting = () => {
-    const [, update] = useState(new Date());
-    const routing = useRef({
+    const routing = useSyncState({
         current: Routing.currentRoute,
         previous: Routing.previousRoute,
         active: Routing.currentRoute,
@@ -14,12 +14,7 @@ export const useRouting = () => {
     });
 
     const handler = (updates, forceRefresh = true) => {
-        routing.current = {
-            ...routing.current,
-            ...updates,
-        };
-
-        if (forceRefresh === true) update(new Date());
+        routing.set(updates, undefined, forceRefresh);
     };
 
     const refreshFromRouting = () => {
@@ -58,5 +53,5 @@ export const useRouting = () => {
         };
     }, []);
 
-    return routing.current;
+    return routing;
 };