{"_id":"@anyversion/vue-tsx-transformer","name":"@anyversion/vue-tsx-transformer","dist-tags":{"latest":"1.2.8"},"versions":{"1.2.8":{"name":"@anyversion/vue-tsx-transformer","version":"1.2.8","description":"## Installation","main":"./dist/index.js","scripts":{"test":"jest","build":"rimraf ./dist && tsc","check":"tsc --noEmit"},"jest":{"transform":{"^.+\\.(t|j)sx?$":["@swc/jest"]}},"author":{"name":"gityoog"},"repository":{"type":"git","url":"git+https://github.com/AnyVersion/vue-tsx-transformer.git"},"license":"ISC","devDependencies":{"@swc/core":"^1.2.235","@swc/jest":"^0.2.22","@types/jest":"^28.1.7","@types/svg-tags":"^1.0.0","jest":"^28.1.3","rimraf":"^5.0.5","ts-swc-register":"^1.3.0","typescript":"^4.6.2"},"dependencies":{"html-tags":"^3.2.0","svg-tags":"^1.0.0"},"types":"./dist/index.d.ts","gitHead":"b1d5bb24cbeb573ab08b31da171043f2b3d586f1","bugs":{"url":"https://github.com/AnyVersion/vue-tsx-transformer/issues"},"homepage":"https://github.com/AnyVersion/vue-tsx-transformer#readme","_id":"@anyversion/vue-tsx-transformer@1.2.8","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-q/ONHjWjBNYCPYR8nEumQcK5b8mlAc9twZ2Rup9Lpja+34XsDSGBcmdGO7854THYsI6sGsuiMGj5GnX0waC2Ig==","shasum":"7441f1d2603011adab674336fac5f756731b85eb","tarball":"https://registry.npmjs.org/@anyversion/vue-tsx-transformer/-/vue-tsx-transformer-1.2.8.tgz","fileCount":44,"unpackedSize":79423,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEddpQfrxT0UHdr/oEH+3A6utudEr/rbG6dnhPnEPxWsAiEAtgvMSl/g+MDfujYJm2gx2WWvRruhuTBOQRnHvUN+b3Y="}]},"_npmUser":{"name":"npmyoog","email":"907850084@qq.com"},"directories":{},"maintainers":[{"name":"npmyoog","email":"907850084@qq.com"},{"name":"stringke","email":"authemail@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-transformer_1.2.8_1728876666387_0.1638363346344187"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-14T03:31:06.237Z","1.2.8":"2024-10-14T03:31:06.559Z","modified":"2024-10-14T03:31:06.898Z"},"maintainers":[{"name":"npmyoog","email":"907850084@qq.com"},{"name":"stringke","email":"authemail@qq.com"}],"description":"## Installation","homepage":"https://github.com/AnyVersion/vue-tsx-transformer#readme","repository":{"type":"git","url":"git+https://github.com/AnyVersion/vue-tsx-transformer.git"},"author":{"name":"gityoog"},"bugs":{"url":"https://github.com/AnyVersion/vue-tsx-transformer/issues"},"license":"ISC","readme":"# Vue2 Tsx Transformer\n\n## Installation\n\n```\n$ npm install vue-tsx-transformer --save-dev\n```\n\n## Usage\n\n```ts\nimport VueTsxTransformer from \"vue-tsx-transformer\";\n\nexport default {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        use: [\n          {\n            loader: \"ts-loader\",\n            options: {\n              transpileOnly: true,\n              getCustomTransformers: () => ({\n                before: [\n                  VueTsxTransformer({\n                    // options\n                  }),\n                ],\n              }),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Changelog\n- 2024-03-15 merge spread operator into attrs or props\n- 2023-06-28 add JsxFragment transform\n- 2022-12-14 fix select v-model, optimize directives merge\n- 2022-09-19 fix native component v-model\n\n## Syntax\n\n### Content\n\n- Automatic `h` injection syntactic sugar\n- `vModel` syntactic sugar\n\n```tsx\nrender() {\n  return <p>hello</p>\n}\n```\n\nwith dynamic content:\n\n```tsx\nrender() {\n  return <p>hello { this.message }</p>\n}\n```\n\nwhen self-closing:\n\n```tsx\nrender() {\n  return <input />\n}\n```\n\nwith a component:\n\n```tsx\nimport MyComponent from \"./my-component\";\n\nexport default {\n  render() {\n    return <MyComponent>hello</MyComponent>;\n  },\n};\n```\n\n### Attributes/Props\n\n```tsx\nrender() {\n  return <input type=\"email\" />\n}\n```\n\nwith a dynamic binding:\n\n```tsx\nrender() {\n  return <input\n    type=\"email\"\n    placeholder={this.placeholderText}\n  />\n}\n```\n~~with the spread operator (object needs to be compatible with [Vue Data Object](https://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)):~~\n\nThe spread operator will be merged into the `attrs` or `props` object for ts typing checking after `v1.2.4`.\n\n```tsx\n// not supported > v1.2.4\nrender() {\n  const inputAttrs = {\n    type: 'email',\n    placeholder: 'Enter your email'\n  }\n  return <input {...{ attrs: inputAttrs }} />\n}\n```\n\n\n\n```tsx\n\n### Slots\n\nnamed slots:\n\n```tsx\nrender() {\n  return (\n    <MyComponent>\n      <header slot=\"header\">header</header>\n      <footer slot=\"footer\">footer</footer>\n    </MyComponent>\n  )\n}\n```\n\nscoped slots:\n\n```tsx\nrender() {\n  const scopedSlots = {\n    header: () => <header>header</header>,\n    footer: () => <footer>footer</footer>\n  }\n\n  return <MyComponent scopedSlots={scopedSlots} />\n}\n```\n\n### Directives\n\n```tsx\n<input vModel={this.newTodoText} />\n```\n\nwith a modifier: Not Supported, Follow the type validation of TSX\n\nv-html:\n\n```tsx\n<p domPropsInnerHTML={html} />\n```\n","readmeFilename":"readme.md"}