@designtools/next-plugin 0.1.2

package/dist/loader.js

@@ -0,0 +1,113 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loader.ts
+var loader_exports = {};
+__export(loader_exports, {
+  default: () => designtoolsLoader
+});
+module.exports = __toCommonJS(loader_exports);
+var import_path = __toESM(require("path"));
+function designtoolsLoader(source) {
+  const callback = this.async();
+  const opts = this.getOptions();
+  const cwd = opts.cwd || this.rootContext || process.cwd();
+  const relativePath = import_path.default.relative(cwd, this.resourcePath);
+  if (relativePath.includes("node_modules")) {
+    callback(null, source);
+    return;
+  }
+  if (!source.includes("<")) {
+    callback(null, source);
+    return;
+  }
+  try {
+    const babel = require("@babel/core");
+    const isTsx = this.resourcePath.endsWith(".tsx");
+    const result = babel.transformSync(source, {
+      filename: this.resourcePath,
+      // No presets — we only want to parse and run our visitor, not compile
+      presets: [],
+      plugins: [
+        function designtoolsSourcePlugin() {
+          return {
+            visitor: {
+              JSXOpeningElement(nodePath) {
+                const t = babel.types;
+                const attrs = nodePath.node.attributes;
+                const name = nodePath.node.name;
+                if (t.isJSXIdentifier(name) && name.name === "Fragment") return;
+                if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.property) && name.property.name === "Fragment") return;
+                const loc = nodePath.node.loc;
+                if (!loc) return;
+                const value = `${relativePath}:${loc.start.line}:${loc.start.column}`;
+                const isComponent = t.isJSXIdentifier(name) && name.name[0] === name.name[0].toUpperCase() && name.name[0] !== name.name[0].toLowerCase() || t.isJSXMemberExpression(name);
+                if (isComponent) {
+                  const attrName = "data-instance-source";
+                  if (attrs.some(
+                    (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === attrName
+                  )) return;
+                  attrs.push(
+                    t.jsxAttribute(
+                      t.jsxIdentifier(attrName),
+                      t.stringLiteral(value)
+                    )
+                  );
+                } else {
+                  if (attrs.some(
+                    (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === "data-source"
+                  )) return;
+                  attrs.push(
+                    t.jsxAttribute(
+                      t.jsxIdentifier("data-source"),
+                      t.stringLiteral(value)
+                    )
+                  );
+                }
+              }
+            }
+          };
+        }
+      ],
+      // Tell Babel's parser to handle JSX and TypeScript syntax
+      parserOpts: {
+        plugins: ["jsx", ...isTsx ? ["typescript"] : []]
+      },
+      // Preserve original formatting as much as possible
+      retainLines: true,
+      // Don't look for user's .babelrc or babel.config — isolation
+      configFile: false,
+      babelrc: false
+    });
+    callback(null, result?.code || source);
+  } catch (err) {
+    console.warn(`[designtools] Source annotation skipped for ${relativePath}: ${err.message}`);
+    callback(null, source);
+  }
+}

package/dist/loader.mjs

@@ -0,0 +1,86 @@
+import {
+  __require
+} from "./chunk-Y6FXYEAI.mjs";
+
+// src/loader.ts
+import path from "path";
+function designtoolsLoader(source) {
+  const callback = this.async();
+  const opts = this.getOptions();
+  const cwd = opts.cwd || this.rootContext || process.cwd();
+  const relativePath = path.relative(cwd, this.resourcePath);
+  if (relativePath.includes("node_modules")) {
+    callback(null, source);
+    return;
+  }
+  if (!source.includes("<")) {
+    callback(null, source);
+    return;
+  }
+  try {
+    const babel = __require("@babel/core");
+    const isTsx = this.resourcePath.endsWith(".tsx");
+    const result = babel.transformSync(source, {
+      filename: this.resourcePath,
+      // No presets — we only want to parse and run our visitor, not compile
+      presets: [],
+      plugins: [
+        function designtoolsSourcePlugin() {
+          return {
+            visitor: {
+              JSXOpeningElement(nodePath) {
+                const t = babel.types;
+                const attrs = nodePath.node.attributes;
+                const name = nodePath.node.name;
+                if (t.isJSXIdentifier(name) && name.name === "Fragment") return;
+                if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.property) && name.property.name === "Fragment") return;
+                const loc = nodePath.node.loc;
+                if (!loc) return;
+                const value = `${relativePath}:${loc.start.line}:${loc.start.column}`;
+                const isComponent = t.isJSXIdentifier(name) && name.name[0] === name.name[0].toUpperCase() && name.name[0] !== name.name[0].toLowerCase() || t.isJSXMemberExpression(name);
+                if (isComponent) {
+                  const attrName = "data-instance-source";
+                  if (attrs.some(
+                    (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === attrName
+                  )) return;
+                  attrs.push(
+                    t.jsxAttribute(
+                      t.jsxIdentifier(attrName),
+                      t.stringLiteral(value)
+                    )
+                  );
+                } else {
+                  if (attrs.some(
+                    (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === "data-source"
+                  )) return;
+                  attrs.push(
+                    t.jsxAttribute(
+                      t.jsxIdentifier("data-source"),
+                      t.stringLiteral(value)
+                    )
+                  );
+                }
+              }
+            }
+          };
+        }
+      ],
+      // Tell Babel's parser to handle JSX and TypeScript syntax
+      parserOpts: {
+        plugins: ["jsx", ...isTsx ? ["typescript"] : []]
+      },
+      // Preserve original formatting as much as possible
+      retainLines: true,
+      // Don't look for user's .babelrc or babel.config — isolation
+      configFile: false,
+      babelrc: false
+    });
+    callback(null, result?.code || source);
+  } catch (err) {
+    console.warn(`[designtools] Source annotation skipped for ${relativePath}: ${err.message}`);
+    callback(null, source);
+  }
+}
+export {
+  designtoolsLoader as default
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@designtools/next-plugin",
+  "version": "0.1.2",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./codesurface": {
+      "require": "./dist/codesurface.js",
+      "import": "./dist/codesurface.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/loader.ts src/codesurface.tsx src/codesurface-mount-loader.ts --format cjs,esm --dts --external @babel/core --external react --external react/jsx-runtime"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.0.0"
+  }
+}

package/src/codesurface-mount-loader.ts

@@ -0,0 +1,51 @@
+/**
+ * Webpack loader that auto-mounts <CodeSurface /> in the root layout.
+ * Only runs in development. Injects the import and component into the JSX.
+ *
+ * Strategy: Simple string injection — find the {children} pattern in the layout
+ * and add <CodeSurface /> alongside it.
+ */
+
+interface LoaderContext {
+  resourcePath: string;
+  callback(err: Error | null, content?: string): void;
+  async(): (err: Error | null, content?: string) => void;
+}
+
+export default function codesurfaceMountLoader(this: LoaderContext, source: string): void {
+  const callback = this.async();
+
+  // Only inject into root layout (not nested layouts)
+  // Root layout is detected by the presence of <html> tag
+  if (!source.includes("<html")) {
+    callback(null, source);
+    return;
+  }
+
+  // Skip if already has CodeSurface import
+  if (source.includes("CodeSurface")) {
+    callback(null, source);
+    return;
+  }
+
+  // Add import at the top (after "use client" or first import)
+  // CodeSurface is a "use client" component — importing it from an RSC is fine in Next.js
+  const importStatement = `import { CodeSurface } from "@designtools/next-plugin/codesurface";\n`;
+  let modified = source;
+
+  // Find a good insertion point for the import
+  const firstImportIndex = source.indexOf("import ");
+  if (firstImportIndex !== -1) {
+    modified = source.slice(0, firstImportIndex) + importStatement + source.slice(firstImportIndex);
+  } else {
+    modified = importStatement + source;
+  }
+
+  // Add <CodeSurface /> just before {children}
+  modified = modified.replace(
+    /(\{children\})/,
+    `<CodeSurface />\n          $1`
+  );
+
+  callback(null, modified);
+}