Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Jan 18, 2022. It is now read-only.

Commitd1a528f

Browse files
committed
feat: new script setup compatibility
1 parentea6d63f commitd1a528f

File tree

4 files changed

+175
-113
lines changed

4 files changed

+175
-113
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ describe('Rollup Plugin Vue', () => {
7676
const{ code}=awaittransform(`<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

Lines changed: 96 additions & 49 deletions
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
importfsfrom'fs'
2324
importcreateDebuggerfrom'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
:typeofquery.index==='number'
@@ -142,36 +143,16 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
142143
if(!query.src&&!filter(query.filename))returnnull
143144

144145
constdescriptor=getDescriptor(query.filename)
145-
consthasScoped=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-
constblock=descriptor.template!
153-
constpreprocessLang=block.lang
154-
constpreprocessOptions=
155-
preprocessLang&&
156-
options.templatePreprocessOptions&&
157-
options.templatePreprocessOptions[preprocessLang]
158152
constresult=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
constresult=awaitcompileStyleAsync({
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+
functiongetTemplateCompilerOptions(
285+
options:Options,
286+
descriptor:SFCDescriptor,
287+
scopeId:string
288+
):Omit<SFCTemplateCompileOptions,'source'>|undefined{
289+
constblock=descriptor.template
290+
if(!block){
291+
return
292+
}
293+
294+
constisServer=options.target==='node'
295+
constisProduction=
296+
process.env.NODE_ENV==='production'||process.env.BUILD==='production'
297+
consthasScoped=descriptor.styles.some((s)=>s.scoped)
298+
constpreprocessLang=block.lang
299+
constpreprocessOptions=
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
functioncreateCustomBlockFilter(
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
constshortFilePath=relative(rootContext,resourcePath)
419441
.replace(/^(\.\.[\/\\])+/,'')
420442
.replace(/\\/g,'/')
421-
constid=hash(isProduction ?shortFilePath+'\n'+code :shortFilePath)
443+
constscopeId=hash(
444+
isProduction ?shortFilePath+'\n'+code :shortFilePath
445+
)
422446
// feature information
423447
consthasScoped=descriptor.styles.some((s)=>s.scoped)
424448

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

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

435-
constscriptImport=getScriptCode(descriptor,resourcePath)
464+
constscriptImport=getScriptCode(
465+
descriptor,
466+
resourcePath,
467+
scopeId,
468+
isProduction,
469+
isServer,
470+
getTemplateCompilerOptions(options,descriptor,scopeId)
471+
)
436472
conststylesCode=getStyleCode(
437473
descriptor,
438474
resourcePath,
439-
id,
475+
scopeId,
440476
options.preprocessStyles
441477
)
442478
constcustomBlocksCode=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
constrenderFnName=isServer ?'ssrRender' :'render'
@@ -476,27 +511,39 @@ function getTemplateCode(
476511
if(descriptor.template){
477512
constsrc=descriptor.template.src||resourcePath
478513
constidQuery=`&id=${id}`
479-
constscopedQuery=hasScoped ?`&scoped=true` :``
480514
constsrcQuery=descriptor.template.src ?`&src` :``
481515
constattrsQuery=attrsToQuery(descriptor.template.attrs,'js',true)
482-
constquery=`?vue&type=template${idQuery}${srcQuery}${scopedQuery}${attrsQuery}`
516+
constquery=`?vue&type=template${idQuery}${srcQuery}${attrsQuery}`
483517
templateRequest=_(src+query)
484518
templateImport=`import {${renderFnName} } from${templateRequest}`
485519
}
486520

487521
returntemplateImport
488522
}
489523

490-
functiongetScriptCode(descriptor:SFCDescriptor,resourcePath:string){
524+
functiongetScriptCode(
525+
descriptor:SFCDescriptor,
526+
resourcePath:string,
527+
id:string,
528+
isProd:boolean,
529+
isServer:boolean,
530+
templateOptions?:Partial<SFCTemplateCompileOptions>
531+
){
491532
letscriptImport=`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-
constsrc=descriptor.script.src||resourcePath
498-
constattrsQuery=attrsToQuery(descriptor.script.attrs,'js')
499-
constsrcQuery=descriptor.script.src ?`&src` :``
542+
constscript=descriptor.scriptCompiled||descriptor.script
543+
if(script){
544+
constsrc=script.src||resourcePath
545+
constattrsQuery=attrsToQuery(script.attrs,'js')
546+
constsrcQuery=script.src ?`&src` :``
500547
constquery=`?vue&type=script${srcQuery}${attrsQuery}`
501548
constscriptRequest=_(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-
constidQuery=style.scoped ?`&id=${id}` :``
577+
constidQuery=`&id=${id}`
531578
constsrcQuery=style.src ?`&src` :``
532579
constquery=`?vue&type=style&index=${i}${srcQuery}${idQuery}`
533580
conststyleRequest=src+query+attrsQuery

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp