domagic-turbopack-plugin

DOMagic 的 Next.js Turbopack 适配包，用于开发环境下给 React JSX/TSX 节点写入 DOMagic 定位信息，并通过独立本地服务处理 AI 样式修改和提交代码相关接口。

Turbopack 不支持 webpack plugin，所以这里不是 new Plugin() 形态，而是 withDOMagicTurbopack() + domagic-turbopack-server。

安装

npm install -D domagic-turbopack-plugin

配置 Next

// next.config.ts
import { withDOMagicTurbopack } from 'domagic-turbopack-plugin'

export default withDOMagicTurbopack(
  {
    // 你的原 Next config
  },
  {
    pathMode: 'relative',
  },
)

如果你的 next.config.js 还是 CommonJS，可以用动态 import：

// next.config.js
module.exports = async () => {
  const { withDOMagicTurbopack } = await import('domagic-turbopack-plugin')

  return withDOMagicTurbopack(
    {
      // 你的原 Next config
    },
    {
      pathMode: 'relative',
    },
  )
}

启动

开两个终端：

npx domagic-turbopack-server \
  --provider codex \
  --cwd "$PWD" \
  --command "/你的/codex/绝对路径"

npx next dev --turbopack

默认 DOMagic 服务地址是：

http://127.0.0.1:32183

如果你想换端口：

npx domagic-turbopack-server --port 42183

同时在 Next 配置里保持一致：

export default withDOMagicTurbopack(
  {},
  {
    server: {
      port: 42183,
    },
  },
)

支持范围

• 支持 Next.js Turbopack 的 .tsx / .jsx React 文件。
• 内部复用 DOMagic 核心能力，业务项目只需要安装 domagic-turbopack-plugin。
• 通过 Next rewrites 把 /__domagic__/* 转发到本地 DOMagic sidecar 服务。
• 不支持 Vue 文件。Vue 场景继续用 Vite/Webpack 适配包更合适。

注意

Turbopack 当前不支持 webpack plugins，也不使用 HtmlWebpackPlugin。因此 DOMagic runtime 是通过 loader 注入到开发产物里的，并用全局标记避免重复初始化。

一般不需要在业务代码里手动引入 runtime。如果你确实有自定义注入场景，请从 Turbopack 包自己的入口引入：

import { createOverlayRuntimeScript } from 'domagic-turbopack-plugin/runtime'

不要在 Turbopack 项目里直接引用 domagic-vite-plugin/runtime。

DOMagic 默认只在开发环境启用，next build / NODE_ENV=production 时会自动跳过，不会影响线上生产包。