add generate content script

Author: matschik

build/lib/generateContent.ts

@@ -63,12 +63,81 @@ async function pathExists(path: string): Promise<boolean> {
   }
 }
 
-export default async function generateContent(): Promise<void> {
+async function shouldRegenerateFiles(
+  contentPath: string,
+  generatedContentDirPath: string,
+  frameworkDirPath: string,
+): Promise<boolean> {
+  // Check if any generated files exist
+  const treeFilePath = path.join(generatedContentDirPath, "tree.js");
+  const treeDtsFilePath = path.join(generatedContentDirPath, "tree.d.ts");
+  const frameworkIndexPath = path.join(frameworkDirPath, "index.js");
+  const frameworkIndexDtsPath = path.join(frameworkDirPath, "index.d.ts");
+
+  const generatedFilesExist = await Promise.all([
+    pathExists(treeFilePath),
+    pathExists(treeDtsFilePath),
+    pathExists(frameworkIndexPath),
+    pathExists(frameworkIndexDtsPath),
+  ]);
+
+  // If any generated file is missing, regenerate
+  if (!generatedFilesExist.every(Boolean)) {
+    return true;
+  }
+
+  // Get the modification time of the content directory
+  const contentStats = await fs.stat(contentPath);
+  const contentModTime = contentStats.mtime;
+
+  // Check if any generated file is older than the content directory
+  const generatedFilePaths = [
+    treeFilePath,
+    treeDtsFilePath,
+    frameworkIndexPath,
+    frameworkIndexDtsPath,
+  ];
+
+  for (const filePath of generatedFilePaths) {
+    try {
+      const fileStats = await fs.stat(filePath);
+      if (fileStats.mtime < contentModTime) {
+        return true;
+      }
+    } catch {
+      // If we can't stat a file, regenerate to be safe
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export default async function generateContent(
+  options: { noCache?: boolean } = {},
+): Promise<void> {
   const rootDir = await packageDirectory();
   if (!rootDir) {
     throw new Error("Could not find package directory");
   }
   const contentPath = path.join(rootDir, "content");
+  const generatedContentDirPath = path.join(rootDir, "src/generatedContent");
+  const frameworkDirPath = path.join(generatedContentDirPath, "framework");
+
+  // Check if we should skip generation due to cache
+  if (!options.noCache) {
+    const shouldRegenerate = await shouldRegenerateFiles(
+      contentPath,
+      generatedContentDirPath,
+      frameworkDirPath,
+    );
+
+    if (!shouldRegenerate) {
+      console.log("Generated content is up to date, skipping generation.");
+      return;
+    }
+  }
+
   const sectionDirNames = await fs.readdir(contentPath);
 
   const treePayload: TreePayload = {
@@ -185,10 +254,10 @@ export default async function generateContent(): Promise<void> {
     }
   }
 
-  const generatedContentDirPath = path.join(rootDir, "src/generatedContent");
-  const frameworkDirPath = path.join(generatedContentDirPath, "framework");
   const treeFilePath = path.join(generatedContentDirPath, "tree.js");
+  const treeDtsFilePath = path.join(generatedContentDirPath, "tree.d.ts");
   const frameworkIndexPath = path.join(frameworkDirPath, "index.js");
+  const frameworkIndexDtsPath = path.join(frameworkDirPath, "index.d.ts");
   const commentDisclaimer = `// File generated from "node scripts/generateContent.js", DO NOT EDIT/COMMIT`;
 
   if (!(await pathExists(generatedContentDirPath))) {
@@ -204,6 +273,29 @@ export default async function generateContent(): Promise<void> {
   `,
   );
 
+  await writeDtsFile(
+    treeDtsFilePath,
+    `
+    ${commentDisclaimer}
+    export interface Section {
+      sectionId: string;
+      sectionDirName: string;
+      title: string;
+    }
+
+    export interface Snippet {
+      sectionId: string;
+      snippetId: string;
+      snippetDirName: string;
+      sectionDirName: string;
+      title: string;
+    }
+
+    export declare const sections: Section[];
+    export declare const snippets: Snippet[];
+  `,
+  );
+
   if (!(await pathExists(frameworkDirPath))) {
     await fs.mkdir(frameworkDirPath, { recursive: true });
   }
@@ -239,6 +331,18 @@ export default async function generateContent(): Promise<void> {
     };
     `,
   );
+
+  await writeDtsFile(
+    frameworkIndexDtsPath,
+    `
+    ${commentDisclaimer}
+    declare const snippetsImporterByFrameworkId: {
+      [key: string]: () => Promise<any>;
+    };
+
+    export default snippetsImporterByFrameworkId;
+  `,
+  );
 }
 
 function dirNameToTitle(dirName: string): string {
@@ -254,6 +358,13 @@ async function writeJsFile(filepath: string, jsCode: string): Promise<void> {
   await fs.writeFile(filepath, codeFormatted);
 }
 
+async function writeDtsFile(filepath: string, dtsCode: string): Promise<void> {
+  const codeFormatted = await prettier.format(dtsCode, {
+    parser: "typescript",
+  });
+  await fs.writeFile(filepath, codeFormatted);
+}
+
 async function generatePlaygroundURL(
   frameworkId: string,
   files: File[],

lefthook.yml

@@ -4,3 +4,8 @@ pre-commit:
       run: pnpm _format --write {staged_files}
       glob: "*.{js,ts,svelte,html,md,css}"
       stage_fixed: true
+    update-readme-progress:
+      run: node scripts/generateReadMeProgress.ts && git add README.md
+      glob: "content/**/*"
+      stage_fixed: true
+      fail_text: "Failed to update README progress"

package.json

@@ -14,8 +14,9 @@
     "lint": "pnpm format && oxlint && eslint",
     "check": "pnpm format && svelte-check --tsconfig ./tsconfig.json && pnpm lint && pnpm test",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "build:content": "node scripts/generateContent.ts",
+    "build:content": "node scripts/generateContent.ts --no-cache",
     "build:progress": "node scripts/generateReadMeProgress.ts",
+    "test:content-hook": "node scripts/checkContentChanges.ts",
     "prepare": "lefthook install",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",

scripts/checkContentChanges.ts

@@ -0,0 +1,54 @@
+import { execSync } from "child_process";
+import fs from "fs/promises";
+import path from "node:path";
+
+async function main(): Promise<void> {
+  try {
+    // Check if there are any changes in the content directory
+    const contentChanges = execSync("git diff --name-only HEAD~1 HEAD", {
+      encoding: "utf8",
+    })
+      .split("\n")
+      .filter((file) => file.startsWith("content/"));
+
+    if (contentChanges.length === 0) {
+      console.log(
+        "No changes detected in content directory, skipping README update.",
+      );
+      return;
+    }
+
+    console.log(
+      `Detected changes in content directory: ${contentChanges.join(", ")}`,
+    );
+    console.log("Running generateReadMeProgress script...");
+
+    // Run the generateReadMeProgress script
+    execSync("node scripts/generateReadMeProgress.ts", { stdio: "inherit" });
+
+    // Check if README.md was modified
+    const readmeChanges = execSync("git diff --name-only", { encoding: "utf8" })
+      .split("\n")
+      .filter((file) => file === "README.md");
+
+    if (readmeChanges.length > 0) {
+      console.log("README.md was updated, committing changes...");
+
+      // Add and commit the README.md changes
+      execSync("git add README.md", { stdio: "inherit" });
+      execSync(
+        'git commit -m "docs: update README progress based on content changes"',
+        { stdio: "inherit" },
+      );
+
+      console.log("README progress update committed successfully!");
+    } else {
+      console.log("No changes to README.md were made.");
+    }
+  } catch (error) {
+    console.error("Error in checkContentChanges script:", error);
+    process.exit(1);
+  }
+}
+
+main().catch(console.error);

scripts/generateContent.ts

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+import generateContent from "../build/lib/generateContent.ts";
+
+const args = process.argv.slice(2);
+const noCache = args.includes("--no-cache") || args.includes("--force");
+
+console.log(`Generating content${noCache ? " (no cache)" : ""}...`);
+
+try {
+  await generateContent({ noCache });
+  console.log("Content generation completed successfully!");
+} catch (error) {
+  console.error("Error generating content:", error);
+  process.exit(1);
+}

src/Index.svelte

@@ -288,7 +288,7 @@
                       </h2>
                       {#if frameworkIdsSelectedInitialized}
                         <div
-                          class="grid grid-cols-1 2xl:grid-cols-2 gap-y-4 2xl:gap-y-8 gap-x-10 mt-2"
+                          class="grid grid-cols-1 xl:grid-cols-2 gap-y-4 xl:gap-y-8 gap-x-10 mt-2"
                         >
                           {#each frameworkIdsSelectedArr as frameworkId (frameworkId)}
                             {@const framework = matchFrameworkId(frameworkId)}