feat(building-rollup): allow customizing sw name (#1738)

* feat(building-rollup): allow customizing sw name

* refactor: reuse workboxs swDest

* chore: guard for swDest

* chore: use typeguard instead

packages/building-rollup/README.md

@@ -161,6 +161,23 @@ const baseConfig = createSpaConfig({
 });
 ```
 
+If you overwrite the workbox configuration and the `swDest` property of the workbox config, `injectServiceWorker` will automatically use the value of `swDest` in the service worker registration. Example:
+
+```js
+const baseConfig = createSpaConfig({
+  injectServiceWorker: true,
+  workbox: {
+    swDest: './my-sw.js',
+  },
+});
+```
+
+Will result in:
+
+```js
+navigator.serviceWorker.register('./my-sw.js');
+```
+
 ## Supporting older browsers
 
 The default build output works only on browsers that support modules. If you need to support older browsers, such as IE11 or the old Edge, you can set the `legacyBuild` option when you use the create config function.

packages/building-rollup/demo/js/rollup.spa-js-input.config.js

@@ -4,6 +4,9 @@ const { createSpaConfig } = require('../../index.js');
 const baseConfig = createSpaConfig({
   developmentMode: false,
   injectServiceWorker: true,
+  workbox: {
+    swDest: './dist/foo.js',
+  },
 });
 
 module.exports = merge(baseConfig, {

packages/building-rollup/src/createSpaConfig.js

@@ -16,6 +16,8 @@ const { defaultPolyfills } = require('./polyfills');
  */
 function createSpaConfig(options) {
   const basicConfig = createBasicConfig(options);
+
+  /** @type {SpaOptions} */
   const userOptions = merge(
     {
       html: true,
@@ -27,9 +29,18 @@ function createSpaConfig(options) {
   );
   let outputDir = basicConfig.output.dir;
 
+  let swPath;
+  if (typeof userOptions.workbox === 'boolean') {
+    swPath = './sw.js';
+  } else {
+    swPath = userOptions.workbox.swDest.replace(`${outputDir}/`, '');
+  }
+
+  const applySw = htmlString => applyServiceWorkerRegistration(htmlString, swPath);
+
   const htmlPlugin = pluginWithOptions(html, userOptions.html, {
     minify: !userOptions.developmentMode,
-    transform: [userOptions.injectServiceWorker && applyServiceWorkerRegistration].filter(isFalsy),
+    transform: [userOptions.injectServiceWorker && applySw].filter(isFalsy),
     inject: false,
   });
 

packages/building-rollup/src/types.d.ts

@@ -10,6 +10,10 @@ export interface BasicOptions {
 export interface SpaOptions extends BasicOptions {
   html?: boolean | object;
   polyfillsLoader?: boolean | object;
-  workbox?: boolean | object;
+  workbox?: boolean | WorkboxOptions;
   injectServiceWorker?: boolean;
 }
+
+interface WorkboxOptions {
+  swDest: string
+}

packages/building-rollup/src/utils.js

@@ -41,7 +41,7 @@ function pluginWithOptions(plugin, userConfig, defaultConfig, ...otherParams) {
  * @param {string} htmlString
  * @returns {string}
  */
-function applyServiceWorkerRegistration(htmlString) {
+function applyServiceWorkerRegistration(htmlString, swPath) {
   const documentAst = parse(htmlString);
   const body = query(documentAst, predicates.hasTagName('body'));
   const swRegistration = createScript(
@@ -50,7 +50,7 @@ function applyServiceWorkerRegistration(htmlString) {
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', function() {
         navigator.serviceWorker
-          .register('./sw.js')
+          .register('${swPath}')
           .then(function() {
             console.log('ServiceWorker registered.');
           })