lineadraw 0.4.0 → 0.6.0

package/lib/init.mjs

@@ -12,7 +12,13 @@ import {
 } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { buildManifest, manifestJson, MANIFEST_PATH } from "./manifest.mjs";
+import {
+  buildManifest,
+  manifestJson,
+  MANIFEST_PATH,
+  verifyWithSdk,
+  withThumbnails,
+} from "./manifest.mjs";
 
 const templatesDir = join(
   dirname(fileURLToPath(import.meta.url)),
@@ -33,8 +39,29 @@ export const collectionSlug = (pkgName) => {
   return slug === "" ? "my-collection" : slug;
 };
 
-/** Run init in `dir`. Returns `{ created, skipped }` path lists. */
-export const init = (dir) => {
+/**
+ * Warn when an existing tsconfig lets TypeScript default `lib` to include
+ * DOM: lib.dom's globals collide with lineadraw's global DTO aliases —
+ * DOM's `interface Text` (a Node) silently wins over lineadraw's `Text`
+ * (skipLibCheck hides the duplicate-identifier error). Repos scaffolded
+ * before lineadraw 0.3.1 carry such a tsconfig. Cheap string test on
+ * purpose: tsconfig is JSONC, so JSON.parse can't be trusted here.
+ * Returns the warning text, or null when the config is fine or absent.
+ */
+export const tsconfigLibWarning = (dir) => {
+  const p = join(dir, "tsconfig.json");
+  if (!existsSync(p)) return null;
+  const text = readFileSync(p, "utf8");
+  if (/"lib"\s*:/.test(text)) return null;
+  return (
+    'tsconfig.json has no "lib" — TypeScript then includes DOM types, and ' +
+    "DOM's global Text/Image/... shadow the lineadraw script types " +
+    '(Text becomes a DOM Node). Add to compilerOptions: "lib": ["ES2022"], "types": []'
+  );
+};
+
+/** Run init in `dir`. Returns `{ created, skipped, warnings }` lists. */
+export const init = async (dir) => {
   const pkgPath = join(dir, "package.json");
   if (!existsSync(pkgPath))
     throw new Error(
@@ -112,16 +139,26 @@ export const init = (dir) => {
   write(".gitignore", "node_modules/\n");
 
   // Generate the catalog last, over whatever modules now exist.
-  const { manifest, problems } = buildManifest(dir);
+  const { manifest: base, sources, problems } = buildManifest(dir);
   if (problems.length > 0) {
     const detail = problems
       .map((p) => `${p.file}: ${p.problems.join("; ")}`)
       .join("\n");
     throw new Error(`existing modules failed validation:\n${detail}`);
   }
+  // Bake thumbnails now, so the very first commit's manifest matches what
+  // CI's `check` regenerates.
+  const sdkResult = await verifyWithSdk(base, sources);
+  const manifest = withThumbnails(base, sdkResult.thumbnails);
   mkdirSync(join(dir, dirname(MANIFEST_PATH)), { recursive: true });
   writeFileSync(join(dir, MANIFEST_PATH), manifestJson(manifest));
   created.push(`${MANIFEST_PATH} (${manifest.entries.length} entries)`);
 
-  return { created, skipped };
+  // A kept (pre-existing) tsconfig may carry the DOM-collision footgun the
+  // template avoids — surface it instead of silently leaving it broken.
+  const warnings = [];
+  const libWarning = tsconfigLibWarning(dir);
+  if (libWarning !== null) warnings.push(libWarning);
+
+  return { created, skipped, warnings };
 };

package/lib/manifest.mjs

@@ -6,7 +6,6 @@
 import { createRequire } from "node:module";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import { join } from "node:path";
-import { pathToFileURL } from "node:url";
 
 // sucrase is this package's own dependency — the light path needs nothing
 // else installed.
@@ -19,7 +18,9 @@ const SEMVER_RE = /^\d+\.\d+\.\d+$/;
 export const readConfig = (repoDir) => {
   const pkgPath = join(repoDir, "package.json");
   if (!existsSync(pkgPath))
-    throw new Error(`no package.json in ${repoDir} — run \`lineadraw init\` in an npm project`);
+    throw new Error(
+      `no package.json in ${repoDir} — run \`lineadraw init\` in an npm project`,
+    );
   const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
   const cfg = pkg.lineadraw ?? {};
   return {
@@ -142,17 +143,17 @@ export const buildManifest = (repoDir) => {
       entryOf("command", repoDir, cfg.commandsDir, f),
     ),
   ];
-  const problems = results.filter((r) => r.problems).map((r) => ({
-    file: r.file,
-    problems: r.problems,
-  }));
+  const problems = results
+    .filter((r) => r.problems)
+    .map((r) => ({
+      file: r.file,
+      problems: r.problems,
+    }));
   const entries = results.filter((r) => r.entry).map((r) => r.entry);
 
   const dupes = [
     ...new Set(
-      entries
-        .map((e) => e.id)
-        .filter((id, i, all) => all.indexOf(id) !== i),
+      entries.map((e) => e.id).filter((id, i, all) => all.indexOf(id) !== i),
     ),
   ];
   if (dupes.length > 0)
@@ -167,9 +168,7 @@ export const buildManifest = (repoDir) => {
     entries.filter((e) => e.kind === "block").map((e) => e.id),
   );
   const dangling = entries.flatMap((e) =>
-    e.dependencies
-      .filter((d) => !blockIds.has(d))
-      .map((d) => `${e.id} → ${d}`),
+    e.dependencies.filter((d) => !blockIds.has(d)).map((d) => `${e.id} → ${d}`),
   );
   if (dangling.length > 0)
     problems.push({
@@ -197,29 +196,68 @@ export const manifestJson = (manifest) =>
 export const MANIFEST_PATH = ".lineadraw/marketplace.json";
 
 /**
- * Optional execution-level verification: dry-run every block through
- * @lineadraw/sdk when the repo has it installed. Returns
- * `{ ran, problems }` — `ran: false` when the sdk (or a new enough one) is
- * absent; validation-only, so manifest CONTENT never depends on it.
+ * Execution-level verification: dry-run every block through this package's
+ * own SDK (dist/sdk.js) and bake preview thumbnails. Returns
+ * `{ ran, problems, thumbnails }` — `ran: false` (reason "load-failed") when
+ * the SDK can't load (an unbuilt checkout, a broken native install);
+ * validation-only, so the manifest's base CONTENT never depends on it.
+ * `loadSdk` is injectable for tests.
  */
-export const verifyWithSdk = async (repoDir, manifest, sources) => {
+export const verifyWithSdk = async (
+  manifest,
+  sources,
+  loadSdk = () => import("../dist/sdk.js"),
+) => {
   let sdk;
   try {
-    const repoRequire = createRequire(join(repoDir, "package.json"));
-    sdk = await import(
-      pathToFileURL(repoRequire.resolve("@lineadraw/sdk")).href
-    );
-  } catch {
-    return { ran: false, problems: [] };
+    sdk = await loadSdk();
+  } catch (e) {
+    return {
+      ran: false,
+      problems: [],
+      reason: "load-failed",
+      detail: e instanceof Error ? e.message : String(e),
+    };
   }
-  if (typeof sdk.testBlockDefinition !== "function")
-    return { ran: false, problems: [] }; // sdk predates module validation
   const problems = [];
+  // All block sources double as the resolution set for thumbnails, so a
+  // block emitting instances of its catalog siblings previews complete.
+  const blockSources = manifest.entries
+    .filter((e) => e.kind === "block")
+    .map((e) => sources.get(e.id));
+  const thumbnails = new Map();
   for (const entry of manifest.entries) {
     if (entry.kind !== "block") continue; // commands are interactive — no dry run
     const result = await sdk.testBlockDefinition(sources.get(entry.id));
-    if (!result.ok)
+    if (!result.ok) {
       problems.push({ file: entry.source, problems: [result.error] });
+      continue;
+    }
+    // Bake the preview thumbnail. The render is deterministic, so the
+    // manifest stays byte-stable.
+    try {
+      const svg = await sdk.renderBlockThumbnailSvg(sources.get(entry.id), {
+        definitions: blockSources,
+      });
+      if (typeof svg === "string") thumbnails.set(entry.id, svg);
+    } catch {
+      // A block that validates but can't render just ships no thumbnail.
+    }
   }
-  return { ran: true, problems };
+  return { ran: true, problems, thumbnails };
+};
+
+/**
+ * Manifest with `thumbnailSvg` baked onto the block entries that have one —
+ * appended as the LAST key of each entry so serialization stays stable.
+ */
+export const withThumbnails = (manifest, thumbnails) => {
+  if (!thumbnails || thumbnails.size === 0) return manifest;
+  return {
+    ...manifest,
+    entries: manifest.entries.map((entry) => {
+      const svg = thumbnails.get(entry.id);
+      return svg === undefined ? entry : { ...entry, thumbnailSvg: svg };
+    }),
+  };
 };