@abbox/inspector 0.0.0-stage → 0.3.0

package/src/next/webpack-instrumentation.cjs

@@ -0,0 +1,82 @@
+/**
+ * Apply Abbox JSX instrumentation via webpack + babel-loader on selected app sources.
+ * Does not use babel.config.js, so Next.js keeps SWC (and next/font) for excluded files
+ * such as app/layout.tsx.
+ */
+const fs = require("node:fs");
+const path = require("node:path");
+const { createRequire } = require("node:module");
+
+const LAYOUT_BASENAMES = new Set(["layout.tsx", "layout.jsx"]);
+
+function resolveInspectorBabelPlugin(rootDir) {
+  const req = createRequire(path.join(rootDir, "package.json"));
+  try {
+    return req.resolve("@abbox/inspector/babel");
+  } catch {
+    return req.resolve("abbox-inspector/babel");
+  }
+}
+
+function resolveBabelLoader(rootDir) {
+  const req = createRequire(path.join(rootDir, "package.json"));
+  return req.resolve("babel-loader");
+}
+
+function resolveNextBabelPreset(rootDir) {
+  const req = createRequire(path.join(rootDir, "package.json"));
+  return req.resolve("next/babel");
+}
+
+function collectIncludeDirs(rootDir) {
+  return ["app", "components", "src", "pages"]
+    .map((segment) => path.join(rootDir, segment))
+    .filter((dir) => fs.existsSync(dir));
+}
+
+function isRootLayoutResource(resourcePath) {
+  const base = path.basename(resourcePath);
+  if (!LAYOUT_BASENAMES.has(base)) return false;
+  const parent = path.basename(path.dirname(resourcePath));
+  return parent === "app" || parent === "src/app";
+}
+
+/**
+ * @param {import('webpack').Configuration} webpackConfig
+ * @param {{ dir: string }} options
+ */
+function applyAbboxWebpackInstrumentation(webpackConfig, options) {
+  const rootDir = options.dir ?? process.cwd();
+  const pluginPath = resolveInspectorBabelPlugin(rootDir);
+  const babelLoader = resolveBabelLoader(rootDir);
+  const nextBabel = resolveNextBabelPreset(rootDir);
+  const includeDirs = collectIncludeDirs(rootDir);
+
+  if (includeDirs.length === 0) {
+    return webpackConfig;
+  }
+
+  const rule = {
+    test: /\.(tsx|jsx)$/,
+    include: (resourcePath) =>
+      includeDirs.some((dir) => resourcePath.startsWith(dir)) &&
+      !isRootLayoutResource(resourcePath),
+    exclude: [/node_modules/],
+    use: {
+      loader: babelLoader,
+      options: {
+        babelrc: false,
+        configFile: false,
+        presets: [nextBabel],
+        plugins: [[pluginPath, { rootDir }]],
+      },
+    },
+  };
+
+  webpackConfig.module = webpackConfig.module ?? { rules: [] };
+  webpackConfig.module.rules = webpackConfig.module.rules ?? [];
+  webpackConfig.module.rules.unshift(rule);
+  return webpackConfig;
+}
+
+module.exports = { applyAbboxWebpackInstrumentation, isRootLayoutResource };