calls.push(4)}
224 | hook-insert={() => calls.push(2)}
225 | />
226 | )
227 | },
228 | })
229 |
230 | t.is(wrapper.vnode.data.attrs.id, 'hehe')
231 | t.is(wrapper.vnode.data.attrs.href, 'huhu')
232 | t.is(wrapper.vnode.data.props.innerHTML, 2)
233 | t.deepEqual(wrapper.vnode.data.class, ['a', 'b', { c: true }])
234 | t.deepEqual(calls, [1, 2])
235 | wrapper.vnode.data.on.click()
236 | t.deepEqual(calls, [1, 2, 3, 4])
237 | })
238 |
239 | test('Custom directives', t => {
240 | const directive = {
241 | inserted() {},
242 | }
243 | Vue.directive('test', directive)
244 | Vue.directive('other', directive)
245 |
246 | const wrapper = shallowMount({
247 | render(h) {
248 | return
249 | },
250 | })
251 |
252 | t.is(wrapper.vnode.data.directives.length, 2)
253 | t.deepEqual(wrapper.vnode.data.directives[0], { def: directive, modifiers: {}, name: 'test', value: 123 })
254 | t.deepEqual(wrapper.vnode.data.directives[1], { def: directive, modifiers: {}, name: 'other', value: 234 })
255 | })
256 |
257 | test('xlink:href', t => {
258 | const wrapper = shallowMount({
259 | render(h) {
260 | return
261 | },
262 | })
263 |
264 | t.is(wrapper.vnode.data.attrs['xlink:href'], '#name')
265 | })
266 |
267 | test('Merge class', t => {
268 | const wrapper = shallowMount({
269 | render(h) {
270 | return
271 | },
272 | })
273 |
274 | t.deepEqual(wrapper.vnode.data.class, ['a', 'b'])
275 | })
276 |
277 | test('JSXMemberExpression', t => {
278 | const a = {
279 | b: {
280 | cmp: {
281 | render(h) {
282 | return
283 | },
284 | },
285 | },
286 | }
287 | const wrapper = shallowMount({
288 | render(h) {
289 | return
290 | },
291 | })
292 |
293 | t.is(wrapper.html(), '
')
294 | })
295 |
296 | test('JSXSpreadChild', t => {
297 | const a = ['1', '2']
298 | const wrapper = shallowMount({
299 | render(h) {
300 | return
{...a}
301 | },
302 | })
303 |
304 | t.is(wrapper.html(), '
12
')
305 | })
306 |
307 | test('domProps input[value]', t => {
308 | const val = 'foo'
309 | const wrapper = shallowMount({
310 | render(h) {
311 | return
312 | },
313 | })
314 |
315 | t.is(wrapper.html(), '
')
316 | t.is(wrapper.vnode.data.domProps.value, 'foo')
317 | })
318 |
319 | test('domProps option[selected]', t => {
320 | const val = 'foo'
321 | const wrapper = shallowMount({
322 | render(h) {
323 | return
324 | },
325 | })
326 |
327 | t.is(wrapper.vnode.data.domProps.selected, 'foo')
328 | })
329 |
330 | test('domProps input[checked]', t => {
331 | const val = 'foo'
332 | const wrapper = shallowMount({
333 | render(h) {
334 | return
335 | },
336 | })
337 |
338 | t.is(wrapper.vnode.data.domProps.checked, 'foo')
339 | })
340 |
341 | test('domProps video[muted]', t => {
342 | const val = 'foo'
343 | const wrapper = shallowMount({
344 | render(h) {
345 | return
346 | },
347 | })
348 |
349 | t.is(wrapper.vnode.data.domProps.muted, 'foo')
350 | })
351 |
--------------------------------------------------------------------------------
/packages/babel-plugin-transform-vue-jsx/test/snapshot.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 | import { transform } from '@babel/core'
3 | import syntaxJsx from '@babel/plugin-syntax-jsx'
4 | import plugin from '../dist/plugin.testing'
5 |
6 | const transpile = src =>
7 | new Promise((resolve, reject) => {
8 | transform(
9 | src,
10 | {
11 | plugins: [plugin],
12 | },
13 | (err, result) => {
14 | if (err) {
15 | return reject(err)
16 | }
17 | resolve(result.code)
18 | },
19 | )
20 | })
21 |
22 | const tests = [
23 | {
24 | name: 'HTML tag',
25 | from: `render(h =>
test
)`,
26 | to: `render(h => h("div", ["test"]));`,
27 | },
28 | {
29 | name: 'HTML tag if variable in scope',
30 | from: `const div = {}; render(h =>
test
)`,
31 | to: `const div = {};
32 | render(h => h("div", ["test"]));`,
33 | },
34 | {
35 | name: 'Tag & Component',
36 | from: `const Alpha = {}; render(h => [
test,
test])`,
37 | to: `const Alpha = {};
38 | render(h => [h(Alpha, ["test"]), h("Beta", ["test"])]);`,
39 | },
40 | {
41 | name: 'MemberExpression component',
42 | from: `render(h =>
test)`,
43 | to: `render(h => h(a.b.c, ["test"]));`,
44 | },
45 | {
46 | name: 'Variable as content',
47 | from: `render(h =>
{test}
)`,
48 | to: `render(h => h("div", [test]));`,
49 | },
50 | {
51 | name: 'Spread content',
52 | from: `render(h =>
{...test}
)`,
53 | to: `render(h => h("div", [...test]));`,
54 | },
55 | {
56 | name: 'Self-closing html tag',
57 | from: `render(h =>
)`,
58 | to: `render(h => h("div", [h("br")]));`,
59 | },
60 | {
61 | name: 'Combined content',
62 | from: `render(h =>
63 | test{test}
64 |
65 |
66 |
67 | Some text
68 | goes here
69 |
70 | {...test}
71 |
)`,
72 | to: `render(h => h("div", ["test", test, h("tag1"), h("tag2"), "Some text goes here", ...test]));`,
73 | },
74 | {
75 | name: 'Plain attrs',
76 | from: `render(h =>
)`,
77 | to: `render(h => h("div", {
78 | "attrs": {
79 | "id": "hi",
80 | "dir": "ltr"
81 | }
82 | }));`,
83 | },
84 | {
85 | name: 'Expression attrss',
86 | from: `render(h =>
)`,
87 | to: `render(h => h("div", {
88 | "attrs": {
89 | "id": id
90 | }
91 | }));`,
92 | },
93 | {
94 | name: 'Special root attributes',
95 | from: `render(h => (
96 |
{
106 | this.txt = $$v
107 | }
108 | }}>
109 |
110 | ))`,
111 | to: `render(h => h("div", {
112 | "class": "foo",
113 | "style": "bar",
114 | "key": "key",
115 | "ref": "ref",
116 | "refInFor": true,
117 | "slot": "slot",
118 | "model": {
119 | value: this.txt,
120 | callback: $$v => {
121 | this.txt = $$v;
122 | }
123 | }
124 | }));`,
125 | },
126 | {
127 | name: 'Special snake-case attributes',
128 | from: `render(h => (
129 |
135 |
136 | ))`,
137 | to: `render(h => h("div", {
138 | "props": {
139 | "on-success": noop
140 | },
141 | "on": {
142 | "click": noop,
143 | "kebab-case": noop
144 | },
145 | "domProps": {
146 | "innerHTML": "
hi
"
147 | },
148 | "hook": {
149 | "insert": noop
150 | }
151 | }));`,
152 | },
153 | {
154 | name: 'Special camelCase attributes',
155 | from: `render(h => (
156 |
162 |
163 | ))`,
164 | to: `render(h => h("div", {
165 | "props": {
166 | "onSuccess": noop
167 | },
168 | "on": {
169 | "click": noop,
170 | "camelCase": noop
171 | },
172 | "domProps": {
173 | "innerHTML": "
hi
"
174 | },
175 | "hook": {
176 | "insert": noop
177 | }
178 | }));`,
179 | },
180 | {
181 | name: 'Data attributes',
182 | from: `render(h => (
183 |
184 | ))`,
185 | to: `render(h => h("div", {
186 | "attrs": {
187 | "data-id": "1"
188 | }
189 | }));`,
190 | },
191 | {
192 | name: 'Inline spread attributes',
193 | from: `const props = {
194 | innerHTML: 2
195 | }
196 | const otherName = {
197 | someAttr: 'hey'
198 | }
199 | const vnode = render(h => (
200 |
201 | ))`,
202 | to: `const props = {
203 | innerHTML: 2
204 | };
205 | const otherName = {
206 | someAttr: 'hey'
207 | };
208 | const vnode = render(h => h("div", {
209 | "props": {
210 | "hello": "test",
211 | ...props
212 | },
213 | "attrs": { ...otherName
214 | }
215 | }));`,
216 | },
217 | {
218 | name: 'Only spread attributes',
219 | from: `render(h =>
)`,
220 | to: `import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
221 | render(h => h("div", _mergeJSXProps([{}, spread])));`,
222 | },
223 | {
224 | name: 'Generic spread attributes',
225 | from: `render(h =>
)`,
226 | to: `import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
227 | render(h => h("div", _mergeJSXProps([{}, spread, {
228 | "attrs": {
229 | "hello": "world"
230 | }
231 | }])));`,
232 | },
233 | {
234 | name: 'Directives',
235 | from: `render(h =>
)`,
236 | to: `render(h => h("div", {
237 | "directives": [{
238 | name: "test",
239 | value: 123
240 | }, {
241 | name: "something",
242 | value: 1234,
243 | modifiers: {
244 | "modifier": true
245 | }
246 | }, {
247 | name: "other-stuff",
248 | value: 234,
249 | arg: "argument",
250 | modifiers: {
251 | "modifier1": true,
252 | "modifier2": true
253 | }
254 | }]
255 | }));`,
256 | },
257 | {
258 | name: 'xlink',
259 | from: `
`,
260 | to: `h("use", {
261 | "attrs": {
262 | "xlink:href": '#name'
263 | }
264 | });`,
265 | },
266 | {
267 | name: 'Magic domProps input[value]',
268 | from: `
`,
269 | to: `h("input", {
270 | "attrs": {
271 | "type": "text"
272 | },
273 | "domProps": {
274 | "value": val
275 | }
276 | });`,
277 | },
278 | {
279 | name: 'Magic domProps option[selected]',
280 | from: `
`,
281 | to: `h("option", {
282 | "domProps": {
283 | "selected": val
284 | }
285 | });`,
286 | },
287 | {
288 | name: 'Magic domProps input[checked]',
289 | from: `
`,
290 | to: `h("input", {
291 | "domProps": {
292 | "checked": val
293 | }
294 | });`,
295 | },
296 | {
297 | name: 'Magic domProps video[muted]',
298 | from: `
`,
299 | to: `h("video", {
300 | "domProps": {
301 | "muted": val
302 | }
303 | });`,
304 | },
305 | {
306 | name: 'Multiple event listeners',
307 | from: `
`,
308 | to: `h("div", {
309 | "on": {
310 | "click": [listner1, listner2, listner3]
311 | }
312 | });`,
313 | },
314 | {
315 | name: 'Root attribute',
316 | from: `
`,
317 | to: `import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
318 | h("MyComponent", _mergeJSXProps([{
319 | "props": {
320 | "prop1": "foo"
321 | }
322 | }, {
323 | "props": {
324 | prop1: 'alpha',
325 | prop2: 'beta'
326 | }
327 | }]));`,
328 | },
329 | {
330 | name: 'JSX comments',
331 | from: `
`,
332 | to: `h("div", [h("p", ["jsx"])]);`
333 | },
334 | {
335 | name: 'Underscore Props',
336 | from: `const MyComp = {}; render(h =>
test)`,
337 | to: `const MyComp = {};
338 | render(h => h("MyComponent", {
339 | "attrs": {
340 | "my_prop": "test"
341 | }
342 | }, ["test"]));`,
343 | }
344 | ]
345 |
346 | tests.forEach(({ name, from, to }) => test(name, async t => t.is(await transpile(from), to)))
347 |
348 | test('JSXElement attribute value throws error', t =>
349 | new Promise(resolve => {
350 | transpile(`render(h =>
/>)`)
351 | .then(() => {
352 | t.fail()
353 | resolve()
354 | })
355 | .catch(e => {
356 | t.regex(e.message, /getAttributes \(attribute value\): JSXElement is not supported/)
357 | resolve()
358 | })
359 | }))
360 |
361 |
362 | test('Allows prior plugins to traverse JSX tree throughly', t => {
363 | let visited = 0;
364 | const anotherPlugin = () => ({
365 | name: 'babel-plugin-another',
366 | inherits: syntaxJsx,
367 | visitor: {
368 | JSXElement(path) {
369 | visited++;
370 |
371 | }
372 | }
373 | })
374 | return new Promise(resolve => {
375 | transform(`render(h => )`,{ plugins: [anotherPlugin, plugin] }, (err) => {
376 | if (err) t.fail()
377 | t.is(visited, 2)
378 | resolve();
379 | })
380 | })
381 | })
382 |
--------------------------------------------------------------------------------
/packages/babel-preset-jsx/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 |
--------------------------------------------------------------------------------
/packages/babel-preset-jsx/README.md:
--------------------------------------------------------------------------------
1 | ## @vue/babel-preset-jsx
2 |
3 | Configurable preset for Vue JSX plugins.
4 |
5 | ### Babel Compatibility Notes
6 |
7 | - This repo is only compatible with Babel 7.x, for 6.x please use [vuejs/babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
8 |
9 | ### Usage
10 |
11 | Install the dependencies:
12 |
13 | ```sh
14 | # for yarn:
15 | yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
16 | # for npm:
17 | npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save
18 | ```
19 |
20 | In your `babel.config.js`:
21 |
22 | ```js
23 | module.exports = {
24 | presets: ['@vue/babel-preset-jsx'],
25 | }
26 | ```
27 |
28 | You can toggle specific features, by default all features (except `compositionAPI`) are enabled, e.g.:
29 |
30 | ```js
31 | module.exports = {
32 | presets: [
33 | [
34 | '@vue/babel-preset-jsx',
35 | {
36 | vModel: false,
37 | compositionAPI: true,
38 | },
39 | ],
40 | ],
41 | }
42 | ```
43 |
44 | Options are:
45 |
46 | - `compositionAPI` - Enables [@vue/babel-sugar-composition-api-inject-h](../babel-sugar-composition-api-inject-h) and [@vue/babel-sugar-composition-api-render-instance](../babel-sugar-composition-api-render-instance), support returning render function in `setup`.
47 | - The default value is `false`;
48 | - When set to `'auto'` (or `true`), it will detect the Vue version in the project. If it's >= 2.7, it will import the composition utilities from `vue`, otherwise from `@vue/composition-api`;
49 | - When set to `'native'` (or `'naruto'`), it will always import the composition utilities from `vue`
50 | - When set to `plugin`, it will always import the composition utilities from `@vue/composition-api`, but it will redirect to `'vue'` itself when the vue version is `2.7.x`
51 | - When set to `vue-demi`, it will always import the composition utilities from `vue-demi`
52 | - When set to an object like `{ importSource: string; }`, it will always import the composition utilities from the importSource you set
53 | - `functional` [@vue/babel-sugar-functional-vue](../babel-sugar-functional-vue/README.md) - Functional components syntactic sugar
54 | - `injectH` [@vue/babel-sugar-inject-h](../babel-sugar-inject-h/README.md) - Automatic `h` injection syntactic sugar
55 | - `vModel` [@vue/babel-sugar-v-model](../babel-sugar-v-model/README.md) - `vModel` syntactic sugar
56 | - `vOn` [@vue/babel-sugar-v-on](../babel-sugar-v-on/README.md) - `vOn` syntactic sugar
57 |
--------------------------------------------------------------------------------
/packages/babel-preset-jsx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue/babel-preset-jsx",
3 | "version": "1.4.0",
4 | "description": "Babel preset for Vue JSX",
5 | "main": "dist/plugin.cjs.js",
6 | "repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-preset-jsx",
7 | "author": "Nick Messing
",
8 | "license": "MIT",
9 | "private": false,
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "files": [],
14 | "scripts": {
15 | "build": "rollup -c",
16 | "prerelease": "yarn build"
17 | },
18 | "dependencies": {
19 | "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
20 | "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
21 | "@vue/babel-sugar-composition-api-inject-h": "^1.4.0",
22 | "@vue/babel-sugar-composition-api-render-instance": "^1.4.0",
23 | "@vue/babel-sugar-functional-vue": "^1.4.0",
24 | "@vue/babel-sugar-inject-h": "^1.4.0",
25 | "@vue/babel-sugar-v-model": "^1.4.0",
26 | "@vue/babel-sugar-v-on": "^1.4.0"
27 | },
28 | "devDependencies": {
29 | "rollup": "^0.67.4",
30 | "rollup-plugin-babel-minify": "^6.2.0"
31 | },
32 | "peerDependencies": {
33 | "@babel/core": "^7.0.0-0",
34 | "vue": "*"
35 | },
36 | "peerDependenciesMeta": {
37 | "vue": {
38 | "optional": true
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/packages/babel-preset-jsx/rollup.config.js:
--------------------------------------------------------------------------------
1 | import minify from 'rollup-plugin-babel-minify'
2 |
3 | export default {
4 | input: 'src/index.js',
5 | plugins: [minify({ comments: false })],
6 | output: [
7 | {
8 | file: 'dist/plugin.cjs.js',
9 | format: 'cjs',
10 | },
11 | ],
12 | }
13 |
--------------------------------------------------------------------------------
/packages/babel-preset-jsx/src/index.js:
--------------------------------------------------------------------------------
1 | import babelPluginTransformVueJsx from '@vue/babel-plugin-transform-vue-jsx'
2 | import babelSugarFunctionalVue from '@vue/babel-sugar-functional-vue'
3 | import babelSugarInjectH from '@vue/babel-sugar-inject-h'
4 | import babelSugarCompositionApiInjectH from '@vue/babel-sugar-composition-api-inject-h'
5 | import babelSugarCompositionApiRenderInstance from '@vue/babel-sugar-composition-api-render-instance'
6 | import babelSugarVModel from '@vue/babel-sugar-v-model'
7 | import babelSugarVOn from '@vue/babel-sugar-v-on'
8 |
9 | export default (_, {
10 | functional = true,
11 | injectH = true,
12 | vModel = true,
13 | vOn = true,
14 | compositionAPI = false
15 | } = {}) => {
16 | // compositionAPI: 'auto' | 'native' | 'plugin' | 'vue-demi' | false | { importSource: string; }
17 | // legacy: compositionAPI: true (equivalent to 'auto')
18 | // bonus: compositionAPI: 'naruto' (equivalent to 'native')
19 | let injectHPlugin = babelSugarInjectH
20 | let importSource = '@vue/composition-api'
21 |
22 | if (compositionAPI) {
23 | if (['native', 'naruto'].includes(compositionAPI)) {
24 | importSource = 'vue'
25 | }
26 |
27 | if (compositionAPI === 'vue-demi') {
28 | importSource = 'vue-demi'
29 | }
30 |
31 | if (['auto', true].includes(compositionAPI)) {
32 | try {
33 | const vueVersion = require('vue/package.json').version
34 | if (vueVersion.startsWith('2.7')) {
35 | importSource = 'vue'
36 | }
37 | } catch (e) { }
38 | }
39 |
40 | if (typeof compositionAPI === 'object' && compositionAPI.importSource) {
41 | importSource = compositionAPI.importSource
42 | }
43 |
44 | injectHPlugin = [babelSugarCompositionApiInjectH, { importSource }]
45 | }
46 |
47 | return {
48 | plugins: [
49 | functional && babelSugarFunctionalVue,
50 | injectH && injectHPlugin,
51 | vModel && babelSugarVModel,
52 | vOn && babelSugarVOn,
53 | compositionAPI && [babelSugarCompositionApiRenderInstance, { importSource }],
54 | babelPluginTransformVueJsx,
55 | ].filter(Boolean),
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/packages/babel-sugar-composition-api-inject-h/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 |
--------------------------------------------------------------------------------
/packages/babel-sugar-composition-api-inject-h/README.md:
--------------------------------------------------------------------------------
1 | ## @vue/babel-sugar-composition-api-inject-h
2 |
3 | > Ported from [luwanquan/babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan)
4 |
5 | Syntactic sugar for automatic `h` inject in JSX with @vue/composition-api.
6 |
7 | ### Babel Compatibility Notes
8 |
9 | - This repo is only compatible with Babel 7.x
10 |
11 | ### Usage
12 |
13 | Install the dependencies:
14 |
15 | ```sh
16 | # for yarn:
17 | yarn add @vue/babel-sugar-composition-api-inject-h
18 | # for npm:
19 | npm install @vue/babel-sugar-composition-api-inject-h --save
20 | ```
21 |
22 | In your `.babelrc`:
23 |
24 | ```json
25 | {
26 | "plugins": ["@vue/babel-sugar-composition-api-inject-h"]
27 | }
28 | ```
29 |
30 | However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.
31 |
32 | ### Details
33 |
34 | This plugin automatically injects `h` in every method that has JSX. By using this plugin you don't have to always import `h` from `@vue/composition-api`.
35 |
36 | ```js
37 | // Without @vue/babel-sugar-inject-h
38 | import { h } from '@vue/composition-api'
39 |
40 | export default {
41 | setup() {
42 | return () =>
43 | },
44 | }
45 | ```
46 |
47 | ```js
48 | // With @vue/babel-sugar-inject-h
49 | export default {
50 | setup() {
51 | return () =>
52 | },
53 | }
54 | ```
55 |
--------------------------------------------------------------------------------
/packages/babel-sugar-composition-api-inject-h/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue/babel-sugar-composition-api-inject-h",
3 | "version": "1.4.0",
4 | "description": "Babel syntactic sugar for h automatic injection for Vue JSX with @vue/composition-api",
5 | "main": "dist/plugin.js",
6 | "repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-composition-api-inject-h",
7 | "author": "luwanquan ",
8 | "license": "MIT",
9 | "private": false,
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "files": [],
14 | "scripts": {
15 | "prepublish": "yarn build",
16 | "build": "rollup -c",
17 | "build:test": "rollup -c rollup.config.testing.js",
18 | "pretest": "yarn build:test",
19 | "test": "nyc --reporter=html --reporter=text-summary ava -v test/test.js"
20 | },
21 | "devDependencies": {
22 | "@babel/cli": "^7.2.0",
23 | "@babel/core": "^7.2.0",
24 | "@babel/preset-env": "^7.2.0",
25 | "ava": "^0.25.0",
26 | "nyc": "^13.1.0",
27 | "rollup": "^0.67.4",
28 | "rollup-plugin-babel": "4.0.3",
29 | "rollup-plugin-istanbul": "^2.0.1",
30 | "rollup-plugin-uglify-es": "^0.0.1",
31 | "vue": "^2.5.17"
32 | },
33 | "dependencies": {
34 | "@babel/plugin-syntax-jsx": "^7.2.0"
35 | },
36 | "peerDependencies": {
37 | "@babel/core": "^7.0.0-0"
38 | },
39 | "nyc": {
40 | "exclude": [
41 | "dist",
42 | "test"
43 | ]
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/babel-sugar-composition-api-inject-h/rollup.config.js:
--------------------------------------------------------------------------------
1 | import { rollup } from 'rollup'
2 | import babel from 'rollup-plugin-babel'
3 | import uglify from 'rollup-plugin-uglify-es'
4 |
5 | export default {
6 | input: 'src/index.js',
7 | plugins: [
8 | babel({
9 | presets: [
10 | [
11 | '@babel/preset-env',
12 | {
13 | targets: {
14 | node: '8',
15 | },
16 | modules: false,
17 | loose: true,
18 | },
19 | ],
20 | ],
21 | }),
22 | uglify(),
23 | ],
24 | output: [
25 | {
26 | file: 'dist/plugin.js',
27 | format: 'cjs',
28 | },
29 | ],
30 | }
31 |
--------------------------------------------------------------------------------
/packages/babel-sugar-composition-api-inject-h/rollup.config.testing.js:
--------------------------------------------------------------------------------
1 | import istanbul from 'rollup-plugin-istanbul'
2 |
3 | export default {
4 | input: 'src/index.js',
5 | plugins: [istanbul()],
6 | output: [
7 | {
8 | file: 'dist/plugin.testing.js',
9 | format: 'cjs',
10 | },
11 | ],
12 | }
13 |
--------------------------------------------------------------------------------
/packages/babel-sugar-composition-api-inject-h/src/index.js:
--------------------------------------------------------------------------------
1 | import syntaxJsx from '@babel/plugin-syntax-jsx'
2 |
3 | /**
4 | * Check if body contains JSX
5 | * @param t
6 | * @param path ObjectMethod | ClassMethod
7 | * @returns boolean
8 | */
9 | const hasJSX = (t, path) => {
10 | const JSXChecker = {
11 | hasJSX: false,
12 | }
13 | path.traverse(
14 | {
15 | JSXElement() {
16 | this.hasJSX = true
17 | },
18 | },
19 | JSXChecker,
20 | )
21 | return JSXChecker.hasJSX
22 | }
23 |
24 | // remove `var h = this.$createElement;` in `setup()`
25 | const remove$createElement = (t, path) => {
26 | path.traverse({
27 | ObjectMethod(p) {
28 | const isSetup = p.node.key.name === 'setup'
29 | if (!isSetup) return
30 | p.traverse({
31 | VariableDeclaration(varPath) {
32 | varPath.traverse({
33 | MemberExpression(p) {
34 | if (
35 | t.isThisExpression(p.node.object) &&
36 | t.isIdentifier(p.node.property) &&
37 | p.node.property.name === '$createElement'
38 | ) {
39 | varPath.remove()
40 | }
41 | },
42 | })
43 | },
44 | })
45 | },
46 | })
47 | }
48 |
49 | // auto import `h` from `@vue/composition-api`
50 | const autoImportH = (t, path, importSource) => {
51 | if (hasJSX(t, path)) {
52 | const importNodes = path
53 | .get('body')
54 | .filter(p => p.isImportDeclaration())
55 | .map(p => p.node)
56 | const vcaImportNodes = importNodes.filter(p => p.source.value === importSource)
57 | const hasH = vcaImportNodes.some(p => p.specifiers.some(s => t.isImportSpecifier(s) && s.local.name === 'h'))
58 | if (!hasH) {
59 | const vcaImportSpecifier = t.importSpecifier(t.identifier('h'), t.identifier('h'))
60 | if (vcaImportNodes.length > 0) {
61 | vcaImportNodes[0].specifiers.push(vcaImportSpecifier)
62 | } else {
63 | path.unshiftContainer('body', t.importDeclaration([vcaImportSpecifier], t.stringLiteral(importSource)))
64 | }
65 | }
66 | }
67 | }
68 |
69 | export default (babel, { importSource = '@vue/composition-api' } = {}) => {
70 | const t = babel.types
71 |
72 | return {
73 | inherits: syntaxJsx,
74 | visitor: {
75 | Program(path) {
76 | remove$createElement(t, path)
77 | autoImportH(t, path, importSource)
78 | },
79 | },
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/packages/babel-sugar-composition-api-inject-h/test/test.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 | import { transform } from '@babel/core'
3 | import plugin from '../dist/plugin.testing'
4 |
5 | const transpile = src =>
6 | new Promise((resolve, reject) => {
7 | transform(
8 | src,
9 | {
10 | plugins: [[plugin, { importSource: 'source' }]],
11 | },
12 | (err, result) => {
13 | if (err) {
14 | return reject(err)
15 | }
16 | resolve(result.code)
17 | },
18 | )
19 | })
20 |
21 | const tests = [
22 | {
23 | name: "Don't inject without JSX",
24 | from: `const obj = {
25 | method () {
26 | return () => {}
27 | }
28 | }`,
29 | to: `const obj = {
30 | method() {
31 | return () => {};
32 | }
33 |
34 | };`,
35 | },
36 | {
37 | name: "Don't re-inject",
38 | from: `import { h } from "source";
39 | const obj = {
40 | method () {
41 | return test
42 | }
43 | }`,
44 | to: `import { h } from "source";
45 | const obj = {
46 | method() {
47 | return test
;
48 | }
49 |
50 | };`,
51 | },
52 | {
53 | name: 'Simple injection in object methods',
54 | from: `const obj = {
55 | method () {
56 | return test
57 | }
58 | }`,
59 | to: `import { h } from "source";
60 | const obj = {
61 | method() {
62 | return test
;
63 | }
64 |
65 | };`,
66 | },
67 | {
68 | name: 'Injection disabled in nested JSX expressions',
69 | from: `const obj = {
70 | method () {
71 | return bar
74 | }
75 | }}>test