react-imported-component

Variables

• ImportedController
• ImportedStream
• LazyBoundary

Functions

• addPreloader()
• assignImportedComponents()
• ComponentLoader()
• configure()
• drainHydrateMarks()
• dryRender()
• getMarkedChunks()
• getMarkedFileNames()
• imported()
• ImportedComponent()
• importedModule()
• ImportedModule()
• lazy()
• loadByChunkname()
• loader()
• printDrainHydrateMarks()
• rehydrateMarks()
• remapImports()
• useImported()
• useIsClientPhase()
• useLazy()
• waitForMarks()
• whenComponentsReady()

Interfaces

• ImportedConfiguration

  • chunkName
  • configuration
  • shouldPrefetch
  • shouldPreload
  • testFile
  • testFolder
  • testImport

Type Aliases

• DefaultImport

variable ImportedController

const ImportedController: React.FC<{ usesHydration?: boolean }>;

• 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: React.FC<{ stream: Stream }>;

• SSR. Tracker for used marks

variable LazyBoundary

const LazyBoundary: React.FC<{ fallback: NonNullable<React.ReactNode> | null }>;

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

  See Also

  • HydrationController has to wrap entire application in order to provide required information

function addPreloader

addPreloader: (preloader: Preloader) => Callback;

• adds a precondition before resolving any imported object

function assignImportedComponents

assignImportedComponents: (set: ImportedDefinition[]) => ImportedDefinition[];

• to be used __only via CLI tools__

function ComponentLoader

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

• Deprecated

  use useImported instead

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<unknown>;

• try to perform a render and loads all chunks required for it

  Deprecated

function getMarkedChunks

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

function getMarkedFileNames

getMarkedFileNames: (marks: Mark) => 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

  • useImported or useLazy

function ImportedComponent

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

• Deprecated

  use useImported instead

function importedModule

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

• Deprecated

  use useImported instead

function ImportedModule

ImportedModule: <T>(
    props: FullImportModuleProps<T>
) => React.ReactElement | null;

• Deprecated

  use useImported instead

function lazy

lazy: <T>(importer: LazyImport<T>) => React.FC<T>;

• React.lazy "as-is" replacement

function loadByChunkname

loadByChunkname: (chunkName: string) => Promise<unknown>;

• 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

  • useImported or useLazy

function printDrainHydrateMarks

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

• Returns

  a tag with all used marks

function rehydrateMarks

rehydrateMarks: (marks?: string[] | undefined) => Promise<unknown>;

• Loads a given marks/chunks

  Parameter marks

  Returns

  a resolution promise

  See Also

  • returns a promise for a given marks only. In order to await all requests currently in flight use waitForMarks

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

  • HydrationController

function useLazy

useLazy: <T>(
    importer: DefaultComponentImport<T>
) => LazyExoticComponent<ComponentType<T>>;

• 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

  • if you need precise control consider useImported

function waitForMarks

waitForMarks: (marks: string[]) => Promise<unknown>;

• waits for the given marks to load

  Parameter marks

function whenComponentsReady

whenComponentsReady: () => Promise<void>;

• waits for all necessary imports to be fulfilled

type DefaultImport

type DefaultImport<T> = () => Promise<Defaultable<T>>;

• standard "importer" accepted by the package. Could be {default:T} or T