{"_id":"@dword-design/babel-plugin-transform-vue-jsx","_rev":"2-8e24bf9277e1a36d46941d42333845f8","name":"@dword-design/babel-plugin-transform-vue-jsx","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dword-design/babel-plugin-transform-vue-jsx","version":"0.1.0","description":"Babel plugin for Vue 2.0 JSX","main":"dist/plugin.js","repository":{"type":"git","url":"https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx"},"author":{"name":"Evan You"},"license":"MIT","private":false,"scripts":{"pretest:snapshot":"yarn build:test","test:snapshot":"nyc --reporter=html --reporter=text-summary ava -v test/snapshot.js","pretest:functional":"yarn build:test && nyc --reporter=html --reporter=text-summary babel test/functional.js --plugins ./dist/plugin.testing.js --out-file test/functional-compiled.js","test:functional":"ava -v test/functional-compiled.js","build":"rollup -c","build:test":"rollup -c rollup.config.testing.js","test":"rm -rf coverage* && yarn test:snapshot && mv coverage coverage-snapshot && yarn test:functional && mv coverage coverage-functional","prepublish":"yarn build"},"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"},"dependencies":{"@babel/helper-module-imports":"^7.0.0","@babel/plugin-syntax-jsx":"^7.2.0","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0-beta.2","html-tags":"^2.0.0","lodash.kebabcase":"^4.1.1","svg-tags":"^1.0.0"},"nyc":{"exclude":["dist","test"]},"_id":"@dword-design/babel-plugin-transform-vue-jsx@0.1.0","_npmVersion":"6.5.0","_nodeVersion":"9.3.0","_npmUser":{"name":"dword-design","email":"info@dword-design.de"},"dist":{"integrity":"sha512-wuWpmUyPKly68YeoQgomZPfjzd2T4AjcWftFV1XLRNyMXoMMsGigNN/lVU7i71fqJlk0Zug6ts9moPLqEbR0cA==","shasum":"d4f1b628a497dd57be37d9e50b8580c5ccee0101","tarball":"https://registry.npmjs.org/@dword-design/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-0.1.0.tgz","fileCount":3,"unpackedSize":12974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjNLNCRA9TVsSAnZWagAAWwwP/RhWNzBRJ+etrRDP3eeP\nec+vgv6IIpjG8wgNDl0QQskxX01HJygcOLmGhMLgI94ibY+XGIBG5OncL62g\n9sZU7fIzHv9RZzlQM4RX6ShGQvzm4YsCxeGfwUEhaM+lV9mnrO/5TrYDXvSh\nenKRG9b3jImmdvtTC9Ew9KFbPiBB3aNc4ek3rhlyVVLqvcsJhrJ+TgPtN5PK\nduYU92ajql715GPYZ1zFPW2Kq/3juYCEkCF8U1ywvlzsem0sh4ms+c08BsYA\nD/CK5yvdQ9ZRjGyrkoP2K5bzFjBNl/sElVbCucE9LC4j2gnTxuT/GC5m1X9B\nk3qXD85B03MpAh594fB1GCsH1CoMwvaSxuTmdRiK9fZ2y0+1MIH5jfmv+XIB\ns0AlbfQGl2r8Oxay96l2u8QPEwAVNVSvgGuUcSwkjQW46TJBj42PCjhrLlue\n7lSKc2BhPuqb6mSbSlAGhddOSmANoJr40AiBixuGkvDMrB94g8sqoU/Ncavw\n6A1vjky8wE56VST1WXfRwYX8bYeu9VPkH5z8X/slkx1it8MuvxBu2TKyhYwn\nyYH+AHygQgdw4vY15KH+tzS7QKyui2HD9N7mTcGi+vStzg+OW7AQCms2ADKE\nulujpxSedutq1CTPdfGd00rwpf6Hnz4rlxl0B2sOxxxaao2QLMNlTXKpsbFe\niVFo\r\n=5+DD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLMj19F9ma1Yj6yARads/oOLuJqQfoC9UGPnV9V0BfcAiBc+0/k2RRGV3F9Wx4xogMEMxRxjaObX7m5YppUE7VLiw=="}]},"maintainers":[{"name":"dword-design","email":"info@dword-design.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-transform-vue-jsx_0.1.0_1552732876289_0.7116863640307363"},"_hasShrinkwrap":false,"deprecated":"not needed anymore"}},"time":{"created":"2019-03-16T10:41:16.096Z","0.1.0":"2019-03-16T10:41:16.421Z","modified":"2022-04-05T06:12:03.436Z"},"maintainers":[{"name":"dword-design","email":"info@dword-design.de"}],"description":"Babel plugin for Vue 2.0 JSX","repository":{"type":"git","url":"https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx"},"author":{"name":"Evan You"},"license":"MIT","readme":"## @vue/babel-plugin-transform-vue-jsx\n\n> Babel plugin for Vue 2.0 JSX\n\n### Babel Compatibility Notes\n\n- 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)\n\n### Requirements\n\n- 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.\n\n- This is mutually exclusive with `babel-plugin-transform-react-jsx`.\n\n### Usage\n\n```bash\nnpm install @vue/babel-plugin-transform-vue-jsx --save-dev\nnpm install @vue/babel-helper-vue-jsx-merge-props --save\n```\n\nIn your `.babelrc`:\n\n```json\n{\n \"plugins\": [\"transform-vue-jsx\"]\n}\n```\n\nHowever it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.\n\n### Details\n\nThe plugin transpiles the following JSX:\n\n```jsx\n
{this.text}
\n```\n\nTo the following JavaScript:\n\n```js\nh(\n 'div',\n {\n attrs: {\n id: 'foo',\n },\n },\n [this.text],\n)\n```\n\nNote 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:\n\n```js\nVue.component('jsx-example', {\n render(h) {\n // <-- h must be in scope\n return
bar
\n },\n})\n```\n\n### Difference from React JSX\n\nFirst, 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:\n\n```js\nrender (h) {\n return h('div', {\n // Component props\n props: {\n msg: 'hi'\n },\n // Normal HTML attributes\n attrs: {\n id: 'foo'\n },\n // DOM props\n domProps: {\n innerHTML: 'bar'\n },\n // Event handlers are nested under \"on\", though\n // modifiers such as in v-on:keyup.enter are not\n // supported. You'll have to manually check the\n // keyCode in the handler instead.\n on: {\n click: this.clickHandler\n },\n // For components only. Allows you to listen to\n // native events, rather than events emitted from\n // the component using vm.$emit.\n nativeOn: {\n click: this.nativeClickHandler\n },\n // Class is a special module, same API as `v-bind:class`\n class: {\n foo: true,\n bar: false\n },\n // Style is also same as `v-bind:style`\n style: {\n color: 'red',\n fontSize: '14px'\n },\n // Other special top-level properties\n key: 'key',\n ref: 'ref',\n // Assign the `ref` is used on elements/components with v-for\n refInFor: true,\n slot: 'slot'\n })\n}\n```\n\nThe equivalent of the above in Vue 2.0 JSX is:\n\n```jsx\nrender (h) {\n return (\n \n \n )\n}\n```\n\n### Component Tip\n\nIf 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:\n\n```js\nimport Todo from './Todo.js'\n\nexport default {\n render(h) {\n return // no need to register Todo via components option\n },\n}\n```\n\n### JSX Spread\n\nJSX spread is supported, and this plugin will intelligently merge nested data properties. For example:\n\n```jsx\nconst data = {\n class: ['b', 'c'],\n}\nconst vnode =
\n```\n\nThe merged data will be:\n\n```js\n{ class: ['a', 'b', 'c'] }\n```\n\n### Vue directives\n\nVue directives are usable the same way as in template with a few key differences:\n\n1. You can use directives camelCased instead of kebab-cased (vMyDirective is treated as `v-my-directive`)\n2. You have to use underscore sign instead of dots for modifiers because of JSXIdentifier limitation.\n3. Only runtime directives work (only v-show and custom directives), compile-time directives are out of this project's scope.\n\nA full example would be: ``\n","readmeFilename":"README.md"}