This commit is contained in:
2023-08-11 10:45:20 +08:00
commit 161ca982f3
31850 changed files with 2706500 additions and 0 deletions

View File

@ -0,0 +1,184 @@
## @vue/babel-plugin-transform-vue-jsx
> Babel plugin for Vue 2.0 JSX
### Babel Compatibility Notes
- 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)
### Requirements
- Assumes you are using Babel with a module bundler e.g. Webpack, because the spread merge helper is imported as a module to avoid duplication.
- This is mutually exclusive with `babel-plugin-transform-react-jsx`.
### Usage
```bash
npm install @vue/babel-plugin-transform-vue-jsx --save-dev
npm install @vue/babel-helper-vue-jsx-merge-props --save
```
In your `.babelrc`:
```json
{
"plugins": ["transform-vue-jsx"]
}
```
However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.
### Details
The plugin transpiles the following JSX:
```jsx
<div id="foo">{this.text}</div>
```
To the following JavaScript:
```js
h(
'div',
{
attrs: {
id: 'foo',
},
},
[this.text],
)
```
Note the `h` function, which is a shorthand for a Vue instance's `$createElement` method, must be in the scope where the JSX is. Since this method is passed to component render functions as the first argument, in most cases you'd do this:
```js
Vue.component('jsx-example', {
render(h) {
// <-- h must be in scope
return <div id="foo">bar</div>
},
})
```
### Difference from React JSX
First, Vue 2.0's vnode format is different from React's. The second argument to the `createElement` call is a "data object" that accepts nested objects. Each nested object will be then processed by corresponding modules:
```js
render (h) {
return h('div', {
// Component props
props: {
msg: 'hi'
},
// Normal HTML attributes
attrs: {
id: 'foo'
},
// DOM props
domProps: {
innerHTML: 'bar'
},
// Event handlers are nested under "on", though
// modifiers such as in v-on:keyup.enter are not
// supported. You'll have to manually check the
// keyCode in the handler instead.
on: {
click: this.clickHandler
},
// For components only. Allows you to listen to
// native events, rather than events emitted from
// the component using vm.$emit.
nativeOn: {
click: this.nativeClickHandler
},
// Class is a special module, same API as `v-bind:class`
class: {
foo: true,
bar: false
},
// Style is also same as `v-bind:style`
style: {
color: 'red',
fontSize: '14px'
},
// Other special top-level properties
key: 'key',
ref: 'ref',
// Assign the `ref` is used on elements/components with v-for
refInFor: true,
slot: 'slot'
})
}
```
The equivalent of the above in Vue 2.0 JSX is:
```jsx
render (h) {
return (
<div
// Component props
propsMsg="hi"
// Normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
```
### Component Tip
If a custom element starts with lowercase, it will be treated as a string id and used to lookup a registered component. If it starts with uppercase, it will be treated as an identifier, which allows you to do:
```js
import Todo from './Todo.js'
export default {
render(h) {
return <Todo /> // no need to register Todo via components option
},
}
```
### JSX Spread
JSX spread is supported, and this plugin will intelligently merge nested data properties. For example:
```jsx
const data = {
class: ['b', 'c'],
}
const vnode = <div class="a" {...data} />
```
The merged data will be:
```js
{ class: ['a', 'b', 'c'] }
```
### Vue directives
Vue directives are usable the same way as in template with a few key differences:
1. You can use directives camelCased instead of kebab-cased (vMyDirective is treated as `v-my-directive`)
2. You have to use underscore sign instead of dots for modifiers because of JSXIdentifier limitation.
3. Only runtime directives work (only v-show and custom directives), compile-time directives are out of this project's scope.
A full example would be: `<MyComponent vMyDirective:argument_modifier1_modifier2={someExpression} />`

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,17 @@
[
"area",
"base",
"br",
"col",
"embed",
"hr",
"img",
"input",
"link",
"menuitem",
"meta",
"param",
"source",
"track",
"wbr"
]

View File

@ -0,0 +1,120 @@
[
"a",
"abbr",
"address",
"area",
"article",
"aside",
"audio",
"b",
"base",
"bdi",
"bdo",
"blockquote",
"body",
"br",
"button",
"canvas",
"caption",
"cite",
"code",
"col",
"colgroup",
"data",
"datalist",
"dd",
"del",
"details",
"dfn",
"dialog",
"div",
"dl",
"dt",
"em",
"embed",
"fieldset",
"figcaption",
"figure",
"footer",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"head",
"header",
"hgroup",
"hr",
"html",
"i",
"iframe",
"img",
"input",
"ins",
"kbd",
"keygen",
"label",
"legend",
"li",
"link",
"main",
"map",
"mark",
"math",
"menu",
"menuitem",
"meta",
"meter",
"nav",
"noscript",
"object",
"ol",
"optgroup",
"option",
"output",
"p",
"param",
"picture",
"pre",
"progress",
"q",
"rb",
"rp",
"rt",
"rtc",
"ruby",
"s",
"samp",
"script",
"section",
"select",
"slot",
"small",
"source",
"span",
"strong",
"style",
"sub",
"summary",
"sup",
"svg",
"table",
"tbody",
"td",
"template",
"textarea",
"tfoot",
"th",
"thead",
"time",
"title",
"tr",
"track",
"u",
"ul",
"var",
"video",
"wbr"
]

View File

@ -0,0 +1,2 @@
'use strict';
module.exports = require('./html-tags.json');

View File

@ -0,0 +1,9 @@
MIT License
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,71 @@
{
"_from": "html-tags@^2.0.0",
"_id": "html-tags@2.0.0",
"_inBundle": false,
"_integrity": "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==",
"_location": "/@vue/babel-plugin-transform-vue-jsx/html-tags",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "html-tags@^2.0.0",
"name": "html-tags",
"escapedName": "html-tags",
"rawSpec": "^2.0.0",
"saveSpec": null,
"fetchSpec": "^2.0.0"
},
"_requiredBy": [
"/@vue/babel-plugin-transform-vue-jsx"
],
"_resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
"_shasum": "10b30a386085f43cede353cc8fa7cb0deeea668b",
"_spec": "html-tags@^2.0.0",
"_where": "C:\\Users\\zhouxueli\\Desktop\\scheduling-app\\node_modules\\@vue\\babel-plugin-transform-vue-jsx",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "sindresorhus.com"
},
"bugs": {
"url": "https://github.com/sindresorhus/html-tags/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "List of standard HTML tags",
"devDependencies": {
"ava": "*",
"xo": "*"
},
"engines": {
"node": ">=4"
},
"files": [
"index.js",
"void.js",
"html-tags.json",
"html-tags-void.json"
],
"homepage": "https://github.com/sindresorhus/html-tags#readme",
"keywords": [
"html",
"html5",
"tags",
"elements",
"list",
"whatwg",
"w3c",
"void",
"self-closing"
],
"license": "MIT",
"name": "html-tags",
"repository": {
"type": "git",
"url": "git+https://github.com/sindresorhus/html-tags.git"
},
"scripts": {
"test": "xo && ava"
},
"version": "2.0.0"
}

View File

@ -0,0 +1,38 @@
# html-tags [![Build Status](https://travis-ci.org/sindresorhus/html-tags.svg?branch=master)](https://travis-ci.org/sindresorhus/html-tags)
> List of standard HTML tags
It's just a couple of JSON files that can be used in any environment.
It intentionally leaves out obsolete tags.
## Install
```
$ npm install html-tags
```
## Usage
```js
const htmlTags = require('html-tags');
console.log(htmlTags);
//=> ['a', 'abbr', 'acronym', ...]
```
And void (self-closing) tags:
```js
const voidHtmlTags = require('html-tags/void');
console.log(voidHtmlTags);
//=> ['area', 'base', 'br', ...]
```
## License
MIT © [Sindre Sorhus](https://sindresorhus.com)

View File

@ -0,0 +1,2 @@
'use strict';
module.exports = require('./html-tags-void.json');

View File

@ -0,0 +1,92 @@
{
"_from": "@vue/babel-plugin-transform-vue-jsx@^1.4.0",
"_id": "@vue/babel-plugin-transform-vue-jsx@1.4.0",
"_inBundle": false,
"_integrity": "sha512-Fmastxw4MMx0vlgLS4XBX0XiBbUFzoMGeVXuMV08wyOfXdikAFqBTuYPR0tlk+XskL19EzHc39SgjrPGY23JnA==",
"_location": "/@vue/babel-plugin-transform-vue-jsx",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "@vue/babel-plugin-transform-vue-jsx@^1.4.0",
"name": "@vue/babel-plugin-transform-vue-jsx",
"escapedName": "@vue%2fbabel-plugin-transform-vue-jsx",
"scope": "@vue",
"rawSpec": "^1.4.0",
"saveSpec": null,
"fetchSpec": "^1.4.0"
},
"_requiredBy": [
"/@vue/babel-preset-jsx",
"/@vue/babel-sugar-v-model",
"/@vue/babel-sugar-v-on"
],
"_resolved": "https://registry.npmjs.org/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.4.0.tgz",
"_shasum": "4d4b3d46a39ea62b7467dd6e26ce47f7ceafb2fe",
"_spec": "@vue/babel-plugin-transform-vue-jsx@^1.4.0",
"_where": "C:\\Users\\zhouxueli\\Desktop\\scheduling-app\\node_modules\\@vue\\babel-preset-jsx",
"author": {
"name": "Evan You"
},
"bundleDependencies": false,
"dependencies": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
"html-tags": "^2.0.0",
"lodash.kebabcase": "^4.1.1",
"svg-tags": "^1.0.0"
},
"deprecated": false,
"description": "Babel plugin for Vue 2.0 JSX",
"devDependencies": {
"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@vue/test-utils": "1.0.0-beta.26",
"ava": "^0.25.0",
"jsdom": "^13.0.0",
"jsdom-global": "^3.0.2",
"nyc": "^12.0.2",
"rollup": "^0.67.4",
"rollup-plugin-babel": "4.0.3",
"rollup-plugin-babel-minify": "^6.2.0",
"rollup-plugin-istanbul": "^2.0.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.5.17"
},
"files": [],
"gitHead": "6566e12067f5d6c02d3849b574a1b84de5634008",
"license": "MIT",
"main": "dist/plugin.js",
"name": "@vue/babel-plugin-transform-vue-jsx",
"nyc": {
"exclude": [
"dist",
"test"
]
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"private": false,
"publishConfig": {
"access": "public"
},
"repository": {
"type": "git",
"url": "https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx"
},
"scripts": {
"build": "rollup -c",
"build:dependency": "cd ../babel-helper-vue-jsx-merge-props && yarn build",
"build:test": "rollup -c rollup.config.testing.js",
"prepublish": "yarn build",
"pretest:functional": "yarn build:dependency && yarn build:test && nyc --reporter=html --reporter=text-summary babel test/functional.js --plugins ./dist/plugin.testing.js --out-file test/functional-compiled.js",
"pretest:snapshot": "yarn build:test",
"test": "rm -rf coverage* && yarn test:snapshot && mv coverage coverage-snapshot && yarn test:functional && mv coverage coverage-functional",
"test:functional": "ava -v test/functional-compiled.js",
"test:snapshot": "nyc --reporter=html --reporter=text-summary ava -v test/snapshot.js"
},
"version": "1.4.0"
}