feat(ChunkExtractor): support publicPath override (#292)

Author: brkalow

packages/server/src/ChunkExtractor.js

@@ -153,17 +153,23 @@ function isValidChunkAsset(chunkAsset) {
 }
 
 class ChunkExtractor {
-  constructor({ statsFile, stats, entrypoints = ['main'], outputPath } = []) {
+  constructor({
+    statsFile,
+    stats,
+    entrypoints = ['main'],
+    outputPath,
+    publicPath,
+  } = {}) {
     this.stats = stats || smartRequire(statsFile)
+    this.publicPath = publicPath || this.stats.publicPath
     this.outputPath = outputPath || this.stats.outputPath
     this.statsFile = statsFile
     this.entrypoints = Array.isArray(entrypoints) ? entrypoints : [entrypoints]
     this.chunks = []
   }
 
   resolvePublicUrl(filename) {
-    const { publicPath } = this.stats
-    return joinURLPath(publicPath, filename)
+    return joinURLPath(this.publicPath, filename)
   }
 
   getChunkGroup(chunk) {

packages/server/src/ChunkExtractor.test.js

@@ -12,6 +12,26 @@ describe('ChunkExtrator', () => {
     })
   })
 
+  describe('#resolvePublicUrl', () => {
+    it('should default to using stats.publicPath', () => {
+      expect(extractor.resolvePublicUrl('main.js')).toEqual(
+        '/dist/node/main.js',
+      )
+    })
+
+    it('should use publicPath from ChunkExtractor options', () => {
+      extractor = new ChunkExtractor({
+        stats,
+        publicPath: 'https://cdn.example.org/v1.1.0/',
+        outputPath: path.resolve(__dirname, '../__fixtures__'),
+      })
+
+      expect(extractor.resolvePublicUrl('main.js')).toEqual(
+        'https://cdn.example.org/v1.1.0/main.js',
+      )
+    })
+  })
+
   describe('#stats', () => {
     it('should load stats from file', () => {
       extractor = new ChunkExtractor({
@@ -228,6 +248,33 @@ Array [
     src="/dist/node/letters-A.js"
   />,
 ]
+`)
+    })
+
+    it('should use publicPath from options', () => {
+      extractor = new ChunkExtractor({
+        stats,
+        publicPath: 'https://cdn.example.org/v1.1.0/',
+        outputPath: path.resolve(__dirname, '../__fixtures__'),
+      })
+
+      expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
+Array [
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "[]",
+      }
+    }
+    id="__LOADABLE_REQUIRED_CHUNKS__"
+    type="application/json"
+  />,
+  <script
+    async={true}
+    data-chunk="main"
+    src="https://cdn.example.org/v1.1.0/main.js"
+  />,
+]
 `)
     })
   })

website/src/pages/docs/server-side-rendering.mdx

@@ -199,3 +199,18 @@ import loadable from '@loadable/component'
 // This dynamic import will not be processed server-side
 const Other = loadable(() => import('./Other'), { ssr: false })
 ```
+
+## Override `stats.publicPath` at runtime
+
+To override `stats.publicPath` at runtime, pass in a custom `publicPath` to the `ChunkExtractor` constructor:
+
+```js
+import { ChunkExtractor } from '@loadable/server'
+
+const statsFile = path.resolve('../dist/loadable-stats.json')
+
+const extractor = new ChunkExtractor({
+  statsFile,
+  publicPath: 'https://cdn.example.org/v1.1.0/',
+})
+```