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

Commit 2de7480

Browse files
znckznck
authored
Merge branch 'next' into custom-template-compiler
2 parents 2180c52 + 4ec1315 commit 2de7480

File tree

9 files changed

+1315
-176
lines changed

9 files changed

+1315
-176
lines changed

‎.github/workflows/ci.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: CI
22

3-
on: [push]
3+
on: [push, pull_request]
44

55
defaults:
66
run:

‎examples/no-template/package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "no-template",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"build": "rollup -c"
7+
},
8+
"dependencies": {
9+
"rollup": "^2.10.9",
10+
"rollup-plugin-vue": "link:../.."
11+
}
12+
}

‎examples/no-template/rollup.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import VuePlugin from 'rollup-plugin-vue'
2+
3+
export default [
4+
{
5+
input: 'src/HelloWorld.vue',
6+
output: {
7+
file: 'dist/HelloWorld.js',
8+
format: 'esm',
9+
sourcemap: 'inline',
10+
},
11+
plugins: [VuePlugin()],
12+
external: ['vue'],
13+
},
14+
]

‎examples/no-template/src/HelloWorld.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
import { h } from 'vue'
3+
4+
export default {
5+
props: ['name'],
6+
render() {
7+
return h('div', 'my render')
8+
},
9+
}
10+
</script>

‎examples/simple/rollup.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import VuePlugin from 'rollup-plugin-vue'
22

33
export default [
44
{
5-
input: 'src/App.vue',
5+
input: 'src/HelloWorld.vue',
66
output: {
7-
file: 'dist/app.js',
7+
file: 'dist/HelloWorld.js',
88
format: 'esm',
99
sourcemap: 'inline',
1010
},

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rollup-plugin-vue",
3-
"version": "6.0.0-beta.6",
3+
"version": "6.0.0-beta.9",
44
"license": "MIT",
55
"main": "dist/index.js",
66
"typings": "dist/index.d.ts",
@@ -25,16 +25,18 @@
2525
"@vue/compiler-sfc": "*"
2626
},
2727
"devDependencies": {
28+
"@rollup/plugin-node-resolve": "^9.0.0",
2829
"@types/debug": "^4.1.5",
2930
"@types/jest": "^25.2.3",
3031
"@types/node": "^13.13.2",
31-
"@vue/compiler-sfc": "^3.0.0-beta.14",
32+
"@vue/compiler-sfc": "^3.0.0-rc.5",
3233
"husky": "^4.2.0",
3334
"jest": "^26.0.1",
3435
"lint-staged": "^10.1.7",
3536
"npm-run-all": "^4.1.5",
3637
"prettier": "^2.0.5",
3738
"rollup": "^2.7.2",
39+
"rollup-plugin-postcss": "^3.1.8",
3840
"ts-jest": "^26.0.0",
3941
"typescript": "^3.9.3"
4042
},

‎src/index.ts

Lines changed: 118 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
compileStyleAsync,
1313
compileTemplate,
1414
parse,
15+
compileScript,
1516
SFCBlock,
1617
SFCDescriptor,
1718
SFCTemplateCompileOptions,
@@ -45,6 +46,10 @@ export interface Options {
4546
preprocessStyles?: boolean
4647

4748
// sfc template options
49+
templatePreprocessOptions?: Record<
50+
string,
51+
SFCTemplateCompileOptions['preprocessOptions']
52+
>
4853
compiler?: SFCTemplateCompileOptions['compiler']
4954
compilerOptions?: SFCTemplateCompileOptions['compilerOptions']
5055
transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
@@ -127,7 +132,7 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
127132
if (block) {
128133
return {
129134
code: block.content,
130-
map: normalizeSourceMap(block.map),
135+
map: normalizeSourceMap(block.map, id),
131136
}
132137
}
133138
}
@@ -142,6 +147,10 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
142147
if (!query.src && !filter(query.filename)) return null
143148
const descriptor = getDescriptor(query.filename)
144149
const hasScoped = descriptor.styles.some((s) => s.scoped)
150+
if (query.src) {
151+
this.addWatchFile(query.filename);
152+
}
153+
145154
if (query.type === 'template') {
146155
const compilerKey = query.compiler
147156
let compiler = options.compiler
@@ -174,17 +183,26 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
174183

175184
debug(`transform(${id})`)
176185
const block = descriptor.template!
186+
const preprocessLang = block.lang
187+
const preprocessOptions =
188+
preprocessLang &&
189+
options.templatePreprocessOptions &&
190+
options.templatePreprocessOptions[preprocessLang]
177191
const result = compileTemplate({
178192
filename: query.filename,
179193
source: code,
180194
inMap: query.src ? undefined : block.map,
181-
preprocessLang: block.lang,
195+
preprocessLang,
196+
preprocessOptions,
182197
preprocessCustomRequire: options.preprocessCustomRequire,
183198
compiler,
184199
ssr: isServer,
185200
compilerOptions: {
186201
...compilerOptions,
187202
scopeId: hasScoped ? `data-v-${query.id}` : undefined,
203+
bindingMetadata: descriptor.script
204+
? descriptor.script.bindings
205+
: undefined,
188206
},
189207
transformAssetUrls: options.transformAssetUrls,
190208
})
@@ -211,25 +229,53 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
211229

212230
return {
213231
code: result.code,
214-
map: normalizeSourceMap(result.map!),
232+
map: normalizeSourceMap(result.map!, id),
215233
}
216234
} else if (query.type === 'style') {
217235
debug(`transform(${id})`)
218236
const block = descriptor.styles[query.index]!
237+
238+
let preprocessOptions = options.preprocessOptions || {}
239+
const preprocessLang = (options.preprocessStyles
240+
? block.lang
241+
: undefined) as SFCAsyncStyleCompileOptions['preprocessLang']
242+
243+
if (preprocessLang) {
244+
preprocessOptions =
245+
preprocessOptions[preprocessLang] || preprocessOptions
246+
// include node_modules for imports by default
247+
switch (preprocessLang) {
248+
case 'scss':
249+
case 'sass':
250+
preprocessOptions = {
251+
includePaths: ['node_modules'],
252+
...preprocessOptions,
253+
}
254+
break
255+
case 'less':
256+
case 'stylus':
257+
preprocessOptions = {
258+
paths: ['node_modules'],
259+
...preprocessOptions,
260+
}
261+
}
262+
} else {
263+
preprocessOptions = {}
264+
}
265+
219266
const result = await compileStyleAsync({
220267
filename: query.filename,
221268
id: `data-v-${query.id!}`,
222269
source: code,
223270
scoped: block.scoped,
271+
vars: !!block.vars,
224272
modules: !!block.module,
225273
postcssOptions: options.postcssOptions,
226274
postcssPlugins: options.postcssPlugins,
227275
modulesOptions: options.cssModulesOptions,
228-
preprocessLang: options.preprocessStyles
229-
? (block.lang as any)
230-
: undefined,
276+
preprocessLang,
231277
preprocessCustomRequire: options.preprocessCustomRequire,
232-
preprocessOptions: options.preprocessOptions || {},
278+
preprocessOptions,
233279
})
234280

235281
if (result.errors.length) {
@@ -250,7 +296,7 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
250296
} else {
251297
return {
252298
code: result.code,
253-
map: normalizeSourceMap(result.map!),
299+
map: normalizeSourceMap(result.map!, id),
254300
}
255301
}
256302
}
@@ -376,21 +422,14 @@ function getDescriptor(id: string) {
376422
throw new Error(`${id} is not parsed yet`)
377423
}
378424

379-
function parseSFC(
380-
code: string,
381-
id: string,
382-
sourceRoot: string
383-
): { descriptor: SFCDescriptor; errors: CompilerError[] } {
425+
function parseSFC(code: string, id: string, sourceRoot: string) {
384426
const { descriptor, errors } = parse(code, {
385427
sourceMap: true,
386428
filename: id,
387429
sourceRoot: sourceRoot,
388-
pad: 'line',
389430
})
390-
391431
cache.set(id, descriptor)
392-
393-
return { descriptor, errors }
432+
return { descriptor, errors: errors }
394433
}
395434

396435
function transformVueSFC(
@@ -416,13 +455,17 @@ function transformVueSFC(
416455
const id = hash(isProduction ? shortFilePath + '\n' + code : shortFilePath)
417456
// feature information
418457
const hasScoped = descriptor.styles.some((s) => s.scoped)
419-
const templateImport = getTemplateCode(
420-
descriptor,
421-
resourcePath,
422-
id,
423-
hasScoped,
424-
isServer
425-
)
458+
459+
const templateImport = !descriptor.template
460+
? ''
461+
: getTemplateCode(descriptor, resourcePath, id, hasScoped, isServer)
462+
463+
const renderReplace = !descriptor.template
464+
? ''
465+
: isServer
466+
? `script.ssrRender = ssrRender`
467+
: `script.render = render`
468+
426469
const scriptImport = getScriptCode(descriptor, resourcePath)
427470
const stylesCode = getStyleCode(
428471
descriptor,
@@ -440,7 +483,7 @@ function transformVueSFC(
440483
templateImport,
441484
stylesCode,
442485
customBlocksCode,
443-
isServer ? `script.ssrRender = ssrRender` : `script.render = render`,
486+
renderReplace,
444487
]
445488
if (hasScoped) {
446489
output.push(`script.__scopeId = ${_(`data-v-${id}`)}`)
@@ -461,7 +504,8 @@ function getTemplateCode(
461504
hasScoped: boolean,
462505
isServer: boolean
463506
) {
464-
let templateImport = `const render = () => {}`
507+
const renderFnName = isServer ? 'ssrRender' : 'render'
508+
let templateImport = `const ${renderFnName} = () => {}`
465509
let templateRequest
466510
if (descriptor.template) {
467511
const src = descriptor.template.src || resourcePath
@@ -471,24 +515,28 @@ function getTemplateCode(
471515
const attrsQuery = attrsToQuery(descriptor.template.attrs)
472516
const query = `?vue&type=template${idQuery}${srcQuery}${scopedQuery}${attrsQuery}`
473517
templateRequest = _(src + query)
474-
templateImport = `import { ${
475-
isServer ? 'ssrRender' : 'render'
476-
} } from ${templateRequest}`
518+
templateImport = `import { ${renderFnName} } from ${templateRequest}`
477519
}
478520

479521
return templateImport
480522
}
481523

482524
function getScriptCode(descriptor: SFCDescriptor, resourcePath: string) {
483525
let scriptImport = `const script = {}`
484-
if (descriptor.script) {
485-
const src = descriptor.script.src || resourcePath
486-
const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js')
487-
const srcQuery = descriptor.script.src ? `&src` : ``
488-
const query = `?vue&type=script${srcQuery}${attrsQuery}`
489-
const scriptRequest = _(src + query)
490-
scriptImport =
491-
`import script from ${scriptRequest}\n` + `export * from ${scriptRequest}` // support named exports
526+
if (descriptor.script || descriptor.scriptSetup) {
527+
if (compileScript) {
528+
descriptor.script = compileScript(descriptor)
529+
}
530+
if (descriptor.script) {
531+
const src = descriptor.script.src || resourcePath
532+
const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js')
533+
const srcQuery = descriptor.script.src ? `&src` : ``
534+
const query = `?vue&type=script${srcQuery}${attrsQuery}`
535+
const scriptRequest = _(src + query)
536+
scriptImport =
537+
`import script from ${scriptRequest}\n` +
538+
`export * from ${scriptRequest}` // support named exports
539+
}
492540
}
493541
return scriptImport
494542
}
@@ -561,21 +609,33 @@ function getCustomBlock(
561609
return code
562610
}
563611

564-
function createRollupError(id: string, error: CompilerError): RollupError {
565-
return {
566-
id,
567-
plugin: 'vue',
568-
pluginCode: String(error.code),
569-
message: error.message,
570-
frame: error.loc!.source,
571-
parserError: error,
572-
loc: error.loc
573-
? {
574-
file: id,
575-
line: error.loc.start.line,
576-
column: error.loc.start.column,
577-
}
578-
: undefined,
612+
function createRollupError(
613+
id: string,
614+
error: CompilerError | SyntaxError
615+
): RollupError {
616+
if ('code' in error) {
617+
return {
618+
id,
619+
plugin: 'vue',
620+
pluginCode: String(error.code),
621+
message: error.message,
622+
frame: error.loc!.source,
623+
parserError: error,
624+
loc: error.loc
625+
? {
626+
file: id,
627+
line: error.loc.start.line,
628+
column: error.loc.start.column,
629+
}
630+
: undefined,
631+
}
632+
} else {
633+
return {
634+
id,
635+
plugin: 'vue',
636+
message: error.message,
637+
parserError: error,
638+
}
579639
}
580640
}
581641

@@ -612,9 +672,14 @@ function _(any: any) {
612672
return JSON.stringify(any)
613673
}
614674

615-
function normalizeSourceMap(map: SFCTemplateCompileResults['map']): any {
675+
function normalizeSourceMap(map: SFCTemplateCompileResults['map'], id: string): any {
616676
if (!map) return null as any
617677

678+
if (!id.includes('type=script')) {
679+
map.file = id;
680+
map.sources[0] = id;
681+
}
682+
618683
return {
619684
...map,
620685
version: Number(map.version),

0 commit comments

Comments
 (0)