Skip to content
This repository was archived by the owner on Jan 18, 2022. It is now read-only.

Commit d1a528f

Browse files
yyx990803yyx990803
committed
feat: new script setup compatibility
1 parent ea6d63f commit d1a528f

File tree

4 files changed

+175
-113
lines changed

4 files changed

+175
-113
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@types/debug": "^4.1.5",
3030
"@types/jest": "^25.2.3",
3131
"@types/node": "^13.13.2",
32-
"@vue/compiler-sfc": "^3.0.0-rc.5",
32+
"@vue/compiler-sfc": "^3.0.2",
3333
"husky": "^4.2.0",
3434
"jest": "^26.0.1",
3535
"lint-staged": "^10.1.7",

‎src/index.spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ describe('Rollup Plugin Vue', () => {
7676
const { code } = await transform(`<style>.foo {}</style>`, `example.vue`)
7777
expect(code).toEqual(
7878
expect.stringContaining(
79-
`import "example.vue?vue&type=style&index=0&lang.css"`
79+
`import "example.vue?vue&type=style&index=0&id=063a7d4c&lang.css"`
8080
)
8181
)
8282
})
@@ -100,12 +100,12 @@ describe('Rollup Plugin Vue', () => {
100100
)
101101
expect(code).toEqual(
102102
expect.stringContaining(
103-
`import "example.vue?vue&type=style&index=0&lang.css`
103+
`import "example.vue?vue&type=style&index=0&id=063a7d4c&lang.css`
104104
)
105105
)
106106
expect(code).toEqual(
107107
expect.stringContaining(
108-
`import style0 from "example.vue?vue&type=style&index=0&module=true&lang.css`
108+
`import style0 from "example.vue?vue&type=style&index=0&id=063a7d4c&module=true&lang.css`
109109
)
110110
)
111111
expect(code).toEqual(expect.stringContaining('script.__cssModules = {}'))
@@ -121,12 +121,12 @@ describe('Rollup Plugin Vue', () => {
121121
)
122122
expect(code).toEqual(
123123
expect.stringContaining(
124-
`import "example.vue?vue&type=style&index=0&lang.css`
124+
`import "example.vue?vue&type=style&index=0&id=063a7d4c&lang.css`
125125
)
126126
)
127127
expect(code).toEqual(
128128
expect.stringContaining(
129-
`import style0 from "example.vue?vue&type=style&index=0&module=custom&lang.css`
129+
`import style0 from "example.vue?vue&type=style&index=0&id=063a7d4c&module=custom&lang.css`
130130
)
131131
)
132132
expect(code).toEqual(expect.stringContaining('script.__cssModules = {}'))

‎src/index.ts

+96-49
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
SFCTemplateCompileOptions,
1919
SFCTemplateCompileResults,
2020
SFCAsyncStyleCompileOptions,
21+
generateCssVars,
2122
} from '@vue/compiler-sfc'
2223
import fs from 'fs'
2324
import createDebugger from 'debug'
@@ -117,7 +118,7 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
117118
query.type === 'template'
118119
? descriptor.template!
119120
: query.type === 'script'
120-
? descriptor.script!
121+
? descriptor.scriptCompiled || descriptor.script
121122
: query.type === 'style'
122123
? descriptor.styles[query.index]
123124
: typeof query.index === 'number'
@@ -142,36 +143,16 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
142143
if (!query.src && !filter(query.filename)) return null
143144

144145
const descriptor = getDescriptor(query.filename)
145-
const hasScoped = descriptor.styles.some((s) => s.scoped)
146146
if (query.src) {
147147
this.addWatchFile(query.filename)
148148
}
149149

150150
if (query.type === 'template') {
151151
debug(`transform(${id})`)
152-
const block = descriptor.template!
153-
const preprocessLang = block.lang
154-
const preprocessOptions =
155-
preprocessLang &&
156-
options.templatePreprocessOptions &&
157-
options.templatePreprocessOptions[preprocessLang]
158152
const result = compileTemplate({
159-
filename: query.filename,
153+
...getTemplateCompilerOptions(options, descriptor, query.id),
160154
source: code,
161-
inMap: query.src ? undefined : block.map,
162-
preprocessLang,
163-
preprocessOptions,
164-
preprocessCustomRequire: options.preprocessCustomRequire,
165-
compiler: options.compiler,
166-
ssr: isServer,
167-
compilerOptions: {
168-
...options.compilerOptions,
169-
scopeId: hasScoped ? `data-v-${query.id}` : undefined,
170-
bindingMetadata: descriptor.script
171-
? descriptor.script.bindings
172-
: undefined,
173-
},
174-
transformAssetUrls: options.transformAssetUrls,
155+
filename: query.filename,
175156
})
176157

177158
if (result.errors.length) {
@@ -232,10 +213,10 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
232213

233214
const result = await compileStyleAsync({
234215
filename: query.filename,
235-
id: `data-v-${query.id!}`,
216+
id: `data-v-${query.id}`,
217+
isProd: isProduction,
236218
source: code,
237219
scoped: block.scoped,
238-
vars: !!block.vars,
239220
modules: !!block.module,
240221
postcssOptions: options.postcssOptions,
241222
postcssPlugins: options.postcssPlugins,
@@ -300,6 +281,47 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
300281
}
301282
}
302283

284+
function getTemplateCompilerOptions(
285+
options: Options,
286+
descriptor: SFCDescriptor,
287+
scopeId: string
288+
): Omit<SFCTemplateCompileOptions, 'source'> | undefined {
289+
const block = descriptor.template
290+
if (!block) {
291+
return
292+
}
293+
294+
const isServer = options.target === 'node'
295+
const isProduction =
296+
process.env.NODE_ENV === 'production' || process.env.BUILD === 'production'
297+
const hasScoped = descriptor.styles.some((s) => s.scoped)
298+
const preprocessLang = block.lang
299+
const preprocessOptions =
300+
preprocessLang &&
301+
options.templatePreprocessOptions &&
302+
options.templatePreprocessOptions[preprocessLang]
303+
return {
304+
filename: descriptor.filename,
305+
inMap: block.src ? undefined : block.map,
306+
preprocessLang,
307+
preprocessOptions,
308+
preprocessCustomRequire: options.preprocessCustomRequire,
309+
compiler: options.compiler,
310+
ssr: isServer,
311+
compilerOptions: {
312+
...options.compilerOptions,
313+
scopeId: hasScoped ? `data-v-${scopeId}` : undefined,
314+
bindingMetadata: descriptor.scriptCompiled
315+
? descriptor.scriptCompiled.bindings
316+
: undefined,
317+
ssrCssVars: isServer
318+
? generateCssVars(descriptor, scopeId, isProduction)
319+
: undefined,
320+
},
321+
transformAssetUrls: options.transformAssetUrls,
322+
}
323+
}
324+
303325
function createCustomBlockFilter(
304326
queries?: string[]
305327
): (type: string) => boolean {
@@ -336,15 +358,15 @@ type Query =
336358
filename: string
337359
vue: true
338360
type: 'template'
339-
id?: string
361+
id: string
340362
src?: true
341363
}
342364
| {
343365
filename: string
344366
vue: true
345367
type: 'style'
346368
index: number
347-
id?: string
369+
id: string
348370
scoped?: boolean
349371
module?: string | boolean
350372
src?: true
@@ -418,25 +440,39 @@ function transformVueSFC(
418440
const shortFilePath = relative(rootContext, resourcePath)
419441
.replace(/^(\.\.[\/\\])+/, '')
420442
.replace(/\\/g, '/')
421-
const id = hash(isProduction ? shortFilePath + '\n' + code : shortFilePath)
443+
const scopeId = hash(
444+
isProduction ? shortFilePath + '\n' + code : shortFilePath
445+
)
422446
// feature information
423447
const hasScoped = descriptor.styles.some((s) => s.scoped)
424448

425-
const templateImport = !descriptor.template
426-
? ''
427-
: getTemplateCode(descriptor, resourcePath, id, hasScoped, isServer)
449+
const hasTemplateImport =
450+
descriptor.template &&
451+
// script setup compiles template inline, do not import again
452+
(isServer || !descriptor.scriptSetup)
453+
454+
const templateImport = hasTemplateImport
455+
? getTemplateCode(descriptor, resourcePath, scopeId, isServer)
456+
: ''
428457

429-
const renderReplace = !descriptor.template
430-
? ''
431-
: isServer
432-
? `script.ssrRender = ssrRender`
433-
: `script.render = render`
458+
const renderReplace = hasTemplateImport
459+
? isServer
460+
? `script.ssrRender = ssrRender`
461+
: `script.render = render`
462+
: ''
434463

435-
const scriptImport = getScriptCode(descriptor, resourcePath)
464+
const scriptImport = getScriptCode(
465+
descriptor,
466+
resourcePath,
467+
scopeId,
468+
isProduction,
469+
isServer,
470+
getTemplateCompilerOptions(options, descriptor, scopeId)
471+
)
436472
const stylesCode = getStyleCode(
437473
descriptor,
438474
resourcePath,
439-
id,
475+
scopeId,
440476
options.preprocessStyles
441477
)
442478
const customBlocksCode = getCustomBlock(
@@ -452,7 +488,7 @@ function transformVueSFC(
452488
renderReplace,
453489
]
454490
if (hasScoped) {
455-
output.push(`script.__scopeId = ${_(`data-v-${id}`)}`)
491+
output.push(`script.__scopeId = ${_(`data-v-${scopeId}`)}`)
456492
}
457493
if (!isProduction) {
458494
output.push(`script.__file = ${_(shortFilePath)}`)
@@ -467,7 +503,6 @@ function getTemplateCode(
467503
descriptor: SFCDescriptor,
468504
resourcePath: string,
469505
id: string,
470-
hasScoped: boolean,
471506
isServer: boolean
472507
) {
473508
const renderFnName = isServer ? 'ssrRender' : 'render'
@@ -476,27 +511,39 @@ function getTemplateCode(
476511
if (descriptor.template) {
477512
const src = descriptor.template.src || resourcePath
478513
const idQuery = `&id=${id}`
479-
const scopedQuery = hasScoped ? `&scoped=true` : ``
480514
const srcQuery = descriptor.template.src ? `&src` : ``
481515
const attrsQuery = attrsToQuery(descriptor.template.attrs, 'js', true)
482-
const query = `?vue&type=template${idQuery}${srcQuery}${scopedQuery}${attrsQuery}`
516+
const query = `?vue&type=template${idQuery}${srcQuery}${attrsQuery}`
483517
templateRequest = _(src + query)
484518
templateImport = `import { ${renderFnName} } from ${templateRequest}`
485519
}
486520

487521
return templateImport
488522
}
489523

490-
function getScriptCode(descriptor: SFCDescriptor, resourcePath: string) {
524+
function getScriptCode(
525+
descriptor: SFCDescriptor,
526+
resourcePath: string,
527+
id: string,
528+
isProd: boolean,
529+
isServer: boolean,
530+
templateOptions?: Partial<SFCTemplateCompileOptions>
531+
) {
491532
let scriptImport = `const script = {}`
492533
if (descriptor.script || descriptor.scriptSetup) {
493534
if (compileScript) {
494-
descriptor.script = compileScript(descriptor)
535+
descriptor.scriptCompiled = compileScript(descriptor, {
536+
id,
537+
isProd,
538+
inlineTemplate: !isServer,
539+
templateOptions,
540+
})
495541
}
496-
if (descriptor.script) {
497-
const src = descriptor.script.src || resourcePath
498-
const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js')
499-
const srcQuery = descriptor.script.src ? `&src` : ``
542+
const script = descriptor.scriptCompiled || descriptor.script
543+
if (script) {
544+
const src = script.src || resourcePath
545+
const attrsQuery = attrsToQuery(script.attrs, 'js')
546+
const srcQuery = script.src ? `&src` : ``
500547
const query = `?vue&type=script${srcQuery}${attrsQuery}`
501548
const scriptRequest = _(src + query)
502549
scriptImport =
@@ -527,7 +574,7 @@ function getStyleCode(
527574
)
528575
// make sure to only pass id when necessary so that we don't inject
529576
// duplicate tags when multiple components import the same css file
530-
const idQuery = style.scoped ? `&id=${id}` : ``
577+
const idQuery = `&id=${id}`
531578
const srcQuery = style.src ? `&src` : ``
532579
const query = `?vue&type=style&index=${i}${srcQuery}${idQuery}`
533580
const styleRequest = src + query + attrsQuery

0 commit comments

Comments
 (0)