Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 29bc555

Browse filesBrowse files
nickmessingnickmessing
committed
Merge branch 'dev'
2 parents eb8e614 + a4eadae commit 29bc555
Copy full SHA for 29bc555

File tree

Expand file treeCollapse file tree

15 files changed

+176
-46
lines changed
Filter options
Expand file treeCollapse file tree

15 files changed

+176
-46
lines changed

‎CHANGELOG.md

Copy file name to clipboardExpand all lines: CHANGELOG.md
+14Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
# [1.0.0-beta.2](https://github.com/vuejs/jsx/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2019-01-11)
2+
3+
## other
4+
5+
#### Bug Fixes
6+
7+
* remove extraneous peer deps ([29414a7](https://github.com/vuejs/jsx/commit/29414a7))
8+
* Trim whitespaces properly, fix [#37](https://github.com/vuejs/jsx/issues/37) ([54c75ee](https://github.com/vuejs/jsx/commit/54c75ee))
9+
#### Features
10+
11+
* Support root-level attributes, close [#32](https://github.com/vuejs/jsx/issues/32) ([96b182c](https://github.com/vuejs/jsx/commit/96b182c))
12+
13+
14+
115
# 1.0.0-beta.1 (2018-12-25)
216

317
## other

‎README.md

Copy file name to clipboardExpand all lines: README.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ render() {
7575
}
7676
```
7777

78-
with the spread operator:
78+
with the spread operator (object needs to be compatible with [Vue Data Object](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)):
7979

8080
```jsx
8181
render() {
@@ -84,7 +84,7 @@ render() {
8484
placeholder: 'Enter your email'
8585
}
8686

87-
return <input {...inputAttrs} />
87+
return <input {...{ attrs: inputAttrs }} />
8888
}
8989
```
9090

‎lerna.json

Copy file name to clipboardExpand all lines: lerna.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"packages": [
44
"packages/*"
55
],
6-
"version": "1.0.0-beta.1",
6+
"version": "1.0.0-beta.2",
77
"npmClient": "yarn"
88
}

‎package.json

Copy file name to clipboardExpand all lines: package.json
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"test": "lerna run test",
77
"release:note": "node scripts/gen-release-notes.js run",
88
"release:build": "lerna run build",
9-
"prerelease": "yarn release:note && yarn release:build",
9+
"prerelease": "yarn release:build",
10+
"postrelease": "yarn release:note",
1011
"release": "lerna publish"
1112
},
1213
"devDependencies": {

‎packages/babel-helper-vue-jsx-merge-props/package.json

Copy file name to clipboardExpand all lines: packages/babel-helper-vue-jsx-merge-props/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/babel-helper-vue-jsx-merge-props",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "Babel helper for Vue JSX spread",
55
"main": "dist/helper.js",
66
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-helper-vue-jsx-merge-props",

‎packages/babel-plugin-transform-vue-jsx/package.json

Copy file name to clipboardExpand all lines: packages/babel-plugin-transform-vue-jsx/package.json
+2-5Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/babel-plugin-transform-vue-jsx",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "Babel plugin for Vue 2.0 JSX",
55
"main": "dist/plugin.js",
66
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx",
@@ -37,14 +37,11 @@
3737
"dependencies": {
3838
"@babel/helper-module-imports": "^7.0.0",
3939
"@babel/plugin-syntax-jsx": "^7.2.0",
40-
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.1",
40+
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.2",
4141
"html-tags": "^2.0.0",
4242
"lodash.kebabcase": "^4.1.1",
4343
"svg-tags": "^1.0.0"
4444
},
45-
"peerDependencies": {
46-
"@vue/babel-helper-vue-jsx-merge-props": "^0.1.0"
47-
},
4845
"nyc": {
4946
"exclude": [
5047
"dist",

‎packages/babel-plugin-transform-vue-jsx/src/index.js

Copy file name to clipboardExpand all lines: packages/babel-plugin-transform-vue-jsx/src/index.js
+61-17Lines changed: 61 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ const getTag = (t, path) => {
6565
*/
6666
const getChildren = (t, paths) =>
6767
paths
68-
.map((path, index) => {
68+
.map(path => {
6969
if (path.isJSXText()) {
70-
return transformJSXText(t, path, index === 0 ? -1 : index === paths.length - 1 ? 1 : 0)
70+
return transformJSXText(t, path)
7171
}
7272
if (path.isJSXExpressionContainer()) {
7373
return transformJSXExpressionContainer(t, path)
@@ -158,6 +158,9 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
158158
} else {
159159
name = namePath.get('name').node
160160
}
161+
if (prefixes.includes(name) && t.isJSXExpressionContainer(path.get('value'))) {
162+
return t.JSXSpreadAttribute(t.objectExpression([t.objectProperty(t.stringLiteral(name), path.get('value').node.expression)]))
163+
}
161164

162165
;[name, ...modifiers] = name.split('_')
163166
;[name, argument] = name.split(':')
@@ -233,16 +236,24 @@ const parseAttributeJSXSpreadAttribute = (t, path, attributes, attributesArray)
233236
* @param t
234237
* @param paths Array<JSXAttribute | JSXSpreadAttribute>
235238
* @param tag Identifier | StringLiteral | MemberExpression
239+
* @param openingElementPath JSXOpeningElement
236240
* @returns Array<Expression>
237241
*/
238-
const getAttributes = (t, paths, tag) => {
242+
const getAttributes = (t, paths, tag, openingElementPath) => {
239243
const attributesArray = []
240244
let attributes = {}
241245

242246
const { tagName, canContainDomProps, elementType } = parseMagicDomPropsInfo(t, paths, tag)
243247
paths.forEach(path => {
244248
if (t.isJSXAttribute(path)) {
245-
parseAttributeJSXAttribute(t, path, attributes, tagName, elementType)
249+
const possibleSpreadNode = parseAttributeJSXAttribute(t, path, attributes, tagName, elementType)
250+
if (possibleSpreadNode) {
251+
openingElementPath.node.attributes.push(possibleSpreadNode)
252+
const attributePaths = openingElementPath.get('attributes')
253+
const lastAttributePath = attributePaths[attributePaths.length - 1]
254+
attributes = parseAttributeJSXSpreadAttribute(t, lastAttributePath, attributes, attributesArray)
255+
lastAttributePath.remove()
256+
}
246257
return
247258
}
248259
/* istanbul ignore else */
@@ -328,7 +339,8 @@ const transformAttributes = (t, attributes) =>
328339
const transformJSXElement = (t, path) => {
329340
const tag = getTag(t, path.get('openingElement'))
330341
const children = getChildren(t, path.get('children'))
331-
const attributes = getAttributes(t, path.get('openingElement.attributes'), tag)
342+
const openingElementPath = path.get('openingElement')
343+
const attributes = getAttributes(t, openingElementPath.get('attributes'), tag, openingElementPath)
332344

333345
const args = [tag]
334346
if (attributes) {
@@ -362,24 +374,56 @@ const transformJSXMemberExpression = (t, path) => {
362374
return t.memberExpression(transformedObject, transformedProperty)
363375
}
364376

365-
/**
366-
* Trim text from JSX expressions depending on position
367-
* @param string string
368-
* @param position -1 for left, 0 for middle and 1 for right
369-
* @returns string
370-
*/
371-
const trimText = (string, position) => (position === 0 ? string : string.replace(position === -1 ? /^\s*/ : /\s*$/, ''))
372-
373377
/**
374378
* Transform JSXText to StringLiteral
375379
* @param t
376380
* @param path JSXText
377-
* @param position -1 for left, 0 for middle and 1 for right
378381
* @returns StringLiteral
379382
*/
380-
const transformJSXText = (t, path, position) => {
381-
const string = trimText(path.get('value').node, position)
382-
return string ? t.stringLiteral(string) : null
383+
const transformJSXText = (t, path) => {
384+
const node = path.node
385+
const lines = node.value.split(/\r\n|\n|\r/)
386+
387+
let lastNonEmptyLine = 0
388+
389+
for (let i = 0; i < lines.length; i++) {
390+
if (lines[i].match(/[^ \t]/)) {
391+
lastNonEmptyLine = i
392+
}
393+
}
394+
395+
let str = ''
396+
397+
for (let i = 0; i < lines.length; i++) {
398+
const line = lines[i]
399+
400+
const isFirstLine = i === 0
401+
const isLastLine = i === lines.length - 1
402+
const isLastNonEmptyLine = i === lastNonEmptyLine
403+
404+
// replace rendered whitespace tabs with spaces
405+
let trimmedLine = line.replace(/\t/g, ' ')
406+
407+
// trim whitespace touching a newline
408+
if (!isFirstLine) {
409+
trimmedLine = trimmedLine.replace(/^[ ]+/, '')
410+
}
411+
412+
// trim whitespace touching an endline
413+
if (!isLastLine) {
414+
trimmedLine = trimmedLine.replace(/[ ]+$/, '')
415+
}
416+
417+
if (trimmedLine) {
418+
if (!isLastNonEmptyLine) {
419+
trimmedLine += ' '
420+
}
421+
422+
str += trimmedLine
423+
}
424+
}
425+
426+
return str !== '' ? t.stringLiteral(str) : null
383427
}
384428

385429
/**

‎packages/babel-plugin-transform-vue-jsx/test/snapshot.js

Copy file name to clipboardExpand all lines: packages/babel-plugin-transform-vue-jsx/test/snapshot.js
+26-2Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,17 @@ render(h => [h(Alpha, ["test"]), h("Beta", ["test"])]);`,
5858
},
5959
{
6060
name: 'Combined content',
61-
from: `render(h => <div> test{test} {...test}<br/> </div>)`,
62-
to: `render(h => h("div", ["test", test, " ", ...test, h("br")]));`,
61+
from: `render(h => <div>
62+
test{test} {...test}
63+
<tag1 />
64+
<tag2 />
65+
66+
Some text
67+
goes here
68+
69+
70+
</div>)`,
71+
to: `render(h => h("div", ["test", test, " ", ...test, h("tag1"), h("tag2"), "Some text goes here"]));`,
6372
},
6473
{
6574
name: 'Plain attrs',
@@ -301,6 +310,21 @@ render(h => h("div", _mergeJSXProps([{}, spread, {
301310
}
302311
});`,
303312
},
313+
{
314+
name: 'Root attribute',
315+
from: `<MyComponent propsProp1="foo" props={{ prop1: 'alpha', prop2: 'beta' }} />`,
316+
to: `import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
317+
h("MyComponent", _mergeJSXProps([{
318+
"props": {
319+
"prop1": "foo"
320+
}
321+
}, {
322+
"props": {
323+
prop1: 'alpha',
324+
prop2: 'beta'
325+
}
326+
}]));`,
327+
},
304328
]
305329

306330
tests.forEach(({ name, from, to }) => test(name, async t => t.is(await transpile(from), to)))

‎packages/babel-preset-jsx/README.md

Copy file name to clipboardExpand all lines: packages/babel-preset-jsx/README.md
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ Options are:
4545
- `functional` [@vue/babel-sugar-functional-vue](../babel-sugar-functional-vue/README.md) - Functional components syntactic sugar
4646
- `injectH` [@vue/babel-sugar-inject-h](../babel-sugar-inject-h/README.md) - Automatic `h` injection syntactic sugar
4747
- `vModel` [@vue/babel-sugar-v-model](../babel-sugar-v-model/README.md) - `vModel` syntactic sugar
48+
- `vOn` [@vue/babel-sugar-v-on](../babel-sugar-v-on/README.md) - `vOn` syntactic sugar

‎packages/babel-preset-jsx/package.json

Copy file name to clipboard
+7-10Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/babel-preset-jsx",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "Babel preset for Vue JSX",
55
"main": "dist/plugin.cjs.js",
66
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-event-modifiers",
@@ -13,18 +13,15 @@
1313
"prerelease": "yarn build"
1414
},
1515
"dependencies": {
16-
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.1",
17-
"@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.1",
18-
"@vue/babel-sugar-functional-vue": "^1.0.0-beta.1",
19-
"@vue/babel-sugar-inject-h": "^1.0.0-beta.1",
20-
"@vue/babel-sugar-v-model": "^1.0.0-beta.1",
21-
"@vue/babel-sugar-v-on": "^1.0.0-beta.1"
16+
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.2",
17+
"@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.2",
18+
"@vue/babel-sugar-functional-vue": "^1.0.0-beta.2",
19+
"@vue/babel-sugar-inject-h": "^1.0.0-beta.2",
20+
"@vue/babel-sugar-v-model": "^1.0.0-beta.2",
21+
"@vue/babel-sugar-v-on": "^1.0.0-beta.2"
2222
},
2323
"devDependencies": {
2424
"rollup": "^0.67.4",
2525
"rollup-plugin-babel-minify": "^6.2.0"
26-
},
27-
"peerDependencies": {
28-
"@vue/babel-helper-vue-jsx-merge-props": "^0.1.0"
2926
}
3027
}

‎packages/babel-sugar-functional-vue/package.json

Copy file name to clipboardExpand all lines: packages/babel-sugar-functional-vue/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/babel-sugar-functional-vue",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "Babel syntactic sugar for functional components",
55
"main": "dist/plugin.js",
66
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-functional-vue",

‎packages/babel-sugar-inject-h/package.json

Copy file name to clipboardExpand all lines: packages/babel-sugar-inject-h/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/babel-sugar-inject-h",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "Babel syntactic sugar for h automatic injection for Vue JSX",
55
"main": "dist/plugin.js",
66
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-inject-h",

‎packages/babel-sugar-v-model/package.json

Copy file name to clipboardExpand all lines: packages/babel-sugar-v-model/package.json
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/babel-sugar-v-model",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "Babel syntactic sugar for v-model support in Vue JSX",
55
"main": "dist/plugin.js",
66
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-event-modifiers",
@@ -36,8 +36,8 @@
3636
},
3737
"dependencies": {
3838
"@babel/plugin-syntax-jsx": "^7.2.0",
39-
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.1",
40-
"@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.1",
39+
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.2",
40+
"@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.2",
4141
"camelcase": "^5.0.0",
4242
"html-tags": "^2.0.0",
4343
"svg-tags": "^1.0.0"

‎packages/babel-sugar-v-on/README.md

Copy file name to clipboard
+52Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
## @vue/babel-sugar-v-on
2+
3+
Syntactic sugar for v-on in JSX.
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-sugar-v-on
16+
# for npm:
17+
npm install @vue/babel-sugar-v-on --save
18+
```
19+
20+
In your `.babelrc`:
21+
22+
```json
23+
{
24+
"plugins": ["@vue/babel-sugar-v-on"]
25+
}
26+
```
27+
28+
However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.
29+
30+
### Details
31+
32+
This plugin adds v-on to the JSX and tries to mirror the same behaviour as in vue-template-compiler, with a few differences:
33+
34+
1. You should use underscore (`_`) instead of dot (`.`) for modifiers (`vOn:click_prevent={this.test}`)
35+
2. It is recommended to use camelCase version of it (`vOn`) in JSX, but you can use kebab-case too (`v-on`).
36+
37+
```js
38+
export default {
39+
methods: {
40+
test() {
41+
console.log('Hello World')
42+
},
43+
},
44+
render(h) {
45+
return (
46+
<div>
47+
<a href="https://vuejs.org" vOn:click={this.test}>Vue</a>
48+
</div>
49+
)
50+
},
51+
}
52+
```

‎packages/babel-sugar-v-on/package.json

Copy file name to clipboardExpand all lines: packages/babel-sugar-v-on/package.json
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/babel-sugar-v-on",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "Babel syntactic sugar for v-model support in Vue JSX",
55
"main": "dist/plugin.js",
66
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-event-modifiers",
@@ -37,7 +37,7 @@
3737
},
3838
"dependencies": {
3939
"@babel/plugin-syntax-jsx": "^7.2.0",
40-
"@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.1",
40+
"@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.2",
4141
"camelcase": "^5.0.0"
4242
},
4343
"nyc": {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.