feat: add required APIs for react streaming

packages/holocron/__tests__/__snapshots__/holocronModule.spec.jsx.snap

@@ -79,6 +79,14 @@ The 'reducer' will not be added to the Redux Store without a 'name'.",
 ]
 `;
 
+exports[`holocronModule should wrap module with ModuleContext 1`] = `
+<DocumentFragment>
+ <div>
+ test-module
+ </div>
+</DocumentFragment>
+`;
+
 exports[`holocronModule should wrap module with no arguments 1`] = `
 <DocumentFragment>
  <div>

packages/holocron/__tests__/__snapshots__/index.spec.js.snap

@@ -1,7 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+// eslint-disable-next-line jest/no-large-snapshots -- this one is ok to be a bit large
 exports[`public API should not have anything removed 1`] = `
 {
+ "ModuleContext": {
+ "$$typeof": Symbol(react.context),
+ "Consumer": {
+ "$$typeof": Symbol(react.context),
+ "_context": [Circular],
+ },
+ "Provider": {
+ "$$typeof": Symbol(react.provider),
+ "_context": [Circular],
+ },
+ "_currentRenderer": null,
+ "_currentRenderer2": null,
+ "_currentValue": undefined,
+ "_currentValue2": undefined,
+ "_defaultValue": null,
+ "_globalName": null,
+ "_threadCount": 0,
+ },
+ "ReactStreamingContext": {
+ "$$typeof": Symbol(react.context),
+ "Consumer": {
+ "$$typeof": Symbol(react.context),
+ "_context": [Circular],
+ },
+ "Provider": {
+ "$$typeof": Symbol(react.provider),
+ "_context": [Circular],
+ },
+ "_currentRenderer": null,
+ "_currentRenderer2": null,
+ "_currentValue": {},
+ "_currentValue2": {},
+ "_defaultValue": null,
+ "_globalName": null,
+ "_threadCount": 0,
+ },
  "RenderModule": [Function],
  "clearModulesUsingExternals": [Function],
  "composeModules": [Function],
@@ -26,5 +63,6 @@ exports[`public API should not have anything removed 1`] = `
  "registerModule": [Function],
  "setModuleMap": [Function],
  "setRequiredExternalsRegistry": [Function],
+ "useAsyncModuleData": [Function],
 }
 `;

packages/holocron/__tests__/holocronModule.spec.jsx

@@ -26,6 +26,7 @@ import holocronModule, {
  executeLoad,
  executeLoadModuleData,
  executeLoadingFunctions,
+ ModuleContext,
 } from '../src/holocronModule';
 import { REDUCER_KEY, LOAD_KEY } from '../src/ducks/constants';
 
@@ -187,6 +188,21 @@ describe('holocronModule', () => {
 
  expect(renderedModule).toMatchSnapshot();
  });
+ it('should wrap module with ModuleContext', () => {
+ const MyModuleComponent = holocronModule({ name: 'test-module' })(() => {
+ const { moduleName } = React.useContext(ModuleContext);
+ return <div>{moduleName}</div>;
+ });
+ const mockStore = createStore(
+ (state) => state,
+ fromJS({ modules: { 'mock-module': { key: 'value' } } })
+ );
+ const renderedModule = render(
+ <MyModuleComponent store={mockStore} />
+ ).asFragment();
+
+ expect(renderedModule).toMatchSnapshot();
+ });
 
  it('should provide the module state as a plain JS prop if a reducer is provided', () => {
  const reducer = (state) => state;

packages/holocron/__tests__/reactStreaming.spec.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies -- monorepo, this is at the root
+import { renderHook } from '@testing-library/react';
+import { useAsyncModuleData, ReactStreamingContext } from '../src/reactStreaming';
+import { ModuleContext } from '../src/holocronModule';
+
+describe('reactStreaming', () => {
+ it('exports ReactStreamingContext', () => {
+ expect(ReactStreamingContext).toBeDefined();
+ });
+
+ describe('useAsyncModuleData', () => {
+ /* eslint-disable
+ react/display-name,
+ react/prop-types,
+ react/jsx-no-constructed-context-values -- test component */
+ const Providers = ({ moduleName, promise, key }) => ({ children }) => (
+ <ReactStreamingContext.Provider value={{ [moduleName]: { [key]: promise } }}>
+ <ModuleContext.Provider value={{ moduleName }}>
+ {children}
+ </ModuleContext.Provider>
+ </ReactStreamingContext.Provider>
+ /* eslint-enable
+ react/display-name,
+ react/prop-types,
+ react/jsx-no-constructed-context-values -- test component */
+ );
+ it('should throw a promise if the data is not yet resolved', () => {
+ const key = 'test';
+ const moduleName = 'testModule';
+ const streamedPromise = new Promise(() => {});
+ const { result } = renderHook(() => {
+ try {
+ return useAsyncModuleData(key);
+ } catch (promise) {
+ return promise;
+ }
+ }, {
+ wrapper: Providers({ moduleName, promise: streamedPromise, key }),
+ });
+ expect(result.current).toBe(streamedPromise);
+ });
+
+ it('should return data once the promise is resolved', () => {
+ const key = 'test';
+ const moduleName = 'testModule';
+ let resolve;
+ const streamedPromise = new Promise((res) => { resolve = res; });
+ const { result, rerender } = renderHook(() => {
+ try {
+ return useAsyncModuleData(key);
+ } catch (promise) {
+ return promise;
+ }
+ }, {
+ wrapper: Providers({ moduleName, promise: streamedPromise, key }),
+ });
+ resolve();
+ streamedPromise.data = 'testData';
+ rerender();
+ expect(result.current).toBe('testData');
+ });
+
+ it('should throw an error if the promise is rejected', () => {
+ const key = 'test';
+ const moduleName = 'testModule';
+ let reject;
+ const streamedPromise = new Promise((_, rej) => { reject = rej; });
+ const { result, rerender } = renderHook(() => {
+ try {
+ return useAsyncModuleData(key);
+ } catch (error) {
+ return error;
+ }
+ }, {
+ wrapper: Providers({ moduleName, promise: streamedPromise, key }),
+ });
+ reject();
+ streamedPromise.error = 'testError';
+ rerender();
+ expect(result.current).toBe('testError');
+ });
+ it('should return undefined if there is no promise', () => {
+ const key = 'test';
+ const moduleName = 'testModule';
+ const streamedPromise = undefined;
+ const { result } = renderHook(() => {
+ try {
+ return useAsyncModuleData(key);
+ } catch (promise) {
+ return promise;
+ }
+ }, {
+ wrapper: Providers({ moduleName, promise: streamedPromise, key }),
+ });
+ expect(result.current).toBe(undefined);
+ });
+ });
+});