@acebuilder/component-tagger 0.0.1 → 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# @acebuilder/component-tagger
+
+Dev-only Next.js loader that injects `data-acebuilder-*` attributes on JSX elements for AceBuilder element selection.
+
+Works with **Turbopack** (default `next dev`) and **webpack** (`next dev --webpack`).
+
+## Install
+
+```bash
+pnpm add -D @acebuilder/component-tagger
+```
+
+## Usage (recommended)
+
+Wrap your Next config — enables both bundlers:
+
+```js
+// next.config.mjs
+import componentTagger from '@acebuilder/component-tagger'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+export default componentTagger()(nextConfig)
+```
+
+## Turbopack-only
+
+If you prefer not to use the wrapper:
+
+```js
+import componentTagger from '@acebuilder/component-tagger'
+
+export default {
+  turbopack: {
+    rules: componentTagger.turbopackRules,
+  },
+  // ...rest of next config
+}
+```
+
+## AceBuilder sandboxes
+
+Platform deploy injects this package automatically:
+
+- `package.json` devDependency: `"@acebuilder/component-tagger": "latest"`
+- `next.config` wrapper via AST injection
+
+User projects do not need to add it manually.

package/index.d.ts

@@ -1,15 +1,41 @@
 import type { NextConfig } from 'next'
 
 export interface AceBuilderComponentTaggerOptions {
-  /** Test regex for files to process. If provided, takes precedence over `extensions`. */
+  /** Test regex for files to process. Defaults to `/\.((j|t)sx)$/i`. */
   test?: RegExp
 }
 
+export interface AceBuilderTurbopackRule {
+  loaders: string[]
+  as: string
+}
+
+export type AceBuilderTurbopackRules = Record<string, AceBuilderTurbopackRule>
+
 export type WithAceBuilderComponentTagger = (config: NextConfig) => NextConfig
 
 /**
- * Next.js plugin that injects the AceBuilder component tagger loader into the webpack pipeline.
+ * Next.js plugin — registers the tagger for Turbopack (default dev) and webpack (`next dev --webpack`).
+ *
+ * @example
+ * ```js
+ * import componentTagger from '@acebuilder/component-tagger'
+ * export default componentTagger()(nextConfig)
+ * ```
+ *
+ * Turbopack-only (manual next.config):
+ * ```js
+ * import componentTagger from '@acebuilder/component-tagger'
+ * export default { turbopack: { rules: componentTagger.turbopackRules }, ...nextConfig }
+ * ```
  */
-declare function withAceBuilderComponentTagger(options?: AceBuilderComponentTaggerOptions): WithAceBuilderComponentTagger
+declare function withAceBuilderComponentTagger(
+  options?: AceBuilderComponentTaggerOptions,
+): WithAceBuilderComponentTagger
+
+declare namespace withAceBuilderComponentTagger {
+  /** Turbopack loader rules — fast path without wrapping webpack. */
+  const turbopackRules: AceBuilderTurbopackRules
+}
 
-export default withAceBuilderComponentTagger
+export default withAceBuilderComponentTagger

package/index.js

@@ -1,54 +1,42 @@
 'use strict'
 
 /**
- * Next.js plugin that injects the AceBuilder component tagger loader into the webpack pipeline.
+ * Next.js plugin for AceBuilder component tagging.
  *
- * Purpose:
- * - Automatically adds a pre-loader that parses JSX/TSX modules and injects data attributes
- *   used by AceBuilder for component discovery and visualization.
+ * Fast path (recommended): inject `turbopack.rules` in next.config — see
+ * `componentTagger.turbopackRules` or sandbox `next-config-inject.ts`.
  *
- * Options:
- * - pluginOptions.test (RegExp): Which files to process. Defaults to `/\.((j|t)sx)$/i`.
- *
- * Usage (CommonJS in next.config.js / next.config.mjs):
- *
- *   const withComponentTagger = require('@acebuilder/component-tagger')({
- *     // Optionally override which files to process
- *     // test: /\.tsx?$/i,
- *   })
- *
- *   module.exports = withComponentTagger({
- *     reactStrictMode: true,
- *     // ...any other Next.js config
- *   })
- *
- * How it works:
- * - Adds a webpack rule (enforce: 'pre') that applies to files matching `test`, excluding node_modules.
- * - The rule uses the local loader at `./lib/loader`.
- * - If the user already defines a `webpack` function in their Next config, we call it afterwards
- *   to preserve user customizations.
+ * Legacy path: wrap next.config with this plugin (webpack + turbopack rules).
  */
-module.exports = (pluginOptions = {}) => (inputConfig = {}) => {
-  if (
-    process.env.ACEBUILDER_TAGGER_ENABLED === '0' ||
-    process.env.ACEBUILDER_TAGGER_ENABLED === 'false' ||
-    !process.env.ACEBUILDER_TAGGER_ENABLED
-  ) {
-    console.log('AceBuilder Component Tagger is disabled', process.env.ACEBUILDER_TAGGER_ENABLED)
-    return inputConfig
-  }
+const TAGGER_LOADER = require.resolve('./lib/loader')
+
+const turbopackRules = {
+  '*.{tsx,jsx}': {
+    loaders: [TAGGER_LOADER],
+    as: '*.js',
+  },
+}
+
+const componentTagger = (pluginOptions = {}) => (inputConfig = {}) => {
   const test = pluginOptions.test || /\.((j|t)sx)$/i
 
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     ...inputConfig,
+    turbopack: {
+      ...(inputConfig.turbopack || {}),
+      rules: {
+        ...(inputConfig.turbopack?.rules || {}),
+        ...turbopackRules,
+      },
+    },
     webpack(config, options) {
       config.module.rules.push({
         test,
         exclude: /node_modules/,
         enforce: 'pre',
         use: {
-          loader: require.resolve('./lib/loader'),
+          loader: TAGGER_LOADER,
         },
       })
       if (typeof inputConfig.webpack === 'function') {
@@ -62,5 +50,6 @@ module.exports = (pluginOptions = {}) => (inputConfig = {}) => {
   return nextConfig
 }
 
-// Provide a .default for ESM interop so `import x from` works reliably
-module.exports.default = module.exports
+componentTagger.turbopackRules = turbopackRules
+module.exports = componentTagger
+module.exports.default = componentTagger

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@acebuilder/component-tagger",
-  "version": "0.0.1",
-  "description": "Next.js webpack pre-loader to tag React components with AceBuilder metadata during development.",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Next.js dev loader to tag React components with AceBuilder metadata (Turbopack + webpack).",
   "main": "index.js",
   "types": "index.d.ts",
   "exports": {
@@ -10,6 +11,11 @@
       "require": "./index.js",
       "default": "./index.js",
       "types": "./index.d.ts"
+    },
+    "./lib/loader": {
+      "import": "./lib/loader.js",
+      "require": "./lib/loader.js",
+      "default": "./lib/loader.js"
     }
   },
   "files": [
@@ -24,13 +30,29 @@
   "engines": {
     "node": ">=18"
   },
+  "peerDependencies": {
+    "next": ">=14"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "keywords": [
-    "acebuilder"
+    "acebuilder",
+    "nextjs",
+    "turbopack",
+    "webpack",
+    "react"
   ],
+  "license": "MIT",
+  "scripts": {
+    "publish:package": "npm publish --access public"
+  },
   "dependencies": {
     "@babel/parser": "^7.28.4",
     "estree-walker": "2.0.2",
     "magic-string": "^0.30.19",
     "source-map": "^0.7.0"
   }
-}
+}