fix(build): make gen tasks and tests fully cacheable; format generated files with oxfmt

- Define gen:examples/gen:docs as Vite+ tasks with pinned input + output
  globs so they no longer hit read-and-wrote cache misses
- Add cacheable test tasks for xl-ai and tests packages, excluding
  self-written .vite-temp and .next artifacts from input tracking
- Remove prettier from dev-scripts; generators now collect written files
  and format them via 'vp fmt' (oxfmt), keeping output in sync with repo
- Stop ignoring playground/src/examples.gen.tsx in fmt config
- Switch VSCode config from prettier to Oxc formatter

Author: nperez0111

.vscode/extensions.json

@@ -1,5 +1,5 @@
 {
   // See http://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+  "recommendations": ["VoidZero.vite-plus-extension-pack"]
 }

.vscode/settings.json

@@ -1,10 +1,16 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,
-  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.formatOnSaveMode": "file",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
   },
+  "oxc.fmt.configPath": "./vite.config.ts",
+  "npm.scriptRunner": "vp",
+  "[javascript]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
+  "[javascriptreact]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
+  "[typescript]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
+  "[typescriptreact]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
   "search.exclude": {
     "packages/editor/public/types": true,
     "packages/website/docs/.vitepress": false,
@@ -15,11 +21,5 @@
     "editor.defaultFormatter": "redhat.vscode-xml"
   },
   "scm.defaultViewMode": "tree",
-  "search.defaultViewMode": "tree",
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[mdx]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  "search.defaultViewMode": "tree"
 }

packages/dev-scripts/examples/gen.ts

@@ -1,16 +1,16 @@
 import * as glob from "glob";
-import * as fs from "node:fs";
 import * as path from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import prettier from "prettier";
 import React from "react";
 
 import ReactDOM from "react-dom/server";
 import {
   Project,
+  formatFiles,
   getExampleProjects,
   groupProjects,
   replacePathSepToSlash,
+  writeGeneratedFile,
 } from "./util.js";
 
 /**
@@ -26,7 +26,11 @@ import {
  */
 const dir = path.parse(fileURLToPath(import.meta.url)).dir;
 
-async function writeTemplate(project: Project, templateFile: string) {
+async function writeTemplate(
+  project: Project,
+  templateFile: string,
+  written: string[],
+) {
   const template = await import(pathToFileURL(templateFile).toString());
   if (
     project.config.tailwind !== true &&
@@ -45,12 +49,6 @@ async function writeTemplate(project: Project, templateFile: string) {
   let stringOutput: string | undefined = undefined;
   if (React.isValidElement(ret)) {
     stringOutput = ReactDOM.renderToString(ret);
-
-    const prettierConfig = await prettier.resolveConfig(targetFilePath);
-    stringOutput = await prettier.format(stringOutput, {
-      ...prettierConfig,
-      parser: "html",
-    });
   } else if (typeof ret === "string") {
     stringOutput = ret;
   } else if (typeof ret === "object") {
@@ -59,20 +57,20 @@ async function writeTemplate(project: Project, templateFile: string) {
     throw new Error("unsupported template");
   }
 
-  fs.writeFileSync(targetFilePath, stringOutput);
+  writeGeneratedFile(targetFilePath, stringOutput, written);
 }
 
-async function generateCodeForExample(project: Project) {
+async function generateCodeForExample(project: Project, written: string[]) {
   const templates = glob.sync(
     replacePathSepToSlash(path.resolve(dir, "./template-react/*.template.tsx")),
   );
 
   for (const template of templates) {
-    await writeTemplate(project, template);
+    await writeTemplate(project, template, written);
   }
 }
 
-async function generateExamplesData(projects: Project[]) {
+async function generateExamplesData(projects: Project[], written: string[]) {
   // TODO: fix playground?
   const target = path.resolve(dir, "../../../playground/src/examples.gen.tsx");
 
@@ -84,29 +82,21 @@ async function generateExamplesData(projects: Project[]) {
   // add as any after deps, otherwise const type inference will be too complex for TS
   code = code.replace(/("dependencies":\s*{[^}]*})/g, "$1 as any");
 
-  code = await prettier.format(code, {
-    parser: "typescript",
-    semi: true,
-    singleQuote: false,
-    tabWidth: 2,
-    printWidth: 80,
-    trailingComma: "all",
-    bracketSpacing: true,
-    arrowParens: "always",
-    endOfLine: "lf",
-  });
-
-  fs.writeFileSync(target, code);
+  writeGeneratedFile(target, code, written);
 }
 
 const projects = getExampleProjects();
+const writtenFiles: string[] = [];
 
 for (const project of projects) {
   // eslint-disable-next-line no-console
   console.log("generating code for example", project.projectSlug);
-  await generateCodeForExample(project);
+  await generateCodeForExample(project, writtenFiles);
 }
 
 await generateExamplesData(
   projects.filter((p) => p.config?.playground === true),
+  writtenFiles,
 );
+
+formatFiles(writtenFiles);

packages/dev-scripts/examples/genDocs.ts

@@ -3,10 +3,12 @@ import * as path from "node:path";
 import { fileURLToPath } from "node:url";
 import {
   addTitleToGroups,
+  formatFiles,
   getExampleProjects,
   getProjectFiles,
   groupProjects,
   Project,
+  writeGeneratedFile,
 } from "./util.js";
 
 /*
@@ -23,7 +25,7 @@ const EXAMPLES_PAGES_DIR = path.resolve(DOCS_DIR, "./content/examples/");
  * Generates the <ExampleBlock> component that has all the source code of the example
  * This block can be used both in the /docs and in the /example page
  */
-async function generateCodeForExample(project: Project) {
+async function generateCodeForExample(project: Project, written: string[]) {
   const projectFiles = getProjectFiles(project);
   const componentTarget = path.join(
     COMPONENT_DIR,
@@ -33,18 +35,18 @@ async function generateCodeForExample(project: Project) {
   const indexFile = path.join(componentTarget, "index.tsx");
   fs.rmSync(componentTarget, { recursive: true, force: true });
   fs.mkdirSync(componentTarget, { recursive: true });
-  fs.writeFileSync(
+  writeGeneratedFile(
     indexFile,
     `"use client";
 import Component from "./App";
 
 export default Component;`,
+    written,
   );
 
   projectFiles.forEach(({ filename, code }) => {
     const target = path.join(componentTarget, filename);
-    fs.mkdirSync(path.dirname(target), { recursive: true });
-    fs.writeFileSync(target, code);
+    writeGeneratedFile(target, code, written);
   });
 }
 
@@ -61,22 +63,25 @@ ${project.readme}
  *
  * Consists of the contents of the readme
  */
-async function generatePageForExample(project: Project) {
+async function generatePageForExample(project: Project, written: string[]) {
   const code = templatePageForExample(project);
 
   const target = path.join(EXAMPLES_PAGES_DIR, project.fullSlug + ".mdx");
 
-  fs.writeFileSync(target, code);
+  writeGeneratedFile(target, code, written);
 }
 
 /**
  * generates meta.json file for each example group, so that order is preserved
  */
-async function generateMetaForExampleGroup(group: {
-  title: string;
-  slug: string;
-  projects: Project[];
-}) {
+async function generateMetaForExampleGroup(
+  group: {
+    title: string;
+    slug: string;
+    projects: Project[];
+  },
+  written: string[],
+) {
   if (!fs.existsSync(path.join(EXAMPLES_PAGES_DIR, group.slug))) {
     fs.mkdirSync(path.join(EXAMPLES_PAGES_DIR, group.slug));
   }
@@ -90,15 +95,18 @@ async function generateMetaForExampleGroup(group: {
 
   const code = JSON.stringify(meta, undefined, 2);
 
-  fs.writeFileSync(target, code);
+  writeGeneratedFile(target, code, written);
 }
 
 /**
  * Generates the exampleGroups.gen.ts file, which contains all the necessary
  * data about the examples & their groups for the components we use in the
  * docs. E.g. the interactive demos and example cards.
  */
-async function generateExampleGroupsData(projects: Project[]) {
+async function generateExampleGroupsData(
+  projects: Project[],
+  written: string[],
+) {
   const target = path.join(COMPONENT_DIR, "exampleGroupsData.gen.ts");
 
   const groups = addTitleToGroups(groupProjects(projects));
@@ -146,10 +154,10 @@ export type ExampleData = ExampleGroupsData[number]["examplesData"][number];
 export const exampleGroupsData: ExampleGroupsData = ${JSON.stringify(exampleGroupsData, undefined, 2)};
 `;
 
-  fs.writeFileSync(target, code);
+  writeGeneratedFile(target, code, written);
 }
 
-async function addDependenciesToExample(project: Project) {
+async function addDependenciesToExample(project: Project, written: string[]) {
   const dependencies = project.config.dependencies || {};
   const devDependencies = project.config.devDependencies || {};
   if (
@@ -178,7 +186,11 @@ async function addDependenciesToExample(project: Project) {
         packageJsonObject.devDependencies[key] = "workspace:*";
       }
     });
-    fs.writeFileSync(packageJson, JSON.stringify(packageJsonObject, null, 2));
+    writeGeneratedFile(
+      packageJson,
+      JSON.stringify(packageJsonObject, null, 2),
+      written,
+    );
   }
 }
 
@@ -197,17 +209,20 @@ fs.readdirSync(EXAMPLES_PAGES_DIR, { withFileTypes: true }).forEach((file) => {
 // generate new files
 const projects = getExampleProjects().filter((p) => p.config?.docs === true);
 const groups = addTitleToGroups(groupProjects(projects));
+const writtenFiles: string[] = [];
 
 for (const group of Object.values(groups)) {
-  await generateMetaForExampleGroup(group);
+  await generateMetaForExampleGroup(group, writtenFiles);
 
   for (const project of group.projects) {
     // eslint-disable-next-line no-console
     console.log("generating docs for", project.fullSlug);
-    await generateCodeForExample(project);
-    await generatePageForExample(project);
-    await addDependenciesToExample(project);
+    await generateCodeForExample(project, writtenFiles);
+    await generatePageForExample(project, writtenFiles);
+    await addDependenciesToExample(project, writtenFiles);
   }
 }
 
-await generateExampleGroupsData(projects);
+await generateExampleGroupsData(projects, writtenFiles);
+
+formatFiles(writtenFiles);

packages/dev-scripts/examples/util.ts

@@ -1,9 +1,58 @@
+import { execFileSync } from "node:child_process";
 import { globSync } from "tinyglobby";
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { fileURLToPath } from "node:url";
 
 const dir = path.parse(fileURLToPath(import.meta.url)).dir;
+const workspaceRoot = path.resolve(dir, "../../..");
+
+/**
+ * Writes a generated file, creating parent directories as needed, and records
+ * the absolute path in `written` so it can be formatted afterwards.
+ */
+export function writeGeneratedFile(
+  target: string,
+  content: string,
+  written: string[],
+) {
+  const absolute = path.resolve(target);
+  fs.mkdirSync(path.dirname(absolute), { recursive: true });
+  fs.writeFileSync(absolute, content);
+  written.push(absolute);
+}
+
+/**
+ * Formats the given files in-place using `vp fmt`. Files that are excluded by
+ * oxfmt ignore rules (e.g. *.mdx) are tolerated. Runs in chunks to avoid argv
+ * length limits.
+ */
+export function formatFiles(files: string[]) {
+  const unique = [...new Set(files.map((file) => path.resolve(file)))];
+  if (unique.length === 0) {
+    return;
+  }
+
+  const chunkSize = 200;
+  for (let i = 0; i < unique.length; i += chunkSize) {
+    const chunk = unique.slice(i, i + chunkSize);
+    try {
+      execFileSync("vp", ["fmt", ...chunk, "--write"], {
+        encoding: "utf-8",
+        cwd: workspaceRoot,
+      });
+    } catch (err: any) {
+      const output = `${err?.stdout ?? ""}${err?.stderr ?? ""}`;
+      if (output.includes("Expected at least one target file")) {
+        // All files in this chunk were excluded by oxfmt ignore rules.
+        continue;
+      }
+      // eslint-disable-next-line no-console
+      console.error(output);
+      throw err;
+    }
+  }
+}
 
 export type Project = {
   /**

packages/dev-scripts/package.json

@@ -13,16 +13,13 @@
   "type": "module",
   "scripts": {
     "gen": "vp run gen:examples && vp run gen:docs",
-    "gen:examples": "tsx examples/gen.ts",
-    "gen:docs": "tsx examples/genDocs.ts",
     "lint": "vp lint examples",
     "clean": "rimraf dist && rimraf types"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "glob": "^10.5.0",
-    "prettier": "3.6.2",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "rimraf": "^5.0.10",