uilint 0.2.14 → 0.2.15

package/dist/index.js

@@ -2805,7 +2805,7 @@ program.command("update").description("Update existing style guide with new styl
   });
 });
 program.command("install").description("Install UILint integration").option("--force", "Overwrite existing configuration files").action(async (options) => {
-  const { installUI } = await import("./install-ui-H2KOQ6SP.js");
+  const { installUI } = await import("./install-ui-73AINMZ5.js");
   await installUI({ force: options.force });
 });
 program.command("serve").description("Start WebSocket server for real-time UI linting").option("-p, --port <number>", "Port to listen on", "9234").action(async (options) => {

package/dist/{install-ui-H2KOQ6SP.js → install-ui-73AINMZ5.js}

@@ -1698,11 +1698,11 @@ import {
   unlinkSync,
   chmodSync
 } from "fs";
-import { dirname as dirname3 } from "path";
+import { dirname as dirname4 } from "path";
 
 // src/utils/react-inject.ts
 import { existsSync as existsSync5, readFileSync as readFileSync5, writeFileSync as writeFileSync2 } from "fs";
-import { join as join5 } from "path";
+import { join as join5, relative as relative3 } from "path";
 import { parseModule as parseModule2, generateCode as generateCode2 } from "magicast";
 function getDefaultCandidates(projectPath, appRoot) {
   const viteMainCandidates = [
@@ -1759,6 +1759,32 @@ function walkAst(node, visit) {
     }
   }
 }
+function ensureNamedImport(program, from, name) {
+  if (!program || program.type !== "Program") return { changed: false };
+  const existing = findImportDeclaration(program, from);
+  if (existing) {
+    const has = (existing.specifiers ?? []).some(
+      (s) => s?.type === "ImportSpecifier" && (s.imported?.name === name || s.imported?.value === name)
+    );
+    if (has) return { changed: false };
+    const spec = parseModule2(`import { ${name} } from "${from}";`).$ast.body?.[0]?.specifiers?.[0];
+    if (!spec) return { changed: false };
+    existing.specifiers = [...existing.specifiers ?? [], spec];
+    return { changed: true };
+  }
+  const importDecl = parseModule2(`import { ${name} } from "${from}";`).$ast.body?.[0];
+  if (!importDecl) return { changed: false };
+  const body = program.body ?? [];
+  let insertAt = 0;
+  while (insertAt < body.length && isUseClientDirective(body[insertAt])) {
+    insertAt++;
+  }
+  while (insertAt < body.length && body[insertAt]?.type === "ImportDeclaration") {
+    insertAt++;
+  }
+  program.body.splice(insertAt, 0, importDecl);
+  return { changed: true };
+}
 function hasUILintDevtoolsJsx(program) {
   let found = false;
   walkAst(program, (node) => {
@@ -1852,7 +1878,204 @@ function ensureSideEffectImport(program, from) {
   program.body.splice(insertAt, 0, importDecl);
   return { changed: true };
 }
+function addDevtoolsToClientComponent(program) {
+  if (!program || program.type !== "Program") return { changed: false };
+  if (hasUILintDevtoolsJsx(program)) return { changed: false };
+  const devtoolsMod = parseModule2(
+    "const __uilint_devtools = (<uilint-devtools />);"
+  );
+  const devtoolsJsx = devtoolsMod.$ast.body?.[0]?.declarations?.[0]?.init ?? null;
+  if (!devtoolsJsx || devtoolsJsx.type !== "JSXElement")
+    return { changed: false };
+  let added = false;
+  walkAst(program, (node) => {
+    if (added) return;
+    if (node.type !== "JSXElement" && node.type !== "JSXFragment") return;
+    const children = node.children ?? [];
+    const childrenIndex = children.findIndex(
+      (child) => child?.type === "JSXExpressionContainer" && child.expression?.type === "Identifier" && child.expression.name === "children"
+    );
+    if (childrenIndex !== -1) {
+      children.splice(childrenIndex + 1, 0, devtoolsJsx);
+      added = true;
+    }
+  });
+  if (added) return { changed: true };
+  walkAst(program, (node) => {
+    if (added) return;
+    if (node.type !== "ReturnStatement") return;
+    const arg = node.argument;
+    if (!arg) return;
+    if (arg.type !== "JSXElement" && arg.type !== "JSXFragment") return;
+    const fragmentMod = parseModule2("const __fragment = (<></>);");
+    const fragmentJsx = fragmentMod.$ast.body?.[0]?.declarations?.[0]?.init ?? null;
+    if (!fragmentJsx) return;
+    fragmentJsx.children = [arg, devtoolsJsx];
+    node.argument = fragmentJsx;
+    added = true;
+  });
+  if (!added) {
+    throw new Error(
+      "Could not find a suitable location to add devtools. Expected a component with JSX return or {children}."
+    );
+  }
+  return { changed: true };
+}
+function generateProvidersContent(isTypeScript) {
+  const ext = isTypeScript ? "tsx" : "jsx";
+  const typeAnnotation = isTypeScript ? ": { children: React.ReactNode }" : "";
+  return `"use client";
+
+import React from "react";
+import "uilint-react/devtools";
+
+export function Providers({ children }${typeAnnotation}) {
+  return (
+    <>
+      {children}
+      <uilint-devtools />
+    </>
+  );
+}
+`;
+}
+function wrapChildrenWithProviders(program, providersImportPath) {
+  if (!program || program.type !== "Program") return { changed: false };
+  let hasProvidersImport = false;
+  for (const stmt of program.body ?? []) {
+    if (stmt?.type !== "ImportDeclaration") continue;
+    if (stmt.source?.value === providersImportPath) {
+      hasProvidersImport = true;
+      break;
+    }
+  }
+  if (!hasProvidersImport) {
+    const importRes = ensureNamedImport(program, providersImportPath, "Providers");
+    if (!importRes.changed) return { changed: false };
+  }
+  let wrapped = false;
+  walkAst(program, (node) => {
+    if (wrapped) return;
+    if (node.type !== "JSXElement" && node.type !== "JSXFragment") return;
+    const children = node.children ?? [];
+    const childrenIndex = children.findIndex(
+      (child) => child?.type === "JSXExpressionContainer" && child.expression?.type === "Identifier" && child.expression.name === "children"
+    );
+    if (childrenIndex === -1) return;
+    const providersMod = parseModule2(
+      "const __providers = (<Providers>{children}</Providers>);"
+    );
+    const providersJsx = providersMod.$ast.body?.[0]?.declarations?.[0]?.init ?? null;
+    if (!providersJsx) return;
+    children[childrenIndex] = providersJsx;
+    wrapped = true;
+  });
+  if (!wrapped) {
+    throw new Error(
+      "Could not find {children} in layout to wrap with Providers."
+    );
+  }
+  return { changed: true };
+}
+function findLayoutFile(projectPath, appRoot) {
+  const extensions = [".tsx", ".jsx", ".ts", ".js"];
+  for (const ext of extensions) {
+    const layoutPath = join5(projectPath, appRoot, `layout${ext}`);
+    if (existsSync5(layoutPath)) return layoutPath;
+  }
+  return null;
+}
+async function createProvidersAndModifyLayout(projectPath, appRoot) {
+  const layoutPath = findLayoutFile(projectPath, appRoot);
+  if (!layoutPath) {
+    throw new Error(`Could not find layout file in ${appRoot}`);
+  }
+  const isTypeScript = layoutPath.endsWith(".tsx") || layoutPath.endsWith(".ts");
+  const providersExt = isTypeScript ? ".tsx" : ".jsx";
+  const providersPath = join5(projectPath, appRoot, `providers${providersExt}`);
+  if (existsSync5(providersPath)) {
+    throw new Error(
+      `providers${providersExt} already exists. Please select it from the list instead.`
+    );
+  }
+  const providersContent = generateProvidersContent(isTypeScript);
+  writeFileSync2(providersPath, providersContent, "utf-8");
+  const layoutContent = readFileSync5(layoutPath, "utf-8");
+  let layoutMod;
+  try {
+    layoutMod = parseModule2(layoutContent);
+  } catch {
+    throw new Error(
+      `Unable to parse ${relative3(projectPath, layoutPath)} as JavaScript/TypeScript.`
+    );
+  }
+  const layoutProgram = layoutMod.$ast;
+  const wrapRes = wrapChildrenWithProviders(layoutProgram, "./providers");
+  if (wrapRes.changed) {
+    const updatedLayout = generateCode2(layoutMod).code;
+    writeFileSync2(layoutPath, updatedLayout, "utf-8");
+  }
+  return {
+    providersFile: relative3(projectPath, providersPath),
+    layoutFile: relative3(projectPath, layoutPath),
+    modified: true
+  };
+}
 async function installReactUILintOverlay(opts) {
+  if (opts.createProviders) {
+    const result = await createProvidersAndModifyLayout(
+      opts.projectPath,
+      opts.appRoot
+    );
+    return {
+      targetFile: result.providersFile,
+      modified: result.modified,
+      createdFile: result.providersFile,
+      layoutModified: result.layoutFile
+    };
+  }
+  if (opts.targetFile) {
+    const absTarget2 = opts.targetFile;
+    const relTarget = relative3(opts.projectPath, absTarget2);
+    if (!existsSync5(absTarget2)) {
+      throw new Error(`Target file not found: ${relTarget}`);
+    }
+    const original2 = readFileSync5(absTarget2, "utf-8");
+    let mod2;
+    try {
+      mod2 = parseModule2(original2);
+    } catch {
+      throw new Error(
+        `Unable to parse ${relTarget} as JavaScript/TypeScript. Please update it manually.`
+      );
+    }
+    const program2 = mod2.$ast;
+    const hasDevtoolsImport2 = !!findImportDeclaration(program2, "uilint-react/devtools");
+    const hasOldImport2 = !!findImportDeclaration(program2, "uilint-react");
+    const alreadyConfigured2 = (hasDevtoolsImport2 || hasOldImport2) && hasUILintDevtoolsJsx(program2);
+    if (alreadyConfigured2) {
+      return {
+        targetFile: relTarget,
+        modified: false,
+        alreadyConfigured: true
+      };
+    }
+    let changed2 = false;
+    const importRes2 = ensureSideEffectImport(program2, "uilint-react/devtools");
+    if (importRes2.changed) changed2 = true;
+    const addRes2 = addDevtoolsToClientComponent(program2);
+    if (addRes2.changed) changed2 = true;
+    const updated2 = changed2 ? generateCode2(mod2).code : original2;
+    const modified2 = updated2 !== original2;
+    if (modified2) {
+      writeFileSync2(absTarget2, updated2, "utf-8");
+    }
+    return {
+      targetFile: relTarget,
+      modified: modified2,
+      alreadyConfigured: false
+    };
+  }
   const candidates = getDefaultCandidates(opts.projectPath, opts.appRoot);
   if (!candidates.length) {
     throw new Error(
@@ -2742,7 +2965,7 @@ async function installNextUILintRoutes(opts) {
 // src/utils/prettier.ts
 import { existsSync as existsSync9 } from "fs";
 import { spawn } from "child_process";
-import { join as join9, dirname as dirname2 } from "path";
+import { join as join9, dirname as dirname3 } from "path";
 function getPrettierPath(projectPath) {
   const localPath = join9(projectPath, "node_modules", ".bin", "prettier");
   if (existsSync9(localPath)) return localPath;
@@ -2750,7 +2973,7 @@ function getPrettierPath(projectPath) {
   for (let i = 0; i < 10; i++) {
     const binPath = join9(dir, "node_modules", ".bin", "prettier");
     if (existsSync9(binPath)) return binPath;
-    const parent = dirname2(dir);
+    const parent = dirname3(dir);
     if (parent === dir) break;
     dir = parent;
   }
@@ -2904,7 +3127,7 @@ async function executeAction(action, options) {
             wouldDo: `Create file: ${action.path}${action.permissions ? ` (mode: ${action.permissions.toString(8)})` : ""}`
           };
         }
-        const dir = dirname3(action.path);
+        const dir = dirname4(action.path);
         if (!existsSync10(dir)) {
           mkdirSync(dir, { recursive: true });
         }
@@ -2930,7 +3153,7 @@ async function executeAction(action, options) {
           }
         }
         const merged = deepMerge(existing, action.merge);
-        const dir = dirname3(action.path);
+        const dir = dirname4(action.path);
         if (!existsSync10(dir)) {
           mkdirSync(dir, { recursive: true });
         }
@@ -3024,11 +3247,12 @@ async function executeInjectEslint(action, options) {
 }
 async function executeInjectReact(action, options) {
   const { dryRun = false } = options;
+  const dryRunDescription = action.createProviders ? `Create providers.tsx and inject <uilint-devtools /> in: ${action.projectPath}` : action.targetFile ? `Inject <uilint-devtools /> into: ${action.targetFile}` : `Inject <uilint-devtools /> into React app: ${action.projectPath}`;
   if (dryRun) {
     return {
       action,
       success: true,
-      wouldDo: `Inject <uilint-devtools /> into React app: ${action.projectPath}`
+      wouldDo: dryRunDescription
     };
   }
   const result = await installReactUILintOverlay({
@@ -3036,7 +3260,10 @@ async function executeInjectReact(action, options) {
     appRoot: action.appRoot,
     mode: action.mode,
     force: false,
-    // Auto-select first choice for execute phase
+    // Pass through targetFile and createProviders from the action
+    targetFile: action.targetFile,
+    createProviders: action.createProviders,
+    // Auto-select first choice for execute phase (fallback if no targetFile)
     confirmFileChoice: async (choices) => choices[0]
   });
   const success = result.modified || result.alreadyConfigured === true;
@@ -3719,6 +3946,143 @@ var eslintInstaller = {
   }
 };
 
+// src/utils/client-boundary-tracer.ts
+import { existsSync as existsSync12, readFileSync as readFileSync9 } from "fs";
+import { join as join13, dirname as dirname5, relative as relative4 } from "path";
+import { parseModule as parseModule5 } from "magicast";
+function hasUseClientDirective(filePath) {
+  try {
+    const content = readFileSync9(filePath, "utf-8");
+    const mod = parseModule5(content);
+    const program = mod.$ast;
+    if (!program || program.type !== "Program") return false;
+    const firstStmt = program.body?.[0];
+    return firstStmt?.type === "ExpressionStatement" && firstStmt.expression?.type === "StringLiteral" && (firstStmt.expression.value === "use client" || firstStmt.expression.value === "use client");
+  } catch {
+    return false;
+  }
+}
+function extractImports(program) {
+  const imports = [];
+  if (!program || program.type !== "Program") return imports;
+  for (const stmt of program.body ?? []) {
+    if (stmt?.type !== "ImportDeclaration") continue;
+    const source = stmt.source?.value;
+    if (typeof source !== "string") continue;
+    if (!source.startsWith(".") && !source.startsWith("@/") && !source.startsWith("~/")) {
+      continue;
+    }
+    const specifiers = [];
+    for (const spec of stmt.specifiers ?? []) {
+      if (spec.type === "ImportDefaultSpecifier") {
+        specifiers.push("default");
+      } else if (spec.type === "ImportSpecifier") {
+        const name = spec.imported?.name ?? spec.imported?.value;
+        if (name) specifiers.push(name);
+      } else if (spec.type === "ImportNamespaceSpecifier") {
+        specifiers.push("*");
+      }
+    }
+    imports.push({ source, specifiers });
+  }
+  return imports;
+}
+function resolveImportPath(importSource, fromFile, projectPath) {
+  const fromDir = dirname5(fromFile);
+  let basePath;
+  if (importSource.startsWith("@/")) {
+    const withoutAlias = importSource.slice(2);
+    const srcPath = join13(projectPath, "src", withoutAlias);
+    const rootPath = join13(projectPath, withoutAlias);
+    basePath = existsSync12(dirname5(srcPath)) ? srcPath : rootPath;
+  } else if (importSource.startsWith("~/")) {
+    basePath = join13(projectPath, importSource.slice(2));
+  } else if (importSource.startsWith(".")) {
+    basePath = join13(fromDir, importSource);
+  } else {
+    return null;
+  }
+  const extensions = [".tsx", ".ts", ".jsx", ".js"];
+  for (const ext of extensions) {
+    const fullPath = basePath + ext;
+    if (existsSync12(fullPath)) return fullPath;
+  }
+  for (const ext of extensions) {
+    const indexPath = join13(basePath, `index${ext}`);
+    if (existsSync12(indexPath)) return indexPath;
+  }
+  if (existsSync12(basePath)) return basePath;
+  return null;
+}
+function findLayoutFile2(projectPath, appRoot) {
+  const extensions = [".tsx", ".jsx", ".ts", ".js"];
+  for (const ext of extensions) {
+    const layoutPath = join13(projectPath, appRoot, `layout${ext}`);
+    if (existsSync12(layoutPath)) return layoutPath;
+  }
+  return null;
+}
+function traceClientBoundaries(projectPath, appRoot) {
+  const layoutFile = findLayoutFile2(projectPath, appRoot);
+  if (!layoutFile) {
+    return null;
+  }
+  const layoutIsClient = hasUseClientDirective(layoutFile);
+  const layoutRelative = relative4(projectPath, layoutFile);
+  if (layoutIsClient) {
+    return {
+      layoutIsClient: true,
+      clientBoundaries: [],
+      layoutFile,
+      layoutRelative
+    };
+  }
+  let program;
+  try {
+    const content = readFileSync9(layoutFile, "utf-8");
+    const mod = parseModule5(content);
+    program = mod.$ast;
+  } catch {
+    return {
+      layoutIsClient: false,
+      clientBoundaries: [],
+      layoutFile,
+      layoutRelative
+    };
+  }
+  const imports = extractImports(program);
+  const clientBoundaries = [];
+  for (const imp of imports) {
+    const resolvedPath = resolveImportPath(imp.source, layoutFile, projectPath);
+    if (!resolvedPath) continue;
+    if (hasUseClientDirective(resolvedPath)) {
+      clientBoundaries.push({
+        filePath: resolvedPath,
+        relativePath: relative4(projectPath, resolvedPath),
+        componentNames: imp.specifiers,
+        importSource: imp.source
+      });
+    }
+  }
+  return {
+    layoutIsClient: false,
+    clientBoundaries,
+    layoutFile,
+    layoutRelative
+  };
+}
+function providersFileExists(projectPath, appRoot) {
+  const extensions = [".tsx", ".jsx", ".ts", ".js"];
+  const names = ["providers", "Providers"];
+  for (const name of names) {
+    for (const ext of extensions) {
+      const providersPath = join13(projectPath, appRoot, `${name}${ext}`);
+      if (existsSync12(providersPath)) return providersPath;
+    }
+  }
+  return null;
+}
+
 // src/commands/install/installers/next-overlay.ts
 var nextOverlayInstaller = {
   id: "next",
@@ -3729,21 +4093,95 @@ var nextOverlayInstaller = {
     return project.nextApps.length > 0;
   },
   getTargets(project) {
-    return project.nextApps.map((app) => ({
-      id: `next-${app.projectPath}`,
-      label: app.projectPath.split("/").pop() || app.projectPath,
-      path: app.projectPath,
-      hint: "App Router",
-      isInstalled: false
-      // TODO: Detect if already installed
-    }));
+    const targets = [];
+    for (const app of project.nextApps) {
+      const traceResult = traceClientBoundaries(
+        app.projectPath,
+        app.detection.appRoot
+      );
+      if (!traceResult) {
+        targets.push({
+          id: `next-${app.projectPath}`,
+          label: app.projectPath.split("/").pop() || app.projectPath,
+          path: app.projectPath,
+          hint: "App Router (no layout found)",
+          isInstalled: false
+        });
+        continue;
+      }
+      if (traceResult.layoutIsClient) {
+        targets.push({
+          id: `next-${app.projectPath}`,
+          label: app.projectPath.split("/").pop() || app.projectPath,
+          path: app.projectPath,
+          hint: "App Router",
+          isInstalled: false,
+          targetFile: traceResult.layoutFile
+        });
+        continue;
+      }
+      const existingProviders = providersFileExists(
+        app.projectPath,
+        app.detection.appRoot
+      );
+      if (!existingProviders) {
+        targets.push({
+          id: `next-${app.projectPath}-create-providers`,
+          label: `${app.projectPath.split("/").pop() || app.projectPath}`,
+          path: app.projectPath,
+          hint: "Create providers.tsx (Recommended)",
+          isInstalled: false,
+          createProviders: true
+        });
+      }
+      for (const boundary of traceResult.clientBoundaries) {
+        const componentNames = boundary.componentNames.length > 0 ? boundary.componentNames.join(", ") : "default";
+        targets.push({
+          id: `next-${app.projectPath}-${boundary.relativePath}`,
+          label: `${app.projectPath.split("/").pop() || app.projectPath}`,
+          path: app.projectPath,
+          hint: `${boundary.relativePath} (${componentNames})`,
+          isInstalled: false,
+          targetFile: boundary.filePath
+        });
+      }
+      if (existingProviders) {
+        const relativePath = existingProviders.replace(app.projectPath + "/", "").replace(app.projectPath, "");
+        const alreadyListed = traceResult.clientBoundaries.some(
+          (b) => b.filePath === existingProviders
+        );
+        if (!alreadyListed) {
+          targets.push({
+            id: `next-${app.projectPath}-existing-providers`,
+            label: `${app.projectPath.split("/").pop() || app.projectPath}`,
+            path: app.projectPath,
+            hint: `${relativePath} (existing)`,
+            isInstalled: false,
+            targetFile: existingProviders
+          });
+        }
+      }
+      if (targets.filter((t) => t.path === app.projectPath).length === 0) {
+        targets.push({
+          id: `next-${app.projectPath}-create-providers`,
+          label: `${app.projectPath.split("/").pop() || app.projectPath}`,
+          path: app.projectPath,
+          hint: "Create providers.tsx",
+          isInstalled: false,
+          createProviders: true
+        });
+      }
+    }
+    return targets;
   },
   plan(targets, config, project) {
     const actions = [];
     const dependencies = [];
     if (targets.length === 0) return { actions, dependencies };
     const target = targets[0];
-    const appInfo = project.nextApps.find((app) => app.projectPath === target.path);
+    const appInfo = project.nextApps.find(
+      (app) => app.projectPath === target.path
+    );
     if (!appInfo) return { actions, dependencies };
     const { projectPath, detection } = appInfo;
     actions.push({
@@ -3760,7 +4198,9 @@ var nextOverlayInstaller = {
       type: "inject_react",
       projectPath,
       appRoot: detection.appRoot,
-      mode: "next"
+      mode: "next",
+      targetFile: target.targetFile,
+      createProviders: target.createProviders
     });
     actions.push({
       type: "inject_next_config",
@@ -3785,10 +4225,11 @@ var nextOverlayInstaller = {
       message: "Installing dependencies",
       detail: "\u2192 uilint-react, uilint-core, jsx-loc-plugin"
     };
+    const injectDetail = target.createProviders ? "\u2192 Creating providers.tsx" : target.targetFile ? `\u2192 ${target.hint || "client component"}` : "\u2192 <uilint-devtools /> in root layout";
     yield {
       type: "progress",
       message: "Injecting devtools component",
-      detail: "\u2192 <uilint-devtools /> in root layout"
+      detail: injectDetail
     };
     yield {
       type: "progress",
@@ -3962,7 +4403,7 @@ async function installUI(options = {}, executeOptions = {}) {
             console.log("\nNo items selected for installation");
             process.exit(0);
           }
-          const { createPlan } = await import("./plan-G43256ML.js");
+          const { createPlan } = await import("./plan-VPDTICSY.js");
           const plan = createPlan(project, choices, { force: options.force });
           const result = await execute(plan, {
             ...executeOptions,
@@ -3987,4 +4428,4 @@ async function installUI(options = {}, executeOptions = {}) {
 export {
   installUI
 };
-//# sourceMappingURL=install-ui-H2KOQ6SP.js.map
+//# sourceMappingURL=install-ui-73AINMZ5.js.map