americanexpress / holocron

✨Set of packages that are used to compose and load React components, enabling the updating and launching of server side rendered user experiences without server restarts

One App is now InnerSource

---

Holocron contains a set of packages that are used to compose and load React components, enabling the updating and launching of server side rendered user experiences without server restarts. This repository is a monorepo managed using Yarn Workspaces & Lerna.

📖 Table of Contents

• Packages
• Contributing

📦 Packages

This codebase has the following packages:

Name	Description
holocron	This is used for composing and loading your application modules.
holocron-module-register-webpack-plugin	This plugin adds the module to registry once its loaded on the page.
holocron-module-route	This uses @americanexpress/one-app-router which is a fork of react-router@3. It extends its Route component which uses holocron's loadModule to dynamically load modules for specified routes.

🏆 Contributing

We welcome Your interest in the American Express Open Source Community on Github. Any Contributor to any Open Source Project managed by the American Express Open Source Community must accept and sign an Agreement indicating agreement to the terms below. Except for the rights granted in this Agreement to American Express and to recipients of software distributed by American Express, You reserve all right, title, and interest, if any, in and to Your Contributions. Please fill out the Agreement.

Please feel free to open pull requests and see CONTRIBUTING.md for commit formatting details.

🗝️ License

Any contributions made under this project will be governed by the Apache License 2.0.

🗣️ Code of Conduct

This project adheres to the American Express Community Guidelines. By participating, you are expected to honor these guidelines.

holocron's Issues

Reporting a vulnerability

Hello!

I hope you are doing well!

We are a security research team. Our tool automatically detected a vulnerability in this repository. We want to disclose it responsibly. GitHub has a feature called Private vulnerability reporting, which enables security research to privately disclose a vulnerability. Unfortunately, it is not enabled for this repository.

Can you enable it, so that we can report it?

Thanks in advance!

PS: you can read about how to enable private vulnerability reporting here: https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository

Create a pull request template

Create a pull request template
an example can be found at https://github.com/americanexpress/one-app/blob/main/.github/pull_request_template.md

This tutorial can be followed

https://docs.github.com/en/free-pro-team@latest/github/building-a-strong-community/creating-a-pull-request-template-for-your-repository

`title` prop for ModuleRoute is not documented

🐞 Bug Report

Describe the bug

The title prop for ModuleRoute is defined here and used in an example but is not in the list of props for ModuleRoute.
https://github.com/americanexpress/holocron/blob/main/packages/holocron-module-route/src/ModuleRoute.jsx#L35

To Reproduce

Check README

Expected behavior

All supported props should be documented in some way.

shouldModuleReload does not receive mapped props from Redux state

🐞 Bug Report

Describe the bug

shouldModuleReload does not receive mapped props from Redux state or any other HoCs.

The current setup of HolocronModule wrapper (internal HoC) does not allow for any additional prop, unless injected from the top.

This makes impossible to reload the module's data with any prop coming from other HoCs.

To Reproduce

Any root module that need to reload when injected props change (e.g. mapped from Redux state).

Expected behavior

A root module should be able to inject props to itself via any HoCs and be able to determine its reloading by using such props (e.g. mapped from Redux state).

If loadModuleData is not passed to Module.holocron, then moduleLoadStatus is always 'loading'

🐞 Bug Report

Describe the bug

If neither 'load' nor 'loadModuleData' are passed to [Module].holocron, the module's 'moduleLoadStatus' is 'loading'.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Run the one-app generator command: npx -p yo -p @americanexpress/generator-one-app-module -- yo @americanexpress/one-app-module
2. Edit the generated function in the src/components/[name].jsx file to deconstruct 'moduleLoadStatus' from the arguments.
3. Display/console.log the moduleLoadStatus (it will be loading)

Expected behavior

If there is no asynchronous data to load, 'moduleLoadStatus' should be 'loaded'.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Windows (64-bit)
• Browser: N/A
• Version of holocron: ^1.1.0
• Node version: 12.18.1

Additional context

You can copy/paste this code into the .jsx to easily reproduce:

import React from 'react';
import PropTypes from 'prop-types';
import childRoutes from '../childRoutes';

const HelloWorld = ({ moduleLoadStatus }) => {
  if (moduleLoadStatus === 'loading') return <h1>Loading...</h1>; // <-- This will always be returned!
  if (moduleLoadStatus === 'error') return <h1>Error!</h1>;
  return <h1>Hello World!</h1>;
};

HelloWorld.childRoutes = childRoutes;

HelloWorld.propTypes = {
  moduleLoadStatus: PropTypes.oneOf(['loading', 'loaded', 'error']),
};

HelloWorld.holocron = {
  name: 'hello-world',
};

if (!global.BROWSER) {
  // eslint-disable-next-line global-require
  HelloWorld.appConfig = require('../appConfig').default;
}

export default HelloWorld;

Commiting changes from a Windows machine

💡 Feature request

Is your feature request related to a problem? Please describe

The test command declared in package.json does not work for Windows' cmd.

Example

Have a separate test command for Windows machines.

Describe the solution you'd like

"test:unit": "SET NODE_ENV=development jest"

Describe alternatives you've considered

The developer could just locally change the command before committing changes or running tests.

ownProps not passed to loadModuleData on initial server and client renders

🐞 Bug Report

Describe the bug

Two related issues:

When passing props to RenderModule, the props are not available to loadModuleData during server-side render or during the initial client-side render. On the second client-side render, the props are available along with moduleState.

When passing the same props through composeModules, the props are available on the server-side and the initial client-side render.

To Reproduce

const MyModule = () => {
  <div>example</div>
};

MyModule.holocron = {
   name: 'my-module',
   loadModuleData: ({ ownProps }) => {
      console.log('ownProps', ownProps);
      // `ownProps {}` (on server)
      // `ownProps {}` (client initial render)
      // `ownProps { foo: 'foo', moduleState: {...} }`  (client subsequent renders)
  },
};

const RootModule = ({ moduleLoadStatus }) => (
  <React.Fragment>
    {moduleLoadStatus === 'loaded' && (
      <RenderModule moduleName="my-module" props={{ foo: 'foo' }} />
    )}
  </React.Fragment>
);

RootModule.holocron = {
  name: 'root-module',
  loadModuleData: async ({ store: { dispatch } }) => {
    await dispatch(composeModules([{ name: 'my-module' }]));
  },
};

System information

• OS: macOS
• Browser: chrome
• Version of holocron: 1.1.0
• Node version: 12.17.0