Skip to content

Feature/bundle loading refactor #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 10, 2023
Merged

Feature/bundle loading refactor #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8ee84f0
Initial superficial SSR teardown. FEO still works.
jdillick Feb 10, 2023
25c19e0
Remove SSG tasks
jdillick Feb 10, 2023
d1d7c86
Run apidocs after all the comment changes.
jdillick Feb 10, 2023
fc25078
New bindpoint loading and much smaller default bundle size.
jdillick Feb 10, 2023
2ab8c24
App shell for optimally small bundle size.
jdillick Feb 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 1 addition & 11 deletions .core/.cli/commands/reactium/server/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ module.exports = spinner => {
message(`Creating ${chalk.cyan('templates')}...`);

const { cwd } = props;
const { feo, ssr } = params;
const { feo } = params;

const reactium = require(path.normalize(
`${cwd}/.core/reactium-config`,
Expand All @@ -35,16 +35,6 @@ module.exports = spinner => {
);
}

if (ssr) {
template['ssr'] = fs.readFileSync(
path.normalize(`${cwd}/.core/server/template/ssr.js`),
);
template['ssr'] = String(template.ssr).replace(
/\%TEMPLATE_VERSION\%/gi,
ver,
);
}

Object.entries(template).forEach(([type, content]) => {
const p = path.normalize(
`${cwd}/src/app/server/template/${type}.js`,
Expand Down
17 changes: 5 additions & 12 deletions .core/.cli/commands/reactium/server/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const CANCELED = 'Action canceled!';
* TYPES
* @description types of server templates that can be created
*/
const TYPES = ['feo', 'ssr'];
const TYPES = ['feo'];

/**
* confirm({ props:Object, params:Object }) Function
Expand Down Expand Up @@ -124,9 +124,6 @@ Example:
Exclude the front-end template:
$ arcli server template --no-feo

Exclude the server side render template:
$ arcli server template --no-ssr

Overwrite existing server templates
$ arcli server template --overwrite
`);
Expand All @@ -136,7 +133,7 @@ Overwrite existing server templates
* @description Array of flags passed from the commander options.
* @since 2.0.18
*/
const FLAGS = ['feo', 'ssr', 'overwrite'];
const FLAGS = ['feo', 'overwrite'];

/**
* FLAGS_TO_PARAMS Function
Expand All @@ -159,11 +156,8 @@ const isTemplate = cwd => {
const destFEO = fs.existsSync(
path.normalize(`${cwd}/src/app/server/template/feo.js`),
);
const destSSR = fs.existsSync(
path.normalize(`${cwd}/src/app/server/template/ssr.js`),
);

return destFEO || destSSR;
return destFEO;
};

/**
Expand Down Expand Up @@ -218,9 +212,9 @@ const ACTION = ({ action, opt, props }) => {
input = { ...ovr, ...input };
params = CONFORM({ input, props });

const { feo, ssr } = params;
const { feo } = params;

if (!op.has(params, 'overwrite') || (!feo && !ssr)) {
if (!op.has(params, 'overwrite') || !feo) {
reject(CANCELED);
return;
}
Expand Down Expand Up @@ -253,7 +247,6 @@ const COMMAND = ({ program, props }) =>
.description(DESC)
.action((action, opt) => ACTION({ action, opt, props }))
.option('-F, --no-feo [feo]', 'Front-end template.')
.option('-S, --no-ssr [ssr]', 'Server-side rendering template.')
.option(
'-o, --overwrite [overwrite]',
'Overwrite existing template files.',
Expand Down
195 changes: 83 additions & 112 deletions .core/app/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,10 @@ import React from 'react';
import _ from 'underscore';
import deps from 'dependencies';
import 'externals';
import { createRoot, hydrateRoot } from 'react-dom/client';

/**
* -----------------------------------------------------------------------------
* @function App()
* @description Scan DOM for <Component> elements and render React components
* inside of them.
* -----------------------------------------------------------------------------
*/
export const App = async () => {
const loadFramework = async () => {
console.log('Loading Core SDK');
const {
default: Reactium,
hookableComponent,
isBrowserWindow,
Zone,
AppContexts,
} = await import('reactium-core/sdk');
const { default: Reactium } = await import('reactium-core/sdk');

console.log('Initializing Application Hooks');

Expand All @@ -40,13 +26,11 @@ export const App = async () => {
await Reactium.Hook.run('sdk-init', Reactium);
Reactium.Hook.runSync('sdk-init', Reactium);

const context = {};

/**
* @api {Hook} init init
* @apiName init
* @apiDescription Called before all other hooks on Reactium application startup. async only - used in
front-end or isomorphically when running server-side rendering mode (SSR)
front-end
* @apiGroup Hooks
*/
await Reactium.Hook.run('init');
Expand All @@ -56,7 +40,7 @@ export const App = async () => {
* @apiName dependencies-load
* @apiDescription Called after init to give an application a change to load
async dependencies. Many Domain Driven Design (DDD) artifacts from generated src/manifest.js are loaded on this hook
async only - used in front-end or isomorphically when running server-side rendering mode (SSR)
async only - used in front-end
* @apiGroup Hooks
*/
await Reactium.Hook.run('dependencies-load');
Expand All @@ -66,7 +50,7 @@ export const App = async () => {
* @apiName zone-defaults
* @apiDescription Called after dependencies-load by Reactium.Zone.init() for
loading default component rendering Zone controls and components.
async only - used in front-end or isomorphically when running server-side rendering mode (SSR)
async only - used in front-end
* @apiParam {Object} context used to create initial controls and components.
controls.filter for default filtering, controls.sort for default sorting, controls.mapper for default mapping
and controls.components for initial registered components. zone.js Domain Driven Design (DDD) artifacts from generated src/manifest.js
Expand All @@ -88,7 +72,7 @@ export const App = async () => {
Any hooks that registered after Reactium.Plugin will only be useful if they happen to be invoked during the normal runtime operations of the application.
An important exception to this is `routes-init`, which is deferred until after plugins initialize so they may dynamically add routes before Reactium hands off
control to the Router.
async only - used in front-end or isomorphically when running server-side rendering mode (SSR)
async only - used in front-end
* @apiParam {Object} context Core attaches generated manifest loaded dependencies to context.deps
* @apiGroup Hooks
*/
Expand All @@ -102,110 +86,97 @@ export const App = async () => {
* @apiGroup Hooks
*/
await Reactium.Hook.run('plugin-ready');
};

if (isBrowserWindow()) {
/**
* @api {Hook} component-bindings component-bindings
* @apiName component-bindings
* @apiDescription Called after plugin and routing initialization to define element and dynamic component for
one-off component bindings to the DOM. e.g. In development mode, used to render Redux Dev tools.
async only - used in front-end application only
* @apiParam {Object} context context.bindPoints MUST be an array of binding objects after this hook is called
* @apiParam (binding) {HTMLElement} the DOM element to bind to (e.g. document.getElementById('my-element'))
* @apiParam (binding) {String} string matching a React component module in one of the Reactium built-in webpack contexts
(src/app/components or src/app/components/common-ui) e.g. 'DevTools' maps to src/app/components/DevTools
* @apiGroup Hooks
*/
const { bindPoints } = await Reactium.Hook.run('component-bindings');

/**
* @api {Hook} app-bindpoint app-bindpoint
* @apiName app-bindpoint
* @apiDescription Called after plugin and routing initialization to define the DOM element used for mounting the Single-Page application (SPA).
By default, the application will bind to `document.getElementById('router')`, but this can be changed with this hook. This is related to the HTML
template artifacts left by the server-side `Server.AppBindings` hook.
async only - used in front-end application only
* @apiParam {Object} context context.appElement MUST be an HTMLElement where your React appliation will bind to the DOM.
* @apiParam (appElement) {HTMLElement} the DOM element to bind to - by default `document.getElementById('router')`.
* @apiGroup Hooks
*/
const { appElement } = await Reactium.Hook.run('app-bindpoint');

/**
* @api {Hook} app-context-provider app-context-provider
* @apiName app-context-provider
* @apiDescription Called after app-bindpoint to define any React context providers, using the [Reactium.AppContext](#api-Reactium-Reactium.AppContext) registry.
* @apiGroup Hooks
*/
await Reactium.Hook.run('app-context-provider');

/**
* @api {Hook} app-router app-router
* @apiName app-router
* @apiDescription Called after app-context-provider to define the registered Router component (i.e. `Reactium.Component.register('Router'...)`).
After this hook, the ReactDOM bindings will actually take place.
async only - used in front-end application only
* @apiGroup Hooks
*/
await Reactium.Hook.run('app-router');

const Router = hookableComponent('Router');

// Render the React Components
if (bindPoints.length > 0) {
bindPoints.forEach(item =>
createRoot(item.element).render(
<AppContexts>{item.component}</AppContexts>,
),
);
}
/**
* -----------------------------------------------------------------------------
* @function App()
* @description Scan DOM for <Component> elements and render React components
* inside of them.
* -----------------------------------------------------------------------------
*/
export const App = async () => {
const {
default: Reactium,
hookableComponent,
Zone,
AppContexts,
} = await import('reactium-core/sdk');

await loadFramework();

// ensure router DOM Element is on the page
if (appElement) {
const { ssr } = await Reactium.Hook.run('app-ssr-mode');
/**
* @api {Hook} app-boot-message app-boot-message
* @apiName app-boot-message
* @apiDescription Called during application binding, this minor hook will allow you to
change the format of the of the front-end Javascript console message indicating application start.
async only - used in front-end application only
* @apiGroup Hooks
*/
const { message = [] } = await Reactium.Hook.run(
'app-boot-message',
ssr,
);
console.log(...message);

if (ssr) {
hydrateRoot(
appElement,
/**
* @api {Hook} component-bindings component-bindings
* @apiName component-bindings
* @apiDescription Called after plugin and routing initialization to define element and dynamic component for
one-off component bindings to the DOM. e.g. In development mode, used to render Redux Dev tools.
async only - used in front-end application only
* @apiParam {Object} context context.bindPoints MUST be an array of binding objects after this hook is called
* @apiParam (binding) {HTMLElement} the DOM element to bind to (e.g. document.getElementById('my-element'))
* @apiParam (binding) {String} string matching a React component module in one of the Reactium built-in webpack contexts
(src/app/components or src/app/components/common-ui) e.g. 'DevTools' maps to src/app/components/DevTools
* @apiGroup Hooks
*/
const { bindPoints } = await Reactium.Hook.run('component-bindings');

/**
* @api {Hook} app-context-provider app-context-provider
* @apiName app-context-provider
* @apiDescription Called after app-bindpoint to define any React context providers, using the [Reactium.AppContext](#api-Reactium-Reactium.AppContext) registry.
* @apiGroup Hooks
*/
await Reactium.Hook.run('app-context-provider');

// Render the React Components
if (bindPoints.length > 0) {
const { createRoot } = await import('react-dom/client');

console.log('Binding components.');
for (const { type, Component, Element } of bindPoints) {
if (type === 'App') {
/**
* @api {Hook} app-router app-router
* @apiName app-router
* @apiDescription Called after app-context-provider to define the registered Router component (i.e. `Reactium.Component.register('Router'...)`).
After this hook, the ReactDOM bindings will actually take place.
async only - used in front-end application only
* @apiGroup Hooks
*/
await Reactium.Hook.run('app-router');

const Router = hookableComponent('Router');
const { message = [] } = await Reactium.Hook.run(
'app-boot-message',
);

console.log(...message);

createRoot(Element).render(
<AppContexts>
<Zone zone='reactium-provider' />
<Router history={Reactium.Routing.history} />
<Zone zone='reactium-provider-after' />
</AppContexts>,
);

/**
* @api {Hook} app-ready app-ready
* @apiDescription The final hook run after the front-end application has bee bound or hydrated. After this point,
the all hooks are runtime hooks.
* @apiName app-ready
* @apiGroup Hooks
*/
} else {
createRoot(appElement).render(
// createRoot(Element).render(<Component />);
createRoot(Element).render(
<AppContexts>
<Zone zone='reactium-provider' />
<Router history={Reactium.Routing.history} />
<Zone zone='reactium-provider-after' />
<Component />
</AppContexts>,
);
}

/**
* @api {Hook} app-ready app-ready
* @apiDescription The final hook run after the front-end application has bee bound or hydrated. After this point,
the all hooks are runtime hooks.
* @apiName app-ready
* @apiGroup Hooks
* @apiParam {Boolean} ssr If the app is in server-side rendering mode (SSR) `true` is passed to the hook.
*/
_.defer(() => Reactium.Hook.run('app-ready', ssr));
}

_.defer(() => Reactium.Hook.run('app-ready'));
}
};

Expand Down
Loading