@monolithed/lazy-service

Lazy Service is a wrapper around several scripts to support the Module Federation conception.

Installation

Install with npm or Yarn:

npm:

npm install @monolithed/lazy-service --save

Yarn:

yarn add @monolithed/lazy-service

Basic usage

import React, {
    FunctionComponent,
    Suspense,
    lazy
} from 'react';

import {
    useScript,
    componentLoader,
    ErrorBoundary
} from '@monolithed/lazy-service';

type Props = {
    src: string;
    scope: string;
    module: string;
};

const LazyService: FunctionComponent<Props> = ({children, src, scope, module}): JSX.Element => {
    const {loaded, failed} = useScript({src});
    const remoteModule = componentLoader({scope, module});

    const RemoteComponent = lazy(remoteModule);

    return (
        <ErrorBoundary>
            <Suspense fallback="loading...">
                <RemoteComponent>{...children.props}</Component>
            </Suspense>
        </ErrorBoundary>
    );
};

Publishing

npm publish --access public --verbose

License

MIT

Contributing

Feel free to submit a pull request if you find any bugs. Please make sure all commits are properly documented.