testLinkedStylesheets

tcmts.cli.web.testLinkedStylesheets · #4fn7kqsp · term
A stylesheet the browser's code only gives a component with the stylesheet role (<Stylesheet css={…}>) is linked to alone; one it reads as text too (or gives <Stylesheet> through a name of its own, or gives another component) keeps its text.
import type { AppPlan } from "#codebase/tcmts/cli/placement";
import { linkedStylesheets } from "#codebase/tcmts/cli/web";
import type { DefRecord } from "#codebase/tcmts/core/types";
import assert from "node:assert/strict";

export const testLinkedStylesheets = () => {
  const sheet = (css: unknown): unknown[] => [
    "JsxSelfClosingElement",
    ["tagName", ["Ref", "sheet"]],
    [
      "attributes",
      [
        "JsxAttributes",
        [
          "properties",
          [
            "[",
            [
              "JsxAttribute",
              ["name", ["N", "css"]],
              ["initializer", ["JsxExpression", ["expression", css]]],
            ],
          ],
        ],
      ],
    ],
  ];
  const tagged =
    (tag: string) =>
    (css: unknown): unknown[] => [
      "JsxSelfClosingElement",
      ["tagName", ["Ref", tag]],
      [
        "attributes",
        [
          "JsxAttributes",
          [
            "properties",
            [
              "[",
              [
                "JsxAttribute",
                ["name", ["N", "css"]],
                ["initializer", ["JsxExpression", ["expression", css]]],
              ],
            ],
          ],
        ],
      ],
    ];
  // (a library's component with the `stylesheet` role, known by its hash)
  const roled = tagged("sheet");
  const other = (css: unknown): unknown[] => [
    "JsxSelfClosingElement",
    ["tagName", ["Ref", "frame"]],
    [
      "attributes",
      [
        "JsxAttributes",
        [
          "properties",
          [
            "[",
            [
              "JsxAttribute",
              ["name", ["N", "css"]],
              ["initializer", ["JsxExpression", ["expression", css]]],
            ],
          ],
        ],
      ],
    ],
  ];
  const defs: Record<string, { kind: string; signature?: string; ir?: unknown }> = {
    linked: { kind: "file", signature: "css" },
    read: { kind: "file", signature: "css" },
    aliased: { kind: "file", signature: "css" },
    passed: { kind: "file", signature: "css" },
    byRole: { kind: "file", signature: "css" },
    page: { kind: "file", signature: "md" },
    app: {
      kind: "term",
      ir: [
        "Def",
        "Function",
        [
          "JsxFragment",
          [
            "children",
            [
              "[",
              sheet(["Ref", "linked"]),
              sheet(["Ref", "read"]),
              sheet(["L", "0"]),
              other(["Ref", "passed"]),
              roled(["Ref", "byRole"]),
            ],
          ],
        ],
      ],
    },
    size: {
      kind: "term",
      ir: [
        "Def",
        "Const",
        ["PropertyAccessExpression", ["expression", ["Ref", "read"]], ["name", ["N", "length"]]],
      ],
    },
    local: {
      kind: "term",
      ir: [
        "Def",
        "Const",
        ["VariableDeclaration", ["name", ["L", "0"]], ["initializer", ["Ref", "aliased"]]],
      ],
    },
  };
  const rec = (h: string): DefRecord =>
    ({
      hash: h,
      componentHash: h,
      kind: defs[h]!.kind,
      signature: defs[h]!.signature,
      ir: JSON.stringify(defs[h]!.ir ?? ["File"]),
    }) as unknown as DefRecord;
  const plan = { browser: new Set(Object.keys(defs)) } as AppPlan;
  const look = {
    get: (h: string) => (defs[h] ? rec(h) : undefined),
    members: (c: string) => [rec(c)],
  };
  // (with no role given, none is)
  assert.deepEqual([...linkedStylesheets(plan, look)], []);
  assert.deepEqual(
    [...linkedStylesheets(plan, look, new Map([["sheet", "stylesheet"]]))].toSorted(),
    ["byRole", "linked"],
  );
}
testLinkedStylesheets

uses
