| 1 | {"version":3,"file":"asAsync.js","sourceRoot":"../src/","sources":["asAsync.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B;;;;GAIG;AACH,IAAM,gBAAgB,GACpB,OAAO,OAAO,KAAK,WAAW;IAC5B,CAAC,CAAC,8DAA8D;QAC9D,IAAI,OAAO,EAA6E;IAC1F,CAAC,CAAC,SAAS,CAAC;AAEhB;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAS,OAAgC;IAC9D;QAAoB,yBAMnB;QAND;YAAA,qEA8CC;YAvCQ,WAAK,GAAG;gBACb,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAE,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAA+B,CAAC,CAAC,CAAC,SAAS;aAC5G,CAAC;;QAqCJ,CAAC;QAnCQ,sBAAM,GAAb;YACE,8GAA8G;YAC9G,8DAA8D;YAC9D,IAAM,eAA4E,EAA1E,8BAAY,EAAE,iCAA6B,EAAE,uDAA6B,CAAC;YAC3E,IAAA,gCAAS,CAAgB;YACjC,OAAO,SAAS,CAAC,CAAC,CAAC,CACjB,KAAK,CAAC,aAAa,CAAC,SAAS,wBAAO,IAAI,KAAE,GAAG,EAAE,YAAY,IAAG,CAC/D,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,oBAAC,WAAW,OAAG,CAChB,CAAC,CAAC,CAAC,IAAI,CAAC;QACX,CAAC;QAEM,iCAAiB,GAAxB;YAAA,iBAsBC;YArBO,IAAA,gCAAS,CAAgB;YAE/B,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO;qBACJ,IAAI,EAAE;qBACN,IAAI,CAAC,UAAC,eAA0C;oBAC/C,IAAI,eAAe,EAAE;wBACnB,wCAAwC;wBACxC,gBAAgB,IAAI,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;wBAExE,aAAa;wBACb,KAAI,CAAC,QAAQ,CACX;4BACE,SAAS,EAAE,eAAe;yBAC3B,EACD,OAAO,CAAC,MAAM,CACf,CAAC;qBACH;gBACH,CAAC,CAAC;qBACD,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;aAC3B;QACH,CAAC;QACH,YAAC;IAAD,CAAC,AA9CD,CAAoB,KAAK,CAAC,SAAS,GA8ClC;IAED,OAAO,KAAK,CAAC,UAAU,CACrB,UAAC,KAAK,EAAE,GAAG,IAAK,OAAA,oBAAC,KAAK,eAAK,KAAK,IAAE,YAAY,EAAE,GAAG,IAAI,EAAvC,CAAuC,CACxD,CAAC;AACJ,CAAC","sourcesContent":["/**\n * asAsync - a HOC for async loading components.\n *\n * Usage:\n *\n * const AsyncDialog = asAsync({\n * load: () => import('Dialog').then(result => result.default),\n * });\n *\n * React.render(domElement, <AsyncDialog asyncPlaceholder={ () => <Spinner/> } { ...dialogProps } />);\n *\n * Note the `asyncPlaceholder` prop will be respected when rendering the async component and it hasn't\n * been loaded yet.\n */\n\nimport * as React from 'react';\n\nexport interface IAsAsyncOptions<TProps> {\n /**\n * Callback which returns a promise resolving an object which exports the component.\n */\n load: () => Promise<React.ElementType<TProps>>;\n\n /**\n * Callback executed when async loading is complete.\n */\n onLoad?: () => void;\n\n /**\n * Callback when async loading fails.\n */\n onError?: (error: Error) => void;\n}\n\n/**\n * If possible, use a WeakMap to maintain a cache of loaded components.\n * This can be used to synchronously render components that have already been loaded,\n * rather than having to wait for at least one async tick.\n */\nconst _syncModuleCache =\n typeof WeakMap !== 'undefined'\n ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new WeakMap<() => Promise<React.ElementType<any>>, React.ElementType<any> | undefined>()\n : undefined;\n\n/**\n * Produces a component which internally loads the target component before first mount.\n * The component passes all props through to the loaded component.\n *\n * This overload accepts a module with a default export for the component.\n */\nexport function asAsync<TProps>(options: IAsAsyncOptions<TProps>) {\n class Async extends React.Component<\n TProps & {\n asyncPlaceholder?: React.ElementType;\n forwardedRef: React.Ref<React.ElementType<TProps>>;\n },\n { Component?: React.ElementType<TProps> }\n > {\n public state = {\n Component: _syncModuleCache ? (_syncModuleCache.get(options.load) as React.ElementType<TProps>) : undefined,\n };\n\n public render(): JSX.Element | null {\n // Typescript issue: the rest can't be pulled without the any cast, as TypeScript fails with rest on generics.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const { forwardedRef, asyncPlaceholder: Placeholder, ...rest } = this.props as any;\n const { Component } = this.state;\n return Component ? (\n React.createElement(Component, { ...rest, ref: forwardedRef })\n ) : Placeholder ? (\n <Placeholder />\n ) : null;\n }\n\n public componentDidMount(): void {\n let { Component } = this.state;\n\n if (!Component) {\n options\n .load()\n .then((LoadedComponent: React.ElementType<TProps>) => {\n if (LoadedComponent) {\n // Cache component for future reference.\n _syncModuleCache && _syncModuleCache.set(options.load, LoadedComponent);\n\n // Set state.\n this.setState(\n {\n Component: LoadedComponent,\n },\n options.onLoad,\n );\n }\n })\n .catch(options.onError);\n }\n }\n }\n\n return React.forwardRef<React.ElementType<TProps>, TProps & { asyncPlaceholder?: React.ElementType }>(\n (props, ref) => <Async {...props} forwardedRef={ref} />,\n );\n}\n"]} |