Skip to content

Commit e07490e

Browse files
yyx990803yyx990803
committed
feat: support reactivityTransform option
BREAKING CHANGE: remove `refSugar` option, require `vue@^3.2.13`
1 parent b391b04 commit e07490e

12 files changed

+45
-58
lines changed

‎README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
55
- [Documentation](https://vue-loader.vuejs.org)
66

7-
## v16 Only Options
7+
## v16+ Only Options
88

9-
- `refSugar: boolean`: enable experimental ref sugar.
9+
- `reactivityTransform: boolean`: enable [Vue Reactivity Transform](https://github.com/vuejs/rfcs/discussions/369) (SFCs only).
10+
11+
- ~~`refSugar: boolean`: **removed.** use `reactivityTransform` instead.~~
1012

1113
- `customElement: boolean | RegExp`: enable custom elements mode. An SFC loaded in custom elements mode inlines its `<style>` tags as strings under the component's `styles` option. When used with `defineCustomElement` from Vue core, the styles will be injected into the custom element's shadow root.
1214

‎example/webpack.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,7 @@ module.exports = (env = {}) => {
5454
test: /\.vue$/,
5555
loader: 'vue-loader',
5656
options: {
57-
refSugar: true,
58-
// enableTsInTemplate: false,
57+
reactivityTransform: true,
5958
},
6059
},
6160
{

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
"@types/mini-css-extract-plugin": "^0.9.1",
5252
"@types/webpack": "^4.41.0",
5353
"@types/webpack-merge": "^4.1.5",
54-
"@vue/compiler-sfc": "^3.2.12",
5554
"babel-loader": "^8.1.0",
5655
"cache-loader": "^4.1.0",
5756
"conventional-changelog-cli": "^2.1.1",
@@ -81,7 +80,7 @@
8180
"ts-loader-v9": "npm:ts-loader@^9.2.4",
8281
"typescript": "^4.4.3",
8382
"url-loader": "^4.1.0",
84-
"vue": "^3.2.13",
83+
"vue": "^3.2.25",
8584
"vue-i18n": "^9.1.7",
8685
"webpack": "^4.41.2",
8786
"webpack-cli": "^3.3.10",

‎src/compiler.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// extend the descriptor so we can store the scopeId on it
2-
declare module '@vue/compiler-sfc' {
2+
declare module 'vue/compiler-sfc' {
33
interface SFCDescriptor {
44
id: string
55
}
66
}
77

8-
import * as _compiler from '@vue/compiler-sfc'
8+
import * as _compiler from 'vue/compiler-sfc'
99

1010
export let compiler: typeof _compiler
1111

‎src/descriptorCache.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as fs from 'fs'
2-
import type { SFCDescriptor } from '@vue/compiler-sfc'
3-
import { compiler } from './compiler'
2+
import type { SFCDescriptor } from 'vue/compiler-sfc'
3+
import { parse } from 'vue/compiler-sfc'
44

55
const cache = new Map<string, SFCDescriptor>()
66

@@ -20,7 +20,7 @@ export function getDescriptor(filename: string): SFCDescriptor {
2020
// loaders being run in separate threads. The only way to deal with this is to
2121
// read from disk directly...
2222
const source = fs.readFileSync(filename, 'utf-8')
23-
const { descriptor } = compiler.parse(source, {
23+
const { descriptor } = parse(source, {
2424
filename,
2525
sourceMap: true,
2626
})

‎src/formatError.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { CompilerError } from '@vue/compiler-sfc'
2-
import { compiler } from './compiler'
1+
import type { CompilerError } from 'vue/compiler-sfc'
2+
import { generateCodeFrame } from 'vue/compiler-sfc'
33
import chalk = require('chalk')
44

55
export function formatError(
@@ -13,11 +13,7 @@ export function formatError(
1313
}
1414
const locString = `:${loc.start.line}:${loc.start.column}`
1515
const filePath = chalk.gray(`at ${file}${locString}`)
16-
const codeframe = compiler.generateCodeFrame(
17-
source,
18-
loc.start.offset,
19-
loc.end.offset
20-
)
16+
const codeframe = generateCodeFrame(source, loc.start.offset, loc.end.offset)
2117
err.message = `\n${chalk.red(
2218
`VueCompilerError: ${err.message}`
2319
)}\n${filePath}\n${chalk.yellow(codeframe)}\n`

‎src/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import * as loaderUtils from 'loader-utils'
55

66
import hash = require('hash-sum')
77

8-
import { compiler } from './compiler'
8+
import { parse } from 'vue/compiler-sfc'
99
import type {
1010
TemplateCompiler,
1111
CompilerOptions,
1212
SFCBlock,
1313
SFCTemplateCompileOptions,
1414
SFCScriptCompileOptions,
15-
} from '@vue/compiler-sfc'
15+
} from 'vue/compiler-sfc'
1616
import { selectBlock } from './select'
1717
import { genHotReloadCode } from './hotReload'
1818
import { genCSSModulesCode } from './cssModules'
@@ -30,7 +30,7 @@ export interface VueLoaderOptions {
3030
transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
3131
compiler?: TemplateCompiler | string
3232
compilerOptions?: CompilerOptions
33-
refSugar?: boolean
33+
reactivityTransform?: boolean
3434
customElement?: boolean | RegExp
3535

3636
hotReload?: boolean
@@ -88,7 +88,7 @@ export default function loader(
8888
mode === 'production' || process.env.NODE_ENV === 'production'
8989

9090
const filename = resourcePath.replace(/\?.*$/, '')
91-
const { descriptor, errors } = compiler.parse(source, {
91+
const { descriptor, errors } = parse(source, {
9292
filename,
9393
sourceMap,
9494
})

‎src/resolveScript.ts

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import type {
33
SFCDescriptor,
44
SFCScriptBlock,
55
TemplateCompiler,
6-
} from '@vue/compiler-sfc'
6+
} from 'vue/compiler-sfc'
77
import type { VueLoaderOptions } from 'src'
88
import { resolveTemplateTSOptions } from './util'
9-
import { compiler } from './compiler'
9+
import { compileScript } from 'vue/compiler-sfc'
1010

1111
const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
1212
const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
@@ -53,34 +53,25 @@ export function resolveScript(
5353
templateCompiler = options.compiler
5454
}
5555

56-
if (compiler.compileScript) {
57-
try {
58-
resolved = compiler.compileScript(descriptor, {
59-
id: scopeId,
60-
isProd,
61-
inlineTemplate: enableInline,
62-
refSugar: options.refSugar,
63-
babelParserPlugins: options.babelParserPlugins,
64-
templateOptions: {
65-
ssr: isServer,
66-
compiler: templateCompiler,
67-
compilerOptions: {
68-
...options.compilerOptions,
69-
...resolveTemplateTSOptions(descriptor, options),
70-
},
71-
transformAssetUrls: options.transformAssetUrls || true,
56+
try {
57+
resolved = compileScript(descriptor, {
58+
id: scopeId,
59+
isProd,
60+
inlineTemplate: enableInline,
61+
reactivityTransform: options.reactivityTransform,
62+
babelParserPlugins: options.babelParserPlugins,
63+
templateOptions: {
64+
ssr: isServer,
65+
compiler: templateCompiler,
66+
compilerOptions: {
67+
...options.compilerOptions,
68+
...resolveTemplateTSOptions(descriptor, options),
7269
},
73-
})
74-
} catch (e) {
75-
loaderContext.emitError(e)
76-
}
77-
} else if (descriptor.scriptSetup) {
78-
loaderContext.emitError(
79-
`<script setup> is not supported by the installed version of ` +
80-
`@vue/compiler-sfc - please upgrade.`
81-
)
82-
} else {
83-
resolved = descriptor.script
70+
transformAssetUrls: options.transformAssetUrls || true,
71+
},
72+
})
73+
} catch (e) {
74+
loaderContext.emitError(e)
8475
}
8576

8677
cacheToUse.set(descriptor, resolved)

‎src/select.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import webpack = require('webpack')
2-
import type { SFCDescriptor } from '@vue/compiler-sfc'
2+
import type { SFCDescriptor } from 'vue/compiler-sfc'
33
import type { ParsedUrlQuery } from 'querystring'
44
import { resolveScript } from './resolveScript'
55
import type { VueLoaderOptions } from 'src'

‎src/stylePostLoader.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import * as qs from 'querystring'
2-
import { compiler } from './compiler'
32
import webpack = require('webpack')
3+
import { compileStyle } from 'vue/compiler-sfc'
44

55
// This is a post loader that handles scoped CSS transforms.
66
// Injected right before css-loader by the global pitcher (../pitch.js)
77
// for any <style scoped> selection requests initiated from within vue files.
88
const StylePostLoader: webpack.loader.Loader = function (source, inMap) {
99
const query = qs.parse(this.resourceQuery.slice(1))
10-
const { code, map, errors } = compiler.compileStyle({
10+
const { code, map, errors } = compileStyle({
1111
source: source as string,
1212
filename: this.resourcePath,
1313
id: `data-v-${query.id}`,

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy