docs: generate todos without writing a file

Author: bennypowers

.eleventy.cjs

@@ -6,26 +6,34 @@ const directoryOutputPlugin = require('@11ty/eleventy-plugin-directory-output');
 const pfeAssetsPlugin = require('./docs/_plugins/pfe-assets.cjs');
 const customElementsManifestPlugin = require('./docs/_plugins/custom-elements-manifest.cjs');
 const orderTagsPlugin = require('./docs/_plugins/order-tags.cjs');
+const todosPlugin = require('./docs/_plugins/todos.cjs');
 
 const markdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');
 
 const pluginToc = require('eleventy-plugin-toc');
 
-module.exports = function(eleventyConfig) {
-  const markdownLib = markdownIt({ html: true })
-    .use(markdownItAnchor);
+const markdownLib = markdownIt({ html: true })
+  .use(markdownItAnchor);
 
+module.exports = function(eleventyConfig) {
   eleventyConfig.setLibrary('md', markdownLib);
 
   eleventyConfig.setQuietMode(process.env.npm_config_quiet);
+
   eleventyConfig.setWatchThrottleWaitTime(500);
 
-  /** Table of Contents Shortcode */
-  eleventyConfig.addPlugin(pluginToc, {
-    tags: ['h2', 'h3', 'h4'],
+  eleventyConfig.setBrowserSyncConfig({
+    open: 'local',
+    server: {
+      baseDir: '_site',
+      middleware: [compress()],
+    },
   });
 
+  /** Table of Contents Shortcode */
+  eleventyConfig.addPlugin(pluginToc, { tags: ['h2', 'h3', 'h4'] });
+
   /** Copy and manage site assets from the monorepo */
   eleventyConfig.addPlugin(pfeAssetsPlugin);
 
@@ -38,10 +46,19 @@ module.exports = function(eleventyConfig) {
   /** Collections to organize by order instead of date */
   eleventyConfig.addPlugin(orderTagsPlugin, { tags: ['develop'] });
 
-  eleventyConfig.addFilter('prettyDate', function(dateStr) {
-    return new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date(dateStr));
+  /** list todos */
+  eleventyConfig.addPlugin(todosPlugin);
+
+  /** format date strings */
+  eleventyConfig.addFilter('prettyDate', function(dateStr, options = {}) {
+    const { dateStyle = 'medium' } = options;
+    return new Intl.DateTimeFormat('en-US', { dateStyle })
+      .format(new Date(dateStr));
   });
 
+  /** fancy syntax highlighting with diff support */
+  eleventyConfig.addPlugin(syntaxHighlight);
+
   /** Add IDs to heading elements */
   eleventyConfig.addPlugin(anchorsPlugin, {
     formatter(element, existingids) {
@@ -59,9 +76,6 @@ module.exports = function(eleventyConfig) {
     },
   });
 
-  eleventyConfig.addPlugin(syntaxHighlight);
-
-  eleventyConfig.setQuietMode(true);
   eleventyConfig.addPlugin(directoryOutputPlugin, {
     // Customize columns
     columns: {
@@ -73,46 +87,6 @@ module.exports = function(eleventyConfig) {
     warningFileSize: 400 * 1000,
   });
 
-  eleventyConfig.on('eleventy.before', async function generateTodos() {
-    const start = performance.now();
-    const fs = require('fs/promises');
-    const leasot = require('leasot');
-    const path = require('path');
-    const { promisify } = require('util');
-    const glob = promisify(require('glob'));
-
-    const todos = [];
-
-    const files = await glob('{elements,core,tools}/**/*[!.spec].ts', {
-      ignore: '**/node_modules/**/*',
-    });
-
-    for (const filename of files) {
-      const contents = await fs.readFile(filename, 'utf8');
-      const extension = path.extname(filename);
-      const parsed = leasot.parse(contents, { extension, filename });
-      const output = leasot.report(parsed, 'raw');
-      todos.push(...output);
-    }
-
-    await fs.writeFile(
-      path.join(__dirname, 'docs', '_data', 'todos.json'),
-      JSON.stringify(todos, null, 2),
-      'utf8'
-    );
-    const end = performance.now();
-    // eslint-disable-next-line no-console
-    console.log(`Generated TODOs in ${(end - start) / 1000}s`);
-  });
-
-  eleventyConfig.setBrowserSyncConfig({
-    open: 'local',
-    server: {
-      baseDir: '_site',
-      middleware: [compress()],
-    },
-  });
-
   return {
     dir: {
       input: './docs',

docs/_plugins/todos.cjs

@@ -0,0 +1,43 @@
+const fs = require('fs/promises');
+const leasot = require('leasot');
+const path = require('path');
+const { promisify } = require('util');
+const glob = promisify(require('glob'));
+
+const cache = new Map();
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addGlobalData('todos', async function generateTodos() {
+    const start = performance.now();
+
+    const todos = [];
+
+    const files = await glob('{elements,core,tools}/**/*[!.spec].ts', {
+      ignore: '**/node_modules/**/*',
+    });
+
+    const cacheKey = files.join('--');
+    const cached = cache.get(cacheKey);
+
+    if (cached) {
+      return cached;
+    }
+
+    for (const filename of files) {
+      const contents = await fs.readFile(filename, 'utf8');
+      const extension = path.extname(filename);
+      const parsed = leasot.parse(contents, { extension, filename });
+      const output = leasot.report(parsed, 'raw');
+      todos.push(...output);
+    }
+
+    cache.set(cacheKey, todos);
+
+    const end = performance.now();
+
+    // eslint-disable-next-line no-console
+    console.log(`[TODOs] Generated in ${(end - start) / 1000}s`);
+
+    return todos;
+  });
+};