bin/states.mjs

Functions

Imports

It imports no other module of this repo. Imported by bin/capsomer.mjs, site/vite.config.ts.

Source

1// Generates components/<name>/states.html from site/states-template.html, the component's
2// doc-page frontmatter (title, summary) and its examples.html (and examples.tsx, if any).
3// Imported by bin/capsomer.mjs (`capsomer states`) and by site/vite.config.ts, so the pages
4// exist before Vite discovers its inputs. The generated pages are gitignored.
5import { existsSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
6import { dirname, join, resolve } from "node:path";
7import { fileURLToPath } from "node:url";
8
9const PKG = resolve(dirname(fileURLToPath(import.meta.url)), "..");
10
11const unquote = (v) => {
12  const t = v.trim();
13  if (t.startsWith("'") && t.endsWith("'") && t.length > 1) return t.slice(1, -1).replace(/''/g, "'");
14  if (t.startsWith('"') && t.endsWith('"') && t.length > 1) return t.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, "\\");
15  return t;
16};
17
18function docMeta(md, fallback) {
19  const m = md.replace(/\r\n/g, "\n").match(/^---\n([\s\S]*?)\n---/);
20  const get = (key) => {
21    const line = m?.[1].split("\n").find((l) => l.startsWith(`${key}:`));
22    return line ? unquote(line.slice(key.length + 1)) : "";
23  };
24  return { title: get("title") || fallback, summary: get("summary") };
25}
26
27const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
28
29// Splits examples.html into the part that belongs in <main> and the elements that belong in
30// the head (<link>) or after the main (<script>). Anything inside a <template> is left alone.
31export function splitExamples(src) {
32  const head = [];
33  const scripts = [];
34  const parts = src.split(/(<template\b[\s\S]*?<\/template>)/g);
35  const body = parts
36    .map((part, i) => {
37      if (i % 2 === 1) return part;
38      return part
39        .replace(/^[ \t]*<link\b[^>]*>[ \t]*\n?/gm, (m) => (head.push(m.trim()), ""))
40        .replace(/^[ \t]*<script\b[\s\S]*?<\/script>[ \t]*\n?/gm, (m) => (scripts.push(m.replace(/\s+$/, "")), ""));
41    })
42    .join("")
43    .replace(/\n{3,}/g, "\n\n")
44    .trim();
45  return { body, head, scripts };
46}
47
48export function renderStates({ template, title, summary, examples, hasTsx }) {
49  const { body, head, scripts } = splitExamples(examples);
50  const after = [...scripts.map((s) => s.replace(/^\s+/, "")), ...(hasTsx ? ['<script type="module" src="./examples.tsx"></script>'] : [])];
51  const fill = {
52    title: escapeHtml(title),
53    summary: escapeHtml(summary),
54    head: head.map((h) => `    ${h}\n`).join(""),
55    examples: body,
56    scripts: after.map((s) => `    ${s}\n`).join(""),
57  };
58  return template.replace(/\{\{(\w+)\}\}/g, (_, k) => fill[k] ?? "");
59}
60
61// Writes states.html for every component that has examples.html or examples.tsx. Returns
62// the component names written.
63export function generateStates(root = PKG) {
64  const template = readFileSync(join(root, "site", "states-template.html"), "utf8");
65  const dir = join(root, "components");
66  const written = [];
67  for (const d of readdirSync(dir, { withFileTypes: true })) {
68    if (!d.isDirectory()) continue;
69    const base = join(dir, d.name);
70    const html = join(base, "examples.html");
71    const tsx = join(base, "examples.tsx");
72    if (!existsSync(html) && !existsSync(tsx)) continue;
73    const mdPath = join(base, `${d.name}.md`);
74    const { title, summary } = docMeta(existsSync(mdPath) ? readFileSync(mdPath, "utf8") : "", d.name);
75    const examples = existsSync(html) ? readFileSync(html, "utf8") : "";
76    writeFileSync(join(base, "states.html"), renderStates({ template, title, summary, examples, hasTsx: existsSync(tsx) }));
77    written.push(d.name);
78  }
79  return written;
80}