@appshell/react 0.1.0-alpha.6

package/CHANGELOG.md

@@ -0,0 +1,183 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0-alpha.6 (2023-07-10)
+
+
+### Bug Fixes
+
+* rename @appshell/react-federated-component package to @appshell/react ([0b74498](https://github.com/navaris/appshell/commit/0b74498bf17ba73db4d936c8a012af1d3b111a28))
+
+
+
+
+
+# [0.1.0-alpha.5](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.1.0-alpha.4...@appshell/react-federated-component@0.1.0-alpha.5) (2023-07-10)
+
+
+### Bug Fixes
+
+* registry projection, enable env overwrite, refactor docker workflow, consolidate env names ([33a28fe](https://github.com/navaris/appshell/commit/33a28fe76b58e05c5b6b6b33d4b402e52bb29e70))
+
+
+
+
+
+# [0.1.0-alpha.4](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.1.0-alpha.3...@appshell/react-federated-component@0.1.0-alpha.4) (2023-07-06)
+
+
+### Bug Fixes
+
+* metadata urls ([efcce1c](https://github.com/navaris/appshell/commit/efcce1ce4cb1745afa83661cae1414a73f837483))
+
+
+
+
+
+# [0.1.0-alpha.3](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.1.0-alpha.2...@appshell/react-federated-component@0.1.0-alpha.3) (2023-07-06)
+
+
+### Bug Fixes
+
+* support metadata generation ([4df202f](https://github.com/navaris/appshell/commit/4df202f0fd3b9ca6c660975b75eb0ac9b60225c2))
+
+
+
+
+
+# [0.1.0-alpha.2](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.1.0-alpha.1...@appshell/react-federated-component@0.1.0-alpha.2) (2023-07-06)
+
+
+### Bug Fixes
+
+* lint ([a4861ab](https://github.com/navaris/appshell/commit/a4861abfe82d1e0ab815aaa62cdf7907229d0136))
+
+
+### Features
+
+* appshell start, cleanup dev workflow ([74fd2e5](https://github.com/navaris/appshell/commit/74fd2e5a5acd2415482268175c7f3f16cd7c93ec))
+
+
+
+
+
+# [0.1.0-alpha.1](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.3...@appshell/react-federated-component@0.1.0-alpha.1) (2023-07-05)
+
+
+### Features
+
+* foundation refactor wip ([339b930](https://github.com/navaris/appshell/commit/339b9306accaa9aba1712f3a0dee6c4cab7ed273))
+
+
+
+
+
+# [0.1.0-alpha.0](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.3...@appshell/react-federated-component@0.1.0-alpha.0) (2023-07-05)
+
+
+### Features
+
+* registry index ([8e6ee0a](https://github.com/navaris/appshell/commit/8e6ee0a6a377584efa2ee702168025f46108b8c5))
+
+
+
+
+
+## [0.0.3](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.3-alpha.2...@appshell/react-federated-component@0.0.3) (2023-06-29)
+
+**Note:** Version bump only for package @appshell/react-federated-component
+
+
+
+
+
+## [0.0.3-alpha.2](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.2...@appshell/react-federated-component@0.0.3-alpha.2) (2023-06-29)
+
+**Note:** Version bump only for package @appshell/react-federated-component
+
+
+
+
+
+
+## [0.0.3-alpha.1](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.3-alpha.0...@appshell/react-federated-component@0.0.3-alpha.1) (2023-06-29)
+
+
+### Bug Fixes
+
+* update npm package visibility ([1ef4119](https://github.com/navaris/appshell/commit/1ef411903dd038dfc781e8ce0700811e5460c903))
+
+
+
+
+
+## [0.0.3-alpha.0](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.2-alpha.1...@appshell/react-federated-component@0.0.3-alpha.0) (2023-06-29)
+
+**Note:** Version bump only for package @appshell/react-federated-component
+
+
+
+
+
+## [0.0.2](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.2-alpha.1...@appshell/react-federated-component@0.0.2) (2023-06-29)
+
+**Note:** Version bump only for package @appshell/react-federated-component
+
+
+
+
+
+## [0.0.2-alpha.1](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.2-alpha.0...@appshell/react-federated-component@0.0.2-alpha.1) (2023-06-24)
+
+
+### Bug Fixes
+
+* add useEffect dependencies for federated component ([616039e](https://github.com/navaris/appshell/commit/616039ebb3f46f34db0b82acfb6ee5438a6b4731))
+
+
+
+
+
+## [0.0.2-alpha.0](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.1...@appshell/react-federated-component@0.0.2-alpha.0) (2023-06-15)
+
+
+### Bug Fixes
+
+* hot module replacement support, example updates ([a67d230](https://github.com/navaris/appshell/commit/a67d2303b40f5911373225cc0b4ccf9b67c33d11))
+
+
+
+
+
+## 0.0.1 (2023-06-15)
+
+**Note:** Version bump only for package @appshell/react-federated-component
+
+
+
+
+
+## [0.0.1-alpha.2](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.1-alpha.1...@appshell/react-federated-component@0.0.1-alpha.2) (2023-06-15)
+
+
+### Bug Fixes
+
+* hot module replacement support, example updates ([a67d230](https://github.com/navaris/appshell/commit/a67d2303b40f5911373225cc0b4ccf9b67c33d11))
+
+
+
+
+
+## [0.0.1-alpha.1](https://github.com/navaris/appshell/compare/@appshell/react-federated-component@0.0.1-alpha.0...@appshell/react-federated-component@0.0.1-alpha.1) (2023-03-19)
+
+**Note:** Version bump only for package @appshell/react-federated-component
+
+
+
+
+
+## 0.0.1-alpha.0 (2023-03-19)
+
+**Note:** Version bump only for package @appshell/react-federated-component

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Navaris Technologies, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,117 @@
+<div align="center">
+  <a href="https://github.com/navaris/appshell">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/navaris/appshell/blob/main/assets/branding/appshell-logo-white_2x.png">
+      <img alt="appshell" src="https://github.com/navaris/appshell/blob/main/assets/branding/appshell-logo_2x.png">
+    </picture>
+  </a>
+</div>
+
+[![Appshell CI](https://github.com/navaris/appshell/actions/workflows/pipeline.yml/badge.svg)](https://github.com/navaris/appshell/actions/workflows/pipeline.yml)
+
+# @appshell/react
+
+React utilites for building micro-frontends with Webpack Module federation and Appshell.
+
+Working examples can be found [here](https://github.com/navaris/appshell/tree/main/examples).
+
+## Getting Started
+
+To begin, you'll need to install `@appshell/react`:
+
+```console
+npm install @appshell/react --save-dev
+```
+
+or
+
+```console
+yarn add -D @appshell/react
+```
+
+or
+
+```console
+pnpm add -D @appshell/react
+```
+
+## FederatedComponent
+
+React component that dynamically loads federated components.
+
+```tsx
+import { FederatedComponent, ManifestProvider } from '@appshell/react';
+
+<App>
+  <ManifestProvider manifest={manifest}>
+    <FederatedComponent remote="PingModule/Ping">
+    <FederatedComponent remote="PongModule/Pong">
+  </ManifestProvider>
+</App>
+```
+
+## useRegistry
+
+For access to the registry index.
+
+```tsx
+import { RegistryProvider, useRegistry } from '@appshell/react';
+
+const MyComponent = () => {
+  const index = useRegistry();
+
+  ...
+}
+
+<RegistryProvider index={index}>
+  <MyComponent />
+</RegistryProvider>
+```
+
+## useMetadata
+
+For access to the registry metadata.
+
+```tsx
+import { MetadataProvider, useMetadata } from '@appshell/react';
+
+const MyComponent = () => {
+  const metadata = useMetadata();
+
+  ...
+}
+
+<MetadataProvider metadata={metadata}>
+  <MyComponent />
+</MetadataProvider>
+```
+
+## useManifest
+
+For access to the manifest.
+
+```tsx
+import { ManifestProvider, useManifest } from '@appshell/react';
+
+const MyComponent = () => {
+  const manifest = useManifest();
+
+  ...
+}
+
+<ManifestProvider manifest={manifest}>
+  <MyComponent />
+</ManifestProvider>
+```
+
+**Where does the registry come from?**
+
+Currently, the registry is a shared directory or mounted volume. It does support calling an http endpoint, but it has not yet been implemented.
+
+> See [@appshell/cli](https://www.npmjs.com/package/@appshell/cli)
+
+Each micro-frontend registers its manifest with the registry
+
+```bash
+appshell register --manifest dist/appshell.manifest.json
+```

package/__tests__/FederatedComponent.spec.tsx

@@ -0,0 +1,53 @@
+/** @jest-environment jsdom */
+import * as remoteLoader from '@appshell/loader';
+import '@testing-library/jest-dom';
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+import FederatedComponent from '../src/components/FederatedComponent';
+import * as useRegistry from '../src/hooks/useRegistry';
+import index from './fixtures/appshell.index';
+import manifest from './fixtures/Manifest';
+import TestComponent from './fixtures/TestComponent';
+
+jest.mock('../src/hooks/useRegistry');
+
+const TestFallback = () => <div>loading...</div>;
+
+describe('FederatedComponent', () => {
+  it('should match snapshot', async () => {
+    jest.spyOn(useRegistry, 'default').mockReturnValue(index);
+    jest.spyOn(remoteLoader, 'default').mockReturnValueOnce(async () => [TestComponent, manifest]);
+
+    const { container, findByText } = await act(() =>
+      render(<FederatedComponent remote="TestModule/TestComponent" />),
+    );
+    const view = await findByText(/test component/i);
+
+    expect(view).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render fallback while resource is pending', async () => {
+    jest.spyOn(useRegistry, 'default').mockReturnValue(index);
+    jest.spyOn(remoteLoader, 'default').mockReturnValueOnce(() => [null, null]);
+
+    await act(() =>
+      render(<FederatedComponent remote="TestModule/TestComponent" fallback={<TestFallback />} />),
+    );
+
+    await expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+
+  it('should render error when resource fails', async () => {
+    jest.spyOn(useRegistry, 'default').mockReturnValue(index);
+    jest
+      .spyOn(remoteLoader, 'default')
+      .mockImplementationOnce(() => new Error('Failed to get resource'));
+
+    await act(() =>
+      render(<FederatedComponent remote="TestModule/TestComponent" fallback={<TestFallback />} />),
+    );
+
+    await expect(screen.getByText(/Error loading federated component/i)).toBeInTheDocument();
+  });
+});

package/__tests__/LoadingError.spec.tsx

@@ -0,0 +1,14 @@
+/** @jest-environment jsdom */
+import { render } from '@testing-library/react';
+import React from 'react';
+import LoadingError from '../src/components/LoadingError';
+
+describe('LoadingError', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <LoadingError remote="TestModule/TestComponent" reason="Could not find component" />,
+    );
+
+    expect(view).toMatchSnapshot();
+  });
+});

package/__tests__/ManifestContext.spec.tsx

@@ -0,0 +1,36 @@
+/** @jest-environment jsdom */
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ManifestProvider } from '../src/contexts/ManifestContext';
+import useManifest from '../src/hooks/useManifest';
+import manifest from './fixtures/Manifest';
+import TestComponent from './fixtures/TestComponent';
+
+const ComponentUsingManifest = () => {
+  const res = useManifest();
+
+  return <div>{JSON.stringify(res.remotes)}</div>;
+};
+
+describe('ManifestProvider', () => {
+  it('should render children', async () => {
+    render(
+      <ManifestProvider manifest={manifest}>
+        <TestComponent />
+      </ManifestProvider>,
+    );
+
+    await expect(screen.getByText(/test component/i)).toBeInTheDocument();
+  });
+
+  it('should make the manifest context available', async () => {
+    render(
+      <ManifestProvider manifest={manifest}>
+        <ComponentUsingManifest />
+      </ManifestProvider>,
+    );
+
+    await expect(screen.getByText(/TestModule\/TestComponent/i)).toBeInTheDocument();
+  });
+});

package/__tests__/ReactHost.spec.tsx

@@ -0,0 +1,137 @@
+/** @jest-environment jsdom */
+import '@testing-library/jest-dom';
+import { act, render, screen } from '@testing-library/react';
+import fetch, { enableFetchMocks } from 'jest-fetch-mock';
+import React from 'react';
+import * as FederatedComponent from '../src/components/FederatedComponent';
+import ReactHost from '../src/components/ReactHost';
+
+enableFetchMocks();
+
+jest.mock('@appshell/core', () => ({
+  APPSHELL_ENV: {
+    APPSHELL_REGISTRY: 'appshell_registry',
+    APPSHELL_PUBLIC_URL: 'http://test.com',
+    APPSHELL_ROOT: 'TestModule/TestComponent',
+    APPSHELL_ROOT_PROPS: '{"foo":"bar"}',
+  },
+}));
+
+jest.mock('../src/components/FederatedComponent', () => ({
+  __esModule: true,
+  default: () => <div>test component</div>,
+}));
+
+describe('RenderHost', () => {
+  const indexUrl = 'http://test.com/appshell.index.json';
+  const metadataUrl = 'http://test.com/appshell.metadata.json';
+  const remote = 'TestModule/TestComponent';
+
+  let useState: jest.SpyInstance;
+  const mockUseState = (val) => {
+    useState.mockImplementationOnce(() => [val, () => {}]);
+  };
+
+  beforeEach(() => {
+    // useEffect = jest.spyOn(React, 'useEffect');
+    useState = jest.spyOn(React, 'useState');
+    fetch.mockIf(
+      (req) =>
+        req.url === 'http://test.com/appshell.metadata.json' ||
+        req.url === 'http://test.com/appshell.index.json',
+      () => Promise.resolve({ ok: true, body: JSON.stringify({ test: 'data' }) }),
+    );
+  });
+
+  afterEach(() => {
+    useState.mockReset();
+  });
+
+  it('should match snapshot', async () => {
+    mockUseState({ index: 'foo' });
+    mockUseState({ metadata: 'bar' });
+    const { container } = await act(() =>
+      render(
+        <ReactHost
+          indexUrl={indexUrl}
+          metadataUrl={metadataUrl}
+          remote={remote}
+          fallback="Loading"
+        />,
+      ),
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render empty when index is pending', async () => {
+    mockUseState(undefined);
+    mockUseState({ metadata: 'bar' });
+    const { container } = render(
+      <ReactHost
+        indexUrl={indexUrl}
+        metadataUrl={metadataUrl}
+        remote={remote}
+        fallback="Loading"
+      />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render empty when metadata is pending', async () => {
+    mockUseState({ index: 'foo' });
+    mockUseState(undefined);
+    const { container } = render(
+      <ReactHost
+        indexUrl={indexUrl}
+        metadataUrl={metadataUrl}
+        remote={remote}
+        fallback="Loading"
+      />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render component when index and metadata are available', async () => {
+    mockUseState({ index: 'foo' });
+    mockUseState({ metadata: 'bar' });
+    await act(() =>
+      render(
+        <ReactHost
+          indexUrl={indexUrl}
+          metadataUrl={metadataUrl}
+          remote={remote}
+          fallback="Loading"
+        />,
+      ),
+    );
+
+    await expect(screen.getByText(/test component/i)).toBeInTheDocument();
+  });
+
+  it('should pass props to federated component when available', async () => {
+    mockUseState({ index: 'foo' });
+    mockUseState({ metadata: 'bar' });
+    const federatedComponentSpy = jest.spyOn(FederatedComponent, 'default');
+    await act(() =>
+      render(
+        <ReactHost
+          indexUrl={indexUrl}
+          metadataUrl={metadataUrl}
+          remote={remote}
+          foo="bar"
+          fallback="Loading"
+        />,
+      ),
+    );
+
+    await expect(screen.getByText(/test component/i)).toBeInTheDocument();
+
+    expect(federatedComponentSpy).toHaveBeenCalledWith(
+      { fallback: 'Loading', foo: 'bar', remote: 'TestModule/TestComponent' },
+      {},
+    );
+  });
+});

package/__tests__/__snapshots__/FederatedComponent.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FederatedComponent should match snapshot 1`] = `
+<div>
+  <div>
+    test component
+  </div>
+</div>
+`;

package/__tests__/__snapshots__/LoadingError.spec.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingError should match snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        style="border: 3px solid red;"
+      >
+        <h5>
+          Error loading federated component 'TestModule/TestComponent.'
+        </h5>
+        <span
+          style="font-size: 1rem;"
+        >
+          Could not find component
+        </span>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="border: 3px solid red;"
+    >
+      <h5>
+        Error loading federated component 'TestModule/TestComponent.'
+      </h5>
+      <span
+        style="font-size: 1rem;"
+      >
+        Could not find component
+      </span>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/__tests__/__snapshots__/ReactHost.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RenderHost should match snapshot 1`] = `
+<div>
+  <div>
+    test component
+  </div>
+</div>
+`;
+
+exports[`RenderHost should render empty when index is pending 1`] = `<div />`;
+
+exports[`RenderHost should render empty when metadata is pending 1`] = `<div />`;

package/__tests__/fixtures/Manifest.ts

@@ -0,0 +1,16 @@
+import { AppshellManifest } from '@appshell/config';
+
+export default {
+  remotes: {
+    'TestModule/TestComponent': {
+      id: 'test-component',
+      scope: 'TestModule',
+      module: './TestComponent',
+      manifestUrl: 'http://test.com/appshell.manifest.json',
+      remoteEntryUrl: 'http://test.com/remoteEntry.js',
+      metadata: {},
+    },
+  },
+  modules: {},
+  environment: {},
+} as AppshellManifest;