diff --git a/README.md b/README.md index e2c7f4a..f83cfa9 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,10 @@ _Code splitting with minimal boiler plate_ _This is a fork of [react-loadable](https://github.com/jamiebuilds/react-loadable), differences and new features include:_ * _A modified API to support new features_ + * _Full render control using a HOC wrapped component_ * _Improved re-use of import components_ * _Improved support for route code splitting_ - * _Preloading all chunks required to render an entire route_ + * _Pre-loading all chunks required to render an entire route_ * _Option to _hoist_ static methods of imported components_ * _Option to enable retry support with backoff_ * _Manually invoking a retry after timeout or error_ @@ -195,6 +196,8 @@ best for your app. Its often useful to assign _names_ to webpack chunks. This can be achieved easily using inline code comments. +Be aware that naming chunks **impacts how webpack bundles your code**. You should [read about webpack code splitting](https://webpack.js.org/guides/code-splitting/#dynamic-imports). + ```js import { chunk, chunks } from 'react-chunk'; @@ -402,8 +405,8 @@ const FooChunk = chunk(() => import('./Foo'))(); const BarChunk = chunk(() => import('./Bar'))(); preloadChunks([ - FooChunk.getLoader(), - BarChunk.getLoader(), + FooChunk.getChunkLoader(), + BarChunk.getChunkLoader(), ]).then(() => { // use 'setState()' to render using the loaded components }).catch(err => { @@ -741,14 +744,14 @@ resolve to update your UI. In most cases it creates a bad user experience. [Read more about preloading](#preloading). -#### `getLoader()` +#### `getChunkLoader()` This is a static method that can be used to obtain a reference to the components loader. It should be used in conjuntion with [preloadChunks()](#preloadchunks) ```js const ChunkComponent = chunk({...}); -ChunkComponent.getLoader(); +ChunkComponent.getChunkLoader(); ``` @@ -1152,10 +1155,11 @@ res.send(`
${html}
- + ${scripts.map(script => { return `` }).join('\n')} + `); diff --git a/__tests__/test.js b/__tests__/test.js index 9ef8541..e2c4061 100644 --- a/__tests__/test.js +++ b/__tests__/test.js @@ -359,7 +359,7 @@ describe('chunk', () => { expect.assertions(1); try { - await preloadChunks([ChunkMyComponent.getLoader()]); + await preloadChunks([ChunkMyComponent.getChunkLoader()]); } catch (e) { expect(e.message).toEqual('import err'); } @@ -383,7 +383,7 @@ describe('chunk', () => { MyComponent.myStatic = jestFn; let ChunkMyComponent = chunk(createLoader(400, () => MyComponent), { hoist: true })(); - await preloadChunks([ChunkMyComponent.getLoader()]); + await preloadChunks([ChunkMyComponent.getChunkLoader()]); expect(ChunkMyComponent.myStatic).toBe(jestFn); delete MyComponent.myStatic; @@ -550,7 +550,7 @@ test('preloadChunks', async () => { let LoadableMyComponent = chunk(createLoader(300, () => MyComponent))(SingleImport); let LoadableMapComponent = chunks({ MyComponent: createLoader(300, () => MyComponent) })(MapImport); - const loaders = [LoadableMyComponent.getLoader(), LoadableMapComponent.getLoader()]; + const loaders = [LoadableMyComponent.getChunkLoader(), LoadableMapComponent.getChunkLoader()]; await preloadChunks(loaders); diff --git a/example/components/PreLoadButton.js b/example/components/PreLoadButton.js index 11ce8ba..698af08 100644 --- a/example/components/PreLoadButton.js +++ b/example/components/PreLoadButton.js @@ -18,9 +18,9 @@ export default class PreLoadButton extends React.Component { // Verify webpack only submits a single request preloadChunks([ - ContentChunk.getLoader(), - ContentChunk.getLoader(), - ContentChunk.getLoader() + ContentChunk.getChunkLoader(), + ContentChunk.getChunkLoader(), + ContentChunk.getChunkLoader() ]).then(() => { console.log('pre-loading modules'); this.setState({ isLoaded: true }); diff --git a/src/index.js b/src/index.js index a3f6d0d..034fc37 100644 --- a/src/index.js +++ b/src/index.js @@ -194,7 +194,7 @@ function createChunkComponent(loadFn, options) { return init(true); } - static getLoader() { + static getChunkLoader() { return init; }