diff --git a/__tests__/useImported.spec.tsx b/__tests__/useImported.spec.tsx index c2b29e6c..bbf9c3b6 100644 --- a/__tests__/useImported.spec.tsx +++ b/__tests__/useImported.spec.tsx @@ -4,13 +4,13 @@ import * as React from 'react'; import { useEffect, useState } from 'react'; import { act } from 'react-dom/test-utils'; -import { drainHydrateMarks } from '../src/entrypoints'; +import { DefaultImport, drainHydrateMarks } from '../src/entrypoints'; import { getLoadable } from '../src/loadable/loadable'; import { done } from '../src/loadable/pending'; import { toLoadable } from '../src/loadable/toLoadable'; import { useImported } from '../src/ui/useImported'; -const importedWrapper = (_: any, b: any) => b; +const importedWrapper = (_: any, b: T): T => b; jest.mock('../src/utils/detectBackend', () => ({ isBackend: false })); @@ -124,6 +124,34 @@ describe('useImported', () => { // expect().toEqual(['unconditional-mark']); }); + it('named import', async () => { + const importer = () => + importedWrapper('imported_unconditional-mark_component', Promise.resolve({ named: () => loaded! })); + + const Comp = () => { + const { loading, imported: Component } = useImported(importer, ({ named }) => named); + + if (Component) { + return ; + } + + if (loading) { + return loading; + } + return nothing; + }; + + const wrapper = mount(); + expect(wrapper.html()).toContain('loading'); + + await act(async () => { + await Promise.resolve(); + }); + + expect(wrapper.update().html()).toContain('loaded!'); + expect(drainHydrateMarks()).toEqual(['unconditional-mark']); + }); + it('unconditional import', async () => { const importer = () => importedWrapper('imported_unconditional-mark_component', Promise.resolve(() => loaded!)); @@ -227,7 +255,7 @@ describe('useImported', () => { const importer = () => () => loaded!; const Comp = () => { - const { loading, imported: Component } = useImported(importer as any); + const { loading, imported: Component } = useImported((importer as any) as DefaultImport); if (Component) { return ; diff --git a/src/ui/useImported.ts b/src/ui/useImported.ts index b1bb99bc..da369843 100644 --- a/src/ui/useImported.ts +++ b/src/ui/useImported.ts @@ -125,7 +125,7 @@ export function useLoadable(loadable: Loadable, options: HookOptions = {}) */ export function useImported(importer: DefaultImport | Loadable): ImportedShape; /** - * The code splitting hook + * The code splitting hook, the full version * @param {Function} importer - an function with `import` inside it * @param {Function} [exportPicker] - a "picker" of the export inside * @param {HookOptions} options @@ -139,9 +139,11 @@ export function useImported(importer: DefaultImport | Loadable): Import * - loadable: the under laying reference * - retry: retry if case of failure * - * @see if you dont need precise control consider(and loading Components) {@link useLazy} + * @see if you dont need precise control consider(and loading Components) {@link useLazy} * - * @example + * @example + * const { imported: Imported, loadable } = useImported(importer, ({namedExport} => namedExport); + * @example * const { imported: Imported, loadable } = useImported(importer); * if (Imported) { * // yep, it's imported @@ -152,7 +154,13 @@ export function useImported(importer: DefaultImport | Loadable): Import */ export function useImported( importer: DefaultImport | Loadable, - exportPicker: (x: T) => K = es6import, + exportPicker: undefined | ((x: T) => K), + options?: HookOptions +): ImportedShape; + +export function useImported( + importer: DefaultImport | Loadable, + exportPicker: undefined | ((x: T) => K) = es6import, options: HookOptions = {} ): ImportedShape { const topLoadable = getLoadable(importer);