Skip to content

Commit 134a35e

Browse files
owjs3901owjs3901
authored
Merge pull request #469 from dev-five-git/fix-turbo-build-issue
Fix loader issue
2 parents 556aa1e + 9813476 commit 134a35e

File tree

13 files changed

+119
-161
lines changed

13 files changed

+119
-161
lines changed

‎.changeset/eight-rings-sleep.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@devup-ui/webpack-plugin': patch
3+
'@devup-ui/next-plugin': patch
4+
---
5+
6+
Fix turbo build issue, split webpack, turbopack loader

‎packages/next-plugin/src/__tests__/css-loader.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('devupUICssLoader', () => {
2626
resourcePath: 'devup-ui.css',
2727
getOptions: () => ({ watch: false }),
2828
} as any)(Buffer.from('data'), '')
29-
expect(callback).toBeCalledWith(null, 'get css', '', undefined)
29+
expect(callback).toBeCalledWith(null, Buffer.from('data'), '', undefined)
3030
})
3131

3232
it('should return _compiler hit css on watch', () => {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,9 @@ describe('devupUILoader', () => {
139139
false,
140140
true,
141141
)
142-
expect(t.async()).toHaveBeenCalledWith(null, 'code', null)
142+
await vi.waitFor(() => {
143+
expect(t.async()).toHaveBeenCalledWith(null, 'code', null)
144+
})
143145
expect(writeFile).not.toHaveBeenCalledWith('cssFile', 'css', {
144146
encoding: 'utf-8',
145147
})

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

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,9 @@ describe('DevupUINextPlugin', () => {
9191
'./df/devup-ui/*.css': [
9292
{
9393
loader: '@devup-ui/next-plugin/css-loader',
94+
options: {
95+
watch: false,
96+
},
9497
},
9598
],
9699
'*.{tsx,ts,js,mjs}': {
@@ -122,9 +125,12 @@ describe('DevupUINextPlugin', () => {
122125
condition: {
123126
not: {
124127
path: new RegExp(
125-
`node_modules(?!.*(${['@devup-ui']
128+
`(node_modules(?!.*(${['@devup-ui']
126129
.join('|')
127-
.replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
130+
.replaceAll(
131+
'/',
132+
'[\\/\\\\_]',
133+
)})([\\/\\\\.]|$)))|(.mdx.[tj]sx?$)`,
128134
),
129135
},
130136
},
@@ -146,15 +152,21 @@ describe('DevupUINextPlugin', () => {
146152
'./df/devup-ui/*.css': [
147153
{
148154
loader: '@devup-ui/next-plugin/css-loader',
155+
options: {
156+
watch: false,
157+
},
149158
},
150159
],
151160
'*.{tsx,ts,js,mjs}': {
152161
condition: {
153162
not: {
154163
path: new RegExp(
155-
`node_modules(?!.*(${['@devup-ui']
164+
`(node_modules(?!.*(${['@devup-ui']
156165
.join('|')
157-
.replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
166+
.replaceAll(
167+
'/',
168+
'[\\/\\\\_]',
169+
)})([\\/\\\\.]|$)))|(.mdx.[tj]sx?$)`,
158170
),
159171
},
160172
},
@@ -208,15 +220,21 @@ describe('DevupUINextPlugin', () => {
208220
'./df/devup-ui/*.css': [
209221
{
210222
loader: '@devup-ui/next-plugin/css-loader',
223+
options: {
224+
watch: false,
225+
},
211226
},
212227
],
213228
'*.{tsx,ts,js,mjs}': {
214229
condition: {
215230
not: {
216231
path: new RegExp(
217-
`node_modules(?!.*(${['@devup-ui']
232+
`(node_modules(?!.*(${['@devup-ui']
218233
.join('|')
219-
.replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
234+
.replaceAll(
235+
'/',
236+
'[\\/\\\\_]',
237+
)})([\\/\\\\.]|$)))|(.mdx.[tj]sx?$)`,
220238
),
221239
},
222240
},
@@ -266,13 +284,12 @@ describe('DevupUINextPlugin', () => {
266284
})
267285
expect(preload).toHaveBeenCalledWith(
268286
new RegExp(
269-
`node_modules(?!.*(${['@devup-ui']
287+
`(node_modules(?!.*(${['@devup-ui']
270288
.join('|')
271-
.replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
289+
.replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$)))|(.mdx.[tj]sx?$)`,
272290
),
273291
'@devup-ui/react',
274292
false,
275-
'theme',
276293
expect.any(String),
277294
)
278295
})

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

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { readFileSync } from 'node:fs'
33
import { existsSync } from 'node:fs'
44
import { join } from 'node:path'
55

6-
import { codeExtract, registerTheme } from '@devup-ui/wasm'
6+
import { codeExtract, getCss } from '@devup-ui/wasm'
77
import { globSync } from 'glob'
88

99
import { preload } from '../preload'
@@ -30,6 +30,7 @@ vi.mock('glob', () => ({
3030
vi.mock('@devup-ui/wasm', () => ({
3131
codeExtract: vi.fn(),
3232
registerTheme: vi.fn(),
33+
getCss: vi.fn(),
3334
}))
3435

3536
describe('preload', () => {
@@ -60,10 +61,9 @@ describe('preload', () => {
6061
const excludeRegex = /node_modules/
6162
const libPackage = '@devup-ui/react'
6263
const singleCss = false
63-
const theme = { colors: { primary: 'blue' } }
6464
const cssDir = '/output/css'
6565

66-
preload(excludeRegex, libPackage, singleCss, theme, cssDir)
66+
preload(excludeRegex, libPackage, singleCss, cssDir)
6767

6868
expect(globSync).toHaveBeenCalledWith(
6969
['**/*.tsx', '**/*.ts', '**/*.js', '**/*.mjs'],
@@ -74,22 +74,14 @@ describe('preload', () => {
7474
)
7575
})
7676

77-
it('should register theme before processing files', () => {
78-
const theme = { colors: { primary: 'blue' } }
79-
80-
preload(/node_modules/, '@devup-ui/react', false, theme, '/output/css')
81-
82-
expect(registerTheme).toHaveBeenCalledWith(theme)
83-
})
84-
8577
it('should process each collected file', () => {
8678
const files = ['src/App.tsx', 'src/components/Button.tsx', '.next/page.tsx']
8779
vi.mocked(globSync).mockReturnValue(files)
8880
vi.mocked(realpathSync)
8981
.mockReturnValueOnce('src/App.tsx')
9082
.mockReturnValueOnce('src/components/Button.tsx')
9183
.mockReturnValueOnce('.next/page.tsx')
92-
preload(/node_modules/, '@devup-ui/react', false, {}, '/output/css')
84+
preload(/node_modules/, '@devup-ui/react', false, '/output/css')
9385

9486
expect(codeExtract).toHaveBeenCalledTimes(2)
9587
expect(codeExtract).toHaveBeenCalledWith(
@@ -114,7 +106,7 @@ describe('preload', () => {
114106
[Symbol.dispose]: vi.fn(),
115107
})
116108

117-
preload(/node_modules/, '@devup-ui/react', false, {}, '/output/css')
109+
preload(/node_modules/, '@devup-ui/react', false, '/output/css')
118110

119111
expect(writeFileSync).toHaveBeenCalledWith(
120112
join('/output/css', 'styles.css'),
@@ -133,10 +125,15 @@ describe('preload', () => {
133125
updatedBaseStyle: false,
134126
[Symbol.dispose]: vi.fn(),
135127
})
128+
vi.mocked(getCss).mockReturnValue('')
136129

137-
preload(/node_modules/, '@devup-ui/react', false, {}, '/output/css')
130+
preload(/node_modules/, '@devup-ui/react', false, '/output/css')
138131

139-
expect(writeFileSync).not.toHaveBeenCalled()
132+
expect(writeFileSync).toHaveBeenCalledWith(
133+
join('/output/css', 'devup-ui.css'),
134+
'',
135+
'utf-8',
136+
)
140137
})
141138

142139
it('should handle empty CSS content', () => {
@@ -150,7 +147,7 @@ describe('preload', () => {
150147
[Symbol.dispose]: vi.fn(),
151148
})
152149

153-
preload(/node_modules/, '@devup-ui/react', false, {}, '/output/css')
150+
preload(/node_modules/, '@devup-ui/react', false, '/output/css')
154151

155152
expect(writeFileSync).toHaveBeenCalledWith(
156153
join('/output/css', 'styles.css'),
@@ -170,7 +167,7 @@ describe('preload', () => {
170167
[Symbol.dispose]: vi.fn(),
171168
})
172169

173-
preload(/node_modules/, '@devup-ui/react', false, {}, '/output/css')
170+
preload(/node_modules/, '@devup-ui/react', false, '/output/css')
174171

175172
expect(writeFileSync).toHaveBeenCalledWith(
176173
join('/output/css', 'styles.css'),
@@ -184,7 +181,7 @@ describe('preload', () => {
184181
const singleCss = true
185182
const cssDir = '/custom/css/dir'
186183

187-
preload(/node_modules/, libPackage, singleCss, {}, cssDir)
184+
preload(/node_modules/, libPackage, singleCss, cssDir)
188185

189186
expect(codeExtract).toHaveBeenCalledWith(
190187
expect.stringMatching(/App\.tsx$/),
@@ -221,9 +218,9 @@ describe('preload', () => {
221218
[Symbol.dispose]: vi.fn(),
222219
})
223220

224-
preload(/node_modules/, '@devup-ui/react', false, {}, '/output/css')
221+
preload(/node_modules/, '@devup-ui/react', false, '/output/css')
225222

226-
expect(writeFileSync).toHaveBeenCalledTimes(2)
223+
expect(writeFileSync).toHaveBeenCalledTimes(3)
227224
expect(writeFileSync).toHaveBeenCalledWith(
228225
join('/output/css', 'app.css'),
229226
'.app { margin: 0; }',

‎packages/next-plugin/src/css-loader.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,23 @@ function getFileNumByFilename(filename: string) {
66
return parseInt(filename.split('devup-ui-')[1].split('.')[0])
77
}
88

9-
const devupUICssLoader: RawLoaderDefinitionFunction = function (_, map, meta) {
10-
const fileNum = getFileNumByFilename(this.resourcePath)
11-
this.callback(null, getCss(fileNum, true), map, meta)
9+
export interface DevupUICssLoaderOptions {
10+
// turbo
11+
theme: object
12+
defaultSheet: object
13+
defaultClassMap: object
14+
defaultFileMap: object
15+
watch: boolean
1216
}
17+
18+
const devupUICssLoader: RawLoaderDefinitionFunction<DevupUICssLoaderOptions> =
19+
function (source, map, meta) {
20+
const { watch } = this.getOptions()
21+
this.callback(
22+
null,
23+
!watch ? source : getCss(getFileNumByFilename(this.resourcePath), true),
24+
map,
25+
meta,
26+
)
27+
}
1328
export default devupUICssLoader

‎packages/next-plugin/src/loader.ts‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -45,29 +45,23 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
4545
defaultFileMap,
4646
defaultSheet,
4747
} = this.getOptions()
48-
const callback = this.async()
49-
const id = this.resourcePath
5048
if (!init) {
5149
init = true
52-
if (defaultFileMap) importFileMap(defaultFileMap)
53-
if (defaultClassMap) importClassMap(defaultClassMap)
54-
if (defaultSheet) importSheet(defaultSheet)
55-
if (theme) registerTheme(theme)
50+
importFileMap(defaultFileMap)
51+
importClassMap(defaultClassMap)
52+
importSheet(defaultSheet)
53+
registerTheme(theme)
5654
}
5755

56+
const callback = this.async()
5857
try {
58+
const id = this.resourcePath
5959
let relCssDir = relative(dirname(id), cssDir).replaceAll('\\', '/')
6060

6161
const relativePath = relative(process.cwd(), id)
6262

6363
if (!relCssDir.startsWith('./')) relCssDir = `./${relCssDir}`
64-
const {
65-
code,
66-
css = '',
67-
map,
68-
cssFile,
69-
updatedBaseStyle,
70-
} = codeExtract(
64+
const { code, map, cssFile, updatedBaseStyle } = codeExtract(
7165
relativePath,
7266
source.toString(),
7367
libPackage,
@@ -78,34 +72,27 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
7872
)
7973
const sourceMap = map ? JSON.parse(map) : null
8074
const promises: Promise<void>[] = []
81-
if (updatedBaseStyle) {
75+
if (updatedBaseStyle && watch) {
8276
// update base style
8377
promises.push(
8478
writeFile(join(cssDir, 'devup-ui.css'), getCss(null, false), 'utf-8'),
8579
)
8680
}
87-
if (cssFile) {
88-
const content = `${this.resourcePath} ${Date.now()}`
89-
// should be reset css
81+
if (cssFile && watch) {
82+
// don't write file when build
9083
promises.push(
9184
writeFile(
9285
join(cssDir, basename(cssFile!)),
93-
watch ? `/* ${content} */` : css,
86+
`/* ${this.resourcePath} ${Date.now()} */`,
9487
),
88+
writeFile(sheetFile, exportSheet()),
89+
writeFile(classMapFile, exportClassMap()),
90+
writeFile(fileMapFile, exportFileMap()),
9591
)
96-
if (watch) {
97-
promises.push(
98-
writeFile(sheetFile, exportSheet()),
99-
writeFile(classMapFile, exportClassMap()),
100-
writeFile(fileMapFile, exportFileMap()),
101-
)
102-
}
103-
Promise.all(promises)
104-
.catch(console.error)
105-
.finally(() => callback(null, code, sourceMap))
106-
return
10792
}
108-
callback(null, code, sourceMap)
93+
Promise.all(promises)
94+
.catch(console.error)
95+
.finally(() => callback(null, code, sourceMap))
10996
} catch (error) {
11097
callback(error as Error)
11198
}

‎packages/next-plugin/src/plugin.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ export function DevupUI(
7979
}
8080
// disable turbo parallel
8181
const excludeRegex = new RegExp(
82-
`node_modules(?!.*(${['@devup-ui', ...include]
82+
`(node_modules(?!.*(${['@devup-ui', ...include]
8383
.join('|')
84-
.replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
84+
.replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$)))|(.mdx.[tj]sx?$)`,
8585
)
8686

8787
if (process.env.NODE_ENV !== 'production') {
@@ -91,13 +91,19 @@ export function DevupUI(
9191
process.env.NODE_OPTIONS += ' --inspect-brk'
9292
} else {
9393
// build
94-
preload(excludeRegex, libPackage, singleCss, theme, cssDir)
94+
preload(excludeRegex, libPackage, singleCss, cssDir)
9595
}
96+
const defaultSheet = JSON.parse(exportSheet())
97+
const defaultClassMap = JSON.parse(exportClassMap())
98+
const defaultFileMap = JSON.parse(exportFileMap())
9699

97100
const rules: NonNullable<typeof config.turbopack.rules> = {
98101
[`./${relative(process.cwd(), cssDir).replaceAll('\\', '/')}/*.css`]: [
99102
{
100103
loader: '@devup-ui/next-plugin/css-loader',
104+
options: {
105+
watch: process.env.NODE_ENV === 'development',
106+
},
101107
},
102108
],
103109
'*.{tsx,ts,js,mjs}': {
@@ -110,9 +116,9 @@ export function DevupUI(
110116
sheetFile,
111117
classMapFile,
112118
fileMapFile,
113-
defaultSheet: JSON.parse(exportSheet()),
114-
defaultClassMap: JSON.parse(exportClassMap()),
115-
defaultFileMap: JSON.parse(exportFileMap()),
119+
defaultSheet,
120+
defaultClassMap,
121+
defaultFileMap,
116122
watch: process.env.NODE_ENV === 'development',
117123
singleCss,
118124
// for turbopack, load theme is required on loader

0 commit comments

Comments
 (0)