diff --git a/demos/turbopack-next15/package.json b/demos/turbopack-next15/package.json index bb2e0ee..6b9f60d 100644 --- a/demos/turbopack-next15/package.json +++ b/demos/turbopack-next15/package.json @@ -9,22 +9,22 @@ "lint": "next lint" }, "dependencies": { - "react": "19.1.0", - "react-dom": "19.1.0", - "next": "15.4.4" + "next": "15.5.2", + "react": "19.1.1", + "react-dom": "19.1.1" }, "devDependencies": { - "typescript": "^5", - "@types/node": "^20", - "@types/react": "^19", - "@types/react-dom": "^19", - "@tailwindcss/postcss": "^4", - "tailwindcss": "^4", - "eslint": "^9", - "eslint-config-next": "15.4.4", - "@eslint/eslintrc": "^3", + "@eslint/eslintrc": "^3.3.1", + "@mdx-js/loader": "^3.1.1", + "@next/mdx": "15.5.2", + "@tailwindcss/postcss": "^4.1.13", + "@types/node": "^24.3.1", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.9", "code-inspector-plugin": "workspace:^", - "@next/mdx": "15.4.4", - "@mdx-js/loader": "^3.1.0" + "eslint": "^9.34.0", + "eslint-config-next": "15.5.2", + "tailwindcss": "^4.1.13", + "typescript": "^5.9.2" } } diff --git a/demos/turbopack-next15/src/middleware.ts b/demos/turbopack-next15/src/middleware.ts new file mode 100644 index 0000000..3216f64 --- /dev/null +++ b/demos/turbopack-next15/src/middleware.ts @@ -0,0 +1,4 @@ +export function middleware() { + // This empty middleware demonstrates that code-inspector + // works correctly with Turbopack when middleware.ts is present +} \ No newline at end of file diff --git a/packages/code-inspector-plugin/package.json b/packages/code-inspector-plugin/package.json index 2367261..204c220 100644 --- a/packages/code-inspector-plugin/package.json +++ b/packages/code-inspector-plugin/package.json @@ -42,6 +42,7 @@ "keywords": [ "webpack", "vite", + "turbopack", "plugin", "vue", "vscode", diff --git a/packages/turbopack/package.json b/packages/turbopack/package.json index fbea803..52e29c5 100644 --- a/packages/turbopack/package.json +++ b/packages/turbopack/package.json @@ -23,7 +23,8 @@ "types": "./types/index.d.ts", "default": "./dist/index.js" } - } + }, + "./dist/turbopack-loader.js": "./dist/turbopack-loader.js" }, "keywords": [ "turbopack", @@ -47,7 +48,7 @@ }, "scripts": { "clear": "rimraf ./dist && rimraf ./types", - "build": "pnpm clear && tsc && vite build", + "build": "pnpm clear && tsc && vite build && cp src/turbopack-loader.js dist/", "pub": "pnpm publish", "pub:beta": "pnpm publish --tag beta" } diff --git a/packages/turbopack/src/index.ts b/packages/turbopack/src/index.ts index ee38809..bccfb1a 100644 --- a/packages/turbopack/src/index.ts +++ b/packages/turbopack/src/index.ts @@ -1,6 +1,8 @@ -import { CodeOptions, RecordInfo, isDev } from '@code-inspector/core'; -import path from 'path'; -import { fileURLToPath } from 'url'; +import { + CodeOptions, + RecordInfo, + isDev +} from '@code-inspector/core'; interface Options extends CodeOptions { close?: boolean; @@ -23,38 +25,16 @@ export function TurbopackCodeInspectorPlugin( output: options.output, }; - let WebpackEntry = null; - if (typeof require !== 'undefined' && typeof require.resolve === 'function') { - WebpackEntry = require.resolve('@code-inspector/webpack'); - } - if (typeof import.meta.resolve === 'function') { - const dir = import.meta.resolve( - '@code-inspector/webpack' - ) as unknown as string; - WebpackEntry = fileURLToPath(dir); - } - const WebpackDistDir = path.resolve(WebpackEntry, '..'); - return { - '**/*.{jsx,tsx,js,ts,mjs,mts}': { - loaders: [ - { - loader: `${WebpackDistDir}/loader.js`, - options: { - ...options, - record, - }, - ...(options.enforcePre === false ? {} : { enforce: 'pre' }), - }, - { - loader: `${WebpackDistDir}/inject-loader.js`, - options: { - ...options, - record, - }, - enforce: 'pre', - }, - ], - }, + '**/*.{jsx,tsx}': { + loaders: [{ + loader: '@code-inspector/turbopack/dist/turbopack-loader.js', + options: { + ...options, + record, + inject: true, + } + }] + } }; } diff --git a/packages/turbopack/src/turbopack-loader.js b/packages/turbopack/src/turbopack-loader.js new file mode 100644 index 0000000..c81b56d --- /dev/null +++ b/packages/turbopack/src/turbopack-loader.js @@ -0,0 +1,38 @@ +const { + normalizePath, + getCodeWithWebComponent, + isExcludedFile, + transformCode, + isJsTypeFile, +} = require('@code-inspector/core'); + +module.exports = async function turbopackLoader(content) { + this.cacheable && this.cacheable(true); + const filePath = normalizePath(this.resourcePath); + const options = this.query; + + if (isExcludedFile(filePath, options)) { + return content; + } + + // start server and inject client code to entry file + content = await getCodeWithWebComponent({ + options, + file: filePath, + code: content, + record: options.record, + }); + + // Transform JSX/TSX files to add data-inspector attributes + if (isJsTypeFile(filePath)) { + content = transformCode({ + content, + filePath, + fileType: 'jsx', + escapeTags: options.escapeTags || [], + pathType: options.pathType, + }); + } + + return content; +}; \ No newline at end of file