Support monorepo

.changepacks/changepack_log_hCDVUDEgLJRqiCNyqEOcJ.json

@@ -0,0 +1,5 @@
+{
+  "changes": { "packages/next-plugin/package.json": "Patch" },
+  "note": "Support monorepo on turbopack",
+  "date": "2025-12-08T09:38:36.536760600Z"
+}

apps/next/next.config.mjs

@@ -6,4 +6,6 @@ const nextConfig = {
   /* config options here */
 }
 
-export default DevupUI(nextConfig)
+export default DevupUI(nextConfig, {
+  include: ['vite-lib-example'],
+})

apps/next/package.json

@@ -13,7 +13,8 @@
     "react": "^19.2",
     "react-dom": "^19.2",
     "next": "^16.0",
-    "@devup-ui/react": "workspace:*"
+    "@devup-ui/react": "workspace:*",
+    "vite-lib-example": "workspace:*"
   },
   "devDependencies": {
     "@devup-ui/next-plugin": "workspace:*",

apps/next/src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { Box, css, styled, Text } from '@devup-ui/react'
 import { useState } from 'react'
+import { Lib } from 'vite-lib-example'
 const color = 'yellow'
 
 const StyledFooter = styled.footer<{ type: '1' | '2' }>`
@@ -38,6 +39,7 @@ export default function HomePage() {
         py="28px"
       >
         <Box>hello</Box>
+        <Lib />
         <Box>hello</Box>
       </Box>
       <Text

packages/next-plugin/src/__tests__/plugin.test.ts

@@ -317,6 +317,7 @@ describe('DevupUINextPlugin', () => {
         '@devup-ui/react',
         false,
         expect.any(String),
+        [],
       )
     })
     it('should create theme.d.ts file', async () => {

packages/next-plugin/src/__tests__/preload.test.ts

@@ -6,6 +6,9 @@ import { join } from 'node:path'
 import { codeExtract, getCss } from '@devup-ui/wasm'
 import { globSync } from 'glob'
 
+import { findTopPackageRoot } from '../find-top-package-root'
+import { getPackageName } from '../get-package-name'
+import { hasLocalPackage } from '../has-localpackage'
 import { preload } from '../preload'
 
 // Mock dependencies
@@ -33,6 +36,18 @@ vi.mock('@devup-ui/wasm', () => ({
   getCss: vi.fn(),
 }))
 
+vi.mock('../find-top-package-root', () => ({
+  findTopPackageRoot: vi.fn(),
+}))
+
+vi.mock('../get-package-name', () => ({
+  getPackageName: vi.fn(),
+}))
+
+vi.mock('../has-localpackage', () => ({
+  hasLocalPackage: vi.fn(),
+}))
+
 describe('preload', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -63,13 +78,14 @@ describe('preload', () => {
     const singleCss = false
     const cssDir = '/output/css'
 
-    preload(excludeRegex, libPackage, singleCss, cssDir)
+    preload(excludeRegex, libPackage, singleCss, cssDir, [])
 
     expect(globSync).toHaveBeenCalledWith(
       ['**/*.tsx', '**/*.ts', '**/*.js', '**/*.mjs'],
       {
         follow: true,
         absolute: true,
+        cwd: expect.any(String),
       },
     )
   })
@@ -81,7 +97,7 @@ describe('preload', () => {
       .mockReturnValueOnce('src/App.tsx')
       .mockReturnValueOnce('src/components/Button.tsx')
       .mockReturnValueOnce('.next/page.tsx')
-    preload(/node_modules/, '@devup-ui/react', false, '/output/css')
+    preload(/node_modules/, '@devup-ui/react', false, '/output/css', [])
 
     expect(codeExtract).toHaveBeenCalledTimes(2)
     expect(codeExtract).toHaveBeenCalledWith(
@@ -106,7 +122,7 @@ describe('preload', () => {
       [Symbol.dispose]: vi.fn(),
     })
 
-    preload(/node_modules/, '@devup-ui/react', false, '/output/css')
+    preload(/node_modules/, '@devup-ui/react', false, '/output/css', [])
 
     expect(writeFileSync).toHaveBeenCalledWith(
       join('/output/css', 'styles.css'),
@@ -127,7 +143,7 @@ describe('preload', () => {
     })
     vi.mocked(getCss).mockReturnValue('')
 
-    preload(/node_modules/, '@devup-ui/react', false, '/output/css')
+    preload(/node_modules/, '@devup-ui/react', false, '/output/css', [])
 
     expect(writeFileSync).toHaveBeenCalledWith(
       join('/output/css', 'devup-ui.css'),
@@ -147,7 +163,7 @@ describe('preload', () => {
       [Symbol.dispose]: vi.fn(),
     })
 
-    preload(/node_modules/, '@devup-ui/react', false, '/output/css')
+    preload(/node_modules/, '@devup-ui/react', false, '/output/css', [])
 
     expect(writeFileSync).toHaveBeenCalledWith(
       join('/output/css', 'styles.css'),
@@ -167,7 +183,7 @@ describe('preload', () => {
       [Symbol.dispose]: vi.fn(),
     })
 
-    preload(/node_modules/, '@devup-ui/react', false, '/output/css')
+    preload(/node_modules/, '@devup-ui/react', false, '/output/css', [])
 
     expect(writeFileSync).toHaveBeenCalledWith(
       join('/output/css', 'styles.css'),
@@ -181,7 +197,7 @@ describe('preload', () => {
     const singleCss = true
     const cssDir = '/custom/css/dir'
 
-    preload(/node_modules/, libPackage, singleCss, cssDir)
+    preload(/node_modules/, libPackage, singleCss, cssDir, [])
 
     expect(codeExtract).toHaveBeenCalledWith(
       expect.stringMatching(/App\.tsx$/),
@@ -218,7 +234,7 @@ describe('preload', () => {
         [Symbol.dispose]: vi.fn(),
       })
 
-    preload(/node_modules/, '@devup-ui/react', false, '/output/css')
+    preload(/node_modules/, '@devup-ui/react', false, '/output/css', [])
 
     expect(writeFileSync).toHaveBeenCalledTimes(3)
     expect(writeFileSync).toHaveBeenCalledWith(
@@ -232,4 +248,63 @@ describe('preload', () => {
       'utf-8',
     )
   })
+
+  it('should recurse into local workspaces when include is provided', () => {
+    const files = ['src/App.tsx']
+    vi.mocked(findTopPackageRoot).mockReturnValue('/repo')
+    vi.mocked(hasLocalPackage)
+      .mockReturnValueOnce(true)
+      .mockReturnValueOnce(false)
+    vi.mocked(globSync)
+      .mockReturnValueOnce([
+        '/repo/packages/pkg-a/package.json',
+        '/repo/packages/pkg-b/package.json',
+      ])
+      .mockReturnValueOnce(files)
+    vi.mocked(getPackageName)
+      .mockReturnValueOnce('pkg-a')
+      .mockReturnValueOnce('pkg-b')
+    vi.mocked(realpathSync).mockReturnValueOnce('src/App.tsx')
+
+    preload(/node_modules/, '@devup-ui/react', false, '/output/css', ['pkg-a'])
+
+    expect(findTopPackageRoot).toHaveBeenCalled()
+    expect(globSync).toHaveBeenCalledWith(
+      ['package.json', '!**/node_modules/**'],
+      {
+        follow: true,
+        absolute: true,
+        cwd: '/repo',
+      },
+    )
+    expect(codeExtract).toHaveBeenCalledTimes(1)
+    expect(realpathSync).toHaveBeenCalledWith('src/App.tsx')
+  })
+
+  it('should skip test and build outputs based on filters', () => {
+    vi.mocked(globSync).mockReturnValue([
+      'src/App.test.tsx',
+      '.next/page.tsx',
+      'out/index.js',
+      'src/keep.ts',
+    ])
+    vi.mocked(realpathSync)
+      .mockReturnValueOnce('src/App.test.tsx')
+      .mockReturnValueOnce('.next/page.tsx')
+      .mockReturnValueOnce('out/index.js')
+      .mockReturnValueOnce('src/keep.ts')
+
+    preload(/exclude/, '@devup-ui/react', false, '/output/css', [])
+
+    expect(codeExtract).toHaveBeenCalledTimes(1)
+    expect(codeExtract).toHaveBeenCalledWith(
+      expect.stringMatching(/keep\.ts$/),
+      'const Button = () => <div>Hello</div>',
+      '@devup-ui/react',
+      '/output/css',
+      false,
+      false,
+      true,
+    )
+  })
 })

packages/next-plugin/src/__tests__/utils.test.ts

@@ -0,0 +1,83 @@
+import type { PathLike } from 'node:fs'
+import { join } from 'node:path'
+
+import { describe, expect, it, vi } from 'vitest'
+
+import { findTopPackageRoot } from '../find-top-package-root'
+import { getPackageName } from '../get-package-name'
+import { hasLocalPackage } from '../has-localpackage'
+
+vi.mock('node:fs', () => ({
+  existsSync: vi.fn(),
+  readFileSync: vi.fn(),
+}))
+
+const { existsSync, readFileSync } = await import('node:fs')
+
+describe('findTopPackageRoot', () => {
+  it('returns highest directory containing package.json', () => {
+    const root = join('/', 'repo')
+    const child = join(root, 'packages', 'pkg')
+    vi.mocked(existsSync).mockImplementation((path: PathLike) => {
+      if (path === join(root, 'package.json')) return true
+      return false
+    })
+
+    const result = findTopPackageRoot(child)
+
+    expect(result).toBe(root)
+  })
+
+  it('falls back to cwd when no package.json found', () => {
+    const cwd = join('/', 'repo', 'packages', 'pkg')
+    vi.mocked(existsSync).mockReturnValue(false)
+
+    const result = findTopPackageRoot(cwd)
+
+    expect(result).toBe(cwd)
+  })
+})
+
+describe('hasLocalPackage', () => {
+  it('detects workspace dependency', () => {
+    vi.mocked(readFileSync).mockReturnValue(
+      JSON.stringify({
+        dependencies: {
+          foo: 'workspace:*',
+          bar: '^1.0.0',
+        },
+      }),
+    )
+
+    expect(hasLocalPackage()).toBe(true)
+  })
+
+  it('returns false when no workspace dependency', () => {
+    vi.mocked(readFileSync).mockReturnValue(
+      JSON.stringify({
+        dependencies: {
+          foo: '^1.0.0',
+        },
+      }),
+    )
+
+    expect(hasLocalPackage()).toBe(false)
+  })
+
+  it('returns false when dependencies field is missing', () => {
+    vi.mocked(readFileSync).mockReturnValue('{}')
+
+    expect(hasLocalPackage()).toBe(false)
+  })
+})
+
+describe('getPackageName', () => {
+  it('reads and returns package name', () => {
+    vi.mocked(readFileSync).mockReturnValue(
+      JSON.stringify({ name: '@scope/pkg' }),
+    )
+
+    expect(getPackageName('/path/package.json')).toBe('@scope/pkg')
+    expect(readFileSync).toHaveBeenCalledWith('/path/package.json', 'utf-8')
+  })
+})

packages/next-plugin/src/find-top-package-root.ts

@@ -0,0 +1,27 @@
+import { existsSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+
+/**
+ * find package root
+ *
+ * Find the root of the package by checking the package.json file
+ * @returns
+ */
+export function findTopPackageRoot(pwd = process.cwd()) {
+  let current = pwd
+  let topWithPackage: string | null = null
+
+  while (true) {
+    if (existsSync(join(current, 'package.json'))) {
+      topWithPackage = current
+    }
+
+    const parent = dirname(current)
+    if (parent === current) {
+      break
+    }
+    current = parent
+  }
+
+  return topWithPackage ?? pwd
+}

packages/next-plugin/src/get-package-name.ts

@@ -0,0 +1,7 @@
+import { readFileSync } from 'node:fs'
+
+export function getPackageName(packageJsonPath: string) {
+  const packageJson = readFileSync(packageJsonPath, 'utf-8')
+  const packageJsonObject = JSON.parse(packageJson)
+  return packageJsonObject.name
+}

packages/next-plugin/src/has-localpackage.ts

@@ -0,0 +1,16 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+/**
+ * has local package
+ *
+ * Check if the include workspace:* package is a local package
+ * @returns
+ */
+export function hasLocalPackage() {
+  const packageJson = readFileSync(join(process.cwd(), 'package.json'), 'utf-8')
+  const packageJsonObject = JSON.parse(packageJson)
+  return Object.values(packageJsonObject.dependencies ?? {}).some(
+    (pkg: unknown) => typeof pkg === 'string' && pkg.includes('workspace:'),
+  )
+}

packages/next-plugin/src/plugin.ts

@@ -97,7 +97,7 @@ export function DevupUI(
       writeFileSync(join(cssDir, 'devup-ui.css'), getCss(null, false))
     } else {
       // build
-      preload(excludeRegex, libPackage, singleCss, cssDir)
+      preload(excludeRegex, libPackage, singleCss, cssDir, include)
     }
     const defaultSheet = JSON.parse(exportSheet())
     const defaultClassMap = JSON.parse(exportClassMap())