@acebuilder/component-tagger 0.1.0 → 0.1.2

package/README.md

@@ -2,17 +2,15 @@
 
 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)
+## Usage
 
-Wrap your Next config — enables both bundlers:
+Wrap your Next config (injected automatically in AceBuilder sandboxes):
 
 ```js
 // next.config.mjs
@@ -24,26 +22,22 @@ const nextConfig = {}
 export default componentTagger()(nextConfig)
 ```
 
-## Turbopack-only
+## Bundler support
 
-If you prefer not to use the wrapper:
+| Mode | Tagging |
+|------|---------|
+| `next dev` (Turbopack, default) | Skipped — use runtime fiber resolution in the helper SDK |
+| `next dev --webpack` | Full build-time tagging |
+| `next build` | Full build-time tagging (webpack) |
 
-```js
-import componentTagger from '@acebuilder/component-tagger'
-
-export default {
-  turbopack: {
-    rules: componentTagger.turbopackRules,
-  },
-  // ...rest of next config
-}
-```
+Turbopack custom loader rules are disabled because they currently produce broken module paths (`welcome.tsx.tsx`).
 
 ## AceBuilder sandboxes
 
-Platform deploy injects this package automatically:
+Platform deploy injects automatically:
 
 - `package.json` devDependency: `"@acebuilder/component-tagger": "latest"`
 - `next.config` wrapper via AST injection
+- SDK `<Script>` in root layout
 
-User projects do not need to add it manually.
+User templates stay unchanged.

package/index.d.ts

@@ -5,37 +5,14 @@ export interface AceBuilderComponentTaggerOptions {
   test?: RegExp
 }
 
-export interface AceBuilderTurbopackRule {
-  loaders: string[]
-  as: string
-}
-
-export type AceBuilderTurbopackRules = Record<string, AceBuilderTurbopackRule>
-
 export type WithAceBuilderComponentTagger = (config: NextConfig) => NextConfig
 
 /**
- * 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 }
- * ```
+ * Next.js plugin — webpack pre-loader for component tagging.
+ * Default Turbopack dev skips the loader (avoids `*.tsx.tsx` resolution bugs).
  */
 declare function withAceBuilderComponentTagger(
   options?: AceBuilderComponentTaggerOptions,
 ): WithAceBuilderComponentTagger
 
-declare namespace withAceBuilderComponentTagger {
-  /** Turbopack loader rules — fast path without wrapping webpack. */
-  const turbopackRules: AceBuilderTurbopackRules
-}
-
 export default withAceBuilderComponentTagger

package/index.js

@@ -3,33 +3,17 @@
 /**
  * Next.js plugin for AceBuilder component tagging.
  *
- * Fast path (recommended): inject `turbopack.rules` in next.config — see
- * `componentTagger.turbopackRules` or sandbox `next-config-inject.ts`.
- *
- * Legacy path: wrap next.config with this plugin (webpack + turbopack rules).
+ * Uses a webpack pre-loader (works with `next dev --webpack` and production builds).
+ * Turbopack custom loaders currently break module resolution (`*.tsx.tsx`) — not enabled.
  */
 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,
@@ -50,6 +34,5 @@ const componentTagger = (pluginOptions = {}) => (inputConfig = {}) => {
   return nextConfig
 }
 
-componentTagger.turbopackRules = turbopackRules
 module.exports = componentTagger
 module.exports.default = componentTagger

package/lib/loader.js

@@ -52,19 +52,24 @@ function componentTagger(code, map) {
       }
     }
 
+    const resourcePath = this.resourcePath || ''
+    const rootContext = this.rootContext || this.context || process.cwd()
+
     // Do not process vendor code
-    if (/node_modules/.test(this.resourcePath)) return done(null, code, inMap)
+    if (/node_modules/.test(resourcePath)) return done(null, code, inMap)
 
     // Parse with Babel (supports JSX and TypeScript)
     const ast = parse(code, {
       sourceType: 'module',
       plugins: ['jsx', 'typescript'],
-      sourceFilename: this.resourcePath,
+      sourceFilename: resourcePath,
     })
 
     // MagicString allows non-destructive code edits and sourcemap generation
     const ms = new MagicString(code)
-    const fileRelative = path.relative(this.rootContext, this.resourcePath)
+    const fileRelative = resourcePath
+      ? path.relative(rootContext, resourcePath).replace(/\\/g, '/')
+      : 'unknown'
     
 
     let mutated = false
@@ -151,9 +156,9 @@ function componentTagger(code, map) {
     // Create a plain RawSourceMap object for webpack/Turbopack
     const mapStr = ms.generateMap({
       hires: true,
-      source: this.resourcePath,
+      source: resourcePath,
       includeContent: true,
-      file: this.resourcePath,
+      file: resourcePath,
     }).toString()
 
     const outMap = JSON.parse(mapStr)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acebuilder/component-tagger",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "description": "Next.js dev loader to tag React components with AceBuilder metadata (Turbopack + webpack).",
   "main": "index.js",