@appshell/react 0.1.0-alpha.6

package/dist/types/react/src/components/FederatedComponent.d.ts

@@ -0,0 +1,20 @@
+import { AppshellIndex } from '@appshell/config';
+import React, { ReactElement, ReactNode } from 'react';
+export type ExtendedProps = Record<string, unknown>;
+declare global {
+    interface Window {
+        __appshell_index__: AppshellIndex;
+    }
+}
+export type FederatedComponentProps<TProps extends ExtendedProps = ExtendedProps> = {
+    remote: string;
+    fallback?: ReactNode;
+} & TProps;
+declare const FederatedComponent: {
+    <TProps extends ExtendedProps>({ remote, fallback, ...rest }: FederatedComponentProps<TProps>): React.ReactElement<TProps, string | React.JSXElementConstructor<any>>;
+    defaultProps: {
+        fallback: undefined;
+    };
+};
+export default FederatedComponent;
+//# sourceMappingURL=FederatedComponent.d.ts.map

package/dist/types/react/src/components/FederatedComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FederatedComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/FederatedComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAK3F,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEpD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,kBAAkB,EAAE,aAAa,CAAC;KACnC;CACF;AAED,MAAM,MAAM,uBAAuB,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,IAAI;IAClF,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,MAAM,CAAC;AAEX,QAAA,MAAM,kBAAkB;;;;;CA6CvB,CAAC;AAMF,eAAe,kBAAkB,CAAC"}

package/dist/types/react/src/components/LoadingError.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type ErrorProps = {
+    remote: string;
+    reason: string;
+};
+declare const LoadingError: FC<ErrorProps>;
+export default LoadingError;
+//# sourceMappingURL=LoadingError.d.ts.map

package/dist/types/react/src/components/LoadingError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingError.d.ts","sourceRoot":"","sources":["../../../../../src/components/LoadingError.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,UAAU,GAAG;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,UAAU,CAKhC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/react/src/components/ReactHost.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+declare const ReactHost: FC<{
+    indexUrl: string;
+    metadataUrl: string;
+    remote: string;
+    fallback?: ReactNode;
+    [x: string]: unknown;
+}>;
+export default ReactHost;
+//# sourceMappingURL=ReactHost.d.ts.map

package/dist/types/react/src/components/ReactHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactHost.d.ts","sourceRoot":"","sources":["../../../../../src/components/ReactHost.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAKxD,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAiDA,CAAC;AAMF,eAAe,SAAS,CAAC"}

package/dist/types/react/src/contexts/ManifestContext.d.ts

@@ -0,0 +1,12 @@
+import { AppshellManifest } from '@appshell/config';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+interface ManifestProviderProps {
+    manifest: AppshellManifest;
+    children: ReactNode;
+}
+export declare const ManifestContext: React.Context<AppshellManifest<import("@appshell/config").Metadata>>;
+export declare const ManifestProvider: FC<ManifestProviderProps>;
+export declare const ManifestConsumer: React.Consumer<AppshellManifest<import("@appshell/config").Metadata>>;
+export default ManifestContext;
+//# sourceMappingURL=ManifestContext.d.ts.map

package/dist/types/react/src/contexts/ManifestContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManifestContext.d.ts","sourceRoot":"","sources":["../../../../../src/contexts/ManifestContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,sEAI1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAEtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,uEAA2B,CAAC;AAEzD,eAAe,eAAe,CAAC"}

package/dist/types/react/src/contexts/MetadataContext.d.ts

@@ -0,0 +1,11 @@
+import { Metadata } from '@appshell/config';
+import React, { FC, ReactNode } from 'react';
+interface MetadataProviderProps {
+    metata: Metadata;
+    children: ReactNode;
+}
+export declare const MetadataContext: React.Context<Metadata>;
+export declare const MetadataProvider: FC<MetadataProviderProps>;
+export declare const MetadataConsumer: React.Consumer<Metadata>;
+export default MetadataContext;
+//# sourceMappingURL=MetadataContext.d.ts.map

package/dist/types/react/src/contexts/MetadataContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetadataContext.d.ts","sourceRoot":"","sources":["../../../../../src/contexts/MetadataContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAiB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,UAAU,qBAAqB;IAC7B,MAAM,EAAE,QAAQ,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,yBAA8B,CAAC;AAE3D,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAEtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,0BAA2B,CAAC;AAEzD,eAAe,eAAe,CAAC"}

package/dist/types/react/src/contexts/RegistryContext.d.ts

@@ -0,0 +1,11 @@
+import { AppshellIndex } from '@appshell/config';
+import React, { FC, ReactNode } from 'react';
+interface RegistryProviderProps {
+    index: AppshellIndex;
+    children: ReactNode;
+}
+export declare const RegistryContext: React.Context<AppshellIndex>;
+export declare const RegistryProvider: FC<RegistryProviderProps>;
+export declare const RegistryConsumer: React.Consumer<AppshellIndex>;
+export default RegistryContext;
+//# sourceMappingURL=RegistryContext.d.ts.map

package/dist/types/react/src/contexts/RegistryContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegistryContext.d.ts","sourceRoot":"","sources":["../../../../../src/contexts/RegistryContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAiB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,UAAU,qBAAqB;IAC7B,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,8BAAmC,CAAC;AAEhE,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAEtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,+BAA2B,CAAC;AAEzD,eAAe,eAAe,CAAC"}

package/dist/types/react/src/hooks/useManifest.d.ts

@@ -0,0 +1,4 @@
+import { AppshellManifest } from '@appshell/config';
+declare const _default: () => AppshellManifest;
+export default _default;
+//# sourceMappingURL=useManifest.d.ts.map

package/dist/types/react/src/hooks/useManifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useManifest.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useManifest.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;8BAMjC,gBAAgB;AAAnC,wBAA2F"}

package/dist/types/react/src/hooks/useMetadata.d.ts

@@ -0,0 +1,4 @@
+import { Metadata } from '@appshell/config';
+declare const _default: () => Metadata;
+export default _default;
+//# sourceMappingURL=useMetadata.d.ts.map

package/dist/types/react/src/hooks/useMetadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMetadata.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useMetadata.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;8BAKzB,QAAQ;AAA3B,wBAA2E"}

package/dist/types/react/src/hooks/useRegistry.d.ts

@@ -0,0 +1,4 @@
+import { AppshellIndex } from '@appshell/config';
+declare const _default: () => AppshellIndex;
+export default _default;
+//# sourceMappingURL=useRegistry.d.ts.map

package/dist/types/react/src/hooks/useRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRegistry.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;8BAK9B,aAAa;AAAhC,wBAAqF"}

package/dist/types/react/src/index.d.ts

@@ -0,0 +1,10 @@
+export { default as FederatedComponent } from './components/FederatedComponent';
+export { default as ReactHost } from './components/ReactHost';
+export { ManifestProvider } from './contexts/ManifestContext';
+export { MetadataProvider } from './contexts/MetadataContext';
+export { RegistryProvider } from './contexts/RegistryContext';
+export { default as useManifest } from './hooks/useManifest';
+export { default as useMetadata } from './hooks/useMetadata';
+export { default as useRegistry } from './hooks/useRegistry';
+export { default as jsonResource } from './resources/jsonResource';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/react/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/types/react/src/resources/jsonResource.d.ts

@@ -0,0 +1,5 @@
+declare const _default: <TResource>(url: string) => {
+    read(): Error | TResource | undefined;
+};
+export default _default;
+//# sourceMappingURL=jsonResource.d.ts.map

package/dist/types/react/src/resources/jsonResource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonResource.d.ts","sourceRoot":"","sources":["../../../../../src/resources/jsonResource.ts"],"names":[],"mappings":"yCAAgC,MAAM;;;AAAtC,wBAkCE"}

package/dist/types/react/src/types.d.ts

@@ -0,0 +1,4 @@
+export type Resource<TResource = unknown> = {
+    read(): TResource | Error | undefined;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/react/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,CAAC,SAAS,GAAG,OAAO,IAAI;IAC1C,IAAI,IAAI,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;CACvC,CAAC"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@appshell/react",
+  "version": "0.1.0-alpha.6",
+  "description": "React utilities for loading federated components",
+  "main": "dist/main.js",
+  "types": "dist/types/react/src/index.d.ts",
+  "repository": "https://github.com/navaris/appshell.git",
+  "author": "Robert Hamilton <rh@navaris.com>",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "webpack --mode production && yarn build:types",
+    "build:types": "tsc --emitDeclarationOnly",
+    "clean": "rm -rf dist",
+    "start": "webpack --watch --mode development --stats-error-details",
+    "stats": "webpack --json > stats.json"
+  },
+  "keywords": [
+    "webpack",
+    "module federation",
+    "micro-frontends",
+    "appshell"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "gitHead": "d8a24472c2440217ef795b85eb3107b4f89395e7"
+}

package/src/components/FederatedComponent.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { AppshellIndex } from '@appshell/config';
+import remoteLoader from '@appshell/loader';
+import React, { ComponentType, ReactElement, ReactNode, useEffect, useState } from 'react';
+import { ManifestProvider } from '../contexts/ManifestContext';
+import useRegistry from '../hooks/useRegistry';
+import LoadingError from './LoadingError';
+
+export type ExtendedProps = Record<string, unknown>;
+
+declare global {
+  interface Window {
+    __appshell_index__: AppshellIndex;
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+export type FederatedComponentProps<TProps extends ExtendedProps = ExtendedProps> = {
+  remote: string;
+  fallback?: ReactNode;
+} & TProps;
+
+const FederatedComponent = <TProps extends ExtendedProps>({
+  remote,
+  fallback,
+  ...rest
+}: FederatedComponentProps<TProps>): ReactElement<TProps> => {
+  const index = useRegistry();
+  const [element, setElement] = useState<ReactElement>();
+
+  useEffect(() => {
+    let active = false;
+    const loadComponent = remoteLoader(index);
+
+    async function load() {
+      try {
+        active = true;
+        setElement(undefined);
+        const [Component, manifest] = await loadComponent<ComponentType>(remote);
+        if (!Component) {
+          return;
+        }
+        active = false;
+        setElement(
+          <ManifestProvider manifest={manifest}>
+            <Component {...rest} />
+          </ManifestProvider>,
+        );
+      } catch (err) {
+        setElement(<LoadingError remote={remote} reason={`${err}`} />);
+      }
+    }
+
+    if (!active) {
+      load();
+    }
+
+    return () => {
+      active = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [remote, index]);
+
+  // eslint-disable-next-line no-console
+  console.debug(`rendering FederatedComponent[${remote}], loading=${!element}`);
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{element || fallback}</>;
+};
+
+FederatedComponent.defaultProps = {
+  fallback: undefined,
+};
+
+export default FederatedComponent;

package/src/components/LoadingError.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+type ErrorProps = {
+  remote: string;
+  reason: string;
+};
+
+const LoadingError: FC<ErrorProps> = ({ remote, reason }) => (
+  <div style={{ border: '3px solid red' }}>
+    <h5>{`Error loading federated component '${remote}.'`}</h5>
+    <span style={{ fontSize: '1rem' }}>{reason}</span>
+  </div>
+);
+
+export default LoadingError;

package/src/components/ReactHost.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { AppshellIndex, Metadata } from '@appshell/config';
+import React, { FC, ReactNode, useEffect } from 'react';
+import { MetadataProvider } from '../contexts/MetadataContext';
+import { RegistryProvider } from '../contexts/RegistryContext';
+import FederatedComponent from './FederatedComponent';
+
+const ReactHost: FC<{
+  indexUrl: string;
+  metadataUrl: string;
+  remote: string;
+  fallback?: ReactNode;
+  [x: string]: unknown;
+}> = ({ indexUrl, metadataUrl, remote, fallback, ...rest }) => {
+  const [index, setIndex] = React.useState<AppshellIndex>();
+  const [metadata, setMetadata] = React.useState<Metadata>();
+
+  useEffect(() => {
+    const fetchIndex = async () => {
+      const res = await fetch(indexUrl);
+
+      if (res.ok) {
+        const data = await res.json();
+        setIndex(data);
+      } else {
+        setIndex({});
+      }
+    };
+
+    if (!index) {
+      fetchIndex();
+    }
+  }, [index, indexUrl]);
+
+  useEffect(() => {
+    const fetchMetadata = async () => {
+      const res = await fetch(metadataUrl);
+
+      if (res.ok) {
+        const data = await res.json();
+        setMetadata(data);
+      } else {
+        setMetadata({});
+      }
+    };
+
+    if (!metadata) {
+      fetchMetadata();
+    }
+  }, [metadata, metadataUrl]);
+
+  if (!index || !metadata) {
+    return null;
+  }
+
+  return (
+    <RegistryProvider index={index}>
+      <MetadataProvider metata={metadata}>
+        <FederatedComponent remote={remote} fallback={fallback} {...rest} />
+      </MetadataProvider>
+    </RegistryProvider>
+  );
+};
+
+ReactHost.defaultProps = {
+  fallback: undefined,
+};
+
+export default ReactHost;

package/src/contexts/ManifestContext.tsx

@@ -0,0 +1,22 @@
+import { AppshellManifest } from '@appshell/config';
+import type { FC, ReactNode } from 'react';
+import React, { createContext } from 'react';
+
+interface ManifestProviderProps {
+  manifest: AppshellManifest;
+  children: ReactNode;
+}
+
+export const ManifestContext = createContext<AppshellManifest>({
+  remotes: {},
+  modules: {},
+  environment: {},
+});
+
+export const ManifestProvider: FC<ManifestProviderProps> = ({ manifest, children }) => (
+  <ManifestContext.Provider value={manifest}>{children}</ManifestContext.Provider>
+);
+
+export const ManifestConsumer = ManifestContext.Consumer;
+
+export default ManifestContext;

package/src/contexts/MetadataContext.tsx

@@ -0,0 +1,17 @@
+import { Metadata } from '@appshell/config';
+import React, { createContext, FC, ReactNode } from 'react';
+
+interface MetadataProviderProps {
+  metata: Metadata;
+  children: ReactNode;
+}
+
+export const MetadataContext = createContext<Metadata>({});
+
+export const MetadataProvider: FC<MetadataProviderProps> = ({ metata, children }) => (
+  <MetadataContext.Provider value={metata}>{children}</MetadataContext.Provider>
+);
+
+export const MetadataConsumer = MetadataContext.Consumer;
+
+export default MetadataContext;

package/src/contexts/RegistryContext.tsx

@@ -0,0 +1,17 @@
+import { AppshellIndex } from '@appshell/config';
+import React, { createContext, FC, ReactNode } from 'react';
+
+interface RegistryProviderProps {
+  index: AppshellIndex;
+  children: ReactNode;
+}
+
+export const RegistryContext = createContext<AppshellIndex>({});
+
+export const RegistryProvider: FC<RegistryProviderProps> = ({ index, children }) => (
+  <RegistryContext.Provider value={index}>{children}</RegistryContext.Provider>
+);
+
+export const RegistryConsumer = RegistryContext.Consumer;
+
+export default RegistryContext;

package/src/hooks/useManifest.ts

@@ -0,0 +1,7 @@
+import { AppshellManifest } from '@appshell/config';
+import React from 'react';
+
+// eslint-disable-next-line import/no-named-as-default
+import ManifestContext from '../contexts/ManifestContext';
+
+export default (): AppshellManifest => React.useContext<AppshellManifest>(ManifestContext);

package/src/hooks/useMetadata.ts

@@ -0,0 +1,6 @@
+import { Metadata } from '@appshell/config';
+import React from 'react';
+// eslint-disable-next-line import/no-named-as-default
+import MetadataContext from '../contexts/MetadataContext';
+
+export default (): Metadata => React.useContext<Metadata>(MetadataContext);

package/src/hooks/useRegistry.ts

@@ -0,0 +1,6 @@
+import { AppshellIndex } from '@appshell/config';
+import React from 'react';
+// eslint-disable-next-line import/no-named-as-default
+import RegistryContext from '../contexts/RegistryContext';
+
+export default (): AppshellIndex => React.useContext<AppshellIndex>(RegistryContext);

package/src/index.ts

@@ -0,0 +1,9 @@
+export { default as FederatedComponent } from './components/FederatedComponent';
+export { default as ReactHost } from './components/ReactHost';
+export { ManifestProvider } from './contexts/ManifestContext';
+export { MetadataProvider } from './contexts/MetadataContext';
+export { RegistryProvider } from './contexts/RegistryContext';
+export { default as useManifest } from './hooks/useManifest';
+export { default as useMetadata } from './hooks/useMetadata';
+export { default as useRegistry } from './hooks/useRegistry';
+export { default as jsonResource } from './resources/jsonResource';

package/src/resources/jsonResource.ts

@@ -0,0 +1,35 @@
+export default <TResource>(url: string) => {
+  let status = 'pending';
+  let result: TResource | Error;
+  const suspender = fetch(url, {
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+    // eslint-disable-next-line consistent-return
+  }).then((response) => {
+    if (response.ok) {
+      return response.json().then((data) => {
+        status = 'success';
+        result = data;
+      });
+    }
+    status = 'error';
+    result = new Error(`${response.status} ${response.statusText} ${response.url}`);
+  });
+
+  return {
+    read() {
+      if (status === 'pending') {
+        // eslint-disable-next-line @typescript-eslint/no-throw-literal
+        throw suspender as Promise<TResource>;
+      } else if (status === 'error') {
+        throw result as Error;
+      } else if (status === 'success') {
+        return result;
+      }
+
+      return undefined;
+    },
+  };
+};

package/src/types.ts

@@ -0,0 +1,3 @@
+export type Resource<TResource = unknown> = {
+  read(): TResource | Error | undefined;
+};

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "declarationDir": "./dist/types"
+  },
+  "include": ["./src"]
+}

package/webpack.config.js

@@ -0,0 +1,42 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const Visualizer = require('webpack-visualizer-plugin2');
+
+module.exports = (env, { mode }) => {
+  const isDevelopment = mode === 'development';
+
+  return {
+    entry: './src/index',
+    mode,
+    devtool: isDevelopment ? 'eval-source-map' : false,
+    output: {
+      filename: '[name].js',
+      pathinfo: false,
+      libraryTarget: 'umd',
+    },
+    resolve: {
+      extensions: ['.js', '.ts', '.tsx'],
+      plugins: [new TsconfigPathsPlugin()],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: ['@babel/preset-react', '@babel/preset-typescript'],
+              },
+            },
+          ],
+        },
+      ],
+    },
+    // plugins: [isDevelopment && new Visualizer()].filter(Boolean),
+    externals: {
+      react: 'react',
+      'react-dom': 'reactDOM',
+    },
+  };
+};