@astryxdesign/cli 0.7.12-canary.f543ec7 → 0.7.12

package/foundation/render/charts.mjs

@@ -0,0 +1,216 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Charts in a rendered page. A recharts chart draws only after its
+ * effects run, and a ResponsiveContainer measures its parent in a browser, so
+ * a server render leaves them empty. The render worker draws each one again
+ * in a small document, at the size the container starts at, and puts the
+ * drawing in its place.
+ *
+ * @input The chart elements the server render set aside.
+ * @output Their markup, and the CSS that lets a drawn chart fit its width.
+ * @position foundation/render — read by page-worker.mjs and render-page.mjs.
+ */
+
+/** The global the render worker installs to set charts aside. SYNC: page-worker.mjs assigns it by this name. */
+export const CHART_GLOBAL = '__astryxRenderChart';
+
+/** The recharts exports that draw a chart, besides ResponsiveContainer. */
+export const CHART_ROOTS = new Set([
+  'AreaChart',
+  'BarChart',
+  'ComposedChart',
+  'FunnelChart',
+  'LineChart',
+  'PieChart',
+  'RadarChart',
+  'RadialBarChart',
+  'Sankey',
+  'ScatterChart',
+  'SunburstChart',
+  'Treemap',
+]);
+
+/** Widest starting size for a chart its page lets fill the width. */
+const CHART_MAX_WIDTH = 800;
+
+/** Height of a chart that names none. */
+const CHART_HEIGHT = 300;
+
+/** Height up to which a chart counts as a sparkline. */
+const SPARKLINE_HEIGHT = 60;
+
+/**
+ * The size a ResponsiveContainer starts at: its own numbers where it has
+ * them. Otherwise the width follows the height: six times it for a
+ * sparkline, which sits in a narrow card or a table cell, and two and a half
+ * times it for a taller chart. The drawing then scales to the width the
+ * page gives it, so its text stays near its own size in most layouts.
+ * @param {{width?: unknown, height?: unknown, aspect?: unknown}} props
+ * @returns {{width: number, height: number}}
+ */
+export function chartSize({width, height, aspect}) {
+  const ratio = typeof aspect === 'number' && aspect > 0 ? aspect : null;
+  const w = typeof width === 'number' && width > 0 ? width : null;
+  const h =
+    typeof height === 'number' && height > 0
+      ? height
+      : ratio
+        ? (w ?? CHART_MAX_WIDTH) / ratio
+        : CHART_HEIGHT;
+  return {
+    width:
+      w ??
+      (ratio
+        ? h * ratio
+        : Math.min(CHART_MAX_WIDTH, Math.round(h * (h <= SPARKLINE_HEIGHT ? 6 : 2.5)))),
+    height: h,
+  };
+}
+
+/**
+ * A chart drawn at its starting size scales to the width the page gives it
+ * and keeps its shape, so it never overflows its card. Its legend stays out
+ * of the scaled picture, so its text never covers the chart however narrow
+ * the page is. A horizontal legend takes its own row under the picture, or
+ * above it when it asks for the top. A vertical legend on one side sits
+ * beside the picture, on that side.
+ */
+export const CHART_CSS =
+  '.recharts-responsive-container{width:100%}' +
+  '.recharts-responsive-container>.recharts-wrapper{width:100%!important;height:auto!important;display:flex;flex-direction:column}' +
+  // Only the chart's own picture scales; a legend's icons keep their size.
+  '.recharts-responsive-container>.recharts-wrapper>svg.recharts-surface{width:100%!important;height:auto!important}' +
+  '.recharts-responsive-container>.recharts-wrapper>.recharts-legend-wrapper{position:static!important;width:auto!important;height:auto!important}' +
+  '.recharts-responsive-container>.recharts-wrapper:not([data-legend-side])>.recharts-legend-wrapper[style*="bottom"]{order:1}' +
+  '.recharts-responsive-container>.recharts-wrapper[data-legend-side]{flex-direction:row;align-items:flex-start}' +
+  // A side is physical, as in a chart of fixed size: a right-to-left page
+  // reverses the row so the legend stays on the side it asked for.
+  '.recharts-responsive-container>.recharts-wrapper[data-legend-side]:dir(rtl){flex-direction:row-reverse}' +
+  '.recharts-responsive-container>.recharts-wrapper[data-legend-side][data-legend-middle]{align-items:center}' +
+  '.recharts-responsive-container>.recharts-wrapper[data-legend-side][data-legend-bottom]{align-items:flex-end}' +
+  '.recharts-responsive-container>.recharts-wrapper[data-legend-side]>svg.recharts-surface{flex:1 1 0;min-width:0}' +
+  '.recharts-responsive-container>.recharts-wrapper[data-legend-side]>.recharts-legend-wrapper{flex:none}' +
+  // recharts puts the legend before the picture; one on the right goes after it.
+  '.recharts-responsive-container>.recharts-wrapper[data-legend-side="right"]>.recharts-legend-wrapper{order:1}';
+
+/**
+ * Mark each container chart whose legend is vertical and on one side with
+ * that side, and whether it sits at the bottom or the middle, for
+ * {@link CHART_CSS}. A vertically centered legend has a `top` near the
+ * middle (no room is kept for it in a container chart). A vertical legend
+ * centered across takes its own row, as a horizontal one does.
+ * @param {any} root the element the charts were drawn in
+ */
+export function markLegends(root) {
+  for (const wrapper of root.querySelectorAll('.recharts-responsive-container > .recharts-wrapper')) {
+    const legend = wrapper.querySelector(':scope > .recharts-legend-wrapper');
+    if (!legend) continue;
+    const vertical = [...legend.querySelectorAll('.recharts-legend-item')].some(item =>
+      /display:\s*block/.test(item.getAttribute('style') ?? ''),
+    );
+    if (!vertical) continue;
+    const style = legend.getAttribute('style') ?? '';
+    // recharts places a right-aligned legend with `right`, a left-aligned one
+    // at the chart's left margin, and a centered one half way across.
+    const width = Number(wrapper.getAttribute('width'));
+    const left = Number(/(?:^|;)\s*left\s*:\s*(-?[\d.]+)px/.exec(style)?.[1]);
+    const side = /(?:^|;)\s*right\s*:/.test(style)
+      ? 'right'
+      : Number.isFinite(left) && width > 0 && left < width * 0.2
+        ? 'left'
+        : null;
+    if (!side) continue;
+    wrapper.setAttribute('data-legend-side', side);
+    const top = Number(/(?:^|;)\s*top\s*:\s*(-?[\d.]+)px/.exec(style)?.[1]);
+    const height = Number(wrapper.getAttribute('height'));
+    if (/(?:^|;)\s*bottom\s*:/.test(style)) wrapper.setAttribute('data-legend-bottom', '');
+    else if (top > 0 && height > 0 && top > height * 0.2) wrapper.setAttribute('data-legend-middle', '');
+  }
+}
+
+/**
+ * The box a legend would measure in a browser, estimated from its items, so
+ * a chart of fixed size keeps room for it where its props place it: rows for
+ * a horizontal legend, one line per item for a vertical one. A chart sized by
+ * its container keeps no room, because its legend takes its own row.
+ * @param {any} el the legend wrapper
+ */
+function legendBox(el) {
+  if (el.closest?.('.recharts-responsive-container')) return box(0, 0);
+  const items = [...el.querySelectorAll('.recharts-legend-item')];
+  const widths = items.map(item => 14 + 4 + 7 * (item.textContent ?? '').length + 10);
+  const vertical = items.some(item => /display:\s*block/.test(item.getAttribute('style') ?? ''));
+  if (vertical) return box(Math.max(0, ...widths), 20 * items.length + 10);
+  // A row as wide as the legend's own width holds the items it can; the rest
+  // wrap onto more rows.
+  const total = widths.reduce((a, b) => a + b, 0);
+  const room = Number(/(?:^|;)\s*width\s*:\s*([\d.]+)px/.exec(el.getAttribute('style') ?? '')?.[1]);
+  const rows = room > 0 ? Math.max(1, Math.ceil(total / room)) : 1;
+  return box(Math.min(total, room > 0 ? room : total), 24 * rows);
+}
+
+/** @param {number} width @param {number} height */
+const box = (width, height) => ({x: 0, y: 0, top: 0, left: 0, right: width, bottom: height, width, height});
+
+/** Font size of text that names none, as an axis tick's. */
+const TEXT_SIZE = 14;
+
+/**
+ * The box recharts' measurement span would measure: its text at its font
+ * size, about 0.6 em per character and 1.2 em high.
+ * @param {any} el
+ */
+function textBox(el) {
+  const fromStyle = el.style?.fontSize ?? /(?:^|;)\s*font-size\s*:\s*([^;]+)/.exec(el.getAttribute?.('style') ?? '')?.[1];
+  const size = Number.parseFloat(String(fromStyle ?? '')) || TEXT_SIZE;
+  return box(Math.round(String(el.textContent ?? '').length * size * 0.6), Math.round(size * 1.2));
+}
+
+/**
+ * Give this thread the small document a chart draws in: no layout, no
+ * motion, and no frames to wait for.
+ * @returns {Promise<void>}
+ */
+export async function chartDocument() {
+  const {parseHTML} = await import('linkedom');
+  const {window} = parseHTML('<!doctype html><html><head></head><body></body></html>');
+  const g = /** @type {any} */ (globalThis);
+  const quiet = () => ({
+    matches: true,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+  });
+  Object.assign(window, {
+    matchMedia: quiet,
+    // Every style property reads as empty, as for an element with no CSS.
+    getComputedStyle: () => new Proxy({getPropertyValue: () => ''}, {get: (o, k) => (k in o ? /** @type {any} */ (o)[k] : '')}),
+    requestAnimationFrame: (/** @type {(t: number) => void} */ cb) => setTimeout(() => cb(Date.now()), 0),
+    cancelAnimationFrame: (/** @type {any} */ id) => clearTimeout(id),
+    ResizeObserver: class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  });
+  g.window = window;
+  g.document = window.document;
+  g.matchMedia = window.matchMedia;
+  g.getComputedStyle = window.getComputedStyle;
+  g.requestAnimationFrame = window.requestAnimationFrame;
+  g.cancelAnimationFrame = window.cancelAnimationFrame;
+  g.ResizeObserver = window.ResizeObserver;
+  // Nothing is laid out, so every box measures zero, except a legend's and
+  // the span recharts measures text with, which are estimated: the chart
+  // keeps room for its legend, and lays out its axis labels as in a browser.
+  Object.defineProperty(window.Element.prototype, 'getBoundingClientRect', {
+    configurable: true,
+    writable: true,
+    value() {
+      if (this.getAttribute?.('id') === 'recharts_measurement_span') return textBox(this);
+      return String(this.getAttribute?.('class') ?? '').includes('recharts-legend-wrapper') ? legendBox(this) : box(0, 0);
+    },
+  });
+}

package/foundation/render/embedded-imports.d.mts

@@ -23,12 +23,12 @@ export function importSpecifiers(source: string, file: string): string[];
  */
 export function assetRefsIn(text: string): string[];
 /**
- * Path aliases (`compilerOptions.paths`) of the project that holds `dir`, as
- * absolute prefixes: `"@/*": ["./src/*"]` becomes `["@/", "<root>/src/"]`.
+ * The path aliases (`compilerOptions.paths`) of the project that holds
+ * `dir`, by TypeScript's rules (see ts-paths.mjs).
  * @param {string} dir
- * @returns {[string, string][]}
+ * @returns {import('./ts-paths.mjs').PathPattern[]}
  */
-export function receivingAliases(dir: string): [string, string][];
+export function receivingAliases(dir: string): import("./ts-paths.mjs").PathPattern[];
 /**
  * @typedef {object} Reach
  * @property {boolean} relative - Reached by a relative import (or it is the
@@ -40,8 +40,8 @@ export function receivingAliases(dir: string): [string, string][];
  * The embedded files the page reaches through its imports.
  * @param {{path: string, base64: string}[]} files the embedded files, page
  *   first; every path appears once (callers refuse duplicates first)
- * @param {{aliases?: [string, string][]}} [options] the receiving project's
- *   path aliases, absolute (see receivingAliases)
+ * @param {{aliases?: import('./ts-paths.mjs').PathPattern[]}} [options] the
+ *   receiving project's path aliases (see receivingAliases)
  * @returns {{reached: Map<string, Reach>, missing: string[]}} the reached
  *   tree paths, and the relative imports the file does not carry
  */
@@ -49,7 +49,7 @@ export function reachableFiles(files: {
     path: string;
     base64: string;
 }[], { aliases }?: {
-    aliases?: [string, string][];
+    aliases?: import("./ts-paths.mjs").PathPattern[];
 }): {
     reached: Map<string, Reach>;
     missing: string[];

package/foundation/render/embedded-imports.mjs

@@ -18,6 +18,7 @@ import * as path from 'node:path';
 import {parse} from '@babel/parser';
 import {PAGE_EXTENSIONS} from './embedded-files.mjs';
 import postcss from 'postcss';
+import {matchPath, readPathsIn} from './ts-paths.mjs';
 import {isAssetPath} from './assets.mjs';
 
 /**
@@ -131,41 +132,17 @@ function scanModule(source, file) {
 }
 
 /**
- * Path aliases (`compilerOptions.paths`) of the project that holds `dir`, as
- * absolute prefixes: `"@/*": ["./src/*"]` becomes `["@/", "<root>/src/"]`.
+ * The path aliases (`compilerOptions.paths`) of the project that holds
+ * `dir`, by TypeScript's rules (see ts-paths.mjs).
  * @param {string} dir
- * @returns {[string, string][]}
+ * @returns {import('./ts-paths.mjs').PathPattern[]}
  */
 export function receivingAliases(dir) {
   let d = dir;
   while (!fs.existsSync(d) && path.dirname(d) !== d) d = path.dirname(d);
   for (;;) {
-    for (const name of ['tsconfig.json', 'jsconfig.json']) {
-      const file = path.join(d, name);
-      if (!fs.existsSync(file)) continue;
-      try {
-        const text = fs
-          .readFileSync(file, 'utf8')
-          .replace(/("(?:[^"\\]|\\.)*")|\/\/[^\n]*|\/\*[\s\S]*?\*\//g, (_, str) => str ?? '')
-          .replace(/,(\s*[}\]])/g, '$1');
-        const options = JSON.parse(text)?.compilerOptions ?? {};
-        const base = path.resolve(d, typeof options.baseUrl === 'string' ? options.baseUrl : '.');
-        /** @type {[string, string][]} */
-        const out = [];
-        for (const [key, targets] of Object.entries(options.paths ?? {})) {
-          const target = Array.isArray(targets) ? targets[0] : undefined;
-          if (typeof target !== 'string') continue;
-          if (key.endsWith('/*') && target.endsWith('/*')) {
-            out.push([key.slice(0, -1), `${path.resolve(base, target.slice(0, -2))}${path.sep}`]);
-          } else if (!key.includes('*') && !target.includes('*')) {
-            out.push([key, path.resolve(base, target)]);
-          }
-        }
-        return out;
-      } catch {
-        return [];
-      }
-    }
+    const found = readPathsIn(d);
+    if (found) return found;
     if (fs.existsSync(path.join(d, 'package.json'))) return [];
     const up = path.dirname(d);
     if (up === d) return [];
@@ -185,8 +162,8 @@ export function receivingAliases(dir) {
  * The embedded files the page reaches through its imports.
  * @param {{path: string, base64: string}[]} files the embedded files, page
  *   first; every path appears once (callers refuse duplicates first)
- * @param {{aliases?: [string, string][]}} [options] the receiving project's
- *   path aliases, absolute (see receivingAliases)
+ * @param {{aliases?: import('./ts-paths.mjs').PathPattern[]}} [options] the
+ *   receiving project's path aliases (see receivingAliases)
  * @returns {{reached: Map<string, Reach>, missing: string[]}} the reached
  *   tree paths, and the relative imports the file does not carry
  */
@@ -285,29 +262,61 @@ export function reachableFiles(files, {aliases = []} = {}) {
         if (fresh) queue.push(target);
         continue;
       }
-      for (const [key, aliasTarget] of aliases) {
-        const named = key.endsWith('/') ? bare.startsWith(key) : bare === key;
-        if (!named) continue;
-        // A wildcard alias names a path under its target; an exact alias
-        // (`"@theme": ["./src/theme.ts"]`) names its target file itself.
-        const exactExt = key.endsWith('/') ? '' : path.extname(aliasTarget);
-        const rest = key.endsWith('/')
-          ? bare.slice(key.length)
-          : path.basename(aliasTarget, exactExt);
-        const hit = rest ? bySuffix(rest) : null;
-        if (!hit) break;
-        const target = hit.path;
-        // The alias names the module without its extension or index file;
-        // the file keeps both: `@/c/Header` -> `<alias target>/c/Header.tsx`.
-        const abs = key.endsWith('/')
-          ? aliasTarget + hit.tail
-          : exactExt
-            ? aliasTarget
-            : aliasTarget + hit.tail.slice(rest.length);
-        const {r, fresh} = reach(target);
-        r.aliased.add(abs);
-        if (fresh) queue.push(target);
-        break;
+      const match = matchPath(aliases, bare);
+      if (match) {
+        // Each target in order: the file the alias names, matched in the
+        // tree by the path's tail, and placed where this project's target
+        // puts it (`@/c/Header` -> `<target>/c/Header.tsx`). The target whose
+        // folders match the most whole segments of the sent path above the
+        // file wins; with no match, the first target does.
+        /** @type {{abs: string, hit: {path: string, tail: string}, score: number}[]} */
+        const options = [];
+        for (const target of match.pattern.targets) {
+          const named = target.replace('*', match.capture);
+          const ext = path.extname(named);
+          const star = target.indexOf('*');
+          // The tail starts at the path segment that holds the `*`, so text
+          // before it (`icons/icon-*`) is part of the file name.
+          const cut = star === -1 ? -1 : target.lastIndexOf(path.sep, star) + 1;
+          const rest = (star === -1 ? path.basename(named, ext) : target.slice(cut).replace('*', match.capture))
+            .split(path.sep)
+            .join('/')
+            .replace(/^\/+/, '');
+          const hit = rest ? bySuffix(rest) : null;
+          if (!hit) continue;
+          // The file keeps its own extension or index: `<target>/c/Header` ->
+          // `<target>/c/Header.tsx`.
+          const abs =
+            star !== -1
+              ? target.slice(0, cut) + hit.tail
+              : ext
+                ? named
+                : named + hit.tail.slice(rest.length);
+          // The folders that hold the target's `*` (or, for a target with
+          // none, the target's own folders), against the folders of the sent
+          // path above the part the alias named, from the nearest up.
+          const targetFolders = (star === -1 ? path.dirname(named) : target.slice(0, cut)).split(path.sep).filter(Boolean);
+          const sentTail = hit.tail;
+          const sentFolders = hit.path.slice(0, hit.path.length - sentTail.length).split('/').filter(Boolean);
+          let score = 0;
+          while (
+            score < sentFolders.length &&
+            score < targetFolders.length &&
+            sentFolders[sentFolders.length - 1 - score] === targetFolders[targetFolders.length - 1 - score]
+          ) {
+            score += 1;
+          }
+          options.push({abs, hit, score});
+        }
+        const chosen = options.reduce(
+          (/** @type {(typeof options)[number] | undefined} */ best, o) => (!best || o.score > best.score ? o : best),
+          undefined,
+        );
+        if (chosen) {
+          const {r, fresh} = reach(chosen.hit.path);
+          r.aliased.add(chosen.abs);
+          if (fresh) queue.push(chosen.hit.path);
+        }
       }
     }
   }

package/foundation/render/page-host.d.mts

@@ -0,0 +1,4 @@
+// @generated by scripts/sync-api-types.mjs from the JSDoc in foundation/**/*.mjs.
+// DO NOT EDIT — run `pnpm sync:api-types` to regenerate.
+
+export {};

package/foundation/render/page-host.mjs

@@ -0,0 +1,45 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Host process for `astryx experimental render`: runs page-worker.mjs
+ * in a worker thread and sends its one answer to the CLI.
+ *
+ * A crash of Node itself ends only this process, never the CLI. The page runs
+ * in a thread, so this process can still act while the page loops: it exits
+ * when the CLI goes away (the IPC channel closes) or when its own time limit
+ * passes, so a page that never finishes never outlives the CLI.
+ *
+ * @input argv[2]: JSON {entry, root, served, withoutSegmenter, timeoutMs}
+ * @output one IPC message: the worker's answer, or {hostError: message}, or
+ *   {hostExit: code}
+ * @position foundation/render — started by render-page.mjs
+ */
+
+import {Worker} from 'node:worker_threads';
+
+/** @type {{entry: string, root: string, served: {dir: string, integrations: string[]} | null, withoutSegmenter: boolean, timeoutMs: number}} */
+const input = JSON.parse(process.argv[2] ?? '{}');
+
+/** @param {unknown} message */
+function answer(message) {
+  if (!process.connected) process.exit(0);
+  process.send?.(message, () => process.exit(0));
+}
+
+process.once('disconnect', () => process.exit(0));
+// A margin past the CLI's own limit, so the CLI reports the timeout first.
+setTimeout(() => process.exit(0), input.timeoutMs + 5000);
+
+const worker = new Worker(new URL('./page-worker.mjs', import.meta.url), {
+  workerData: input,
+  execArgv: [],
+  stdout: true,
+  stderr: true,
+  resourceLimits: {maxOldGenerationSizeMb: 4096},
+});
+// The page's own writes to stdout/stderr never reach the CLI's output.
+worker.stdout.resume();
+worker.stderr.resume();
+worker.once('message', answer);
+worker.once('error', (/** @type {any} */ error) => answer({hostError: String(error?.message ?? error)}));
+worker.once('exit', code => answer({hostExit: code}));