build: improve the JS build for PWA (#1923)

Author: cotes2020

.gitignore

@@ -25,4 +25,3 @@ package-lock.json
 # Misc
 _sass/dist
 assets/js/dist
-_app

_config.yml

@@ -170,9 +170,6 @@ collections:
   tabs:
     output: true
     sort_by: order
-  app:
-    output: true
-    permalink: /:name
 
 defaults:
   - scope:

jekyll-theme-chirpy.gemspec

@@ -11,7 +11,7 @@ Gem::Specification.new do |spec|
   spec.license       = "MIT"
 
   spec.files         = `git ls-files -z`.split("\x0").select { |f|
-    f.match(%r!^((_(includes|layouts|sass|app|(data\/(locales|origin)))|assets)\/|README|LICENSE)!i)
+    f.match(%r!^((_(includes|layouts|sass|(data\/(locales|origin)))|assets)\/|README|LICENSE)!i)
   }
 
   spec.metadata = {

rollup.config.js

@@ -6,35 +6,40 @@ import fs from 'fs';
 import pkg from './package.json';
 
 const SRC_DEFAULT = '_javascript';
-const DIST_DEFAULT = 'assets/js/dist';
-
 const SRC_PWA = `${SRC_DEFAULT}/pwa`;
-const DIST_PWA = '_app';
+const DIST = 'assets/js/dist';
 
 const banner = `/*!
  * ${pkg.name} v${pkg.version} | © ${pkg.since} ${pkg.author} | ${pkg.license} Licensed | ${pkg.homepage}
  */`;
 
+const frontmatter = `---\npermalink: /:basename\n---\n`;
+
 const isProd = process.env.BUILD === 'production';
 
-function cleanup(...directories) {
-  for (const dir of directories) {
-    fs.rm(dir, { recursive: true, force: true }, (err) => {
-      if (err) {
-        console.error(`Failed to remove directory ${dir}: ${err}`);
-      }
-    });
-  }
+function cleanup() {
+  fs.rmSync(DIST, { recursive: true, force: true });
+  console.log(`> Directory "${DIST}" has been cleaned.`);
 }
 
-function build(filename, opts = {}) {
-  const src = opts.src || SRC_DEFAULT;
-  const dist = opts.dist || DIST_DEFAULT;
+function insertFrontmatter() {
+  return {
+    name: 'insert-frontmatter',
+    generateBundle(_, bundle) {
+      for (const chunkOrAsset of Object.values(bundle)) {
+        if (chunkOrAsset.type === 'chunk') {
+          chunkOrAsset.code = frontmatter + chunkOrAsset.code;
+        }
+      }
+    }
+  };
+}
 
+function build(filename, { src = SRC_DEFAULT, jekyll = false } = {}) {
   return {
     input: `${src}/${filename}.js`,
     output: {
-      file: `${dist}/${filename}.min.js`,
+      file: `${DIST}/${filename}.min.js`,
       format: 'iife',
       name: 'Chirpy',
       banner,
@@ -51,12 +56,13 @@ function build(filename, opts = {}) {
       }),
       nodeResolve(),
       yaml(),
-      isProd && terser()
+      isProd && terser(),
+      jekyll && insertFrontmatter()
     ]
   };
 }
 
-cleanup(DIST_DEFAULT, DIST_PWA);
+cleanup();
 
 export default [
   build('commons'),
@@ -65,6 +71,6 @@ export default [
   build('page'),
   build('post'),
   build('misc'),
-  build('app', { src: SRC_PWA, dist: DIST_PWA }),
-  build('sw', { src: SRC_PWA, dist: DIST_PWA })
+  build('app', { src: SRC_PWA, jekyll: true }),
+  build('sw', { src: SRC_PWA, jekyll: true })
 ];

tools/init.sh

@@ -92,7 +92,7 @@ init_files() {
   npm i && npm run build
 
   # track the CSS/JS output
-  _sedi "/.*\/dist$/d;/^_app$/d" .gitignore
+  _sedi "/.*\/dist$/d" .gitignore
 }
 
 commit() {

tools/release.sh

@@ -17,7 +17,6 @@ CONFIG="_config.yml"
 
 CSS_DIST="_sass/dist"
 JS_DIST="assets/js/dist"
-PWA_DIST="_app"
 
 FILES=(
   "$GEM_SPEC"
@@ -118,7 +117,7 @@ build_gem() {
 
   npm run build
   # add CSS/JS distribution files to gem package
-  git add "$CSS_DIST" "$JS_DIST" "$PWA_DIST" -f
+  git add "$CSS_DIST" "$JS_DIST" -f
 
   echo -e "\n> gem build $GEM_SPEC\n"
   gem build "$GEM_SPEC"