4
4
parseVuePartRequest ,
5
5
resolveVuePart ,
6
6
isVuePartRequest ,
7
- transformRequireToImport
7
+ transformRequireToImport ,
8
8
} from './utils'
9
9
import {
10
10
createDefaultCompiler ,
@@ -13,17 +13,14 @@ import {
13
13
StyleOptions ,
14
14
TemplateOptions ,
15
15
StyleCompileResult ,
16
- DescriptorCompileResult
16
+ DescriptorCompileResult ,
17
17
} from '@vue/component-compiler'
18
18
import MagicString from 'magic-string'
19
19
import { Plugin , RawSourceMap } from 'rollup'
20
20
import * as path from 'path'
21
21
import { parse , SFCDescriptor , SFCBlock } from '@vue/component-compiler-utils'
22
22
import debug from 'debug'
23
- import {
24
- VueTemplateCompiler ,
25
- VueTemplateCompilerParseOptions
26
- } from '@vue/component-compiler-utils/dist/types'
23
+ import { VueTemplateCompiler , VueTemplateCompilerParseOptions } from '@vue/component-compiler-utils/dist/types'
27
24
28
25
const templateCompiler = require ( 'vue-template-compiler' )
29
26
const hash = require ( 'hash-sum' )
@@ -153,6 +150,10 @@ export interface VuePluginOptions {
153
150
*/
154
151
styleInjectorSSR ?: string
155
152
153
+ styleInjectorShadow ?: string
154
+
155
+ isWebComponent ?: boolean
156
+
156
157
beforeAssemble ?( descriptor : DescriptorCompileResult ) : DescriptorCompileResult
157
158
}
158
159
/**
@@ -163,25 +164,20 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
163
164
const isProduction =
164
165
opts . template && typeof opts . template . isProduction === 'boolean'
165
166
? opts . template . isProduction
166
- : process . env . NODE_ENV === 'production' ||
167
- process . env . BUILD === 'production'
167
+ : process . env . NODE_ENV === 'production' || process . env . BUILD === 'production'
168
168
169
169
d ( 'Version ' + version )
170
170
d ( `Build environment: ${ isProduction ? 'production' : 'development' } ` )
171
171
d ( `Build target: ${ process . env . VUE_ENV || 'browser' } ` )
172
172
173
- if ( ! opts . normalizer )
174
- opts . normalizer = '~' + 'vue-runtime-helpers/dist/normalize-component.js'
175
- if ( ! opts . styleInjector )
176
- opts . styleInjector =
177
- '~' + 'vue-runtime-helpers/dist/inject-style/browser.js'
178
- if ( ! opts . styleInjectorSSR )
179
- opts . styleInjectorSSR =
180
- '~' + 'vue-runtime-helpers/dist/inject-style/server.js'
173
+ if ( ! opts . normalizer ) opts . normalizer = '~' + 'vue-runtime-helpers/dist/normalize-component.mjs'
174
+ if ( ! opts . styleInjector ) opts . styleInjector = '~' + 'vue-runtime-helpers/dist/inject-style/browser.mjs'
175
+ if ( ! opts . styleInjectorSSR ) opts . styleInjectorSSR = '~' + 'vue-runtime-helpers/dist/inject-style/server.mjs'
176
+ if ( ! opts . styleInjectorSSR ) opts . styleInjectorShadow = '~' + 'vue-runtime-helpers/dist/inject-style/shadow.mjs'
181
177
182
178
createVuePartRequest . defaultLang = {
183
179
...createVuePartRequest . defaultLang ,
184
- ...opts . defaultLang
180
+ ...opts . defaultLang ,
185
181
}
186
182
187
183
const shouldExtractCss = opts . css === false
@@ -201,12 +197,9 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
201
197
}
202
198
const isAllowed = createCustomBlockFilter ( opts . customBlocks || customBlocks )
203
199
204
- const beforeAssemble =
205
- opts . beforeAssemble ||
206
- ( ( d : DescriptorCompileResult ) : DescriptorCompileResult => d )
200
+ const beforeAssemble = opts . beforeAssemble || ( ( d : DescriptorCompileResult ) : DescriptorCompileResult => d )
207
201
208
- const exposeFilename =
209
- typeof opts . exposeFilename === 'boolean' ? opts . exposeFilename : false
202
+ const exposeFilename = typeof opts . exposeFilename === 'boolean' ? opts . exposeFilename : false
210
203
211
204
const data : VuePluginOptionsData = ( opts . data || { } ) as any
212
205
@@ -226,9 +219,9 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
226
219
video : [ 'src' , 'poster' ] ,
227
220
source : 'src' ,
228
221
img : 'src' ,
229
- image : 'xlink:href'
222
+ image : 'xlink:href' ,
230
223
} ,
231
- ...opts . template
224
+ ...opts . template ,
232
225
} as any
233
226
234
227
if ( opts . template && typeof opts . template . isProduction === 'undefined' ) {
@@ -240,16 +233,11 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
240
233
241
234
if ( opts . css === false ) d ( 'Running in CSS extract mode' )
242
235
243
- function prependStyle (
244
- id : string ,
245
- lang : string ,
246
- code : string ,
247
- map : any
248
- ) : { code : string } {
236
+ function prependStyle ( id : string , lang : string , code : string , map : any ) : { code : string } {
249
237
if ( ! ( lang in data ) ) return { code }
250
238
const ms = new MagicString ( code , {
251
239
filename : id ,
252
- indentExclusionRanges : [ ]
240
+ indentExclusionRanges : [ ] ,
253
241
} )
254
242
255
243
const value : string | ( ( ) => string ) = ( data as any ) [ lang ]
@@ -282,7 +270,7 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
282
270
return path . resolve ( path . dirname ( ref . filename ) , src as string )
283
271
} else {
284
272
return require . resolve ( src , {
285
- paths : [ path . dirname ( ref . filename ) ]
273
+ paths : [ path . dirname ( ref . filename ) ] ,
286
274
} )
287
275
}
288
276
}
@@ -324,35 +312,22 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
324
312
compiler : opts . compiler || templateCompiler ,
325
313
compilerParseOptions : opts . compilerParseOptions ,
326
314
sourceRoot : opts . sourceRoot ,
327
- needMap : 'needMap' in opts ? ( opts as any ) . needMap : true
315
+ needMap : 'needMap' in opts ? ( opts as any ) . needMap : true ,
328
316
} )
329
317
)
330
318
)
331
319
332
320
descriptors . set ( filename , descriptor )
333
321
334
- const scopeId =
335
- 'data-v-' +
336
- ( isProduction
337
- ? hash ( path . basename ( filename ) + source )
338
- : hash ( filename + source ) )
322
+ const scopeId = 'data-v-' + ( isProduction ? hash ( path . basename ( filename ) + source ) : hash ( filename + source ) )
339
323
340
324
const styles = await Promise . all (
341
325
descriptor . styles . map ( async style => {
342
326
if ( style . content ) {
343
- style . content = prependStyle (
344
- filename ,
345
- style . lang || 'css' ,
346
- style . content ,
347
- style . map
348
- ) . code
327
+ style . content = prependStyle ( filename , style . lang || 'css' , style . content , style . map ) . code
349
328
}
350
329
351
- const compiled = await compiler . compileStyleAsync (
352
- filename ,
353
- scopeId ,
354
- style
355
- )
330
+ const compiled = await compiler . compileStyleAsync ( filename , scopeId , style )
356
331
if ( compiled . errors . length > 0 ) throw Error ( compiled . errors [ 0 ] )
357
332
return compiled
358
333
} )
@@ -361,14 +336,11 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
361
336
const input : any = {
362
337
scopeId,
363
338
styles,
364
- customBlocks : [ ]
339
+ customBlocks : [ ] ,
365
340
}
366
341
367
342
if ( descriptor . template ) {
368
- input . template = compiler . compileTemplate (
369
- filename ,
370
- descriptor . template
371
- )
343
+ input . template = compiler . compileTemplate ( filename , descriptor . template )
372
344
373
345
input . template . code = transformRequireToImport ( input . template . code )
374
346
@@ -384,29 +356,17 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
384
356
input . script = descriptor . script
385
357
? {
386
358
code : `
387
- export * from '${ createVuePartRequest (
388
- filename ,
389
- descriptor . script . lang || 'js' ,
390
- 'script'
391
- ) } '
392
- import script from '${ createVuePartRequest (
393
- filename ,
394
- descriptor . script . lang || 'js' ,
395
- 'script'
396
- ) } '
359
+ export * from '${ createVuePartRequest ( filename , descriptor . script . lang || 'js' , 'script' ) } '
360
+ import script from '${ createVuePartRequest ( filename , descriptor . script . lang || 'js' , 'script' ) } '
397
361
export default script
398
362
${
399
363
exposeFilename
400
364
? `
401
365
// For security concerns, we use only base name in production mode. See https://github.com/vuejs/rollup-plugin-vue/issues/258
402
- script.__file = ${
403
- isProduction
404
- ? JSON . stringify ( path . basename ( filename ) )
405
- : JSON . stringify ( filename )
406
- } `
366
+ script.__file = ${ isProduction ? JSON . stringify ( path . basename ( filename ) ) : JSON . stringify ( filename ) } `
407
367
: ''
408
368
}
409
- `
369
+ ` ,
410
370
}
411
371
: { code : '' }
412
372
@@ -415,14 +375,7 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
415
375
. map ( ( style : StyleCompileResult , index : number ) => {
416
376
; ( descriptor . styles [ index ] as any ) . code = style . code
417
377
418
- input . script . code +=
419
- '\n' +
420
- `import '${ createVuePartRequest (
421
- filename ,
422
- 'css' ,
423
- 'styles' ,
424
- index
425
- ) } '`
378
+ input . script . code += '\n' + `import '${ createVuePartRequest ( filename , 'css' , 'styles' , index ) } '`
426
379
427
380
if ( style . module || descriptor . styles [ index ] . scoped ) {
428
381
return { ...style , code : '' , map : undefined }
@@ -449,32 +402,22 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
449
402
) } '`
450
403
} )
451
404
452
- dT (
453
- `id: ${ filename } \ncode:\n${ result . code } \n\nmap:\n${ JSON . stringify (
454
- result . map ,
455
- null ,
456
- 2
457
- ) } \n`
458
- )
405
+ dT ( `id: ${ filename } \ncode:\n${ result . code } \n\nmap:\n${ JSON . stringify ( result . map , null , 2 ) } \n` )
459
406
460
407
result . map = result . map || { mappings : '' }
461
408
462
409
return result
463
410
}
464
- }
411
+ } ,
465
412
}
466
413
}
467
414
468
- function createCustomBlockFilter (
469
- customBlocks ?: string [ ] | ( ( tag : string ) => boolean )
470
- ) : ( tag : string ) => boolean {
415
+ function createCustomBlockFilter ( customBlocks ?: string [ ] | ( ( tag : string ) => boolean ) ) : ( tag : string ) => boolean {
471
416
if ( typeof customBlocks === 'function' ) return customBlocks
472
417
if ( ! Array . isArray ( customBlocks ) ) return ( ) => false
473
418
474
419
const allowed = new Set ( customBlocks . filter ( tag => ! tag . startsWith ( '!' ) ) )
475
- const notAllowed = new Set (
476
- customBlocks . filter ( tag => tag . startsWith ( '!' ) ) . map ( tag => tag . substr ( 1 ) )
477
- )
420
+ const notAllowed = new Set ( customBlocks . filter ( tag => tag . startsWith ( '!' ) ) . map ( tag => tag . substr ( 1 ) ) )
478
421
479
422
return tag => {
480
423
if ( allowed . has ( tag ) ) return true
0 commit comments