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

Commit 9a0e7cf

Browse files
znckznck
committed
feat: Add support for shadow DOM style injection
1 parent 7344a1f commit 9a0e7cf

File tree

3 files changed

+45
-102
lines changed

3 files changed

+45
-102
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,15 @@
4545
"dist/"
4646
],
4747
"dependencies": {
48-
"@vue/component-compiler": "^4.0.0",
48+
"@vue/component-compiler": "^4.1.0",
4949
"@vue/component-compiler-utils": "^3.0.0",
5050
"debug": "^4.1.1",
5151
"hash-sum": "^1.0.2",
5252
"magic-string": "^0.25.2",
5353
"querystring": "^0.2.0",
5454
"rollup-pluginutils": "^2.4.1",
5555
"source-map": "0.7.3",
56-
"vue-runtime-helpers": "1.0.1"
56+
"vue-runtime-helpers": "^1.1.1"
5757
},
5858
"devDependencies": {
5959
"@babel/core": "^7.0.0-beta.46",

‎src/index.ts‎

Lines changed: 35 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
parseVuePartRequest,
55
resolveVuePart,
66
isVuePartRequest,
7-
transformRequireToImport
7+
transformRequireToImport,
88
} from './utils'
99
import {
1010
createDefaultCompiler,
@@ -13,17 +13,14 @@ import {
1313
StyleOptions,
1414
TemplateOptions,
1515
StyleCompileResult,
16-
DescriptorCompileResult
16+
DescriptorCompileResult,
1717
} from '@vue/component-compiler'
1818
import MagicString from 'magic-string'
1919
import { Plugin, RawSourceMap } from 'rollup'
2020
import * as path from 'path'
2121
import { parse, SFCDescriptor, SFCBlock } from '@vue/component-compiler-utils'
2222
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'
2724

2825
const templateCompiler = require('vue-template-compiler')
2926
const hash = require('hash-sum')
@@ -153,6 +150,10 @@ export interface VuePluginOptions {
153150
*/
154151
styleInjectorSSR?: string
155152

153+
styleInjectorShadow?: string
154+
155+
isWebComponent?: boolean
156+
156157
beforeAssemble?(descriptor: DescriptorCompileResult): DescriptorCompileResult
157158
}
158159
/**
@@ -163,25 +164,20 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
163164
const isProduction =
164165
opts.template && typeof opts.template.isProduction === 'boolean'
165166
? opts.template.isProduction
166-
: process.env.NODE_ENV === 'production' ||
167-
process.env.BUILD === 'production'
167+
: process.env.NODE_ENV === 'production' || process.env.BUILD === 'production'
168168

169169
d('Version ' + version)
170170
d(`Build environment: ${isProduction ? 'production' : 'development'}`)
171171
d(`Build target: ${process.env.VUE_ENV || 'browser'}`)
172172

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'
181177

182178
createVuePartRequest.defaultLang = {
183179
...createVuePartRequest.defaultLang,
184-
...opts.defaultLang
180+
...opts.defaultLang,
185181
}
186182

187183
const shouldExtractCss = opts.css === false
@@ -201,12 +197,9 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
201197
}
202198
const isAllowed = createCustomBlockFilter(opts.customBlocks || customBlocks)
203199

204-
const beforeAssemble =
205-
opts.beforeAssemble ||
206-
((d: DescriptorCompileResult): DescriptorCompileResult => d)
200+
const beforeAssemble = opts.beforeAssemble || ((d: DescriptorCompileResult): DescriptorCompileResult => d)
207201

208-
const exposeFilename =
209-
typeof opts.exposeFilename === 'boolean' ? opts.exposeFilename : false
202+
const exposeFilename = typeof opts.exposeFilename === 'boolean' ? opts.exposeFilename : false
210203

211204
const data: VuePluginOptionsData = (opts.data || {}) as any
212205

@@ -226,9 +219,9 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
226219
video: ['src', 'poster'],
227220
source: 'src',
228221
img: 'src',
229-
image: 'xlink:href'
222+
image: 'xlink:href',
230223
},
231-
...opts.template
224+
...opts.template,
232225
} as any
233226

234227
if (opts.template && typeof opts.template.isProduction === 'undefined') {
@@ -240,16 +233,11 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
240233

241234
if (opts.css === false) d('Running in CSS extract mode')
242235

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 } {
249237
if (!(lang in data)) return { code }
250238
const ms = new MagicString(code, {
251239
filename: id,
252-
indentExclusionRanges: []
240+
indentExclusionRanges: [],
253241
})
254242

255243
const value: string | (() => string) = (data as any)[lang]
@@ -282,7 +270,7 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
282270
return path.resolve(path.dirname(ref.filename), src as string)
283271
} else {
284272
return require.resolve(src, {
285-
paths: [path.dirname(ref.filename)]
273+
paths: [path.dirname(ref.filename)],
286274
})
287275
}
288276
}
@@ -324,35 +312,22 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
324312
compiler: opts.compiler || templateCompiler,
325313
compilerParseOptions: opts.compilerParseOptions,
326314
sourceRoot: opts.sourceRoot,
327-
needMap: 'needMap' in opts ? (opts as any).needMap : true
315+
needMap: 'needMap' in opts ? (opts as any).needMap : true,
328316
})
329317
)
330318
)
331319

332320
descriptors.set(filename, descriptor)
333321

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))
339323

340324
const styles = await Promise.all(
341325
descriptor.styles.map(async style => {
342326
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
349328
}
350329

351-
const compiled = await compiler.compileStyleAsync(
352-
filename,
353-
scopeId,
354-
style
355-
)
330+
const compiled = await compiler.compileStyleAsync(filename, scopeId, style)
356331
if (compiled.errors.length > 0) throw Error(compiled.errors[0])
357332
return compiled
358333
})
@@ -361,14 +336,11 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
361336
const input: any = {
362337
scopeId,
363338
styles,
364-
customBlocks: []
339+
customBlocks: [],
365340
}
366341

367342
if (descriptor.template) {
368-
input.template = compiler.compileTemplate(
369-
filename,
370-
descriptor.template
371-
)
343+
input.template = compiler.compileTemplate(filename, descriptor.template)
372344

373345
input.template.code = transformRequireToImport(input.template.code)
374346

@@ -384,29 +356,17 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
384356
input.script = descriptor.script
385357
? {
386358
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')}'
397361
export default script
398362
${
399363
exposeFilename
400364
? `
401365
// 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)}`
407367
: ''
408368
}
409-
`
369+
`,
410370
}
411371
: { code: '' }
412372

@@ -415,14 +375,7 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
415375
.map((style: StyleCompileResult, index: number) => {
416376
;(descriptor.styles[index] as any).code = style.code
417377

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)}'`
426379

427380
if (style.module || descriptor.styles[index].scoped) {
428381
return { ...style, code: '', map: undefined }
@@ -449,32 +402,22 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
449402
)}'`
450403
})
451404

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`)
459406

460407
result.map = result.map || { mappings: '' }
461408

462409
return result
463410
}
464-
}
411+
},
465412
}
466413
}
467414

468-
function createCustomBlockFilter(
469-
customBlocks?: string[] | ((tag: string) => boolean)
470-
): (tag: string) => boolean {
415+
function createCustomBlockFilter(customBlocks?: string[] | ((tag: string) => boolean)): (tag: string) => boolean {
471416
if (typeof customBlocks === 'function') return customBlocks
472417
if (!Array.isArray(customBlocks)) return () => false
473418

474419
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)))
478421

479422
return tag => {
480423
if (allowed.has(tag)) return true

‎yarn.lock‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1435,10 +1435,10 @@
14351435
source-map "~0.6.1"
14361436
vue-template-es2015-compiler "^1.9.0"
14371437

1438-
"@vue/component-compiler@^4.0.0":
1439-
version "4.0.0"
1440-
resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-4.0.0.tgz#916d57d546d38cc9179fe841c1f7f93d35a255a0"
1441-
integrity sha512-XZkpbE1B16g7RqM8AL/LP/wr3qkOLDwiO9yF2k/2O5BwGcqPyQOYHtD67sjMso6/703ztykFsbZsJbD/7xFWDQ==
1438+
"@vue/component-compiler@^4.1.0":
1439+
version "4.1.0"
1440+
resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-4.1.0.tgz#92ccb90e425aa7e61d58bf092a5cfcdd6d0f9315"
1441+
integrity sha512-20S7mm7CYP94m2Morw2ftz1tqoBu1nX7KYiqo5rlgKPZ0dlY7VZX7wAL/etN3s4HD0PBeenr1pUUCBIgGSaB2g==
14421442
dependencies:
14431443
"@vue/component-compiler-utils" "^3.0.0"
14441444
clean-css "^4.1.11"
@@ -10264,10 +10264,10 @@ vue-router@^3.0.1:
1026410264
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
1026510265
integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
1026610266

10267-
vue-runtime-helpers@1.0.1:
10268-
version "1.0.1"
10269-
resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-1.0.1.tgz#9a7f527d43fdecf83638188fb0e5bae699c2b5bb"
10270-
integrity sha512-yodqdAWt/QrUkb51jN2DS4dtF4vQWg5YejYdBAcHIOi6kBoGLRVEDz5NYGdh5IhzLrElgi+eKX1DQJmj3bCuJw==
10267+
vue-runtime-helpers@^1.1.1:
10268+
version "1.1.1"
10269+
resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-1.1.1.tgz#5f9422d4e958478060800afe738df40de7c9f653"
10270+
integrity sha512-L20UdZnvY9Tmvf7yWJmN2kzlK/KyCFLAXOIUbm7yyRfjDqub6vC1CUrkLH7XGM+GRO8MnBap6uUYvgQTJ1yOOQ==
1027110271

1027210272
vue-server-renderer@^2.5.16:
1027310273
version "2.5.22"

0 commit comments

Comments
 (0)