Merge branch 'next' into card-image-rounding

Author: claviska

package-lock.json

@@ -1,30 +1,63 @@
+import { parse as HTMLParse } from 'node-html-parser';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { parse } from 'path';
-import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
-import { codeExamplesPlugin } from './_utils/code-examples.js';
-import { copyCodePlugin } from './_utils/copy-code.js';
-import { currentLink } from './_utils/current-link.js';
-import { highlightCodePlugin } from './_utils/highlight-code.js';
+import { anchorHeadingsTransformer } from './_transformers/anchor-headings.js';
+import { codeExamplesTransformer } from './_transformers/code-examples.js';
+import { copyCodeTransformer } from './_transformers/copy-code.js';
+import { currentLinkTransformer } from './_transformers/current-link.js';
+import { highlightCodeTransformer } from './_transformers/highlight-code.js';
+import { outlineTransformer } from './_transformers/outline.js';
 import { getComponents } from './_utils/manifest.js';
 import { markdown } from './_utils/markdown.js';
-// import { formatCodePlugin } from './_utils/format-code.js';
+import { SimulateWebAwesomeApp } from './_utils/simulate-webawesome-app.js';
+// import { formatCodePlugin } from './_plugins/format-code.js';
 // import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
-import nunjucks from 'nunjucks';
 import process from 'process';
 import * as url from 'url';
-import { outlinePlugin } from './_utils/outline.js';
-import { replaceTextPlugin } from './_utils/replace-text.js';
-import { searchPlugin } from './_utils/search.js';
+import { replaceTextPlugin } from './_plugins/replace-text.js';
+import { searchPlugin } from './_plugins/search.js';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const isDev = process.argv.includes('--develop');
 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
 
+async function getPackageData() {
+  return JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+}
+
 export default async function (eleventyConfig) {
-  const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
   const docsDir = path.join(process.env.BASE_DIR || '.', 'docs');
-  const allComponents = getComponents();
+  let packageData = await getPackageData();
+  let allComponents = getComponents();
+
+  const distDir = process.env.UNBUNDLED_DIST_DIRECTORY || path.resolve(__dirname, '../dist');
+  const customElementsManifest = path.join(distDir, 'custom-elements.json');
+  const stylesheets = path.join(distDir, 'styles');
+
+  eleventyConfig.addWatchTarget(customElementsManifest);
+  eleventyConfig.setWatchThrottleWaitTime(10); // in milliseconds
+
+  eleventyConfig.on('eleventy.beforeWatch', async function (changedFiles) {
+    let updatePackageData = false;
+    let updateComponentData = false;
+    changedFiles.forEach(file => {
+      if (file.includes('package.json')) {
+        updatePackageData = true;
+      }
+
+      if (file.includes('custom-elements.json')) {
+        updateComponentData = true;
+      }
+    });
+
+    if (updatePackageData) {
+      packageData = await getPackageData();
+    }
+
+    if (updateComponentData) {
+      allComponents = getComponents();
+    }
+  });
 
   /**
    * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these
@@ -52,7 +85,7 @@ export default async function (eleventyConfig) {
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-  eleventyConfig.addFilter('stripExtension', string => parse(string + '').name);
+  eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
   eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
   // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
   // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
@@ -109,31 +142,6 @@ export default async function (eleventyConfig) {
     return '';
   });
 
-  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
-    // For a server build, we expect a server to run the second transform.
-    if (serverBuild) {
-      return content;
-    }
-
-    // Only run the transform on files nunjucks would transform.
-    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
-      return content;
-    }
-
-    /** This largely mimics what an app would do and just stubs out what we don't care about. */
-    return nunjucks.renderString(content, {
-      // Stub the server EJS shortcodes.
-      currentUser: {
-        hasPro: false,
-      },
-      server: {
-        head: '',
-        loginOrAvatar: '',
-        flashes: '',
-      },
-    });
-  });
-
   // Paired shortcodes - {% shortCode %}content{% endShortCode %}
   eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
 
@@ -152,33 +160,33 @@ export default async function (eleventyConfig) {
   eleventyConfig.setLibrary('md', markdown);
 
   // Add anchors to headings
-  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
-
-  // Add an outline to the page
-  eleventyConfig.addPlugin(
-    outlinePlugin({
-      container: '#content',
-      target: '.outline-links',
-      selector: 'h2, h3',
-      ifEmpty: doc => {
-        doc.querySelector('#outline')?.remove();
-      },
-    }),
-  );
-
-  // Add current link classes
-  eleventyConfig.addPlugin(currentLink());
-
-  // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
-
-  // Highlight code blocks with Prism
-  eleventyConfig.addPlugin(highlightCodePlugin());
+  eleventyConfig.addTransform('doc-transforms', function (content) {
+    let doc = HTMLParse(content, { blockTextElements: { code: true } });
+
+    const transformers = [
+      anchorHeadingsTransformer({ container: '#content' }),
+      outlineTransformer({
+        container: '#content',
+        target: '.outline-links',
+        selector: 'h2, h3',
+        ifEmpty: doc => {
+          doc.querySelector('#outline')?.remove();
+        },
+      }),
+      // Add current link classes
+      currentLinkTransformer(),
+      codeExamplesTransformer(),
+      highlightCodeTransformer(),
+      copyCodeTransformer(),
+    ];
+
+    for (const transformer of transformers) {
+      transformer.call(this, doc);
+    }
 
-  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin);
+    return doc.toString();
+  });
 
-  // Various text replacements
   eleventyConfig.addPlugin(
     replaceTextPlugin([
       {
@@ -222,15 +230,14 @@ export default async function (eleventyConfig) {
   // }
 
   let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
-  fs.cpSync(assetsDir, path.join(eleventyConfig.directories.output, 'assets'), { recursive: true });
+  const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
+  fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
 
   for (let glob of passThrough) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
   // // SSR plugin
-  // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with
-  // // the nunjucks 2nd transform.
   // if (!isDev) {
   //   //
   //   // Problematic components in SSR land:
@@ -253,6 +260,23 @@ export default async function (eleventyConfig) {
   //     componentModules,
   //   });
   // }
+
+  if (!isDev) {
+    eleventyConfig.addTransform('simulate-webawesome-app', function (content) {
+      // For a server build, we expect a server to run the second transform.
+      if (serverBuild) {
+        return content;
+      }
+
+      // Only run the transform on files nunjucks would transform.
+      if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+        return content;
+      }
+
+      /** This largely mimics what an app would do and just stubs out what we don't care about. */
+      return SimulateWebAwesomeApp(content);
+    });
+  }
 }
 
 export const config = {

packages/webawesome/docs/.eleventy.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-invalid-this */
+import { readFileSync } from 'fs';
 import { mkdir, writeFile } from 'fs/promises';
 import lunr from 'lunr';
 import { parse } from 'node-html-parser';
@@ -23,19 +24,22 @@ export function searchPlugin(options = {}) {
     ...options,
   };
 
+  // Hoist above so that it can "cache" properly for incremental builds.
   return function (eleventyConfig) {
-    const pagesToIndex = new Map();
+    let pagesToIndex = new Map();
 
     eleventyConfig.addPreprocessor('exclude-unlisted-from-search', '*', function (data, content) {
       if (data.unlisted) {
         // no-op
+        pagesToIndex.delete(data.page.inputPath);
       } else {
-        pagesToIndex.set(data.page.inputPath, {});
+        pagesToIndex.set(data.page.inputPath, true);
       }
 
       return content;
     });
 
+    // With incremental builds we need this to be last in case stuff was added from metadata. _BUT_ in incremental builds, not every page is added to the "transform".
     eleventyConfig.addTransform('search', function (content) {
       if (!pagesToIndex.has(this.page.inputPath)) {
         return content;
@@ -67,11 +71,30 @@ export function searchPlugin(options = {}) {
       return content;
     });
 
-    eleventyConfig.on('eleventy.after', ({ directories }) => {
+    eleventyConfig.on('eleventy.after', async ({ directories }) => {
       const { output } = directories;
       const outputFilename = path.resolve(join(output, 'search.json'));
+      const cachedPages = path.resolve(join(output, 'cached_pages.json'));
+
+      function getCachedPages() {
+        let content = { pages: [] };
+        try {
+          content = JSON.parse(readFileSync(cachedPages));
+        } catch (e) {}
+
+        const cachedPagesMap = new Map(content.pages);
+        for (const [key, value] of cachedPagesMap.entries()) {
+          // A page uses a cached value if `true` and it didnt get its value set in the "transform" hook. This is to get around the limitation of incremental builds not going over every file in transform.
+          if (pagesToIndex.get(key) === true) {
+            pagesToIndex.set(key, value);
+          }
+        }
+      }
+
       const map = [];
-      const searchIndex = lunr(async function () {
+
+      getCachedPages();
+      const searchIndex = lunr(function () {
         let index = 0;
 
         this.ref('id');
@@ -84,9 +107,11 @@ export function searchPlugin(options = {}) {
           map[index] = { title: page.title, description: page.description, url: page.url };
           index++;
         }
-        await mkdir(dirname(outputFilename), { recursive: true });
-        await writeFile(outputFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
       });
+
+      await mkdir(dirname(outputFilename), { recursive: true });
+      await writeFile(outputFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
+      await writeFile(cachedPages, JSON.stringify({ pages: [...pagesToIndex.entries()] }, null, 2));
     });
   };
 }

packages/webawesome/docs/_utils/replace-text.js renamed to packages/webawesome/docs/_plugins/replace-text.js

@@ -0,0 +1,81 @@
+import { parse } from 'node-html-parser';
+import slugify from 'slugify';
+import { v4 as uuid } from 'uuid';
+
+function createId(text) {
+  let slug = slugify(String(text), {
+    remove: /[^\w|\s]/g,
+    lower: true,
+  });
+
+  // ids must start with a letter
+  if (!/^[a-z]/i.test(slug)) {
+    slug = `wa_${slug}`;
+  }
+
+  return slug;
+}
+
+/**
+ * Eleventy plugin to add anchors to headings to content.
+ */
+export function anchorHeadingsTransformer(options = {}) {
+  options = {
+    container: 'body',
+    headingSelector: 'h2, h3, h4, h5, h6',
+    anchorLabel: 'Jump to heading',
+    ...options,
+  };
+
+  /** doc is a parsed HTML document */
+  return function (doc) {
+    const container = doc.querySelector(options.container);
+
+    if (!container) {
+      return doc;
+    }
+
+    // Look for headings
+    let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
+    container.querySelectorAll(selector).forEach(heading => {
+      const hasAnchor = heading.querySelector('a');
+      const existingId = heading.getAttribute('id');
+      const clone = parse(heading.outerHTML);
+
+      // Create a clone of the heading so we can remove [data-no-anchor] elements from the text content
+      clone.querySelectorAll('[data-no-anchor]').forEach(el => el.remove());
+
+      if (hasAnchor) {
+        return;
+      }
+
+      let id = existingId;
+      if (!id) {
+        const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
+        id = slug;
+        let suffix = 1;
+
+        // Make sure the slug is unique in the document
+        while (doc.getElementById(id) !== null) {
+          id = `${slug}-${++suffix}`;
+        }
+      }
+
+      // Create the anchor
+      const anchor = parse(`
+        <a href="#${encodeURIComponent(id)}">
+          <span class="wa-visually-hidden"></span>
+          <span aria-hidden="true">#</span>
+        </a>
+      `);
+      anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;
+
+      // Update the heading
+      if (!existingId) {
+        heading.setAttribute('id', id);
+      }
+      heading.classList.add('anchor-heading');
+      heading.appendChild(anchor);
+    });
+  };
+}