react-detective 0.0.0-stage → 0.1.0

package/dist/loader.cjs

@@ -0,0 +1,105 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('./chunk-Z2Y65YOY.cjs');
+
+// src/transform.ts
+var _parser = require('@babel/parser');
+var _traverse2 = require('@babel/traverse'); var _traverse3 = _interopRequireDefault(_traverse2);
+var _magicstring = require('magic-string'); var _magicstring2 = _interopRequireDefault(_magicstring);
+var _path = require('path'); var _path2 = _interopRequireDefault(_path);
+var traverse = _nullishCoalesce(_traverse3.default.default, () => ( _traverse3.default));
+var LOC_ATTR = "data-rd-loc";
+var COMP_ATTR = "data-rd-comp";
+var FILE_RE = /\.[cm]?[jt]sx?$/;
+var SKIP_TAGS = /* @__PURE__ */ new Set(["html", "head", "meta", "title", "script", "style", "link", "base", "noscript"]);
+function transformJsx(code, id, root) {
+  const filename = id.split("?")[0];
+  if (!FILE_RE.test(filename) || filename.includes("node_modules")) return null;
+  if (!code.includes("<")) return null;
+  const isTs = /\.[cm]?tsx?$/.test(filename);
+  if (isTs && !filename.endsWith("x")) return null;
+  let ast;
+  try {
+    ast = _parser.parse.call(void 0, code, {
+      sourceType: "module",
+      errorRecovery: true,
+      plugins: isTs ? ["jsx", "typescript", "decorators-legacy"] : ["jsx", "decorators-legacy"]
+    });
+  } catch (e) {
+    return null;
+  }
+  const rel = _path2.default.relative(root, filename).split(_path2.default.sep).join("/");
+  const s = new (0, _magicstring2.default)(code);
+  let changed = false;
+  traverse(ast, {
+    JSXOpeningElement(p) {
+      const name = p.node.name;
+      if (name.type !== "JSXIdentifier") return;
+      const tag = name.name;
+      if (!/^[a-z]/.test(tag) || SKIP_TAGS.has(tag)) return;
+      const hasAttr = p.node.attributes.some(
+        (a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === LOC_ATTR
+      );
+      if (hasAttr || name.end == null || !p.node.loc) return;
+      const comp = findComponentName(p, filename);
+      const { line, column } = p.node.loc.start;
+      let attrs = ` ${LOC_ATTR}="${rel}:${line}:${column + 1}"`;
+      if (comp) attrs += ` ${COMP_ATTR}="${comp}"`;
+      s.appendLeft(name.end, attrs);
+      changed = true;
+    }
+  });
+  if (!changed) return null;
+  return { code: s.toString(), map: s.generateMap({ source: filename, hires: true, includeContent: true }) };
+}
+function findComponentName(p, filename) {
+  let cur = p.getFunctionParent();
+  while (cur) {
+    const name = functionName(cur);
+    if (name && /^[A-Z]/.test(name)) return name;
+    if (!name && isDefaultExport(cur)) return componentNameFromFile(filename);
+    cur = _nullishCoalesce(_optionalChain([cur, 'access', _2 => _2.parentPath, 'optionalAccess', _3 => _3.getFunctionParent, 'call', _4 => _4()]), () => ( null));
+  }
+  return null;
+}
+function functionName(fn) {
+  const node = fn.node;
+  if ((node.type === "FunctionDeclaration" || node.type === "FunctionExpression") && node.id) return node.id.name;
+  if (node.type === "ClassMethod" || node.type === "ClassPrivateMethod") {
+    const cls = _optionalChain([fn, 'access', _5 => _5.parentPath, 'optionalAccess', _6 => _6.parentPath, 'optionalAccess', _7 => _7.node]);
+    if (cls && (cls.type === "ClassDeclaration" || cls.type === "ClassExpression") && cls.id) return cls.id.name;
+  }
+  let parent = fn.parentPath;
+  while (parent && parent.node.type === "CallExpression") parent = parent.parentPath;
+  if (_optionalChain([parent, 'optionalAccess', _8 => _8.node, 'access', _9 => _9.type]) === "VariableDeclarator" && parent.node.id.type === "Identifier") return parent.node.id.name;
+  return null;
+}
+function isDefaultExport(fn) {
+  let parent = fn.parentPath;
+  while (parent && parent.node.type === "CallExpression") parent = parent.parentPath;
+  return _optionalChain([parent, 'optionalAccess', _10 => _10.node, 'access', _11 => _11.type]) === "ExportDefaultDeclaration";
+}
+function componentNameFromFile(filename) {
+  let base = _path2.default.basename(filename).replace(FILE_RE, "");
+  if (["page", "layout", "index", "template", "loading", "error", "not-found"].includes(base)) {
+    const dir = _path2.default.basename(_path2.default.dirname(filename));
+    const label = base[0].toUpperCase() + base.slice(1).replace(/-(\w)/g, (_, c) => c.toUpperCase());
+    return dir && !dir.startsWith("(") && dir !== "app" && dir !== "pages" ? `${pascal(dir)}${label}` : label;
+  }
+  return pascal(base);
+}
+function pascal(s) {
+  return s.replace(/[[\]]/g, "").replace(/(^|[-_.\s]+)(\w)/g, (_, __, c) => c.toUpperCase());
+}
+
+// src/loader.ts
+function detectiveLoader(source, inputMap) {
+  const opts = _nullishCoalesce(_optionalChain([this, 'access', _12 => _12.getOptions, 'optionalCall', _13 => _13()]), () => ( {}));
+  const root = _nullishCoalesce(_nullishCoalesce(opts.root, () => ( this.rootContext)), () => ( process.cwd()));
+  const result = transformJsx(source, this.resourcePath, root);
+  if (!result) return this.callback(null, source, inputMap);
+  this.callback(null, result.code, result.map);
+}
+
+
+exports.default = detectiveLoader;
+
+module.exports = exports.default;

package/dist/loader.js

@@ -0,0 +1,101 @@
+// src/transform.ts
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import MagicString from "magic-string";
+import path from "path";
+var traverse = _traverse.default ?? _traverse;
+var LOC_ATTR = "data-rd-loc";
+var COMP_ATTR = "data-rd-comp";
+var FILE_RE = /\.[cm]?[jt]sx?$/;
+var SKIP_TAGS = /* @__PURE__ */ new Set(["html", "head", "meta", "title", "script", "style", "link", "base", "noscript"]);
+function transformJsx(code, id, root) {
+  const filename = id.split("?")[0];
+  if (!FILE_RE.test(filename) || filename.includes("node_modules")) return null;
+  if (!code.includes("<")) return null;
+  const isTs = /\.[cm]?tsx?$/.test(filename);
+  if (isTs && !filename.endsWith("x")) return null;
+  let ast;
+  try {
+    ast = parse(code, {
+      sourceType: "module",
+      errorRecovery: true,
+      plugins: isTs ? ["jsx", "typescript", "decorators-legacy"] : ["jsx", "decorators-legacy"]
+    });
+  } catch {
+    return null;
+  }
+  const rel = path.relative(root, filename).split(path.sep).join("/");
+  const s = new MagicString(code);
+  let changed = false;
+  traverse(ast, {
+    JSXOpeningElement(p) {
+      const name = p.node.name;
+      if (name.type !== "JSXIdentifier") return;
+      const tag = name.name;
+      if (!/^[a-z]/.test(tag) || SKIP_TAGS.has(tag)) return;
+      const hasAttr = p.node.attributes.some(
+        (a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === LOC_ATTR
+      );
+      if (hasAttr || name.end == null || !p.node.loc) return;
+      const comp = findComponentName(p, filename);
+      const { line, column } = p.node.loc.start;
+      let attrs = ` ${LOC_ATTR}="${rel}:${line}:${column + 1}"`;
+      if (comp) attrs += ` ${COMP_ATTR}="${comp}"`;
+      s.appendLeft(name.end, attrs);
+      changed = true;
+    }
+  });
+  if (!changed) return null;
+  return { code: s.toString(), map: s.generateMap({ source: filename, hires: true, includeContent: true }) };
+}
+function findComponentName(p, filename) {
+  let cur = p.getFunctionParent();
+  while (cur) {
+    const name = functionName(cur);
+    if (name && /^[A-Z]/.test(name)) return name;
+    if (!name && isDefaultExport(cur)) return componentNameFromFile(filename);
+    cur = cur.parentPath?.getFunctionParent() ?? null;
+  }
+  return null;
+}
+function functionName(fn) {
+  const node = fn.node;
+  if ((node.type === "FunctionDeclaration" || node.type === "FunctionExpression") && node.id) return node.id.name;
+  if (node.type === "ClassMethod" || node.type === "ClassPrivateMethod") {
+    const cls = fn.parentPath?.parentPath?.node;
+    if (cls && (cls.type === "ClassDeclaration" || cls.type === "ClassExpression") && cls.id) return cls.id.name;
+  }
+  let parent = fn.parentPath;
+  while (parent && parent.node.type === "CallExpression") parent = parent.parentPath;
+  if (parent?.node.type === "VariableDeclarator" && parent.node.id.type === "Identifier") return parent.node.id.name;
+  return null;
+}
+function isDefaultExport(fn) {
+  let parent = fn.parentPath;
+  while (parent && parent.node.type === "CallExpression") parent = parent.parentPath;
+  return parent?.node.type === "ExportDefaultDeclaration";
+}
+function componentNameFromFile(filename) {
+  let base = path.basename(filename).replace(FILE_RE, "");
+  if (["page", "layout", "index", "template", "loading", "error", "not-found"].includes(base)) {
+    const dir = path.basename(path.dirname(filename));
+    const label = base[0].toUpperCase() + base.slice(1).replace(/-(\w)/g, (_, c) => c.toUpperCase());
+    return dir && !dir.startsWith("(") && dir !== "app" && dir !== "pages" ? `${pascal(dir)}${label}` : label;
+  }
+  return pascal(base);
+}
+function pascal(s) {
+  return s.replace(/[[\]]/g, "").replace(/(^|[-_.\s]+)(\w)/g, (_, __, c) => c.toUpperCase());
+}
+
+// src/loader.ts
+function detectiveLoader(source, inputMap) {
+  const opts = this.getOptions?.() ?? {};
+  const root = opts.root ?? this.rootContext ?? process.cwd();
+  const result = transformJsx(source, this.resourcePath, root);
+  if (!result) return this.callback(null, source, inputMap);
+  this.callback(null, result.code, result.map);
+}
+export {
+  detectiveLoader as default
+};

package/dist/next.cjs

@@ -0,0 +1,58 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkZ2Y65YOYcjs = require('./chunk-Z2Y65YOY.cjs');
+
+// src/next.ts
+var _module = require('module');
+var _path = require('path'); var _path2 = _interopRequireDefault(_path);
+var DEFAULT_PORT = 5899;
+var PHASE_DEVELOPMENT_SERVER = "phase-development-server";
+var JSX_FILES = ["*.jsx", "*.tsx", "*.js"];
+function withDetective(nextConfig = {}, options = {}) {
+  return async (phase, ctx) => {
+    const config = typeof nextConfig === "function" ? await nextConfig(phase, ctx) : { ...nextConfig };
+    if (phase !== PHASE_DEVELOPMENT_SERVER) return config;
+    const root = process.cwd();
+    const loader = resolveLoader();
+    const loaderEntry = { loader, options: { root } };
+    const turbopack = _nullishCoalesce(config.turbopack, () => ( {}));
+    const rules = { ..._nullishCoalesce(turbopack.rules, () => ( {})) };
+    for (const glob of JSX_FILES) {
+      if (rules[glob]) continue;
+      rules[glob] = { condition: { not: "foreign" }, loaders: [loaderEntry] };
+    }
+    config.turbopack = { ...turbopack, rules };
+    const userWebpack = config.webpack;
+    config.webpack = (wpConfig, wpCtx) => {
+      const out = userWebpack ? userWebpack(wpConfig, wpCtx) : wpConfig;
+      out.module.rules.unshift({
+        test: /\.[cm]?[jt]sx?$/,
+        exclude: /node_modules/,
+        enforce: "pre",
+        use: [loaderEntry]
+      });
+      return out;
+    };
+    const port = _nullishCoalesce(options.port, () => ( DEFAULT_PORT));
+    config.env = {
+      ...config.env,
+      REACT_DETECTIVE_PORT: String(port),
+      REACT_DETECTIVE_LAUNCHER: options.showLauncher === false ? "0" : "1"
+    };
+    const { startDetectiveServer } = await Promise.resolve().then(() => _interopRequireWildcard(require("react-detective/server")));
+    await startDetectiveServer({ root, port, model: options.model, maxTurns: options.maxTurns, storeDir: options.storeDir });
+    return config;
+  };
+}
+function resolveLoader() {
+  try {
+    return _module.createRequire.call(void 0, _path2.default.join(process.cwd(), "package.json")).resolve("react-detective/next/loader");
+  } catch (e) {
+    return _module.createRequire.call(void 0, _chunkZ2Y65YOYcjs.importMetaUrl).resolve("react-detective/next/loader");
+  }
+}
+var next_default = withDetective;
+
+
+
+exports.default = next_default; exports.withDetective = withDetective;

package/dist/next.d.cts

@@ -0,0 +1,24 @@
+interface DetectiveNextOptions {
+    /** Port for the local explain server. Default 5899. */
+    port?: number;
+    /** Model for explanations: an alias (`"sonnet"`, `"haiku"`, `"opus"`) or a full model ID. Default `"sonnet"`. */
+    model?: string;
+    maxTurns?: number;
+    /** Knowledge folder inside the project root. Default `.react-detective`. */
+    storeDir?: string;
+    /** Show the Detective badge in the corner. Default true. */
+    showLauncher?: boolean;
+}
+type NextConfig = Record<string, any>;
+type NextConfigInput = NextConfig | ((phase: string, ctx: any) => NextConfig | Promise<NextConfig>);
+/**
+ * Wraps your Next.js config. In `next dev` it:
+ *  - adds a loader (webpack and Turbopack) that tags DOM elements with their source location
+ *  - starts the local explain server on 127.0.0.1
+ * In every other phase (build, start) your config is returned untouched.
+ */
+declare function withDetective(nextConfig?: NextConfigInput, options?: DetectiveNextOptions): (phase: string, ctx: any) => Promise<NextConfig>;
+
+// @ts-ignore
+export = withDetective;
+export { type DetectiveNextOptions, withDetective };

package/dist/next.d.ts

@@ -0,0 +1,22 @@
+interface DetectiveNextOptions {
+    /** Port for the local explain server. Default 5899. */
+    port?: number;
+    /** Model for explanations: an alias (`"sonnet"`, `"haiku"`, `"opus"`) or a full model ID. Default `"sonnet"`. */
+    model?: string;
+    maxTurns?: number;
+    /** Knowledge folder inside the project root. Default `.react-detective`. */
+    storeDir?: string;
+    /** Show the Detective badge in the corner. Default true. */
+    showLauncher?: boolean;
+}
+type NextConfig = Record<string, any>;
+type NextConfigInput = NextConfig | ((phase: string, ctx: any) => NextConfig | Promise<NextConfig>);
+/**
+ * Wraps your Next.js config. In `next dev` it:
+ *  - adds a loader (webpack and Turbopack) that tags DOM elements with their source location
+ *  - starts the local explain server on 127.0.0.1
+ * In every other phase (build, start) your config is returned untouched.
+ */
+declare function withDetective(nextConfig?: NextConfigInput, options?: DetectiveNextOptions): (phase: string, ctx: any) => Promise<NextConfig>;
+
+export { type DetectiveNextOptions, withDetective as default, withDetective };

package/dist/next.js

@@ -0,0 +1,54 @@
+// src/next.ts
+import { createRequire } from "module";
+import path from "path";
+var DEFAULT_PORT = 5899;
+var PHASE_DEVELOPMENT_SERVER = "phase-development-server";
+var JSX_FILES = ["*.jsx", "*.tsx", "*.js"];
+function withDetective(nextConfig = {}, options = {}) {
+  return async (phase, ctx) => {
+    const config = typeof nextConfig === "function" ? await nextConfig(phase, ctx) : { ...nextConfig };
+    if (phase !== PHASE_DEVELOPMENT_SERVER) return config;
+    const root = process.cwd();
+    const loader = resolveLoader();
+    const loaderEntry = { loader, options: { root } };
+    const turbopack = config.turbopack ?? {};
+    const rules = { ...turbopack.rules ?? {} };
+    for (const glob of JSX_FILES) {
+      if (rules[glob]) continue;
+      rules[glob] = { condition: { not: "foreign" }, loaders: [loaderEntry] };
+    }
+    config.turbopack = { ...turbopack, rules };
+    const userWebpack = config.webpack;
+    config.webpack = (wpConfig, wpCtx) => {
+      const out = userWebpack ? userWebpack(wpConfig, wpCtx) : wpConfig;
+      out.module.rules.unshift({
+        test: /\.[cm]?[jt]sx?$/,
+        exclude: /node_modules/,
+        enforce: "pre",
+        use: [loaderEntry]
+      });
+      return out;
+    };
+    const port = options.port ?? DEFAULT_PORT;
+    config.env = {
+      ...config.env,
+      REACT_DETECTIVE_PORT: String(port),
+      REACT_DETECTIVE_LAUNCHER: options.showLauncher === false ? "0" : "1"
+    };
+    const { startDetectiveServer } = await import("react-detective/server");
+    await startDetectiveServer({ root, port, model: options.model, maxTurns: options.maxTurns, storeDir: options.storeDir });
+    return config;
+  };
+}
+function resolveLoader() {
+  try {
+    return createRequire(path.join(process.cwd(), "package.json")).resolve("react-detective/next/loader");
+  } catch {
+    return createRequire(import.meta.url).resolve("react-detective/next/loader");
+  }
+}
+var next_default = withDetective;
+export {
+  next_default as default,
+  withDetective
+};

package/dist/react.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Mounts the inspector overlay. Renders nothing and loads nothing outside
+ * development, so it is safe to leave in your root layout. It takes no props:
+ * the port and badge setting come from `withDetective(config, options)`.
+ *
+ *   // app/layout.tsx
+ *   <body>{children}<Detective /></body>
+ */
+declare function Detective(): null;
+
+export { Detective, Detective as default };

package/dist/react.js

@@ -0,0 +1,26 @@
+"use client";
+
+// src/react.tsx
+import { useEffect } from "react";
+function Detective() {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return;
+    const port = process.env.REACT_DETECTIVE_PORT || "5899";
+    const showLauncher = process.env.REACT_DETECTIVE_LAUNCHER !== "0";
+    let cleanup;
+    let cancelled = false;
+    import("react-detective/client").then(({ init }) => {
+      if (!cancelled) cleanup = init({ endpoint: `http://127.0.0.1:${port}/__detective`, showLauncher });
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, []);
+  return null;
+}
+var react_default = Detective;
+export {
+  Detective,
+  react_default as default
+};