react-imported-component

  • Version 6.4.1
  • Published
  • 228 kB
  • 5 dependencies
  • MIT license

Install

npm i react-imported-component
yarn add react-imported-component
pnpm add react-imported-component

Overview

I will import your component, and help to handle it

Index

Variables

variable ImportedController

const ImportedController: any;
  • Parameter props

    Parameter

    [props.usesHydration=true] determines of Application is rendered using hydrate

    See Also

    • [LazyBoundary]LazyBoundary - HydrationController is required for LazyBoundary to properly work with React>16.10 Established a control over LazyBoundary suppressing fallback during the initial hydration

variable ImportedStream

const ImportedStream: any;
  • SSR. Tracker for used marks

variable LazyBoundary

const LazyBoundary: any;
  • React.Suspense "as-is" replacement. Automatically "removed" during SSR and "patched" to work accordingly on the clientside

    See Also

Functions

function addPreloader

addPreloader: (preloader: Preloader) => () => void;
  • adds a precondition before resolving any imported object

function assignImportedComponents

assignImportedComponents: (
set: [Promised<any>, string, string, boolean][]
) => [Promised<any>, string, string, boolean][];
  • to be used __only via CLI tools__

function ComponentLoader

ComponentLoader: <P, K>(props: ComponentOptions<P, K>) => ReactElement | null;

function configure

configure: (config: ImportedConfiguration) => ImportedConfiguration;
  • provides react-imported-component configuration

    Parameter config

function drainHydrateMarks

drainHydrateMarks: (stream?: Stream) => string[];
  • SSR

    Returns

    list or marks used

function dryRender

dryRender: (renderFunction: () => void) => Promise<void>;
  • try to perform a render and loads all chunks required for it

    Deprecated

function getMarkedChunks

getMarkedChunks: (marks: string[]) => string[];

    function getMarkedFileNames

    getMarkedFileNames: (marks: string[]) => string[];

      function imported

      imported: <P, K = P>(
      loaderFunction: DefaultComponentImport<P>,
      baseOptions?: Partial<ComponentOptions<P, K>> & HOCOptions
      ) => HOCType<P, K>;
      • creates a "lazy" component, like React.lazy

        Parameter loaderFunction

        () => import('a'), or () => require('b')

        Parameter options

        Parameter

        {React.Component} [options.LoadingComponent]

        Parameter

        {React.Component} [options.ErrorComponent]

        Parameter

        {Function} [options.onError] - error handler. Will consume the real error.

        Parameter

        {Function} [options.async = false] - enable React 16+ suspense.

        Example 1

        const PageA = imported('./pageA', { async: true });

        See Also

      function ImportedComponent

      ImportedComponent: <P, K>(props: ComponentOptions<P, K>) => ReactElement | null;

      function importedModule

      importedModule: <T>(loaderFunction: DefaultImport<T>) => HOCModuleType<T>;

      function ImportedModule

      ImportedModule: <T>(props: FullImportModuleProps<T>) => any;

      function lazy

      lazy: <T>(importer: LazyImport<T>) => any;
      • React.lazy "as-is" replacement

      function loadByChunkname

      loadByChunkname: (chunkName: string) => Promise<any[]>;
      • loads chunk by a known chunkname

        Parameter chunkName

      function loader

      loader: <P, K = P>(
      loaderFunction: DefaultComponentImport<P>,
      baseOptions?: Partial<ComponentOptions<P, K>> & HOCOptions
      ) => HOCType<P, K>;
      • creates a "lazy" component, like React.lazy

        Parameter loaderFunction

        () => import('a'), or () => require('b')

        Parameter options

        Parameter

        {React.Component} [options.LoadingComponent]

        Parameter

        {React.Component} [options.ErrorComponent]

        Parameter

        {Function} [options.onError] - error handler. Will consume the real error.

        Parameter

        {Function} [options.async = false] - enable React 16+ suspense.

        Example 1

        const PageA = imported('./pageA', { async: true });

        See Also

      function printDrainHydrateMarks

      printDrainHydrateMarks: (stream?: Stream | undefined) => string;
      • Returns

        a tag with all used marks

      function rehydrateMarks

      rehydrateMarks: (marks?: string[] | undefined) => Promise<any[]>;
      • Loads a given marks/chunks

        Parameter marks

        Returns

        a resolution promise

      function remapImports

      remapImports: <T, Y>(x: Promise<T>, map: (a: T) => Y) => Promise<Y>;
      • helper function to remap imports

        Parameter x

        Parameter map

      function useImported

      useImported: {
      <T>(importer: DefaultImport<T> | Loadable<T>): ImportedShape<T>;
      <T, K = T>(
      importer: DefaultImport<T> | Loadable<T>,
      exportPicker: (x: T) => K,
      options?: HookOptions
      ): ImportedShape<K>;
      };
      • short version of useImported

        Parameter importer

        an function with import inside it

        {Object} - imported: if non empty - the data is loaded - error: if non empty - there is an error - loading: if true - then it's still loading - loadable: the under laying reference - retry: retry if case of failure

        Example 1

        const { imported: Imported, loadable } = useImported(importer); if (Imported) { // yep, it's imported return <Imported {...children} />; } // else throw resolution throw loadable.resolution;

      • The code splitting hook, the full version

        Parameter importer

        an function with import inside it

        Parameter exportPicker

        a "picker" of the export inside

        Parameter options

        Parameter

        {Boolean} [options.import=true] - should the component be imported. Allow to defer execution.

        Parameter

        {Boolean} [options.track=true] - allows disabling tracking of components, isolating them to SSR

        {Object} - imported: if non empty - the data is loaded - error: if non empty - there is an error - loading: if true - then it's still loading - loadable: the under laying reference - retry: retry if case of failure

        Example 1

        const { imported: Imported, loadable } = useImported(importer, ({namedExport} => namedExport);

        Example 2

        const { imported: Imported, loadable } = useImported(importer); if (Imported) { // yep, it's imported return <Imported {...children} />; } // else throw resolution throw loadable.resolution;

        See Also

        • if you dont need precise control consider(and loading Components) useLazy

      function useIsClientPhase

      useIsClientPhase: () => boolean;
      • returns "true" if currently is a "client" phase and all features should be active

        See Also

      function useLazy

      useLazy: <T>(importer: DefaultComponentImport<T>) => any;
      • A mix of React.lazy and useImported - uses React.lazy for Component and useImported to track the promise not "retry"-able

        Example 1

        const Component = useLazy(() => import('./MyComponent'); return // throws to SuspenseBoundary if not ready

        See Also

      function waitForMarks

      waitForMarks: (marks: string[]) => Promise<any[]>;
      • waits for the given marks to load

        Parameter marks

      function whenComponentsReady

      whenComponentsReady: () => Promise<void>;
      • waits for all necessary imports to be fulfilled

      Interfaces

      interface ImportedConfiguration

      interface ImportedConfiguration {}

      property chunkName

      chunkName?: (
      targetFile: string,
      sourceFile: string,
      importOptions: ImportOptions
      ) => string | null | undefined;
      • adds custom chunkname to a import (if possible)

        Parameter targetFile

        Parameter sourceFile

        Parameter givenChunkName

        Returns

        {string} - a new chunk name {undefined} - keep as is {null} - keep as is (will remove in the future)

      property configuration

      configuration?: Partial<ImportedClientSettings>;
      • clientside configuration properties to be passed into setConfiguration

      property shouldPrefetch

      shouldPrefetch?: (
      targetFile: string,
      sourceFile: string,
      sourceConfiguration: ImportOptions
      ) => boolean;
      • marks import with prefetch comment (if possible)

        Parameter targetFile

        Parameter sourceFile

        Parameter sourceConfiguration

      property shouldPreload

      shouldPreload?: (
      targetFile: string,
      sourceFile: string,
      sourceConfiguration: ImportOptions
      ) => boolean;
      • marks import with preload comment (if possible)

        Parameter targetFile

        Parameter sourceFile

        Parameter sourceConfiguration

      property testFile

      testFile?: (fileName: string) => boolean;
      • tests if this file should scanned by imported-component

        Parameter fileName

        source file name

        Returns

        {Boolean} true - if should, false - is should not

        Example 1

        // hides node modules testFile(filename) { return !filename.test(/node_modules/); }

      property testImport

      testImport?: (targetFileName: string, sourceFileName: string) => boolean;
      • tests if a given import should be visible to a imported-component This method is equivalent to client-side magic comment

        Parameter targetFileName

        import target

        Parameter sourceFileName

        source filename

        Returns

        {Boolean} false if import should be ignored by the imported-components

        Example 1

        //a.js -> source import('./b.js) -> target

        Example 2

        testImport(filename, source, config) { return !( // no mjs please filename.indexOf('.mjs')===-1 // no webpack-ignore please (don't do it) config.webpackIgnore ) }

        See Also

      Type Aliases

      type DefaultImport

      type DefaultImport<T> = () => Promise<Defaultable<T>>;
      • standard "importer" accepted by the package. Could be {default:T} or T

      Package Files (19)

      Dependencies (5)

      Dev Dependencies (16)

      Peer Dependencies (2)

      Badge

      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-imported-component.

      • Markdown
        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-imported-component)
      • HTML
        <a href="https://www.jsdocs.io/package/react-imported-component"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>