Build the API inside rollup.config.js

.eslintrc.json

@@ -25,6 +25,13 @@
     "prefer-promise-reject-errors": "off",
     "class-methods-use-this": "off",
     "jsdoc/no-undefined-types": "off",
-    "no-restricted-syntax": "off"
+    "no-restricted-syntax": "off",
+    "import/no-extraneous-dependencies": [
+      "error", {
+        "devDependencies": [
+          "src/js/utils/generateApi.js"
+        ]
+      }
+    ]
   }
 }

package.json

@@ -11,8 +11,7 @@
     "lint:fix": "eslint src/ --fix",
     "start": "firebase serve --only hosting",
     "build": "rollup -c",
-    "watch": "rollup -c -w",
-    "api:generate": "node src/js/utils/generateApi.js"
+    "watch": "rollup -c -w"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.12.13",
@@ -24,8 +23,10 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-jsdoc": "^30.7.13",
+    "front-matter": "^4.0.2",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
+    "marked": "^2.0.1",
     "rollup": "^2.38.5",
     "rollup-plugin-execute": "^1.1.1",
     "rollup-plugin-import-css": "^2.0.0"
@@ -34,9 +35,5 @@
     "hooks": {
       "pre-commit": "npm run lint"
     }
-  },
-  "dependencies": {
-    "front-matter": "^4.0.2",
-    "marked": "^2.0.1"
   }
 }

rollup.config.js

@@ -1,7 +1,15 @@
 import css from 'rollup-plugin-import-css';
+import generateApi from './src/js/utils/generateApi.js';
 import generateAssetsToCache from './src/js/utils/generateAssetsToCache';
 
-import api from './public/api.json';
+async function setupApi() {
+  try {
+    const api = await generateApi();
+    await generateAssetsToCache(api);
+  } catch (err) {
+    console.error(err);
+  }
+}
 
 export default [
   {
@@ -21,7 +29,7 @@ export default [
       format: 'cjs',
     },
     plugins: [
-      generateAssetsToCache(api),
+      setupApi(),
     ],
   },
 ];

src/js/sw/cache.js

@@ -15,11 +15,10 @@ export default [
   '/images/safari-pinned-tab.svg',
   '/index.html',
   '/styles.css',
+  'https://storage.googleapis.com/wdm-assets/images/http-203/http-203-background-fetch.jpg',
+  'https://storage.googleapis.com/wdm-assets/images/http-203/http-203-polyfills.jpg',
+  'https://storage.googleapis.com/wdm-assets/images/http-203/http-203-for-loops.jpg',
   'https://storage.googleapis.com/wdm-assets/images/gui-challenges/centering.jpg',
   'https://storage.googleapis.com/wdm-assets/images/gui-challenges/sidenav.jpg',
   'https://storage.googleapis.com/wdm-assets/images/gui-challenges/tabs.jpg',
-  'https://storage.googleapis.com/wdm-assets/images/http-203/http-203-polyfills.jpg',
-  'https://storage.googleapis.com/wdm-assets/images/http-203/http-203-polyfills.jpg',
-  'https://storage.googleapis.com/wdm-assets/images/http-203/http-203-for-loops.jpg',
-  'https://storage.googleapis.com/wdm-assets/images/http-203/http-203-old-vs-new-js.jpg',
 ];

src/js/utils/generateApi.js

@@ -3,7 +3,7 @@
  */
 
 const fs = require('fs');
-const frontmatter = require('front-matter');
+const frontMatter = require('front-matter');
 const marked = require('marked');
 
 const apiSrcPath = 'src/api/';
@@ -59,7 +59,7 @@ const getVideosData = (categories) => {
       filenames.forEach(
         (filename) => {
           const textData = fs.readFileSync(`${contentPath}${filename}`, { encoding: 'utf-8' });
-          const fmContent = frontmatter(textData);
+          const fmContent = frontMatter(textData);
           const apiEntry = {
             id: filename.replace('.md', ''),
             ...fmContent.attributes,
@@ -74,11 +74,24 @@ const getVideosData = (categories) => {
   return videosData;
 };
 
-const categories = getCategoriesData();
-const apiData = {
-  videos: getVideosData(categories),
-  categories,
-};
-const apiDataJSON = JSON.stringify(apiData, undefined, 2);
+/**
+ * Generates the JSON API.
+ *
+ * @returns {object} The API object.
+ */
+export default async function generateApi() {
+  const start = Date.now();
+  const categories = getCategoriesData();
+  const apiData = {
+    videos: getVideosData(categories),
+    categories,
+  };
+  const apiDataJSON = JSON.stringify(apiData, undefined, 2);
+
+  fs.writeFile(apiDestFile, apiDataJSON, { encoding: 'utf-8' }, () => {
+    const time = Date.now() - start;
+    process.stdout.write(`\x1b[32mcreated \x1b[1m${apiDestFile}\x1b[22m in ${time}ms\x1b[89m\n`);
+  });
 
-fs.writeFileSync(apiDestFile, apiDataJSON, { encoding: 'utf-8' });
+  return apiData;
+}

src/js/utils/generateAssetsToCache.js

@@ -24,7 +24,7 @@ async function* getFiles(dir) {
 /**
  * Generates the cached assets for the service worker.
  *
- * @param {Array} api The video files API.
+ * @param {object} api The video files API.
  */
 export default async function generateAssetsToCache(api) {
   const start = Date.now();
@@ -55,6 +55,6 @@ export default async function generateAssetsToCache(api) {
 
   fs.writeFile('src/js/sw/cache.js', data, () => {
     const time = Date.now() - start;
-    process.stdout.write(`created src/js/sw/cache.js in ${time}ms\n`);
+    process.stdout.write(`\x1b[32mcreated \x1b[1msrc/js/sw/cache.js\x1b[22m in ${time}ms\x1b[89m\n`);
   });
 }