{"_id":"vue-tsx-support","_rev":"72-d81d87ef8e2f8bb21d4af19034deaadd","name":"vue-tsx-support","description":"TSX (JSX for TypeScript) support library for Vue","dist-tags":{"latest":"3.2.0","beta":"3.0.1","dev":"3.0.0-beta.5"},"versions":{"0.0.2":{"name":"vue-tsx-support","version":"0.0.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"types/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"npm-run-all test-tsc"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2"},"peerDependencies":{"vue":"^2.4.2"},"gitHead":"a1b9f612e349f573cf981c6319c304686d8cf14e","_id":"vue-tsx-support@0.0.2","_shasum":"1bb993fbe56c672b6963b40a7ae13a4a4be08814","_from":".","_npmVersion":"3.5.2","_nodeVersion":"5.11.1","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"1bb993fbe56c672b6963b40a7ae13a4a4be08814","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.0.2.tgz","integrity":"sha512-NR2XXN2+LOy8nqJ8dahGsfGA/DmlYLCVc909KOXjorDvbqd+KZOfXjrPKU04yfdkid4IeMRzkEmsG9+lnJs9LQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvOvejMgJNQpDqYdfzbwopHWWhlGL5VIbMs2LeRbxNvAiA3hsYQaERnCvrlk+Mv44St2lg67lbemDJypa+WFp0Udg=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.0.2.tgz_1502935960886_0.23807419813238084"},"directories":{}},"0.0.3":{"name":"vue-tsx-support","version":"0.0.3","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"types/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"npm-run-all test-tsc"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"b613a0ecac2674e9c38f6429a6bde898583764a2","_id":"vue-tsx-support@0.0.3","_shasum":"2656005c443fd73c1de5458d8a34f0a188c54905","_from":".","_npmVersion":"3.5.2","_nodeVersion":"5.11.1","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"2656005c443fd73c1de5458d8a34f0a188c54905","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.0.3.tgz","integrity":"sha512-w/RI4YgGJxaC8RyfR0UqfxIaFhpf2216D6JTXrAqSg/cQpZhT7AmmjTVR21nAtJSDI/D9hpq88DtnVjcESxfCw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCMzLXu/2CsXFOQ0YX4pOB/mAt6AnFFV6zvn8nrzmSuAiAb9W/aME7ntrKWET2KL2a0IvXNHm7ieYQQu+X/w9br8Q=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.0.3.tgz_1502948458196_0.5518674706108868"},"directories":{}},"0.0.4":{"name":"vue-tsx-support","version":"0.0.4","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"types/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"npm-run-all test-tsc"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"75c299529da06e710e44e4eac40489c3bda69ee1","_id":"vue-tsx-support@0.0.4","_shasum":"3bf11dc7753c896a4d2df20a867de53f6b771613","_from":".","_npmVersion":"3.5.2","_nodeVersion":"5.11.1","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"3bf11dc7753c896a4d2df20a867de53f6b771613","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.0.4.tgz","integrity":"sha512-DjmZgP6x5W4cQbrlAQyU2im4PFLDc0J9ebCwjBeyp6g35dY0vNpg3HpjSSw14luQTJER5pIt9dnjz8ivfnqvJA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKouQhxntM7AzyUylrZD449gCm+JJqbY4jjy577NNy5QIhAIQEFOl+mtPAWAl9droQnqXPzhR3+Ejmd0EqWYhKtMk3"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.0.4.tgz_1502950655074_0.3443366189021617"},"directories":{}},"0.1.0":{"name":"vue-tsx-support","version":"0.1.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"types/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"npm-run-all test-tsc"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"aa47bfcec48cc72307451bcbf1ad4e3c129d0a4f","_id":"vue-tsx-support@0.1.0","_shasum":"a29e4d869592dc2c0be5ed2a044b78e942b5843a","_from":".","_npmVersion":"3.5.2","_nodeVersion":"5.11.1","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"a29e4d869592dc2c0be5ed2a044b78e942b5843a","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.1.0.tgz","integrity":"sha512-xNEZikOyvs9QVsWRNwqyywH3sxz41VcyCP2NW7MvOZ+BuJjrRVGU8+03XKdAnWWUueuDVmn+PNiD3OG2+O+BnA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxJsZ9HTs5eE1DZe6H46h4BCCibzmZgRtjDH7UntjisAiAe0CeC/JJm99zl9RNsm0NuDI54XuLPB99yjekjQI7hQQ=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.1.0.tgz_1503146759046_0.08856094651855528"},"directories":{}},"0.2.0":{"name":"vue-tsx-support","version":"0.2.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"types/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0","vue-router":"^2.5.0"},"gitHead":"27fa73c86b72ea4119d02f60be5fe919ce4e7d87","_id":"vue-tsx-support@0.2.0","_shasum":"dd73c7f63a8851539a2f3ae432a73f298a81b77f","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"dd73c7f63a8851539a2f3ae432a73f298a81b77f","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.0.tgz","integrity":"sha512-MkNTnxHRnDpZCgP1+M+OFNfBCYed2YCDVxh5dbwGPJ71F+rPjeq5UnxLWz8oln1mVttoVWo3NRXBdmuJ5eCa2A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYW6e4Vq0a045QpzV7eGMDU2Zbka9HHBsT7BmojeabMAiAlUweACQKPVakRWeU792JF/RZSgfegjt6827bydRgWQg=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.0.tgz_1504128085069_0.11902229720726609"},"directories":{}},"0.2.1":{"name":"vue-tsx-support","version":"0.2.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"types/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0","vue-router":"^2.5.0"},"gitHead":"049dd3d4a5aeec4ebdf32b9e96a2f77db2cfad43","_id":"vue-tsx-support@0.2.1","_shasum":"ee69fe86012241ac33d7f504452718ccb1f9a7ab","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"ee69fe86012241ac33d7f504452718ccb1f9a7ab","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.1.tgz","integrity":"sha512-mjirY5wIsjhvxZ25CSTdOh/K7rNMIANk/8X438CggAXFpoORVN1jR6lT+GpfX1Djvk1ly/KmBNv45CdrMlwbpQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1eQF3bWpwFE4Qssd9HU1kg9imirTWPzvz0o2biSOGtQIhAKwUad2rThmzv9k/r6FSf02lu7jde064rdYtvPNLuV/o"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.1.tgz_1504551387985_0.9531365705188364"},"directories":{}},"0.2.2":{"name":"vue-tsx-support","version":"0.2.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0","vue-router":"^2.5.0"},"gitHead":"73e491240e2c09b3dfd1b98102b373c92e5ef17c","_id":"vue-tsx-support@0.2.2","_shasum":"c71a7898a7a2e3c72eadf8d2d82f459e9c10c11c","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"c71a7898a7a2e3c72eadf8d2d82f459e9c10c11c","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.2.tgz","integrity":"sha512-HOssomrnEnWwaETYo8wPCAyYm2uFLARqu/ks7pdEX7IS52E2mMCNECh9WrKJ4R7XanOtx8DrUO/sX2V3sONJtQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM036c6CXD+fQAhsu1vpmwEE4OY5qoPnHZqGbZMOrmxAIgXizCDJArqINCXxowyees0ofBJpUrYu7qi0Oo64a8cUw="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.2.tgz_1505164359109_0.7911751442588866"},"directories":{}},"0.2.3":{"name":"vue-tsx-support","version":"0.2.3","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0","vue-router":"^2.5.0"},"gitHead":"77c48f52298a2ac232cc141ed7ffb34f54dd1f29","_id":"vue-tsx-support@0.2.3","_shasum":"b6e871d971240afdba79ef1d7604e96014b29cdd","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"b6e871d971240afdba79ef1d7604e96014b29cdd","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.3.tgz","integrity":"sha512-23DPF4/Suf8wS0GUWvYxPXTso4lN0jCUe3xL3Jwf2xVUSSXgPnYqQyXBFptS3BnlLcSSgc5fZ1r0g3tD3VZ9Qw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGrAHRemUYCg1VhzT6AS1dArPDgC5GC/fbFGz9GRME7bAiAzkUrBuGdxOtNkbWTjwoYQxzaLs/XIePp5u8/5bea2Kg=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.3.tgz_1505229687545_0.31476856814697385"},"directories":{}},"0.2.4":{"name":"vue-tsx-support","version":"0.2.4","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0","vue-router":"^2.5.0"},"gitHead":"bd9d0d2d3043f7363f52ce1455cf9208fd5f92d9","_id":"vue-tsx-support@0.2.4","_shasum":"c424ea7194bdef6e93f70dc397beb4e5e8cdacd8","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"c424ea7194bdef6e93f70dc397beb4e5e8cdacd8","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.4.tgz","integrity":"sha512-hdtaHHfB9b8dDiODIEJox/uPvx93yS2vrQYj79J/ktcoJSbaNoAAJgxP8inH8WHaeJbcfjjVTkUSNFEma/1aLw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdKZD3bRarOYQr5a5hOVrXE8099T+EDby2U1kxXV5PjwIhANEHEwwx4U3wZGXeSSz7NCKK2Y0DKgVyH6QFjVKEp3ef"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.4.tgz_1506012800486_0.4644218268804252"},"directories":{}},"0.2.5":{"name":"vue-tsx-support","version":"0.2.5","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"optionalDependencies":{"vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"4aea60cd6dd73d57bb163d7d63f43db887c88b1b","dependencies":{"vue-router":"^2.5.0"},"_id":"vue-tsx-support@0.2.5","_shasum":"8fd2141f131b04777257a64ed424d43be19a7be8","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"8fd2141f131b04777257a64ed424d43be19a7be8","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.5.tgz","integrity":"sha512-xJA3o7UjU58yJOOc1AMTIIjSdkdxn1sAGAjOCajv+eRMPEZb7B8ssiw4sWVILl9GIpbjQ+tuLeB8Gs3p0bpvwg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFfejQOqb0BQ7xLyOpjPaTcmLNZOL82RS9zA4EdrUeC7AiEAqqB9bT+wwYohitBKJ0oBmgGz3qz0B+WzAV69lov9XVM="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.5.tgz_1506112442882_0.025451410096138716"},"directories":{}},"0.2.6":{"name":"vue-tsx-support","version":"0.2.6","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"optionalDependencies":{"vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"01ea209ed11b3db7eed1885ff137e4c543faad5a","dependencies":{"vue-router":"^2.5.0"},"_id":"vue-tsx-support@0.2.6","_shasum":"719c8d2d48e4084e3b7e00f37ae3b0bb0d603716","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"719c8d2d48e4084e3b7e00f37ae3b0bb0d603716","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.6.tgz","integrity":"sha512-E2siO4yO7rMebBj83MQm/CA4D+DMQVKXAW2LumizmYYO0kxexD9H41DgjioT7sJ51dURWMsOHV/+gx7Piyya9A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUDRs0SM99ZLYZmS6YoeSKc+oOarqCuwh9zmjRR/RRjwIgC5JASW0ATyAZznMIe8d6SN7v2qfuQVzM1oF2Y5c4Jio="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.6.tgz_1506148952790_0.12694275751709938"},"directories":{}},"0.2.7":{"name":"vue-tsx-support","version":"0.2.7","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"2656e56e3944ea3cdd7c07fdab755d8d7e4af8d6","_id":"vue-tsx-support@0.2.7","_shasum":"5312b89e0d1e6085dccee12e2193e4d389cc9ac0","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"5312b89e0d1e6085dccee12e2193e4d389cc9ac0","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.2.7.tgz","integrity":"sha512-TWFQLcuemTcEci/YhcP+YHkerJor9Y8TrThMWvq5XYeHaJICWAbDQ1t3RMfsGqg1+zjA/QHuTt9uu+L6mlo7ug==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgDZ/MxV5A4Yn9oisHCoAQ6U6YhYvjh+cQE2/LGRgfxAiEA2Jj1t4WloWNphHI+VFFBu3Ftnty3eRYEF7JBiUnOU/w="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.2.7.tgz_1506159790073_0.24368455330841243"},"directories":{}},"0.3.0":{"name":"vue-tsx-support","version":"0.3.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test-tsc":"tsc-test -p test/tsc/tsconfig.json","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"3476055db8aed85d6539b3c52706d1d935d3df45","_id":"vue-tsx-support@0.3.0","_shasum":"eda7852371475f668fa9e3e83777604b342bdca8","_from":".","_npmVersion":"3.5.2","_nodeVersion":"6.11.2","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"shasum":"eda7852371475f668fa9e3e83777604b342bdca8","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.3.0.tgz","integrity":"sha512-3C3jDyOTCR12gT9yWtCvwW0hXOsETr9Pe8c+o/i17ZkS2ZDGr2x7aqw0b7q7/xhB/VqONz/NC8S3IDvYdej3yA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGumlJzT/ks52SJ64Q6+1mMpJF9HAP5s1P/ADGwDj7wAIhAKpzNJT5O42xq3I4K22KSz9clY082NFOVQ7CvfMFnOHU"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.3.0.tgz_1506957310446_0.6223892252892256"},"directories":{}},"0.3.1":{"name":"vue-tsx-support","version":"0.3.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"tsc","watch":"tsc -w","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","tsc-test":"^0.1.3","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"22091abf565c5d83265dc9ff6a3bff0a21fcf6f9","_id":"vue-tsx-support@0.3.1","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-aH3M6ma2AN0kjfk9Vj22evMo1FvlEp7PIMR7ttCMoPdR3+7tWVAuXH0n98+R8qUI+u5jQzc7iyLq30Nzv0EPAA==","shasum":"25dd2ee04e3cbb2e9d387cd8d6f75b4523b5ca79","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.3.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClTjDSr0ONEaKKTxjMxghG4btvjYXsgmF/GqJf5OGvegIhAOVcje59LnknxB1Y0/ZjGgVPq8CrojEVdl5nRqBALste"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.3.1.tgz_1507148932348_0.03252201364375651"},"directories":{}},"0.4.0":{"name":"vue-tsx-support","version":"0.4.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"webpack","watch":"webpack -w","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"8596afd86f95bcbe5d6848a6a8d069e214803423","_id":"vue-tsx-support@0.4.0","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-UeUmIBBAohOgy3CW3ZwIQ+3KMWLcUsqu+MLuqTBrjjqpRAqRInowTTNZpkVRI+SH/3BqNy27Y9riw4J7jI4BKw==","shasum":"0123e64e0a0236ff0c40e89839818ce4fc91ee44","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.4.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzaw3bhUp+py+h7z9yXcnAJPjViYv1ZT0z4qiHVwgrqgIgHJnzHvGiZVyVawq0i4D7ak+8yt3l7UMOnex7na8r5/0="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.4.0.tgz_1507747894140_0.029003097442910075"},"directories":{}},"0.4.1":{"name":"vue-tsx-support","version":"0.4.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"webpack","watch":"webpack -w","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"c7ed8797af0c7ebda5c26a8784ee7c9da64bdb7c","_id":"vue-tsx-support@0.4.1","_npmVersion":"5.4.2","_nodeVersion":"8.7.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-A0iLLPaOv/Ss4B8hiEQxrigKqkFeXRd3SxNkMba56mc/EFjnzLX7BuIJmGyDRhIWOdT1dRzU7sgCfR2Zjb1YZA==","shasum":"6c7f036239e2af4f14381b9bdbaf7ce2b5b6accf","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.4.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG7TTqXEvcYmUfNaXulApW99mvXERHzINF1Lvpg4eJ7wIgIqvQPH6Y2f5gyNtQB61bmfz9hWgFcz7AMZU84O8EjXo="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.4.1.tgz_1508230115452_0.3268951566424221"},"directories":{}},"0.4.2":{"name":"vue-tsx-support","version":"0.4.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"webpack","watch":"webpack -w","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"86302513d94681ef6905caf869b2e71bbda6685f","_id":"vue-tsx-support@0.4.2","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-bxYXJZ7ZOakSUNey83JH/YnjkTduwx3bB9Ke92KyVMBi4RncU106dEFeVn2x5zdUwgjGdiVufctXITnfFXmOUA==","shasum":"10de9313fed5733b082e1b382c348e0be13ccbac","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.4.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrZycOF7tUClQg3rRw6aAb7bJ8Y57sPcmDNHHBz9iu8AiEA++Lfxeh1rtR4FxmfKMN9ExNBUSapCDdImVce/tfO8aY="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.4.2.tgz_1509106122199_0.7979583193082362"},"directories":{}},"0.5.0":{"name":"vue-tsx-support","version":"0.5.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"webpack","watch":"webpack -w","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.3.0","vue-class-component":"^5.0.2","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"gitHead":"c522c27c70c1fe26fdac62ae5a539d1c12dd2023","_id":"vue-tsx-support@0.5.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-BBhEGEFsdUlGX/a9ufgTuDgXgg+GrsZZjkAUp5DqITx3q+1zA6TxOyYVM6Jp5BgWwWFCwNRhrxwm9fMY9VQRAA==","shasum":"63522093a4f00a7013650760fbc4c1cde97baa7e","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-0.5.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHariNyeiMFFTl3dsse49UHNlgDa4XuleUMXQN4S2vMFAiEApS3FHtAsX/2GZZkNMpM4M3Bv+N02bGVW/82DdN5Qw3g="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-0.5.0.tgz_1509106391334_0.8571615784894675"},"directories":{}},"1.0.0":{"name":"vue-tsx-support","version":"1.0.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"webpack","watch":"webpack -w","lint:fix":"prettier --write \"{src,options}/**/*.ts\"","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","npm-run-all":"^4.0.2","prettier":"^1.7.4","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.5.2","vue-class-component":"^6.0.0","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"prettier":{"tabWidth":4,"printWidth":100},"gitHead":"09866ae23431f385f2b78711e123a105096dd66a","_id":"vue-tsx-support@1.0.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-Yq/6D2qbjYAjrOpvnSosMuMaQQWfBVJ9hjgVZh1FmHiX/zbqBXhX/3baCpHbkjLKBc0wo/Dti4rILGRvWPIzbA==","shasum":"e5527242a2f920ce1ef4fd049de7087d90f76450","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Asj0fYlYoa8D7mKqKPfhy/To3H3XWNmp2ugrENxURAIhANy8AWzSFu4s0dHi3ubCyGuSRYjrLvsmcmSyFiu7Snrd"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-1.0.0.tgz_1509337969771_0.5685940633993596"},"directories":{}},"1.1.0":{"name":"vue-tsx-support","version":"1.1.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options}/**/*.ts\"","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","markdown-toc":"^1.2.0","npm-run-all":"^4.0.2","prettier":"^1.7.4","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.5.2","vue-class-component":"^6.0.0","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"prettier":{"tabWidth":4,"printWidth":100},"gitHead":"2c0a91dcf94ce5840120c51615ed7dfdb01af745","_id":"vue-tsx-support@1.1.0","_npmVersion":"5.5.1","_nodeVersion":"9.1.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-NN8eeZopeZh/DsSeWPL+00PNoFY68bbCYgVxr8cym8Z1eBuwLq4pPIPtSDdJX94WYbjEjzrKGRu9LJJ7zN9YKg==","shasum":"17782ae40899ade088ffb8b6ba49cfe80808fd44","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtzbyB3zNgv3aosJP10tf9t0sYq5A1m4nUSFIk9n9lyAiEAq1sOVltybO/oyf8nWSETWiXz1KcIBeQPhVrw8cvX3sw="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-1.1.0.tgz_1510584528024_0.32135842042043805"},"directories":{}},"1.1.1":{"name":"vue-tsx-support","version":"1.1.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options}/**/*.ts\"","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","markdown-toc":"^1.2.0","npm-run-all":"^4.0.2","prettier":"^1.7.4","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.5.2","vue-class-component":"^6.0.0","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"prettier":{"tabWidth":4,"printWidth":100},"gitHead":"8af354bb61e36e25b7d8e0221ef72f49091a3448","_id":"vue-tsx-support@1.1.1","_npmVersion":"5.5.1","_nodeVersion":"9.1.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-VDU8tt0XvefJrXXnknALoWS73/fAmVGCqK32LpNVFsXQOJ/qkUo6+HrLk0N/X/Whqe5KV2Hws2hNKMu4+TqbfA==","shasum":"773344159137895e6ba49d7c03acc83dacbd268e","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.1.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuVMOD/DBswTHPXiMVOLM6V+SUqtqxU9et/51ZDyzy3gIhAN7cl+WlEl3BvcAEyyGVH/E4eCs5cyeFr0U9bqoYp4ih"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-1.1.1.tgz_1510614095560_0.07436231523752213"},"directories":{}},"1.1.2":{"name":"vue-tsx-support","version":"1.1.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options}/**/*.ts\"","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","markdown-toc":"^1.2.0","npm-run-all":"^4.0.2","prettier":"^1.7.4","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.5.2","vue-class-component":"^6.0.0","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.3.0"},"prettier":{"tabWidth":4,"printWidth":100},"gitHead":"cd623ca90f76502746d021720060562351bd7f57","_id":"vue-tsx-support@1.1.2","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-JG6u9giOETqTyQZ1g854LB4hsfQukPQpKY1o16uhbfGRXS+QNsvcQwtacD8ueyi2ZT2/odZ28WmwZgnkbRwINQ==","shasum":"3fdedea87d79a5000da517a9730ad17e212afc80","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.1.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrrAzefGhEcpom+AGE8cy+0R5xQL5vFRLuPRG8s95kCAIgVt68VtstX7x6MIRiCqg/EPw4cIZmQrzipHRlwblKkpQ="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-1.1.2.tgz_1510716590136_0.8151882926467806"},"directories":{}},"1.1.3":{"name":"vue-tsx-support","version":"1.1.3","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options}/**/*.ts\"","test":"node test/tsc/runner.js"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"glob":"^7.1.2","markdown-toc":"^1.2.0","npm-run-all":"^4.0.2","prettier":"^1.7.4","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.5.2","vue-class-component":"^6.0.0","vue-router":"^2.5.0","webpack":"^3.6.0"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":100},"gitHead":"f63c9235c5a2fd31ee0b0d3ee7d183c381bdb9cd","_id":"vue-tsx-support@1.1.3","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-JDSySg49hQiWjVYlpSf65LalXqaeAUZZMmY30vy/ZtMVHzH0kQrgievs3LQVkwPK36KPMBgDZa5NJqremcAFdQ==","shasum":"3d1a9909194b6e0e0d490b2f1ae88acae3122714","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.1.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwKWvUKh4EJ1VuffeqGdGtS7Qo1MHSzev5OutXeVGbwAiEAsYGEry0bVBLz9dT0xFa4p16P7BacpiHzU6xhKPMziuc="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-1.1.3.tgz_1510752634728_0.16788555355742574"},"directories":{}},"1.2.0":{"name":"vue-tsx-support","version":"1.2.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^2.2.44","@types/power-assert":"^1.4.29","babel-core":"^6.24.1","babel-helper-vue-jsx-merge-props":"^2.0.2","babel-loader":"^7.0.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-power-assert":"^1.0.0","glob":"^7.1.2","jsdom":"^11.4.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mocha":"^4.0.1","mocha-webpack":"^1.0.1","npm-run-all":"^4.1.2","power-assert":"^1.4.4","prettier":"1.8.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.6.1","vue":"^2.5.7","vue-class-component":"^6.1.0","vue-router":"^2.5.0","vue-template-compiler":"^2.5.7","vue-test-utils":"^1.0.0-beta.5","webpack":"^3.6.0","webpack-node-externals":"^1.6.0"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"f7540fc24ba82a69a11029dd47c834ed3327bced","_id":"vue-tsx-support@1.2.0","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-TNHAvbBTfx1y5KbTsQ/j3btzJHo5n/oWNSHnsCgmOGoU3m8poyZo403/oPasdrlZyghubaDAL/6VxCchUeogDA==","shasum":"d85dae894e8fd615294b2d6bf08b815b61ad7fc2","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvcEhMNauLwx5w/d9pv/B92pR8eUDWnaBy0+PLMEr84AiAEsWY/7GlmCFg3UCigimyOoPC1RLEWh1a2byHM5vMGIQ=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support-1.2.0.tgz_1511233797931_0.7249615746550262"},"directories":{}},"1.2.1":{"name":"vue-tsx-support","version":"1.2.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^2.2.44","@types/power-assert":"^1.4.29","babel-core":"^6.24.1","babel-helper-vue-jsx-merge-props":"^2.0.2","babel-loader":"^7.0.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-power-assert":"^1.0.0","glob":"^7.1.2","hoek":"^4.2.1","jsdom":"^11.4.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mocha":"^4.0.1","mocha-webpack":"^1.0.1","npm-run-all":"^4.1.2","power-assert":"^1.4.4","prettier":"1.8.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.8.3","vue":"^2.5.16","vue-class-component":"^6.2.0","vue-router":"^2.5.0","vue-template-compiler":"^2.5.16","vue-test-utils":"^1.0.0-beta.5","webpack":"^3.6.0","webpack-node-externals":"^1.6.0"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"e8dc8f49148a97d6905a7b11b1d50f00c8dd51d1","_id":"vue-tsx-support@1.2.1","_npmVersion":"5.6.0","_nodeVersion":"10.0.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-R9skthG4bJZBkpnQsNeD687lTHEk6Fau9+NDiCewoxH5Iz7+3Uar79T5dv4Xa/jMUQZdzMRucxYAgYnjPbvOXQ==","shasum":"c872c6971a3bd288dba24d48de2ebab3595ed5a0","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.2.1.tgz","fileCount":25,"unpackedSize":95909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa46UCCRA9TVsSAnZWagAAYrIQAKDjb++xEdMXmV7aiiCI\nhK8KcqulfmFnoY24iM82Nc5v2QLn6YiCUe5DZrFpQ7Y4xuUdZ25jodg0V5VL\ncUfV0NkAV60kgJHYsUvOLmFNuH6rvqijfEcR5c/R0+grFN6OmdzUybLssDky\nC0LXPFeLYiO0DQtdG/Hu/wOetU+3GykVz/H+eW8Qf+wcZax/PZTFRu/jJxW4\nTydMDpT9VSli04g+b/jk2BLOn2oWoTtn0Vz7Oc29rGJCcgvp30w7sFtzQyKT\nC9xzp/g1lIjcjSDb7O/bhTj9xy4JqsYTZ/30MKcXCFeI9ai1ob8XZz7XazsV\nHjvkxZMi0tI/XDPu1i0ZOI2Ku7b657kQnHogKPcs0qEpHEWnBMtZN71WsVlu\n575YtvazERiMPKTi//mJ+TSQjQsJZaOk3P7RHKxLKeF/zXVurAnPVhNho6f6\nk+KZo1QXlZgRHVTizj9UxWaArTq0w65rwL3qzMziNbWAXHH/o4Ud7h/Y76Ro\n9SXJdsOv5dSeCOLwenk+Z2f9sdbEwchbYOQbEA9Zs1tGS34WSqBaN3sHAXFo\nJlk8BjsmI0YoeUhEps30oyqLeIIn6+mOqY6K67kDNqGae5C8eYJ5rsJNDX2b\ndABNT8OMbMu+5dgbtMf7tm6KO4WnMPokFURaPILf+/EQjIz3DEKvt3OJOewI\nHZUf\r\n=nIQF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWtAIe0ZQ4L10aqo8M9Sn+cOKWsl+8enNOMu46cwmvPQIhAPvTGc8h9Fqdn8utpr9DwV6lZXbra1ZrYVOg48fL4yJU"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_1.2.1_1524868353453_0.9980021966871038"},"_hasShrinkwrap":false},"1.2.2":{"name":"vue-tsx-support","version":"1.2.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^2.2.44","@types/power-assert":"^1.4.29","babel-core":"^6.24.1","babel-helper-vue-jsx-merge-props":"^2.0.2","babel-loader":"^7.0.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-power-assert":"^1.0.0","glob":"^7.1.2","hoek":"^4.2.1","jsdom":"^11.4.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mocha":"^4.0.1","mocha-webpack":"^1.0.1","npm-run-all":"^4.1.2","power-assert":"^1.4.4","prettier":"1.8.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.5.16","vue-class-component":"^6.2.0","vue-router":"^2.5.0","vue-template-compiler":"^2.5.16","vue-test-utils":"^1.0.0-beta.5","webpack":"^3.6.0","webpack-node-externals":"^1.6.0"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"d5aa30ba70e244e4a17b09e3d4027bfc9a6734b6","_id":"vue-tsx-support@1.2.2","_npmVersion":"6.1.0","_nodeVersion":"10.3.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-8mH8edrKuTHJqJTw0+lrsdPJ4aQpA4UxjqEqrCjxqBfJ/paSGTB5NjUzwPSvrZM/qu1SoU3wbTOoZbTXWIZcSA==","shasum":"5012184e6fc1dc2af502a51f4e28842d68015d07","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.2.2.tgz","fileCount":25,"unpackedSize":94532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFLh+CRA9TVsSAnZWagAA+U4P/0RlsKtnXsruhZPsgPaR\nMFD61fwPhvej1WRRUK5zJWM0SSm5hvB2xgCeT5DhZsVPUUlnUKt09wy6gmr/\njkUnZr1kmR0oZGIkEYcus05HOqMO2Ar9VZllx6tJLa1DUNTe1BZsiGjIWMwN\n7TcOtjCs6GOJeTdJBznqdysENiZLVyH4+/VmtAXx8w35qTtEve3+OXYSHc/C\nfmjBJ64+iCwTril+AteFDUPcvFV5xzc7X9xNmwxazEBEXRr66cSBoC9Tn47H\ntjo/5CKxLjpBIZrXTgQyVpz3S50MNHghu1QOESvy5EC6K+O/QZGi7qBtfLko\nSXKG4zgJdOWSIchLRv4cSVI8+B7myr7i4RH4XHA2PeZ7+7xofYcz+WifbZVr\naN+9cGRu1Ik+tbxi6MWipYXcfejSjw7bABpXBiutu0giEdL/OVY/YD9Wmofp\nrSeWFoNm0omLM5YsVh3Vfo+dG+Ky5atipKYTdExYOh10NXQAe9cnKjgwB/cH\nNjzU4TfDsByLY1FYZMZe0CFlqd1M3Vg86ju2NVSn/lfX7eQPnLj6y32DuuIk\nxs8NJlblh0GwFMWJ6IJz2LmH6NimnPFufUO80LOLgmBv3dDsEx9sT/a6uhIe\nu6soTd3NvNNVaGm296BIIpxWrC2aa/IduY85Ky23KKtIAFauLlIfJd1vo5sj\nZmbt\r\n=D1Ml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTUgM88XIJaM2iM1xqVlAwSSmy67CbulnM/fkx54F7WAiAWCsexFH7dIzWdOvkWED5Q1nxPvKbawNQkFr56qoUJyQ=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_1.2.2_1528084604832_0.5711739418512769"},"_hasShrinkwrap":false},"1.3.0":{"name":"vue-tsx-support","version":"1.3.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^2.2.44","@types/power-assert":"^1.4.29","babel-core":"^6.24.1","babel-helper-vue-jsx-merge-props":"^2.0.2","babel-loader":"^7.0.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-power-assert":"^1.0.0","glob":"^7.1.2","hoek":"^4.2.1","jsdom":"^11.4.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mocha":"^4.0.1","mocha-webpack":"^1.0.1","npm-run-all":"^4.1.2","power-assert":"^1.4.4","prettier":"1.8.2","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.4.2","vue":"^2.5.16","vue-class-component":"^6.2.0","vue-router":"^2.5.0","vue-template-compiler":"^2.5.16","vue-test-utils":"^1.0.0-beta.5","webpack":"^3.6.0","webpack-node-externals":"^1.6.0"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"51e9a0546de93680d8af247cf17eee4ae73444a0","_id":"vue-tsx-support@1.3.0","_npmVersion":"6.1.0","_nodeVersion":"10.5.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-YT2vcxgiPDFlQoR7Jpj75CiXr8n12JGzXYfHNcDY+l3HmYA6d+ay08UGJGltnWstkdp71BQCK1Vlj8Dh3YAnig==","shasum":"540c8676602cc4db5f48f57a7cbee0ab53c30a7d","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-1.3.0.tgz","fileCount":25,"unpackedSize":98480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOB8aCRA9TVsSAnZWagAA3aoP/3+MkefjTXNtwMdonbBb\niPTpuE9K3+gcGorHAb641YH43VhU+acp9h6VfT38VV/G+wO7k2ontbwL1zFx\nN4Rw/CUSHdzWhZZeoWUvmq2QQ5wuXggg4voy5tNP5o54tyCAFqEQdQla5q7p\nLc+xoo5sGQiA7xsC+/VLMHDhD1C6BO4HNQ2yLMpksFnytUnCtyGh9zcfvEac\nXiO/ZBh2ZKVWOh3P51QwIYBMPnES9vX2qx1JymeNI82iDynYCyYo3REjSbzi\nUL+5CrURVMtwfDLsARuLNRb7koU+w/rA53j3UzVOveGqmKh0EO1E+aTtCkRo\nURS5PAULR8sNudFD95vYHTrcKEzhDKbd7wrJz5Acij++YJEDEc1O+Mng3Re+\nGV+ijjO/ft9XqdGMx2LbGLqKkLFx1ExOuXhGPOUhy+ssnbyK0Q+zzZjXnbCN\nZyMwOhb7t+woEHrgpx7E6Y7p6GDT/UEoGh6089JsKmK+z/kQPilM4X+awp6J\nf31AVptNab5HcmPjX/VxNDAvfoKn9+XLGk0rWT7gdOPLOlhNOhLcTD6/SrPn\n99npUzzPO0HbCArOZUQ1Y8Yp6bbMJt1RM3J6H0M5FrxuyQxumTniCp107cyz\n+J88a60PcluKFgXpm0G2RBWyj3mWLrqwEjiUM/XrEIykgk7ExguEnZpk8INl\njaFX\r\n=7X9j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLJn4cPdnY8a1TTOEywOLP81twWgOj8kX1+b/tHqQxFAiA7j+cSiPBMlzilseB43Wnlk8izgxWMlG96ZAvAXjIqSw=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_1.3.0_1530404634043_0.37451497568857084"},"_hasShrinkwrap":false},"2.0.0":{"name":"vue-tsx-support","version":"2.0.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^2.2.44","@types/power-assert":"^1.4.29","babel-core":"^6.24.1","babel-helper-vue-jsx-merge-props":"^2.0.2","babel-loader":"^7.0.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-power-assert":"^1.0.0","glob":"^7.1.2","hoek":"^4.2.1","jsdom":"^11.4.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mocha":"^4.0.1","mocha-webpack":"^1.0.1","npm-run-all":"^4.1.2","power-assert":"^1.4.4","prettier":"1.13.7","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.16","vue-class-component":"^6.2.0","vue-router":"^2.5.0","vue-template-compiler":"^2.5.16","vue-test-utils":"^1.0.0-beta.5","webpack":"^3.6.0","webpack-node-externals":"^1.6.0"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"3e097591d36fb2bb778fd749a7d1c58582cb4d08","_id":"vue-tsx-support@2.0.0","_npmVersion":"6.1.0","_nodeVersion":"10.6.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-9sY8sVbkvQMjodIoe7Xog2de3cSikV01zbdFDtddcZFFBn0JI8CwUiFxNGsq7pCUZXhSLaIGz+A+hr8vl2BEkQ==","shasum":"e1dae7e49f411d403182ef80c2df24935f2dd9b2","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.0.0.tgz","fileCount":24,"unpackedSize":100028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbSuJoCRA9TVsSAnZWagAAqU8P/i5Tg3fW/g5GqIWdbe9q\n319yC36Kf5MY6Wg5nANN5u3ILyzzbtUvZOzcQda4iPDysDgIGblyj7q/hEMn\n1fnO+SB7TY8kRME2nL3izbto9ZCmjkx3IYFaEqj/9QRwwTcR9eoBIoKxxTAV\nmRgPfTfwaXCGiUOYiaRcQrVhETkxZlydvmmfkJjPbh5HwAfOvd4UtXpsBjaj\nTNxjUFDq12FoE/brVuVD8Ey+nKXyXPrLvPeebUBAYh4Yxd6TVaUv39Eo/pUs\nxfk+zupB9jL6JXKfLLOGgz89ayw2xRkJaqcu9E8/3xSUAkm3oYVNxVWZmrn0\nCbeK/Q7KplmvYA4Ty8h4FUJwfxxBiYVVtk/sH+pnPJTWOp0myZyMs0Hxc97n\nQpRwvmGBJ24YoLiB/C7ZzcGM5eKH+2xfvVn8B9AM096qB3NYzNc27J6LIkc7\n5GzUpui/oHqsCpQeuqjnmv3jchsZ1VlVOUoxZvP7VnQOXBnuYvAB+Ai09DBp\nTrdBww5/m1VffOAge2NVgj1vK2Pn0jlMeO5+Yv8COX2wDvk65dNIIiMind2g\nq8z6RxlnwzCUb39WF8n0OxJxmWErtXXuHiFKqlf/NLe5CVA37cm08QUA8kfx\n/7ZV9T2Vw2PU1NsV9BHTwXpryatRANIIs1u8sBMw2zXuXzxbbXvHMQanX3gL\n8lpi\r\n=Cnxh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJoEjghuELothUJdS4XVcCdQsCd6UDT2SdcCZ/JB5MhQIgPDsYDiUspeT2mqAqwlfSyBP/ZsefZdbGB0sB3FgckXk="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.0.0_1531634280623_0.7623285735189727"},"_hasShrinkwrap":false},"2.0.1":{"name":"vue-tsx-support","version":"2.0.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^2.2.44","@types/power-assert":"^1.4.29","babel-core":"^6.24.1","babel-helper-vue-jsx-merge-props":"^2.0.2","babel-loader":"^7.0.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-power-assert":"^1.0.0","glob":"^7.1.2","hoek":"^4.2.1","jsdom":"^11.4.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mocha":"^4.0.1","mocha-webpack":"^1.0.1","npm-run-all":"^4.1.2","power-assert":"^1.4.4","prettier":"1.13.7","ts-loader":"^2.3.7","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.16","vue-class-component":"^6.2.0","vue-router":"^2.5.0","vue-template-compiler":"^2.5.16","vue-test-utils":"^1.0.0-beta.5","webpack":"^3.6.0","webpack-node-externals":"^1.6.0"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"e19d2c01f0ae6699c535fb7c944c38f7f1335f65","_id":"vue-tsx-support@2.0.1","_npmVersion":"6.1.0","_nodeVersion":"10.7.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-nxgdd7DEoUuEdWusPUL6+oMF/d4oTIrobMBfKpzhIdWM0XBx6oUxMvqMfjsq4uObro1bsOXi9PIIvMy4xfWK8A==","shasum":"c1fcda32b9d563563103ed87fafd6f52dbca9bc4","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.0.1.tgz","fileCount":24,"unpackedSize":100029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbU73ZCRA9TVsSAnZWagAAR2QP/1bDbghsAkWY0QfCeYG0\nN6twn/cLIiNKziF6vEUhwZz25jimmvotXdEY397xJcA1Esm6PMX8/+Z2Hvkt\n3Z0qHqGCcOgoKxu72zdHWECtwOLsHZa+THQVPcFt22DoO49ULgfpXvxsYnfE\nnk13dD7yj3cV4TTpwBMjDAFkTaB+GS/ZB3EHtDJpeRNeyUtLO74FrY+oEbzi\np1l5KqAoE3+dZkzz3y/den8/MvQVU+WIE5ckVQ1pNrwf9XqiA1oKGcv8j5bQ\nvLO35b3ZWI+AouvaLRgJNuGetuQcY6VbGLQUI2317xEAmBtuKEzawYYdsTh4\nLUy/dkxUb5ODV+SA9hIEpHORewZO1CZNunhDDKcFFSOb3Cz0W0TLUQ/duHba\nH1IeggCW8eiaDLK574XSQVp4HrPdlDDEWg+qGc1yEUDivV0FuNVEZfPDNWMA\n/dWGCGvgX4gaxZ8NdqIXI0mq9SzbEpA6TvZAbDSrR5BvHiSFf762ThPuXMLL\nSQODr8j47kUcHqDyZfqlFo1Mnhxd0VO3SoATd07OzYwyzOJdCIJf4GNa+Kj4\nILn403PND61sueb2nFkCZKKqzpcGRK2sSEQXuqNPgxN6nFfkYtw2KTeRoXBp\nJab2k9ML6bXeyRop03eWw6vm4URKZnJYriI6r1M44u/j0jIxkKKGugZGZC+x\n8txL\r\n=QB3h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSHzr1xKlTbSQMJWphZgFrMKfM6jJZ7P2umFOdgWM+JAiA76SVNFLKZobvrBLNU/yqcCxahAE3z/Sp2Pld1YwEjiA=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.0.1_1532214745835_0.8475597448550058"},"_hasShrinkwrap":false},"2.1.0":{"name":"vue-tsx-support","version":"2.1.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^5.2.5","@types/power-assert":"^1.5.0","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-loader":"^7.1.5","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-power-assert":"^2.0.0","glob":"^7.1.2","hoek":"^5.0.3","jsdom":"^11.12.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","mocha":"^5.2.0","mocha-webpack":"^2.0.0-beta.0","npm-run-all":"^4.1.3","power-assert":"^1.6.0","prettier":"1.13.7","ts-loader":"^4.4.2","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.16","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.16","vue-test-utils":"^1.0.0-beta.11","webpack":"^4.16.3","webpack-cli":"^3.1.0","webpack-node-externals":"^1.7.2"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"a5a1b0f54fd22745c53e1aac3582f2811068b166","_id":"vue-tsx-support@2.1.0","_npmVersion":"6.1.0","_nodeVersion":"10.7.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-pqQprWcG4SoaVRoGHzVpgwvhI/lW1OeFTsR+yCPMjXNKEKLgQM/lCfOwv7qCch5DgNutkCu1FeQStketPvy9pA==","shasum":"b474f3339b5604890afa2eec790f377fc3217464","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.1.0.tgz","fileCount":24,"unpackedSize":87723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX4cmCRA9TVsSAnZWagAAt9UP/irbwC3vxiXzactfVUYz\nAXIKj79T4CEAlioYMvzrMyfQumi/Y24Uon9E1Vfwv/vVYjB1S+uQFQx/pvVz\nFPLHntk5wGp6/bbU1g7KsL/5r1KvRoaWkTnogQwEOmfdRXoAsHtds6buPd0T\nkizwpuXcLcgV507LRZZ97v+c8g87kR4hhSFy3OXHeTCay39cCYTKV8KVG4b/\nDVemgIfVa3BwdVjoRcc5GSyX37afP21AjgxSJDGklKR8MwiHULuZLltWNIST\nKdg7UGkQHWhqum/4fccRMx7u29uKeOK1DjEZ6bTO1biBuAcOmBtsQqHhDZdZ\nybLOxnXMsrMFuy3fSfgB4xkO0G4485BriCo23TV/jNkAbWOvLwD4V/fYkbj8\n8wOswSEWCdZ/3DM4EMlyiVZgvKB4YuRZShzaskeZa2iqRq6uXXKp4nYGhD8L\n+GTnzbrenDboriJb3adRcurLMThS4F+eX2ooF0rDvEGrhQHvdTD3tuwyW6NB\nK4D0r125eYI69wLrNQw8vmVy2ZzVzg0yVQeY8LNykAJ8hGlkiGMs1eyhT58C\n0oPjqa8Vp1rIDjDI9JsmUayvS7+18RhOHc4JyPn27pNLOWRxv2UIVCNBLkuY\nxLMnH/jhvOfDO5CGDhxCv5GTaNOlD2KsAu6imWoXW2T+YLVAPcC6VK7xEPOJ\nXEMh\r\n=71i1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLNhQLqQmJQXhhcT9e2tkJZ5k1drHeZ8TWBYRS9xQ25AiANZyf3mbYNr4Maa061/WkpwsLPNTykAjBH1GtYdHdSAA=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.1.0_1532987174106_0.41391825081813427"},"_hasShrinkwrap":false},"2.1.1":{"name":"vue-tsx-support","version":"2.1.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"webpack","watch":"webpack -w","prettier":"prettier --list-different \"{src,options,test/mocha}/**/*.ts\"","prettier:fix":"prettier --write \"{src,options,test/mocha}/**/*.ts\"","mocha":"mocha-webpack --webpack-config test/mocha/webpack.config.js --require test/mocha/setup.js test/mocha/src/**/*.{ts,tsx}","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test mocha"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/mocha":"^5.2.5","@types/power-assert":"^1.5.0","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-loader":"^7.1.5","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-power-assert":"^2.0.0","glob":"^7.1.2","hoek":"^5.0.3","jsdom":"^11.12.0","jsdom-global":"^3.0.2","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","mocha":"^5.2.0","mocha-webpack":"^2.0.0-beta.0","npm-run-all":"^4.1.3","power-assert":"^1.6.0","prettier":"1.13.7","ts-loader":"^4.4.2","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.16","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.16","vue-test-utils":"^1.0.0-beta.11","webpack":"^4.16.3","webpack-cli":"^3.1.0","webpack-node-externals":"^1.7.2"},"peerDependencies":{"vue":"^2.5.2"},"prettier":{"tabWidth":4,"printWidth":120},"gitHead":"9fb8b6a00b6611b179461e33e4c96944b25b48ed","_id":"vue-tsx-support@2.1.1","_npmVersion":"6.1.0","_nodeVersion":"10.7.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-8f8BH+6BveNSjIQdQe1ny2yZmJehxaw8E4gGRGuD6xMsjnnu2hml177ncGeQYjEAUDOLbw5LyD2/3Hb8v+C5OA==","shasum":"697db1d38bad53543429e9ecdff19704b0399390","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.1.1.tgz","fileCount":24,"unpackedSize":87756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbYMpaCRA9TVsSAnZWagAAczoQAJhLozuwObSShW2C83yL\nK2fnnhm4LMR97icDBvl5is+KDzuAVX9r7DEzvHatVlicz+9Q8pvaSgL0lMgR\n+K3ZhyyPdAoYBhXp1TIJVUEtKzgt1CB/RTT8CRnw813EHxx48wU0shf2j9ou\nhzdyoA0bA2/kQDtZMTKvhJz6Yn5t7DCZAqeBXa3/aX/YWzyAyZt+A/EDSJAV\nEuEoA2Fbs5gBEKNcL1zp18Ab6WesU92pe6u8Pzu/81SsAlJvG1h9twKMf+Fz\nNA6vJJ+JnZnykbkV3X49BTKC/lYPJzjpVF3UR64cntDY4Br7r7RrJwN+U4Ay\nC8iLwwfcZTgKaoL05d2kHjFieqm/WJJWqMVxf69QT/BB+s1rJxDpBGpo2CQn\nqrLGsdpId3fCt+xO9MURRrUZaimtII8ZWZ7btoMXZbsemrqhXLRCpQQ1T3aK\nrw0MlM5Nnmqlr4DuwlMATTGyBamtExJlJeHyzeHXt0Xz+93/PhaCZxti8lYm\nLVywjlfpeeJPcC4iffwN3JTH+8uQsPnLNiwQu1cVEzSL+2tEIUQtgdmDt3zF\n/3/DvtWpAkO3gtbnnI9X0bn5n3dr+igiXKHZytp/UcfsdRSsC+6JlHAy9fc+\nAxNto+VQrdLFZTmguC/+wQM7sui9xw1Am/c6V5XpScMsDWWwMfwykSB34GgJ\nH3l2\r\n=q8T9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFVKMOYTR0UBI0vhiIx6KPe/s0c+WA9dNa7+S7ESI89wIgS6++1vfln/iAWRXrK4SQeMA2dTvd/AYe6tpZ3c2C5JM="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.1.1_1533069914247_0.47044156996397635"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"vue-tsx-support","version":"3.0.0-beta.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"tsc","watch":"tsc -w","clean":"rimraf lib","prettier":"prettier --list-different \"{src,options,types,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,options,types,test}/**/*.{ts,tsx}\"","tsc-test":"node test/tsc/runner.js","jest":"jest","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.1","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.4.2","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.5.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.1.4","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13","vue-test-utils":"^1.0.0-beta.11"},"optionalDependencies":{"vue-class-component":"^6.2.0"},"peerDependencies":{"vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfigFile":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"1ec2befda73541a8f9c94267ef8b4a9573e14bcf","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [Caution: BREAKING CHANGE](#caution-breaking-change)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [LICENSE](#license)\n\n\n\n## Caution: BREAKING CHANGE\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\nNOTE: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text does not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\nNOTE: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst MyComponent.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n return
\n { this.$scopedSlots.default({ text: this.text || \"default text\" }) }\n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n [p.text]\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n [p.text]\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\nNOTE: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","dependencies":{"vue-class-component":"^6.2.0"},"_id":"vue-tsx-support@3.0.0-beta.1","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-TcllYOCU/Yu0aHSSYUfo93Cid+ILVVmTfvpAohXlT7mnPajzSWOENo7Xpg5jdRiTQzgMKZF7tkOSSAZexfFkzA==","shasum":"108064eb5d72751a435238d3ff119740fb226da5","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.1.tgz","fileCount":30,"unpackedSize":229879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkmz1CRA9TVsSAnZWagAA+VsP/iphSQcUOOSzOLvuFEHt\nLsSFaBLzTB8vYbus/TTPi5/9IUwGfRkCM9mqYWbNbwEN//F01r7xJWeM4GN1\n+siOCHMxuxVnfLEb+0J9gPNwB0R5oYqjI9eQEjPpdCcZVqgPJhzuojaPGxVp\n85eURcLkCpu9vM2kmpbzCYCCVklvbNju0lDYDmjMWDfsqWfhgizePBfzsMn+\ncFp3qINz94ktvNcaWGMLp6Obsg0RlY7hpcJcQJgr5evcm+sKM5+C7cIxheN+\nGhZGKtSTFolArXmRF0zJ4V/cw/Z4uLhqkpJT0rqBthsLwk6Nx6bfM41CH0fe\n4zw0E+fdqVcoQvhGw5smN8nmrp6hILO9CmV5We4qRiQOCSgcb1hjf6iHXNH/\nBXkoJT2pYOhTNJavZfjN1V+z3A37cg6F2N7AigqC0uqPLWy3YWFpVWrDtj6t\nPfT4cVNERmM07Z4CCWFHe5XVcRKUICaTNEUCXQhwRU5nxq/NfWP8g4gBAFN8\ns3zttlq2/vtM5+xCwoPX79mraHpL7x0hNUHF0J09+4YZV/oLkG6T18L5GPJB\n4zgt3xtF4kKGGFIVNEi0R1OpqLDHOO5WyhPxcfzfleMuIM29QNyfe+sB39KD\nCMTT4XMs3URA/5gG7/XF/I+SCVRcymHJcLWS481niNN8bl+K8dyyBIolSNbD\n43Mr\r\n=8SuA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyPe9YwrPlD3gSOAc2cQn/6scF+SrHJp+BTybfXUmbnwIgekZY4BbwlaaXEnEE3oT9nNMlHAfShheHEm2uzJg48rA="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.1_1536322804457_0.35349440421309786"},"_hasShrinkwrap":false},"3.0.0-beta.2":{"name":"vue-tsx-support","version":"3.0.0-beta.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"tsc","watch":"tsc -w","clean":"rimraf lib","prettier":"prettier --list-different \"{src,options,types,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,options,types,test}/**/*.{ts,tsx}\"","tsc-test":"node test/tsc/runner.js","jest":"jest","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.1","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.4.2","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.5.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.1.4","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13","vue-test-utils":"^1.0.0-beta.11"},"optionalDependencies":{"vue-class-component":"^6.2.0"},"peerDependencies":{"vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfigFile":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"e462ebc7736eb0bea50872ad1c201aa315d0f042","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [Caution: BREAKING CHANGE](#caution-breaking-change)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [LICENSE](#license)\n\n\n\n## Caution: BREAKING CHANGE\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\nNOTE: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text does not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\nNOTE: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst MyComponent.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n return
\n { this.$scopedSlots.default({ text: this.text || \"default text\" }) }\n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n [p.text]\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n [p.text]\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\nNOTE: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","dependencies":{"vue-class-component":"^6.2.0"},"_id":"vue-tsx-support@3.0.0-beta.2","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-3aOAuhXx/wo+Skui9vx4yGNTqxuytjfVZrs/fL/MWJqrJYmj4OlRxExE8JGxzupYli6ljnKKIQid5XKVcCkFeg==","shasum":"4d8538d82d6a2cdf462af9fcb022035cc7dd878a","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.2.tgz","fileCount":30,"unpackedSize":229800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkvzACRA9TVsSAnZWagAAzE8P/1KI+4lB0MAoHCoerVnO\nfUaam28fqfhRuj0OlhH7TvQqycDScoKSyrp2JsZwkeEAzu90yqEUwFG+nM83\nBbg+jgQdX61Q6eVeTGdzCoJm11kEeif6h+bhso+ogZ3xFnuw3SAngXIEgl2O\nsboPC326v3+q9Bec9lP3kgtm2eg5v4egcUn0qkKPM2Ke0hBNSmsmkU28zd2B\nWAtYiRBL8tXeudedDZk9N886BP05hpXjC4gnt9gm0/XnnkTmxj9SeiBVQISX\nG+6CuqQTvgRChVxi5UbHNKLDC4D0SJVWE9Gf2HNId0u8z0GElE0w7n5+L66z\nXKOxqJNRrsjsD0QeRNQP2L8WVIKnYP5jJbwTauJaZ1guX5EKvfQiNoM5vDk9\nGR9NCZwCW5936Bo4Sr8KrcFnZ8h6oPBh3ndl5X7mDkuKhO/+AoLy61U6CO5O\nvHeui6LSPKC/aQz9aECld6EDo/AON2IoekyV8tOZxsAiqah0gKu7xu0R60bs\nTxNj6gHlml/0X8D+CqAtlX2xfW1LZWEDuch6agiuPKkBaWlg2Y4bELDkhcaU\nDS87UkU3xCT/xsjEGKE2//RYbw+kYVM66TtqainSyWZasx5WfRBmGg8ePoFp\nC2U4xqY1UpPmMd0FgAZdn7+pgoW+Sw5OEMF7HGtPER7nYWLEL4lnY82PmLHH\nO8LM\r\n=+xGf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZXWp6/9EO2ujPVnKkHPi3oDkO5TkDi6JXXhyRTHmdCAiA7XXzhHWhfj5mDNrzQLqV3kkFqlxkvCOBKlH5ItQ6g9A=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.2_1536359616205_0.2529145697743005"},"_hasShrinkwrap":false},"3.0.0-beta.3":{"name":"vue-tsx-support","version":"3.0.0-beta.3","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"tsc","watch":"tsc -w","clean":"rimraf lib","prettier":"prettier --list-different \"{src,options,types,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,options,types,test}/**/*.{ts,tsx}\"","tsc-test":"node test/tsc/runner.js","jest":"jest","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.1","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.4.2","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.5.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.1.4","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13","vue-test-utils":"^1.0.0-beta.11"},"optionalDependencies":{"vue-class-component":"^6.2.0"},"peerDependencies":{"vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfigFile":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"0ee8a71c0b717d0fd278e597dc42aa0d19bec6ea","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [Caution: BREAKING CHANGE](#caution-breaking-change)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [LICENSE](#license)\n\n\n\n## Caution: BREAKING CHANGE\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\nNOTE: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text does not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\nNOTE: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst MyComponent.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n return
\n { this.$scopedSlots.default({ text: this.text || \"default text\" }) }\n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n [p.text]\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n [p.text]\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\nNOTE: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","dependencies":{"vue-class-component":"^6.2.0"},"_id":"vue-tsx-support@3.0.0-beta.3","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-hYyuETqYbRm8wwJW41xrMXUqtCCJrM/lITJLFqvyuCQ1jqJLb1P337b3VPLAW//+Igy8ry0oWV/74iqK3PE32g==","shasum":"ba903d7885f9641f8ef8b5e73218229b2b9eaf40","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.3.tgz","fileCount":29,"unpackedSize":225824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkz5zCRA9TVsSAnZWagAA2SMP/iJ9aGY81iXYfANzageS\n8S763XBXZ3tQIgwE1Hr3GgrEHTQ+2e1sWxwMdE5oDHile2BRQ9dkbnzkLGw2\nZS24DtVTVVUMF5IcrCr21nxOtIBPDovZTRspu0/YWiUX5hc7TSUtv8C8Tuir\n4/kdn4yCvjtT8BS5nQMmshr+aZZhwNSQwjwz0gDgnnug4sOXT6bWLWeDc1fZ\n1aJixIzUBEDAWTE59A8ha/NG8f1lBjALaHeIPvuVGqCe7m/YFzvnRJD4IMv3\n70Zug6IrMY7uOjt+8MtirwrLjN4A7tuOQIbeKp1+t7YybyI1yqwCoKWRFpxM\nYwCFAcDadKNw4FnT0wl5T55N+fFgfMlb2t3rmHTdeqepjYxdi6i3JWptUvd9\nAk23abkh60xK0yJqY/7hxIgFyOi8Xc8zyV4km+dk0+4klEk8UYFNq6VHhN/9\nQ8uqk8dPc4n+kQNY+Yks2ywXPb8s72OjX+9M2wFQH3iyRgrNneE0nAFJPoLb\nc6sX/V5/wL6AaJFVwxZ971KTVEynrR7R3EcG/S+XrsxsFXGdiulAAVdljWN/\n12Y/z/2qwBtWrKPmVH84YOPe7+U9FDjd4TyCoe+M1DZtoZ8ZdeLmFb9AzTzw\nk2uszk4BgVuFR7EzT0La+Y1leVDQLoPW6USyEi4crORHIIcy6oVeQtmiD344\n2tIj\r\n=wdL4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuI+VD808pEunvcFDYvFaFCwFKFIiIgV/KtmzLk6+WPAiAiZJcSLwX39gPY9KkzZvlyPYmgCke3T6M5+9KS/fgKig=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.3_1536376435172_0.037381782404390496"},"_hasShrinkwrap":false},"3.0.0-beta.4":{"name":"vue-tsx-support","version":"3.0.0-beta.4","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","build":"tsc","watch":"tsc -w","clean":"rimraf lib","prettier":"prettier --list-different \"{src,options,types,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,options,types,test}/**/*.{ts,tsx}\"","tsc-test":"node test/tsc/runner.js","jest":"jest","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.1","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.4.2","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.5.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.1.4","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13","vue-test-utils":"^1.0.0-beta.11"},"optionalDependencies":{"vue-class-component":"^6.2.0"},"peerDependencies":{"vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfigFile":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"c164397aff9d18fef58ecf08f1b368169d856f92","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [Caution: BREAKING CHANGE](#caution-breaking-change)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [LICENSE](#license)\n\n\n\n## Caution: BREAKING CHANGE\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\nNOTE: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text does not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\nNOTE: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst MyComponent.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n return
\n { this.$scopedSlots.default({ text: this.text || \"default text\" }) }\n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n [p.text]\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n [p.text]\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\nNOTE: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","dependencies":{"vue-class-component":"^6.2.0"},"_id":"vue-tsx-support@3.0.0-beta.4","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-6N3i465eK4IHPF88d2XNhSerw21G+ZmH1Z4u/8pyhkw2RH+++3kjRBazv0CYGDAzahoRHjaq1/opRjZSWs1AkA==","shasum":"4ed155c88c22dc65918e2eeb3ed6534a31f581ab","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.4.tgz","fileCount":29,"unpackedSize":227951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmazXCRA9TVsSAnZWagAA1BcP/3LjGrZYXjV+iVNtKxnx\ntmp9Oj5GnyQ8dM0GzLJgK/KltTMLD+SnmvGifETUcoCnfiOf8dyykYW2XJYp\nk3nRLtzqIcv/EC4AcxUBPfkR0MSyokwdekx7XNDgP3RdT1g6eTl1XZTd+ME3\ncMWpPx1trC8SqxXa2w4QVOmMCb4KwfUVTovkZVYUI42kWxqflEpq38x6GHuQ\nkTijje9v9H88Bm2G6/RTMthmO/dB8flTrtY8vC3qyILX75DmWUAT/STdT/1k\ni4c1sVkbmRN3L1N1NARKdgQ6bKbaO/XOepkhW9Q+9u2xzShAwwRbD+Z9EJdI\n7qe2eQiFv9qkOjOza87D4wpxIyqu0Lv0HavhvKX3g6cEeyeDuQcNRjd9hPFI\nyoCqNGEDN2KE4sXKylza7G8Mqh7+/9VpTgmtg4IRl3VPiW2pDu1QSoCNmHwU\n+YRwlyWRZZFfy+1aRfCEgF6SrfHaTrjzTgZbnHcOvwONnLa1O7Hhus0rdsSj\ndHK0l961MSQUYnafv1x5fdbCDyIo8G0U6N5Lp68yyjUHKl7T7FaiT8YeGX9+\nisiBWE7Jwf5RuDuq5RiJYJAt55EBcqV+aiYS4FYDnBTma1JYcozrK0OIBQKp\n4hWDirecBbKb5fv2CVZK/eeVnah47hFG5ktNnbDRsBx1/krkJ+RBADZAnLjF\nVuHf\r\n=/aTx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2CNEp6xwyV9Bkmhn51O121cBbOwVefcHRqu7gxIhXyAiBJFEQabj6VsIjJuG8YEfb28b3dqyLR8pWnC7upsoc2zw=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.4_1536797911175_0.6465563115978992"},"_hasShrinkwrap":false},"2.2.0":{"name":"vue-tsx-support","version":"2.2.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.5","@vue/test-utils":"^1.0.0-beta.25","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.6.0","babel-loader":"^7.1.5","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.6.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.10.4","ts-loader":"^4.4.2","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13"},"peerDependencies":{"vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfigFile":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"4418ae9537edd5d4e66602cf8f8884fcabf24b10","_id":"vue-tsx-support@2.2.0","_npmVersion":"6.4.1","_nodeVersion":"10.12.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-6D1mnJ8X5GMyqCBEEURrs5WRYS+TgLeVhZ6JkYf+8wCXXBNNAoF/zK/e/0czhmuvVq6K+aFwFMn0+9b2hmNcxw==","shasum":"a65bd4844194349f697b96d06d970246cc943c30","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.2.0.tgz","fileCount":26,"unpackedSize":226772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbwBDhCRA9TVsSAnZWagAAUrwP/RmlGGu8i2WUVgkNBVqy\nq2V1gEAboQ93b8LdjKEwOQsCIHN9OE2GOde24beIU5aVLFmzcJfnYjYdxlDj\nV2UN+uY9jBsYYxs4ulmdut94dB5M2HOWhszh8Lee7Li385mpZv/BMZJSKk8B\nTI0v8mPfDJHvPQt9gRYNi54c7EnZkMUHZ916t0ptsFRQHVmWAZNmtKjgzvWC\n0fxtot5SlplCzUPQRHQuOWzXIu5yIYkfIWGPt3V1fJTU0P9fv07ZbelC9BOz\n+r/vsDxaYzcroNyg7JkL2gOS0N1E8xG9SwOIwUFtkl3DrpFFn4jQ2Buurm6m\nVmEauBclomXP+ZX4qsSV4+63CtEaxI5E0yu7bEIuoixIRJMkaMMcLWDzdjPn\nF4qWzrgkSZqQISKAxgrTKDKpZ8I+gKdbbu37LAy7O80dkRphzh7j2/lSPziL\ntUI8xmTisoAy4j/iJzFua8bO8BdFHdkVPOM6Mh+WkPSABSlBfXVMVcg2CYZX\nY0sJ1pqDuQFueCsQQeuqr8bldc/mT+qUEOiyPnttFA4su30EkYyA90HWunZU\ncglo6x4m2X9lh4YDUPwsXD3SvdDsnZ4s9TwC4Bs7wAdQ41qRK2+YNtkAd+r2\nnpim+PwVoiEN9SWOcQADjUekVLQWS5+NQN7hEVCER8aikqoYYfhYRRz9cWt1\nafNf\r\n=BPY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsjL791nq5rppNc1IRdrjtsDq6/O3DFxdG0gKeiwVE8AiBdbroqFnpPLdOLnEzdIicXuW7IVu+Tvemo2YBIrJ5Heg=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.2.0_1539313887944_0.4412228552433428"},"_hasShrinkwrap":false},"2.2.1":{"name":"vue-tsx-support","version":"2.2.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.5","@vue/test-utils":"^1.0.0-beta.25","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.6.0","babel-loader":"^7.1.5","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.6.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.10.4","ts-loader":"^4.4.2","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13"},"peerDependencies":{"vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"8b7aa33dcf6bac9dc86074b062fe4f5682959422","_id":"vue-tsx-support@2.2.1","_npmVersion":"6.4.1","_nodeVersion":"11.1.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-qnbvs/t924jtBdUzXXc8/siKrhYHu0KEQXk9mOzsbq11LQJvST0Y5AyaqP76x9YNceYksbi3fRCc8L1egClMdw==","shasum":"9b34fff27d973dee884ef73e5f8cbe54da2ddeff","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.2.1.tgz","fileCount":26,"unpackedSize":226770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5CqyCRA9TVsSAnZWagAAm5oP/R2dE5XXFu/Ssyzw4fsh\nZZLZFRu2Lz4WB31sKab2N23Dhi4DAS5w2TCfIkfQWguOZCDpfYJUhhm0ZAZD\n8SzIL2wbYpeIyCm5XvrsD86BgTO6jHrc/u3viR0vB9ZTVlygdXMhA7VlzikV\nNnLxGA25C1xPBXFZ8VjhElBgih5jAeLW6K4W//og2w3SDL7plsG0HxONnqDp\nFAPmuVasmCrXD9JINO4bMBlbr6uc03sWLG8w0qFb5dZEAP49+9XwfIAmfS7U\nr5nCC66NjB/Oz3VsBWsOi1QRKUr8wVOSCG+CyUT2C/AaXKm2VRXGUa/9JX8g\nSHR1d9nOaamtl3UbHrwrL/gTMVPghutfTtGw67g5KmGiUUvjfZFzolauXsA7\nmACkzGl7+h1rIUOrCZoqeIRH55es50mlAny3PwcQmLe15cHkWCz9be4PvQCG\nNrtEeRMMfEt1dxIYi6vdeQ4YfORjdq4D71Dj9biIHnNUjvGZYbAy29YpC1vC\ncV44ELLCyQt7Yz23EzaQElK+CnZ6T8kcXJI8zyk2uSvKnpn/F1BFAtl2u009\nJx3qofbAG7DgV3VfDMEydIpndErwB8RKh8XkHesWvV0lIOavj3GVUaFJ8WzN\nreqNaZjG7KnOYko2DZhxx4Ge6JouLrN8T3t6VuGjH2P2dqlLKtujmbNii/Pb\nmbaG\r\n=xw7U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCZDnV/Q7Zf8OwE83Nk99AmfpqYHWW4AS5G99vmWa8pAiBN0rFbgOPEJOhijij7/ihLKtyqxuHm+LfnfrWtMco2HQ=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.2.1_1541679793236_0.9097936540715408"},"_hasShrinkwrap":false},"2.2.2":{"name":"vue-tsx-support","version":"2.2.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.5","@vue/test-utils":"^1.0.0-beta.25","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.6.0","babel-loader":"^7.1.5","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.6.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.10.4","ts-loader":"^4.4.2","tsc-test":"^0.1.5","typescript":"^2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13"},"peerDependencies":{"vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"c0885d5b0c545e7c1f7958ddf3838d73611467cb","_id":"vue-tsx-support@2.2.2","_npmVersion":"6.4.1","_nodeVersion":"11.4.0","_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"dist":{"integrity":"sha512-VykX5OnMYUCyJje7Ke2cVMk0c22eCzuyCQjchRsMpRg72SLZ0eDicT4oTZTJRGAHJ/7TDV+Pwtnpt+LHVr62jg==","shasum":"318f6dd25e5f1ee451a7bc5bcb4669eb7810460c","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.2.2.tgz","fileCount":26,"unpackedSize":226543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGG6rCRA9TVsSAnZWagAAUpAP/i1kTrWwC9JiPBtUkmwX\nEw7R5QtdWhQ8ixjIoYBSsqbbqbsjKgEOio5354jY/UYz0RSf4IgIAAXDxWbY\nzRtLcc5IEJoZFd9BLKLXTd0x/IXAafukiUzQGHgM937ixL7KOXi3cQakaXDa\nh5Jq3r7/8QSKxf9iCG2b0ScPk08YcWhHxK1IJgPNxJYvfzviZLPdWu8GVAd8\n2CkNaF66sFY+rEmTD70EXMmaSDINH7wtfAU8SEAF2Eo+sYjHrpEQvYrEUVTB\nYZ6XK5rhRLobsvjCK/KRSKJx5qKK7DmeLTSOEm6KGlkZx5sT+xiAkMns3Jdx\njaSZsVkwwQihoKd1yee59l5aNB7UZ3hggJ7l+kFtyqoIDUQ8DYBv9tvrhoW6\na/3SmDoDiETTAbczXSYIKdtKLAl8AlSDOGBi0Y17+soDhlz38DBEPzgs7QC1\nkXxGgATbcwU9ncyWm3Ui/EzfN25lAXDcLsLgb9u/DAhJaH/Q+RxDOzgvn9l6\nTEi5FYVGPp4pjn3DcfTXzHGrOWihPJ7hGjvoD79DlBMK7QEiimLCbQPAoMPO\noaKpB7/Hwmr57+ZPOs9d+GtqrMJDmEvKE2mCw6R7c2hOU0iIEdvbhs+Q9CtW\nh58rG3TdCuW48ivqPefTgSRUbXC0eMPXWuIcE+A5pHnUD4ZxhqOWBsvTr1ii\nj6np\r\n=97Cr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzCSAp7sy1yVHxvC+CyFrc2JET8F3KgC7MCiJba6mxigIhAIwOvrvqwqFtRvsCVvkZp3gHtumP5bfl8eG0LDUpwVHg"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.2.2_1545105066969_0.055631840083734785"},"_hasShrinkwrap":false},"2.3.0":{"name":"vue-tsx-support","version":"2.3.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"update-readme":"markdown-toc -i README.md","clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@types/jest":"^23.3.5","@vue/test-utils":"^1.0.0-beta.25","babel-core":"^6.26.3","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^23.6.0","babel-loader":"^7.1.5","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^23.6.0","markdown-toc":"^1.2.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^23.10.4","ts-loader":"^4.4.2","tsc-test":"^0.2.0","typescript":">=2.8.1","vue":"^2.5.13","vue-class-component":"^6.2.0","vue-router":"^2.5.13","vue-template-compiler":"^2.5.13"},"peerDependencies":{"typescript":">=2.8.1","vue":"^2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["env"],"plugins":["transform-vue-jsx"]}}}},"gitHead":"1c6a8b366a1805a58bb694a97c093768b8e1b7c4","_id":"vue-tsx-support@2.3.0","_nodeVersion":"11.14.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-0ARqgRVWsGXe7asKmE3f78zgIkLnLM2eQHn5w+GLyf8E/PV2OMFG5Q6exdfpekLwRhbALPsRPxc51bjWgDm7UA==","shasum":"dd82f37f005a80a262bbe79dfefaa29baf88a147","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.3.0.tgz","fileCount":26,"unpackedSize":227878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctMHaCRA9TVsSAnZWagAA3HIQAIAkztG8TSzkXYrzHCfc\nxDpNnakMoeSeyM2D2h7Dpqc8SGxiKHN7Ek4gyEXnUwvAQy4hEJ1y5aIZaXfl\nnyn4QKaqL8N+A/SnwtlbXEDR+78j39Ae8wssMPryTOsXkrZFtYIiLG0Rux9d\nKoPULhyBBrH/FHOaJ7jKGsZpy+IjpHmrYFfnAsvTHf1GWNMjHSgV/O7UyYFA\nqF98mzMmcMTZQF3nbBhhpWIITnWK3gTZc48Fvl3miiXui6w4XbveNPaDzrlO\n7O/Cyzn2sedbJB2xX/Z/VJ9RHkDFDgc4cWvJ8qojJmqOa1s3zcm7ePwAQN2B\nTk5CEUBLGYFNXwMfnvapqf+krYWLERJUS8OTOGO8fsIwdsBiTHDaefucp7+p\nkx3wUhZMJ2zPB4sbwmmPBUeyfZImyHL+hyplXK9OLuTplHGkyhWxMs0qct1J\nxJFa5VarvxKnWQRvOiJBGMAESaoABaRW5vAKZ99DdNgfP74IUMDTXFH0daf5\nlsxy+SnTeP382MuFbQciOTUiJlnkJH4LlIHu6ev8QN5aG2xLVOZ1K6TJ+1p/\nwx8rZ++g0FMw25y3mpghsSJn2fGmHusNbqEc/hauqsRggHtSmsnRbBDejMR/\nxE/1h5oUc1dpBSiT/3xXzTVVKuFiR5QgMRFbnRxZ3XlkrgL0jPJ097thGN8S\nov2I\r\n=RSv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDU3D3bnbJ3J4MoJv0ryo/XYlxYCaDdFfEPBtRX0+3xwIhAM5pTmiP+VtljrQeUlnzwYi875TXCKfjLESk5dgAngyP"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.3.0_1555349977316_0.04339187920173537"},"_hasShrinkwrap":false},"3.0.0-dev.1":{"name":"vue-tsx-support","version":"3.0.0-dev.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.4.5","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.4.5","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"^1.0.0-beta.25","babel-jest":"^24.8.0","babel-loader":"^8.0.6","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","ts-loader":"^4.4.2","tsc-test":"^0.2.0","typescript":">=3.4.5","vue":"^2.6.1","vue-property-decorator":"^8.2.1","vue-router":"^2.5.3","vue-template-compiler":"^2.6.1"},"peerDependencies":{"typescript":">=3.4.5","vue":"^2.6.1"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"5df8c6f590a6bf56ece5f875cf902f54ba2c6494","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n return
\n { this.$scopedSlots.default({ text: this.text || \"default text\" }) }\n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n [p.text]\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n [p.text]\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.1","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-jGK2XCnWoPXYqTh3OsU+TYiJuu2RL1eVAQreo7pwgQOev7DIcTSY339Jhde5tn1r3yPSU4Rf9glJRLKsjD4GqQ==","shasum":"3d7e559f3d3af2b2ea96308dbb9c92f37ab67deb","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.1.tgz","fileCount":26,"unpackedSize":85490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFEL2CRA9TVsSAnZWagAA44QP/RgWPb/kEk4cA9tslN2Y\nG/Dar29j3Y16ajXtQfmezQkNjk3At3eBuzYf3OUEqqUWbqWKlF3T8wOLSLwc\n1biBR2N38iVAjmt1gVPS7pQPnj87eR/a5wMcCVfZYVo21I6tMFbi+TzjlSa5\n6TYcz/qGWhBL1aMwexmiTk+x3B85flKgXC7ObB0Az7+QzgaalGVNFjhsZpQr\nPw9zcsswm3UlQmMWTeBfv/F51Z3ynCm8m5q3/1PIR3R24AmM295a8Otyvw2h\n9BuVvcO+WAnZT5AnERmtmAeaA/qe1I3GRFqy0zo5Ky217s0kOuWCSaBeFSGM\n7PnNro1AHys75p7PCxZWcWBxn0vA8lvctxWXMn4TfFCPSlvtlr5w5XjP06sO\nSVdAHakz1TvTLdZ/4P7VwA5xHLso7u6S8nBO5ycQA0vdnz/0EJPhbpJgrgXV\n/2+/9GKBmyo7kyivPJnbLqLzKqbIgu2U0IynLHgiJKo8TbxYQhTIEmrizaHe\nEjj2/RQpm0xgcHf/GNBJcFdIwjVskmlfHIbD+trtrWmo1JkAJo30TduwDlNh\n1zSa+sD0Au+TiJnuWsq+Pd2KVtAgd5vE75QXmQrkY5Hvet2i05kDAnMpGXTa\nQ23fdsReW2pFVHZuXgJmgXbOXrqWW3WEra17eaPpUwYlA7WBHkjIfI3Uil9i\nPqP9\r\n=LSJ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvc2aXIqJO8gB51B1aI7Xisi5wJI/JyBoFqciyZDVjMAIhAJlb2JzQwE9bhJrTACL2no6ckaSUrI0WljjjyEeKQpmL"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.1_1561608949775_0.3240758157513979"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.2":{"name":"vue-tsx-support","version":"3.0.0-dev.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.4.5","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.4.5","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"^1.0.0-beta.25","babel-jest":"^24.8.0","babel-loader":"^8.0.6","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","ts-loader":"^4.4.2","tsc-test":"^0.2.0","typescript":">=3.4.5","vue":"^2.6.1","vue-property-decorator":"^8.2.1","vue-router":"^2.5.3","vue-template-compiler":"^2.6.1"},"peerDependencies":{"typescript":">=3.4.5","vue":"^2.6.1"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"3ae253dfb0bd48cb378b57b98cc62283f7a00f6e","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n return
\n { this.$scopedSlots.default({ text: this.text || \"default text\" }) }\n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n [p.text]\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n [p.text]\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.2","_nodeVersion":"12.5.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-+yFnFOsDwvR6ZzjfumYYN4I1XKHKIrFUZaLtTY4BoYHvTMwU9YqtLC9hN84u1FFVbZpcdh+Z0+2Ua3Dhjwco5g==","shasum":"5b21b5a23c0ebec0056b6687408f25fb2839a28d","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.2.tgz","fileCount":26,"unpackedSize":86625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGfcICRA9TVsSAnZWagAAwvcP/3IiNy9NaNCpzFOfRYuf\nQF/mNYMK+8Fg3w1Ye5hbd+mPDjO4cAPvscjlUa7yMKei9764yIq5j7VecBJO\naaRQU9NiJx4sU3qwZp3F3B9RYQBX2+3JsZFpNIj3twQa0NeLzYRW9v85Acmi\nRxgzUZpXi1jBCY+t3Ycg7QIdHZVdr02XH9tFJoR5RxC8qmqJnbe+Vf9t+/T1\niaBpu7l1mZobN9SNZC42UxP6/cgVmqfa3MePoD6TShT5sRjBQirBGmSeJ/4M\npU9VyEPpxj24Dz7P17qVADNoNoE+C7Rx4rPSKMNExpl2iIQMdlVT9atLxDra\nZv3GDMQPceV72on2D/hO9D4/4YtL+inXIHWy55bLCM7UjhvG5cMt6L04DzTE\nGS7bkGGCueBw9120VN49B/7/ZL2dKXMWJYQmiBysVQPM7zHE6ZVFx4IiUrRh\nY6/ptCfdRB24zZj1iDLEpOnapg7d3dEFITjRCEWEbhTQxdQZOf7hScGHQ5Ra\nyr3Y3NEMT4G49jO9o3NB2u1M2Jot4XUG/jbC0oyW3fOR2SoD3FfgoxjhxmlL\nT3hUBPSefaD/bwM5tiZDMiEl4pz2IAcKSF05U8I9BJ/Va+Of6HHKCctHO6D+\n5CYzDma6DLHa/eVal73ypQNX/LWadf706rHQOqCmjd3lyN885uy+KaK71IMB\n/Dn6\r\n=yBzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLDn9tQObqRLRYEmNJYtuSMf/VcOyuBKDY6dQgSgVkHAIhAPb99fSZc7uA27DVu6GMo5spmlJOygbIcqAnMyY/Ep9t"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.2_1561982727421_0.6960917676790603"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.3":{"name":"vue-tsx-support","version":"3.0.0-dev.3","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.4.5","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.4.5","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"^1.0.0-beta.25","babel-jest":"^24.8.0","babel-loader":"^8.0.6","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","ts-loader":"^4.4.2","tsc-test":"^0.2.0","typescript":">=3.4.5","vue":"^2.6.1","vue-property-decorator":"^8.2.1","vue-router":"^2.5.3","vue-template-compiler":"^2.6.1"},"peerDependencies":{"typescript":">=3.4.5","vue":"^2.6.1"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"ddad7e27efe9831f3547ab2975d57143894218c3","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n return
\n { this.$scopedSlots.default({ text: this.text || \"default text\" }) }\n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n [p.text]\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n [p.text]\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.3","_nodeVersion":"12.5.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-aWLeo/w+cz/mrrmjedHUuHuIQodZV0/f0LKeVMYsbpsiAzBGYSwxyPawImSblTBHq8NQx6caDC0/bJmBKMVAJg==","shasum":"1663388ac9cf81f2313f99ca367e2cf4d79d62ba","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.3.tgz","fileCount":26,"unpackedSize":86660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGflxCRA9TVsSAnZWagAA2UwP/2FhnKMgPeLIrObBDn6l\nfXBSsk7Omyxcxtodr6pWoCINVnOhc/E8flEvzMYn/KXon4FFz0Jv3WUNbWOs\ngaEkFLk6ILJKmsvwCyJQFFAqg44tf1F037NZtaUKpQPbA7DBwLGHuPAf/E5P\nRvGeA7xPvZinP2pkpSYm1qUnOdCFvabKa2iqaewswHNVf15nB+knVCdbHBre\n6SSMSMOOg7FeRIb9066RQ4tyQFjNZ1DNX6cPe/xK2XFGbylLZr1i6nsEvcEl\n0zQQkcPwEtyOn4PLG7+OG51aFSdx+UFG9LdAN85mElJTorDpzkA1PGttrZiG\nsRlj0y+5/8D4NVFvuByWbj89A93rUIyrg98zXBYUun60aCHS8slr+EZqhyoO\nRNXNW87fiBF7cIbtyB/suR4RV6nONXZfaNCvT0S9wqhi0cU671jYoO62tL8V\n4GMfhS0O8bR9fwf3In6ZhWXXd98IfKhz9TGl9s5Lqkbq6dcg7EHxUwoNNqhW\nizt2o2AntQ26eobeRyoTGntak9cpsgGSg+65G6AZkf0R9R89/cbdqylAs/gy\n5SyAjfsp9ULSamnX6ETa7dD/xL85ODdbvoWA3BNXJXpzIaVi2XNM1m/0QkUr\nbdM4quAv87MPu0Tleq8X9vwDSaMtt7ig4nMQQ45VcMq/XjM5uxywiS6pvpoJ\nQ7Id\r\n=9+fH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR2Y9HQYs/Qx3qJQlJq9cnTFqc6457E5O0PJBlmOSwxQIgGf/ZcGP2mi8PoLHY6TVrGk2DCAZxG6V6Y4iEeIhmxUQ="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.3_1561983344581_0.6595112613507461"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"2.3.1":{"name":"vue-tsx-support","version":"2.3.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"1.0.0-beta.25","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"3.5.3","vue":"2.6.10","vue-class-component":"7.1.0","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.2.4","vue":">=2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"36be27a7302a62c50bf418ac6a12c76cc78f6b95","_id":"vue-tsx-support@2.3.1","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-r+ILRDT5JLAvMQfPsd9MLt8FuZlesf0ydNRHZzEafSAtIkiu5BEK0UfHzrFJBVhSouyM9mGrLsB7AnCHlnXkyw==","shasum":"b485644a6a0dc31c0366f6a25bf71444cb8231a5","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.3.1.tgz","fileCount":25,"unpackedSize":83898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLkVtCRA9TVsSAnZWagAAuj4QAKSoz++7iTflxZC8EXpM\n91Od8cYqnD4rD/tLVexHIrr+tBGWO9WPR8HV9da5YF6jLmWLGQ+wC5Aq4rN/\nOVGaDTb2jiSKTki0+Ic5lzXlmZrM2y9wjmehvswsRxPQ6udH3C5iM1764f7r\nftVuo2gDslPomFCkYfT2GP3bRnvStUqW+bwtFPUDrpVAsmUFtUlPunldys6N\naM5eITj798HsOAAnn61g5CWCpn2tXhie2fSBOP3zKh8dB2QerdpIly19YZLl\nyTH5HGF32de8yz+1c/PgjB7NVmV1JKxCk58ROJbxn0734IQKEZIx4TbO/pSD\nFMQszS2DSVBp01IybI5wgs4LKfBELgxpuw0/CAMYQh4nxBbIY1sjcMkgBIcd\nLRZDRH/+Krls+SYO41errGNiDP9QCzyPc4BnpreR+djlXznj8MFN+WyQj4Tj\nVNjPDnh8MhWuArq3K2j4PMG7k8xex1uV/AehWhDCtElOML2u7GeNpGya1kRt\nYONmvXAJXzbrGB4UHiiIm83Cjal7hd+KCmDG8FhaVkINNaVt8+kdw/rXB96H\nEQ7WBWXeU5ect8kEuBg5fKGTPPVRRyVxD36zEtLhK7VF9LGwho2aslDw+rUA\nQLG0LRXyf0zMg3uxybNh1H/iy7jrlE5n+vBhH8Nq4hkz3GXH68SRgb4IIMLd\n32K6\r\n=0hG8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmzA0PU1i+z362vbWKraP3ZlZdmOR+jI6kL23hw32IbAiEAuf6GKxnJSVxSMpNUqw0jz0LwvCVRwI5xIlCBMZw8Xdo="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.3.1_1563313516383_0.406260163378968"},"_hasShrinkwrap":false},"2.3.2":{"name":"vue-tsx-support","version":"2.3.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"1.0.0-beta.25","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"3.6.2","vue":"2.6.10","vue-class-component":"7.1.0","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.2.4","vue":">=2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"afa3a1416a520d387b70159836b336e6bdcfa4e2","_id":"vue-tsx-support@2.3.2","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-OlaN/eZGbVSpaOHTwJo8hf9b0Vg839pdPYxpwwgk0l7MN/2840zn9c/nO/zUU3jXsFa761v1b+D3F93zAdPobg==","shasum":"4354c664f9ed208861777ff5972ba87fee282898","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.3.2.tgz","fileCount":25,"unpackedSize":83886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbog6CRA9TVsSAnZWagAA6ecP/0YXDJEOY8NdHUEi0JGm\nCZbOa3zis2lAA8W0aLjaPM6jQi8s3u+E8LtvmD+VTgQfIM4ZhwxVHVaD536M\nZCyoYjhvJqwHl8hu22i3CSlC+Iqv3AdkenpoYnsH2L906mMFjr+Fm7ug75aR\ne5m08kQeZhQ9vfCB1SGLeTgFGnmzooLjI2A/0loOJtwE30O/ONbjy9xu6PnL\nXTPLDCC8XGYaT0RoRUnGqB/yZd94zaKIRpJnqphXvveVnubjl3YEDA5OfxJ2\nx27UxQ2v26SsgqjU56EaKHhgTKCny78IbkKfU3YZeZObqxNq1EM2TbRw7sH3\nTGVTe1+ywJZATJYUWBOU3ZFpKhxakr5p+YF1WwnsesB60iG+wMGnTa1qniht\nAqG4PI6Yvh8NP9+wiMC7fVN7oHJ8PDJGQjZWEKTdCZ402J3QjBLC8phHbEB4\nnwm1/ocs6qm41usa5aCKtNp0S2RbQFZIx9PeBR08Ubqz+wKtQGjW064jY0Gq\nlqd6mlRgbfSzXWc+yctvNM8cIy20yAFojWGAm0SpG9802RkEWlhJxfskmZ0J\nUgIkZbM3TQIML9BZUuOcox3ctSHFVPNccDW4Vs3/5HErep+5iT2FuxFj58dj\nePj1bCrygwgCdiIVsBUBmZpFFX4vmDZj61F3QbvHYlk03pO6zagrmnE+fnLN\nwkiI\r\n=rbZO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYR8szqwCaxCMaOQCVmtkDXf2FwkwDiddw7vPfjSO2WAIhAKnUvhL/d++riF5sT/6cZGACYbGvYaTPOJpIUj6Dlpeb"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.3.2_1567524921968_0.22544341108575638"},"_hasShrinkwrap":false},"3.0.0-dev.4":{"name":"vue-tsx-support","version":"3.0.0-dev.4","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":">=3.6.2","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.4.5","vue":">=2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"e34154d98a2a8bf72a87f1c5b2c5e9e6331a6053","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.4","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Dw6FvzDm6a2KWSnBnDim/M/onsi6gdEHLSG+Wnoh0rWrZ9cOY6VXRgZmpW/5HIcawnhxOxbMalnKnGoJy79ydA==","shasum":"7eebef923daf0b402b63f2b9dae4d095f2197f04","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.4.tgz","fileCount":25,"unpackedSize":89446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddZIqCRA9TVsSAnZWagAAVUYP/jZWdO4YZs0tSB8EC0AG\nffU9gUgJeXUTy2jIzYth0T8ZYWYHfbBNbyZFeyltj+1RpptxmCiVO97E7kwR\nce1uYBZTdnu51T8XOQjhpNblh9fhK7TXkqgrVdZHEfdxmYJueMVb8noY/br9\n4+eiDju5FGoboSnTk85Lp1jRcVATdVvp+XtnyLUjMXR2FvGoYD6vuJbLiNqf\nR5Ry805M+U6Ym8gWxe1CCIaZkHZYsuW4FMf+xI+7K/rgxvuwAOHkD9y9CFif\nVZCAj7bgjwSrFUBf8jYjIyvA6AXiKKWAP3aGkh2uPp2DH9qfHAVBSuz9pTpr\nva6nn/UveN0QM5nSmz6fnesw+Z8MPNq71XibTBLYNzR0zwqp/+q0ILyD6Mpw\nbizKIXVk1luY3QewOQMeP/1zq6kUHQjwB/uw8+nT57ko4IHrEEBcsPlWgWgE\n/tLFllZq/7Uku1yJSeYI8bV5RIThQ6yIiZfBefBAVxylX13Ov0gvwxRakjZd\nQaAfCqr3u9hRFnYhoxilB+kaKwfjJGhdCf191qp7Zpcut1cLNh7xQVFA2Q3Y\nhuoXpj+PjUupvZdEvB2Ud/HJlSAeADBASZrUTWKCqBClYnnV9niasqNwqREe\nmx14Kqx+qqVCfY14zp0OjIN21uCfAPTCMu1xdXwC7TdGU8un59QiqurYY8WN\nqHf7\r\n=2SLM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDggjpwUtHxD17E3alTCWe9peEqK+XDqceBSltx79s5VQIhAKV/jOG5gfHGvFz0woTzK4dnhUST5u0UshmPQ1oJuyN1"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.4_1567986217568_0.05787235331084872"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.5":{"name":"vue-tsx-support","version":"3.0.0-dev.5","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":">=3.6.3","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.4.5","vue":">=2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"ea1a2800b44b557b496a0a13273af25a8bd34048","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.5","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-GgR47+MqLUFNpKFUzeqGFfTYY84q//AYLiwzYRkkWhDvfNNg/gg9I34ZeqnwMy3nnvAvPCzvJMZoqUHdk0gEDw==","shasum":"3a12428e538e86009850193513e0891b54702016","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.5.tgz","fileCount":26,"unpackedSize":90553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgVfyCRA9TVsSAnZWagAAqV8P/indSYJ+Rb6e/FOktr9+\n6Rd5xpGYMcjfBi60+Rnv5bvpP2Hqjfio46zj79BOXVTbd71WpRMj4UlIwVFC\nEUl4+itCSdu+4rokVF3RZDKBvmt+9Pd/aaaJqO4tEkCwWCy/1m1IiHL9OR7E\nRsc7G6RUZrOMjCM57IS3tnhm3ZlT3MEpqw0oqkel5/xxlLZw3+rIci20rZxp\nvaCpKIbGJMMAgUksRiBdo9x/pEzUXdc7y5lRFteM5tSDhQ01pn2ZDFtzwDsq\n1Z0qIKY1FVD3D8ouwNS+HOiNieqTjng81dHtMvaSvVEVhKQcGVkjhvc8H0ul\ntnw+eBwxThRNAhkDpHVp8q8ElIu7UTNlbs+dRI31/XCTeYXJUASPITp2MwWi\nYejO8CZa+TAvS2i9N+7RCKODh0RrKggDmIs3p6R0ffxayDAvzSQ/nByy9De0\nEZELtN5VR+EmCvWrcbQpwjsT5nbfRRNKTnqt1orZf/3D/GShPw3Axh45l5K8\nUHwwD3e5BGC0fxwGciHaF3J/9E+SMVfoX7hySLiTi98rTuEpcu7g5GwrJdNk\nGRpeAYdm98516ka1JQ2Frsb5TV38mkRijoEl3sqkSY/8VwY/pWP2MzY8Sn8H\nLskw2ZvI1XGu9CyMvmZC8nRvFrMC1Nx8RQ1+lgvo3LX2Ciaj6S1E2UOggm9f\nN+2Z\r\n=taP5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7swr7WhFok5MMofSLcDPW/nZtB0UpTi/63uzkJytGiAiBLyvhxjKjeUO0BEF7WE1jzu/NbIY56diKlaDBoscjLQA=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.5_1568757745356_0.762565052909326"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.6":{"name":"vue-tsx-support","version":"3.0.0-dev.6","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":">=3.6.3","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.4.5","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"51377221f89c515aaa67ad4347cf9601d874b912","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.6","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-zcnj3mgLshIMbtjdPGPF+iDfrkZe1hN4hOMACcMFINyFXWNXEwkrfwn9JbefZUgTac45najzYehwCYV5VhtWFg==","shasum":"3329d98c67bdc9108bb545a92f1e12b6ca66c302","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.6.tgz","fileCount":26,"unpackedSize":90346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdi+cCCRA9TVsSAnZWagAA88YQAJcWqZzv5mfFmgL8uMp6\n7ZI4SHfhv7/drYZ6ejdY/XaeFY22o9coXAZPsjLHyYEiD/Ou8lM/ROUxgnkc\nl6aZ7TY5jYqL/OyOXbbzJu8877RidlE8tcbLjCWnb5Qm+tCJenspEA7wVBxb\nGKmQ9e9NjP8B0UCDSwLc52JB598Oj/htqqyhUrNd7QFHPL497WhRy2zJpwek\nn9DkYF990DHyCyvqD4lH4l7VeSsgwxZI2imBEDWtb5iprmAV0ZLtiYx4IA+M\nS8UNBc/+e41guyx5Lbt5dIz0EpAKq+ydBULdToHPTR5oEtDPLBbXh8hZfXym\nBup9BWCZctgEYMGZUif8zruHee4z9f1CJJHlMmGFYGRWQMPvYwh8l6NzB2Xl\nVuJB1yG7oHWmEK3k1TcuRuoM9vb5xwUmkKMNfpWIA8iVghVqc9GqA1O/mozs\nenkbn+MmOv5RRT180JKKyUAmjbDdbEuXl+JSG3kOWJAhWGorblI1JN6Tk9TW\n0prND4A6iNUzU3Cmv0r7P/4MxplxVwwkzSO3QY7tWCKBjk8mi8oparmuJA5e\nXc40F2NR6TChdH/0g0alMP3Ei/xm7ZOEj5wXl9attN+JTXIXh6hMXaK06tnZ\nAdMnZtBQUfEECqSdlYFRRBbralfUvbuGluwjJBIr3D44j7lMCFzZqlYRr8fz\nrz4R\r\n=CR0Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDLpVIS/Ty++8P9Ak2NZAMfvVA0Si9huZpRQupoK2qt1AiAM4Q0geWdsYYsIHlRLKrEEgm+lU3sqVRgKbzbHeQyr6Q=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.6_1569449729506_0.9321566235901848"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.6a":{"name":"vue-tsx-support","version":"3.0.0-dev.6a","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"~3.6.3","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.4.5","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"4d0aeba92ffefd818aca719d024f85c1922c84ec","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.6a","_nodeVersion":"12.11.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Le9w7KtsKWD/di+NpnwaPPF/7NyEqvmltRgFAziDrZgLgOmuYf/QCPG8OMEAmBOVDWqi0rITjadv6KIi7meqOg==","shasum":"4777ccf75735408eb99bbbb5bcff2edd0d4eeab1","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.6a.tgz","fileCount":26,"unpackedSize":90571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjrg7CRA9TVsSAnZWagAA2kMQAIIpjgXcggd21UDfE9H5\n8i8F5kFMoDMsRC0vt1AYcKRBtQc9ok/wiQ+7+GsGonGeLvlRht+EfMMWk+rT\n/jrKc9OvGgcOJnGn+c63lqepCDLN35RPcFSc45meFbFT/T9TijBys4jqfopG\noT2ZGoRdQcIS/AdT6hZV+qMCqLnctRKMN+Pn3lOMNTQZD7mC/K0ijtjGKuk8\nja3PZ1rPGhnfh4BSt1lGuFKFr0DsvvRVXynQqanV/bxKU5Prk1ydEvCQdXmV\nu+RNaTNhdKGexGL11kobj0+CErfpQSxD29lPpo7Q2oRfJ6VjiXOhboTGe4F7\nPNJX/2d56kt707cGW2/4897ho4ym5XgwyW5OrDZkA2ygBjyRdxDzEw6XzMf2\nSX+wetGYwvNv+rZu2uNxw1sG1TK87u/xra/0TnsmNYlG+zAC0hIgPkd2J3S+\nCnFgwXuQhhbPO7KCUTaWb4lB1SyxQMpAEkipnPDrgOHt6Nat5s8Bntc0frT8\n4kEh0ZnfuMIdRKtzK4L4ozhMpuEnLL6RPlQwioJIxTHnltX2Rm6zUo1bI6aR\nPn3atEfxQ/nRwKakixwNgjnsuDwQt7Z2SYap0CAiT27K8avE1H8gqfj2icIX\ntiGitzbZTYAIpLd25JZrOX/unHEjk0JSHM62oZIesSy08kk6NiLRmsB3Qpb0\n+3aU\r\n=IRDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHN2lEnFeokOMhWRHW7BOsYkfsUduOyhW7ne6Nu8vAXAiA97TkYmYwW/qLZh/kC1kVAqE+Igz76yMkqvJ6dZjOkCA=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.6a_1569634360451_0.14773227434378766"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.6b":{"name":"vue-tsx-support","version":"3.0.0-dev.6b","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.3.2","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"~3.6.3","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"eb1392d1e0d3b380b8b946fec2146799be2c1b17","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.6b","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Io0w4qOqoQQIkRQiel28hBwgzuIlvM/D+tUPVkCn8A2jv/0b4SvxSKNId765zfQ09bwzcblR6Zphdunue1ARoQ==","shasum":"d3344da1d07ba20ca8c44906c8a2c7e3945aa8d4","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.6b.tgz","fileCount":28,"unpackedSize":93092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm7QRCRA9TVsSAnZWagAAK3cP/2APTtKfPx+skyQ8w0Ge\n5r20JKoOoAvUronmqhb0fi/Y2rZ79QPFYmrGBjnEtpxHubw8Ukkuczqu7bPC\nEzCFXbAPrFcphKFiZebxj9e/yVF8ITlvifTEBxeURA7SvYbUzMrOFbBe5MqH\n7xx8Hvh+AygGv2zMuXY12teYgdiwuhAPx41w+FdvgjdAMnt4UMGWfXQcBoaW\nvAZikOQEYcYC0ShIoTh9Lw1ESNNsJWfFIRlgeUN8+36l3okSS3K35nT9SnDu\n/sCJSIlHG7BT7XaTTIyalvjUWbIIg5rqfnzGMOT8Rn1oXp8DBIbJ2ZZUte+f\nwo02916whwNurDgFWpfrI/nq82nuQmiTYdR4ssB+Pd++6taJ9V2P0j8C+EFN\nhvkxLAPCyeEeczsiaLilnPrnh5w2gAk5dlBNyuiZocO44i19z3J3eGzH8bgu\nInfKHi0MkDCKjvKfAVbrHLdL1Aea/GmD9nsilWFeNqLIIarkOlz4L9/Cv1nA\nlZfIp9+7rMIlTHyuoXYYRxnbHXwbmMdUOyqnHOgLNIWXjWkYWIguBCIsI5dd\nY0LsEjKO63rS5c68gJTQNIhPdrku05Axcs5CeFbXpgQq+nxb8SOLzW3UgdqY\nT5SJet0sIvMF7yzdfUpNkTd6ZH0H4LQTgG6wOdXvsUCekJQjlruf6QIM0b4b\n3PRT\r\n=eIWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4cgPdc8g1fxObu23uJiXvcYFsGWZPsXqDUjXXfuMYRgIhALD3EUfeOlemu4ztLmmjJPWOTiUC+IzYjqLFMQD+Cvs9"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.6b_1570485264287_0.9655574101331152"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.6c":{"name":"vue-tsx-support","version":"3.0.0-dev.6c","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.3.2","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"~3.6.3","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"eaeec6b335453863d2ebd2b104defb4e87a71072","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.6c","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-K4im0QOc4fjCtm/y+VIbZ+Pt+I56fgZVF1UafbQQ7F8AtiRW/3SjNNy0ZXzkfTJe/dVuaujs2Ft0nSBc8aNuHw==","shasum":"d0b08f66982c1e8164a046427a0a76dc780c6bc5","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.6c.tgz","fileCount":28,"unpackedSize":93328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnE2ZCRA9TVsSAnZWagAAL0QP/2P5Ios3Iv01tMOtY8Kv\nUKbMxXrMslEWqZc1jk7BJtfV5WZGrYZKEDWj4uDmPQukBhyX9C3FeKkwctjD\nK7CmqpCZF+Ys/cUSpmQSOeOgNx8e20P4q0lB+b4caylX8QymemolTKm8HgZV\nyaO3fGMGivGIQmVxxuMfTl6Bz+IZdI3iFWoi/1P1qinb/H8RiWMhDT1iNS10\nzWVozWJxJY8KAHsSE9GFny+642HzKAV2GQ8M6ApuhUSX+tN2qYV55yB7a5rU\nuFT/shjPi7Bxf4MJAaKpPY15K40ct6MHH9DhVS3su816tXZdjCyevSHJH3t6\nOR3ub+l4gIac8Sp+sUnHjKPGB3x2KjQUAA3Dmn+US2b8a5HxBcVIdsLWFIZF\nyjF75eJYwQbqNIodWMLmw2krD+1ISTk1Es7Cg8nv82iPQx189iFVbn3bFAum\nVyA8U8C10fNXwNsa2Sm3+Cc6WUt5VDcqh+rekj5qzZZu4/+ZExUeJhLiMUkG\n4S9CLzM7A331wLlvohidIL71hFyMFAoaNyz71Z5O1zsAaicpfZQd4CDgSZKy\ncWCjpkndmw+QyuHWOFtE1b1yx1gUzQvNsx23qWPSug7FXtCSlCKAN7IMUjBb\nok4BoETG6JJkxdj02ljynwdo/CnkK8pGQrko+gKv0ljFnAAfYCcv8VRAhWwv\nOC7e\r\n=rogv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4Hlv2hLj632VqL62Kn1pJ5UoTE8Fz+D42BxVOx3o0lQIhAPJnHdbfNpmpgVecnX6broN43f+nc5La08FPtut7s9+c"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.6c_1570524569283_0.5730420710267228"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.6d":{"name":"vue-tsx-support","version":"3.0.0-dev.6d","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.3.2","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"~3.6.3","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"5bf14c332160ce2baa821920a7cf51b43c153e5d","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.6d","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-gDo9Ch5spoZGZFclKU2l7OaFfNvMXFEtmD9MRZpWacFr/FtW0H2faVo8O9j1EXigy6Uh9GAcimV8NKqaqx/pCg==","shasum":"68ca4660cf6d9c63f017b733cf68863706a69cec","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.6d.tgz","fileCount":28,"unpackedSize":93345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnQi0CRA9TVsSAnZWagAAwjQP/2XUyhwdC+TwosYALahH\ngIzl3veTKsXwhbTiicB2M0E5bQpSNJb6MTOMrD1opiIDNdbaGSAipUEbmzoq\nSjJTozQSzQOgZir0MkpKaMMoZMEbiT/tKYjcNlPjBAHhxop0Azc/Pbbt2iVG\nuWtL9uL3WicY5ZfTlt+PdqJ/geZJsgx8j9SHl7VzQaFOpIyOgmHA+PzxiFn4\nf4116Jc+zl/c6xUhZx5jVUpcF/+x+DNmRq2bJGTwUcQh2RKEsHXoZedB0bsi\nrr028FDGLk9YmctMuEHWmSwtjPtjjnm0mbPGW132FeA+rIjYPmcFOIO+18/a\nK5QZ0rvDqlIX4w48S7raP/6SqLen9svk1GyL4ivb70DHELdVvwxKu0fn/7RF\nZQXQJheY66qROKllBG7Y1u645cgjR1onf9tKPG3LTt0q6VsGWZLnl5Qb4/Ru\ndY7A9hSw632bTDGDGJ3UUGnnAQYuzgn85rJ+s2IA9Jp6A1HZ+ZyPMYJNdEsK\n6ZD+HfTTyGqEjKyY4McdwHf+V9HrARbtyChb6w4ner35L62SIOvixOgp+HmF\noGlS77ThK/0s97qoMZBFwYiqwTZbwjUgpiuaIo/8p9P4PNXexUVpdW+c59Dy\nyzLt0Z8ikrGRXks599NVhb/h37LzsKaq3Ld++ztInQKciR6orbU7kXheq1ww\nHg5S\r\n=BTsJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX4Dn5qccGEM0fIyugSeMuXnfDc+oiDaeC9BAigI8IMAIgD+ag/1Lo2McogCdrPIFTG7R3PH2BhbdfJcX/HmwtYC4="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.6d_1570572467917_0.974754989645614"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.6e":{"name":"vue-tsx-support","version":"3.0.0-dev.6e","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.3.2","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"~3.6.4","vue":"2.6.10","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.10"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"a50662fb5b08229113c4b0e6249bb3af3ed511c3","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## Table of contents\n\n\n\n- [BREAKING CHANGES](#breaking-changes)\n- [Install and enable](#install-and-enable)\n- [Using intrinsic elements](#using-intrinsic-elements)\n- [Using custom component](#using-custom-component)\n * [available APIs to add type information](#available-apis-to-add-type-information)\n + [componentFactory](#componentfactory)\n + [component](#component)\n + [extendFrom](#extendfrom)\n + [mixin](#mixin)\n + [componentFactoryOf](#componentfactoryof)\n + [Component](#component)\n + [ofType](#oftype)\n * [Other attributes](#other-attributes)\n + [Native event listeners and dom properties](#native-event-listeners-and-dom-properties)\n + [HTML attributes attached to the root element](#html-attributes-attached-to-the-root-element)\n- [Options](#options)\n * [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n * [allow-unknown-props](#allow-unknown-props)\n * [enable-html-attrs](#enable-html-attrs)\n * [enable-nativeon](#enable-nativeon)\n * [enable-vue-router](#enable-vue-router)\n- [Utility](#utility)\n * [modifiers](#modifiers)\n + [Available modifiers](#available-modifiers)\n- [LICENSE](#license)\n\n\n\n## BREAKING CHANGES\n- V2.2.0\n - Disallow meaningless combination of modifiers(undocumented api).\n\n ```typescript\n import { modifiers as m } from \"vue-tsx-support\";\n\n /*\n * Below combinations are all disallowed\n */\n\n // repeating same modifier\n
;\n
;\n
;\n\n // multiple key names.\n // # what you want may be `m.keys(\"enter\", \"asc\")`\n
;\n\n // multiple buttons\n
\n\n // using key name and button togetter\n
\n\n // xxx and noxxx\n
\n ```\n\n- V2.1.0\n - When event type is function, vue-tsx-support treat it as event handler itself (to support events with multiple parameters).\n ```typescript\n type Events = {\n onOk: string, // equivalent to `(arg: string) => void`\n onError: (target: any, detail: string) => void\n };\n ```\n\n if you want to use function as a parameter, you must fix code like below.\n\n ```typescript\n type Wrong = {\n onOk: () => void\n };\n type Right = {\n onOk: (callback: (() => void)) => void\n }\n ```\n- V2.0.0\n - Support Vue >= 2.5.13 only\n - Support TypeScript >= 2.8 only\n\n- v1.0.0\n - Support Vue >= 2.5 only.\n - `createComponent` is deprecated. use [componentFactory](#componentfactory) or [component](#component) instead.\n\n- v0.5.0:\n - Rename `extend` to `extendFrom` (undocumented api)\n\n- v0.4.0:\n - The way to enable compiler check has changed. See [Install and enable](#Install-and-enable)\n\n## Install and enable\n\nInstall from npm:\n\n```\nnpm install vue-tsx-support -S\n```\n\nAnd refer `vue-tsx-support/enable-check.d.ts` from somewhere to enable compiler check. (**CHANGED since v0.4.0**)\n\n```typescript\n///\n// or\nimport \"vue-tsx-support/enable-check\"\n```\n\nor in `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"...snip...\": \"...snip...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...snip...\"\n ]\n}\n```\n\n## Using intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\n## Using custom component\n\nBy default, `vue-tsx-support` does not allow unknown props.\n\nFor example, if you have this component :\n\n```typescript\nimport Vue from \"vue\";\n\nconst MyComponent = Vue.extend({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n template: \"{{ text }}\"\n});\n```\n\nBelow code will cause compilation error because compiler does not know\n`MyComponent` has prop `text`.\n\n```jsx\n// Compilation error(TS2339): Property `text` does not exist on type '...'\n;\n```\n\nYou must add types to the component by apis memtions below, or enable `allow-unknown-props` option.\n\n### available APIs to add type information\n\n#### componentFactory\n\nCreate tsx-supported component from component options. (Partially compatible with `Vue.extend`)\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n});\n```\n\n`componentFactory.create` can infer types of props from component options same as `Vue.extend`.\nIn the above example, props type will be `{ text?: string, important?: boolean }`.\n\n:warning: all props are regarded as optional even if `required: true` specified.\n\n```jsx\n// both `text` and `important` are regarded as optional\n// So below 3 cases are all valid.\n;\n;\n;\n```\n\nBut `text` is required actually, you may think compilation should be failed when text is not specified.\nThere are sevaral ways to achieve it.\n\n1. Instead of `required: true`, specify `required: true as true`.\n This turns type of `required` boolean to 'true',\n and vue-tsx-support can know it is required in compile time.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true as true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\nFYI, [vue-strict-prop](https://github.com/wonderful-panda/vue-strict-prop) make this easy.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nimport p from \"vue-strict-prop\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: p(String).required,\n important: Boolean,\n },\n /* snip */\n});\n```\n\n2. Specify required prop names as second argument\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n}, [\"text\"]);\n```\n\nIn above examples, props type will be `{ text: string, important?: boolean }`.\n\n```jsx\n// NG: `text` is required\n;\n;\n```\n\n:warning: shorthand props definition(like `props: [\"foo\", \"bar\"]`) is currently not supported.\n\n```typescript\n// Does not work\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.componentFactory.create({\n props: [\"text\", \"important\"],\n /* snip */\n});\n```\n\n#### component\nShorthand of `componentFactory.create`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\nconst MyComponent = tsx.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n /* snip */\n});\n```\n\n#### extendFrom\nWhen you want to extend your component from other than `Vue`, you can use `extendFrom`\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\n// This is equivalent to `const MyComponent = Base.extend({ /* snip */ });`\nconst MyComponent = tsx.extendFrom(Base).create({\n /* snip */\n});\n```\n\n#### mixin\nYou can use `mixin` to add mixin type-safely.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst StorageMixin = {\n methods: {\n getItem(string name): string {\n return localStorage.getItem(name);\n },\n setItem(string name, string value): void {\n localStorage.setItem(name, value);\n }\n }\n}\n\nconst MyComponent = tsx.componentFactory.mixin(StorageMixin).create(\n // You can use this.getItem and this.setItem here\n {\n props: {\n name: String\n },\n data() {\n return { value: \"\" }\n },\n mounted() {\n this.value = this.getItem(this.name);\n },\n render(): VNode {\n return (\n \n );\n }\n }\n);\n\n// You can add 2 or more mixins by method chain\nconst tsx.componentFactory.mixin(FirstMixin).mixin(SecondMixin).create({\n /* snip */\n})\n```\n\n#### componentFactoryOf\nReturn componentFactory with additional types (events and scoped slots)\n\nIf your component has custom events, you may want to specify event listener.\nBut below example does not work.\n\n```jsx\nimport * as tsx from \"vue-tsx-support\";\n\nconst MyComponent = tsx.component({\n render(): VNode {\n return ;\n }\n});\n\n// Compilation error: 'onOK' is not a property of MyComponent\n console.log(\"ok\")} />;\n```\n\nIn such situations, you must specify event types by `componentFactoryOf`\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface Events {\n // all memebers must be prefixed by 'on'\n onOk: () => void;\n // If event handler has only one parameter, you can specify parameter type as a shorthand.\n // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`\n onError: { code: number, detail: string };\n}\n\nconst MyComponent = tsx.componentFactoryOf().create({\n render(): VNode {\n return (\n
\n \n \n
\n );\n }\n});\n\n// OK\n console.log(\"ok\")} />;\n console.log(\"ng\", p.code, p.detail)} />;\n```\n\nYou can also specify types of scoped slots if your component uses it.\n\n```typescript\nimport * as tsx from \"vue-tsx-support\";\n\ninterface ScopedSlots {\n default: { text: string };\n optional?: string;\n}\n\nconst MyComponent = tsx.componentFactoryOf<{}, ScopedSlots>().create({\n props: {\n text: String\n },\n render(): VNode {\n // type of `$scopedSlots` is checked statically\n const { default, optional } = this.$scopedSlots;\n return
    \n
  • { default({ text: this.text || \"default text\" }) }
    • \n
  • { optional ? optional(this.text) : this.text }
  • \n
;\n }\n});\n\n// type of `scopedSlots` is checked statically, too\n// 'default' is requred, 'optional' is optional\n p.text\n }}\n/>;\n\n// NG: 'default' is missing in scopedSlots\n p\n }}\n/>;\n```\n\n#### Component\nBase class of class base component\n\nIf you write your component with `vue-class-component`,\nyou can it tsx-supported by extending from this class.\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\nUnfortunately, you must write props interface and props definition separately.\n\nIf you want, you can specify event types and scoped slot types as 2nd and 3rd type parameter\n\n```typescript\nimport component from \"vue-class-component\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps {\n text: string;\n important?: boolean;\n}\n\ninterface Events {\n onOk: void;\n onError: { code: number, detail: string };\n}\n\ninterface ScopedSlots {\n default: { text: string };\n}\n\n\n@component({\n props: {\n text: { type: String, required: true },\n important: Boolean\n },\n /* snip */\n})\nclass MyComponent extends tsx.Component {\n /* snip */\n}\n```\n\n#### ofType\n\nMake existing component tsx-supported.\n\nIf you can't modify existing component definition, wrap it by `ofType` and `convert`\n\n```typescript\nimport ThirdPartyComponent from \"third-party-library\";\nimport * as tsx from \"vue-tsx-support\";\n\ninterface MyComponentProps { /* ... */ }\n\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\nOf course you can specify event types and scoped slot types if you want.\n\n```typescript\nconst MyComponent = tsx.ofType().convert(ThirdPartyComponent);\n```\n\n### Other attributes\n\n#### Native event listeners and dom properties\n\nSometimes you may want to specify native event listener or dom property to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this.\n\n```jsx\n// NG: because `nativeOnClick` is not a prop of MyComponent\n\n// NG: because `domPropInnerHTML` is not a prop of MyComponent\n\n```\n\nTo avoid compilation error, you must use kebab-case attribute name.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nOr use JSX-spread style.\n\n```jsx\n// OK\n\n// OK\n\n```\n\nFor native events, there is an another solution. See `enable-nativeon` option.\n\n#### HTML attributes attached to the root element\n\nAnd sometimes, you may want to specify HTML attributes to the component like below.\nBut unfortunately, `vue-tsx-support` does not support this, too.\n\n```jsx\n// NG: because `min` and `max` are not props of SomeInputComponent\n\n```\n\nTo avoid compilation error, you must use JSX-spread style.\n\n```jsx\n// OK\n\n```\n\nOr enable `enable-html-attributes` option.\n\n## Options\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n## Utility\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\nMIT\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.6e","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-AkiSmTpl0IOn5jHwv5zLZq6p3aQHaDu+ojN3ksCft5ELUdk3f1aiH8NPDDbETxbdeJ7UorUN5fQmMlleFEQ5EQ==","shasum":"98aeecbb9846b32716e1d22c02176ab59f2381cf","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.6e.tgz","fileCount":28,"unpackedSize":94124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpfmNCRA9TVsSAnZWagAA41EP/2HeJ1VmFZXhJnBQz1y6\nhbE7NvF6Odl5ZVbLsDD6S/hIKkm2HYEKhkT4CTC5RzcEPGNSB0Ute8+UXsgg\npb6GKHnr3PmQHUPMuXjORweVLNFfrFCUWUZeig1+TKIbah460AjkB/Foy+oJ\nuzy7vpsEDevv9G/keDqZcqLA7mnWzL+QQoGi8O9HyeP6ZkKcBUOwmJ5GS3kl\nkfVWT1Sw6arpLWIZZUuFhLGXvOy5JVCdjj7Cg8cJzKdfRdlCsUJYnqLpCZqC\nLFqZPTFUykpMlCGebJYvqnGnaxBZ+1D4JMgY3uAtuOku5XzKv5FmTzN1ijmC\nqLUVhB5yO53k8eJ4CeDu0dEppa1WLMzBIKmYgMwDa6oTdkO2AWIpv5C+VMLc\nJXMMKs4XTKmBscYT9oNYA3R/qBLuzMMQTYpjv0IcGKYE/HkEHn9lYOn6rhnU\nk5lQ5dPkcrnebzTNxiE4M3D+6BSu1WtJCuKz/epbGIqPra62alY95sK05yYl\n0SaERfucMNDACvjduXYllzfOrQhoOA340MnCCfYakfS4nrSjSshwPXTUOQmh\n5xUmgKXfm323Sbapga150B9SE100v1CQukLxDxcg/FKbLGZbBZJQjLDFOPce\np6rUdCjA6+7nunc+u9BIP/+ewjIiweMbwwCaZKIJPmBPWGwJC4xjCfl3LuJf\n8bEr\r\n=Pmd5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtrmSvZgDRJsA2Q5w6dRQvhBTwHMXGIFs4ihDZAFaBmAiEAuil9NL/o2J22WcZrETf9+KfXMGCAXQ0TP6rUijJ2cuQ="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.6e_1571158413033_0.27872064495101934"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"2.3.3":{"name":"vue-tsx-support","version":"2.3.3","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test/jest}/**/*.ts\"","prettier:fix":"prettier --write \"{src,types,options,test/jest}/**/*.ts\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/test-utils":"1.0.0-beta.25","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"3.7.4","vue":"2.6.11","vue-class-component":"7.1.0","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.2.4","vue":">=2.5.13"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"ca1293d47d951d87d3d6a5a80a0f8f0c2679e923","_id":"vue-tsx-support@2.3.3","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-4pwCgTH8XyZcBD1Jo/SalVE+iDQdyouwWuBkK/dZ3rHIRSd/rMdmYSjfJlKTl1EjlsEbTSafU/FAtgNZu4buVw==","shasum":"234603ce7d15d6a93aff7049622b3857250bcf47","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-2.3.3.tgz","fileCount":25,"unpackedSize":83886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFxt7CRA9TVsSAnZWagAAeD4QAJUcVBQmuW4OZB69SqlW\nN3/RTT6vg/NgFN5RzmwC4/BtfzOuJCLyPJTmLZ6lHkU5xkpw7+rw5gLe1lCP\n/yGs9xMZP858mXY8mHyxYkEcekZf9WRaBkwprox+K8VK1o96zdy1VAp+Jvkz\nZhP1Lhd7repG9HmMxNrGroNvCdlVNjBz81NksrGWLQed5SWBzl6O6/komJoq\n3GO4TiOR5Y47cpPBV6Y79IOPadU2HcWB9H+dKYY7TmEzFAI3nGv7c7HdwvnM\nNmXBD3sB2812OgphoxxvE59UPQugunPJZesmFJ85Pc6BEB5eljPnyw24tM57\nluBuN8izUa8kZxhIh8onkIDx+toIcPtKaFHZYmOiftfzslTMWep/tUW0uN7z\n2sEbeOyqwGH6ueM6uTZgaYCxdbQ9/sx8FApDeR4qqcmsSEmJc5O9fNpHyX5C\nOPLfePJTy3VyCVJUpxGslhUprPgG5DcUx5g8/HG43ZWFe26p12zTANYqiiMa\noUw5UI06WjWjPHM/81E8uUHfSyWlNrprnWfJMpq1YnaadKQ5bqydJYnPU8Of\nb5f/1I99UgIQjLrvVUJ8MeIgwhBjIN9TYBjMW6fpOXnycDgVFO3IvQyrasAc\nG9dXDiaAMR1tSbv0ZrdK/PQ6Pv2AfM//ScIF89CAM0XQNTVcxERGRF5EXISY\nrT36\r\n=CZ8n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlWyPKiyJbWRfdXeRj0p0nJJL3HMX5bj+SFKvMrDJ3BAiEAgSPs8ScKjtNCfEjZ9pjD8EW4h3WFCLcrwuX0M9awR/0="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_2.3.3_1578572667409_0.6671419985463602"},"_hasShrinkwrap":false},"3.0.0-dev.7a":{"name":"vue-tsx-support","version":"3.0.0-dev.7a","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^24.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.3.2","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^24.8.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^24.8.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^24.0.2","tsc-test":"^0.2.0","typescript":"~3.7.4","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"94707c516925babe66839b602567f765e679de67","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\nvue-tsx-support is a type checker for TypeScript, not a transpiler. \nYou must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\nVue CLI may help you.\n\n- [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n- [Vue CLI](https://cli.vuejs.org/)\n- [vuejs/jsx](https://github.com/vuejs/jsx)\n\n:bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n // slot name ('row') and argument types are statically checked.\n { this.$scopedSlots.row({ item }) }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `tsx_` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nIf you want to use composition api which will be introduced by Vue V3,\n`@vue/composition-api` and `babel-preset-vca-jsx` may help you.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\n## OPTIONS\n\n## APIS\n\n## LICENSE\n\nMIT\n\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.7a","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-1/cTOP4UjIoOqnCjJ2cI2b+dVb7OSbaz+3Vwagm+RqXsI3qgflLAj/p7N45vbe/3lRF+ZHq7tOBF7NuMKAYzzQ==","shasum":"886d8d5738c003583047772717fffb1770d5806e","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.7a.tgz","fileCount":28,"unpackedSize":106965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeG9TcCRA9TVsSAnZWagAAUDIP/jl+sjqoWhNktCwPluGy\nQecRNOGyskq5ucVSAWhok8XHFOetvDF5xI4JZ3zbNfJ7UelZBEKphl0qt9KH\nQd5/iavqzDCbOL14gLjC1sfpssKDdEw3ti90A59ld+rovV8CqIDznJGqlk5F\nbYGodDy1QmR8vHHOZLTn/fU6cEt8TulNmpO6lcg/vhhN60e4PElhO/NSkd8v\ntG9Ln2dsJ3go7Y4LcB+7fhz6cZ+cOboo6ANUJJEsCnahq92l/f5+rgDYMVIU\nczbuJnJ9W/ESqFk6G1Wcl/zgN08Ck5zAMiaAKvWHk8vGrDwiIM19TEXx5vcj\n7pHXLXcIGcnxz9q23FPrcRZnUgMj2ob3rXHNWr2EvdH0NZeyqMTrarvNf0Mc\nMV5F+SBgQgE0Kel94HIqPhGg662gqV/PSC58iEaZChB7Z3BHIYA7h4UT1ZRt\n3mrosmezDSM29vqxtAaGsNboqGR6ytqdVupW4LiU51BxLEilCmCZQEbg8WLX\nqYJLZvu+WXdOJVbn5rZ7KEI51Ul1hcjOQrRkoaEkpww2+fBYgIvvzQnb6Wsv\nP84/U3MCXzIsbEy/VzqnnffTJU7GzNuyluclz7ZIM6DqJExhjuV7rvDPAt/G\nYX/K5PPLzaSEqUw5qyaSKuCq8lfDt7nWJykLxpZbgpQqPpUdVZeZu61acDaC\n+7lF\r\n=kz6Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWbIwmqVlpXaOxyINoL8JLRsUlzdRisN84v5uvlcGzzAiEA1PkjDrrtgJbkzZQcJdUYQl9BJheR2s8rSIxgLNTFuuY="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.7a_1578882268269_0.7347596012811983"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-dev.8b":{"name":"vue-tsx-support","version":"3.0.0-dev.8b","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^25.2.1","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.5.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^25.3.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^25.3.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^25.4.0","tsc-test":"^0.2.0","typescript":"~3.8.3","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"0066c37993ead6f3b02d1f227e3cc382a3a01408","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n // slot name ('row') and argument types are statically checked.\n { this.$scopedSlots.row({ item }) }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `tsx_` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nIf you want to use composition api which will be introduced by Vue V3,\n`@vue/composition-api` and `babel-preset-vca-jsx` may help you.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\n## OPTIONS\n\n## APIS\n\n## LICENSE\n\nMIT\n\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.8b","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-oWj/hfvavCo5a3OxHKYsAcYJxcIJ3kt3WDu9utcq5pENAdZC8SZRV4k2WvQKUjsLEXgBJOEmYVxo3l/A9Cm60Q==","shasum":"3ab31afda79e84b28cf7effed786095aaeefa230","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.8b.tgz","fileCount":28,"unpackedSize":106997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenYVqCRA9TVsSAnZWagAAgXMQAI+FN6yy4flq2MWGl2xi\nMcc/PBoyV02ILh04l5b3wlHr5ru2iOYvbAXJf4PWQmpR/xtTvBPhOiNvxAYN\n6575ykbbw5BhhUsh0iAOCb7BKdpJL5+dU8NIqgPx1HqRq8LM9yrIfOSfAHXk\n7YB/QKh5vKeZqZb1z5fZl4TSb9v9UPcsiizSV1zB1918XMZ0acCfJNh5HoLR\nvcbjdClr9RylWLiPfhG+DYppgphbbrUism6QdePqRKjU1hsxRRL/RP7/3J4d\nHlQLBafOoWi/Fwk+qfrvVzJpi8JRi6lh+NTrCTIZPkxUjpNJ8lxz5ssaj68O\nNDBYrhBozVo8yK6KBO4d8qtrI51xeo6gjpYMZ/HcNPJgFvJOJSLjhCe7FfZx\n8BqfsskQS4dGeuX4hJDht8CS4jhonHwcyihqUWmXNMCcuAEAw2QnXRC6yzR0\nyllAR1yvxBpC0aelBAqzVDiMPb1VmvoLISNTi2ahCEmHfniQWpWD3sGh3iBK\nzW3jA4zTs5V3irwp/bcMdhdGog5LZFqsONu7JBsK3dT+b3hQ5byPX5UeDOL0\nSlPUcyjOyV6YYaMcpzG+K1GV5GQhnPxpcJKon0HwE1Wv5v4vpsP7RkZ7T30Q\n2A2IjHT1ZRQ8ouO7EKOcV4t3yI058JLyVDxdDNfKkORGlW/N76cTzAPqHENQ\nfBHs\r\n=Y6Sa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEhpwhO1vLYgqFKNpe3JN8RXA4du9auG/WeEIIJkeyWAiEA7EjOBxSkFvzApYpiMOvBOG/ZmE4D5J9U4IfOeJQR/gk="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.8b_1587381610069_0.39528731325557076"},"_hasShrinkwrap":false},"3.0.0-dev.9":{"name":"vue-tsx-support","version":"3.0.0-dev.9","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^25.2.1","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.5.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^25.3.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^25.3.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^25.4.0","tsc-test":"^0.2.0","typescript":"~3.9.2","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"70c8dea3b291b294c1eaea89e9f8461a625c148f","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nAt this point, `vue-next` is not supported, `@vue/composition-api` and `babel-preset-vca-jsx` are needed instead.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-dev.9","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-xrTe2PcAMFR8s3hQ3Wba4UAn2goCsIKL515MO9ukXs6eVI2YwL9p6KXS+576nm2h4MS6GWPE/hVtogYyrgDnqA==","shasum":"48e246cf25ffe977f7274c01cf231941c63ed4de","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-dev.9.tgz","fileCount":30,"unpackedSize":95925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu40vCRA9TVsSAnZWagAApmkP/RO5lzu22M0nPmtEJv9I\nf5enWyTUC1pREujwYVyDkhxT/QD+CySHSJkwvEJOYWAeCZUEQt+RnFS6/NZU\nJXpzhhvhi9tbE5YuGxF2r7mrYcCwrW9mjUv2RZiNzwkl6a95FdePUPkdalT/\nnu6oa5jk3jtEDrkz/BzDGN7QFELexN6LGSScl+KqUA9mV7YCv5WX9WNg1qTR\nlPTwEFBR2FDkAidV/mFD/LmYZtx3fyDNv01SGePTw3k9LQjoQcW0SY9x7XnM\n7lBRCvh8F4iik3bFg7tQu68JO7f+bNY/gL7gUI3OIHRrZlg9a0ffGXet5Uqm\nE2bjfCj5C1JMyNvFrWkhDy0r1+2gUMndIsqz278pGZeHN/p1+PKZjSIMBQsV\nReYMNw/oPURhRNTStESm/4/oou8qPlD8qUO6QBUkPDbOyYLwpNs+QquygRjl\nKTVBr0KO5aMfj/cctkfPEIpgmmanb1EyMtwx0sdzZ/c4OySERoWuE/hL3akd\nDP6KfEzXMoxS+C03dEDfP0AehBBubGMOISsWp9YEkJLwoBIeJKDcXjJHGsPn\nBLqwA3qyiZYgPtOxkRq29IHORfXQvsqXD3jxmcmEQsnEXHl3XIU48TxdmxTV\nb7XwkBqhqpV+iZSW/wgndT7MuiMhxmOgQe8TIFs7HnepHjyKqtQwX3YXkkpP\nLPyJ\r\n=73i6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdcgvpwmY66L/g2zWWjgUuoUqXUdAPHIh4UYL8FE3lsAiBsVKH/btUc61CspYXbRt2TMkyv6ZU8eXNL3B3x6DUZNw=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-dev.9_1589349679043_0.9123841920935547"},"_hasShrinkwrap":false,"deprecated":"3.0.0-dev.* is deprecated, use 3.0.0-beta.* instead"},"3.0.0-beta.5":{"name":"vue-tsx-support","version":"3.0.0-beta.5","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^25.2.1","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.5.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^25.3.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^25.3.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^25.4.0","tsc-test":"^0.2.0","typescript":"~3.9.2","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"35b5fd840848daec2bc06a3719f86d384444b549","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nAt this point, `vue-next` is not supported, `@vue/composition-api` and `babel-preset-vca-jsx` are needed instead.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-beta.5","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-KDh5Ue8+uRYeRNEPpQHqy+/2mNWoygqYXIPA1Yfoaqj/kP7Cp7eOUqCFlLwW4V1v+i9/xhZFlBNi7Ba1q6HWSA==","shasum":"a5a1b643b31738a18fd9ebad33e6d032ef9696f0","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.5.tgz","fileCount":30,"unpackedSize":95926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevKLKCRA9TVsSAnZWagAAo5gP/ik/Fru9HUSH24hAFTVp\nuzvkArvdsGTse/qW8PufK38xLv8LbNCbfDCpfs/3JKSRcuHYpcgSA9mt9Jql\nkRPvOquOY9YZV9TZS94FY9aworVNFslVZDwuyqVeStoBjxngjXVcOvKeB8+9\nner/o1Aobr/FL52tltTylMtWFsfGYIF8/7Jc5bWrImbes1PrzkR6/nDMd8fh\nnetwVwm2AnIJhvTij2BrP4ort5SFWRwd2igukDLcpuRGjyTSDKZLzhwIeRjb\nxVtKUGE1mY0t8zcpZXJUFS64qjxWRHdyvyGweIAU5/uDdMwKDEwhMgvlZR5v\nfDb8LKna3w3LgROCaFdrBeRZDfbt3ofchaZWD5myLOUbXMJiso6jL2lZP/mx\nm4GtVUfM30/mdQ5rU6SVvk3f6PkvYft4RV1NuHMCZlAKIzgY9dIYK2iEkkGW\n/y2VLHZX0zJvM5uMh2icjLEIdBc7mW3GEgvK3tFwdt6IjMI7uX/HiYL1CUWG\nfP1RLPld/O31Yvf3H3hT5XdQacXvX9EtkPsFQ3OpQMaaPPh7+jj5UrQpiCln\npcgfWud+7515+lPFT1pvhn+SDVWN2WA6N6WG6UAtEthcXF7KTQztgrDJiD4k\nQyD2esgvwQt6bbbWJW6rWmDxNnflr3OMsYidvJq5rebXnQl0kB3qXNxiujZ6\niMCc\r\n=v+Ed\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhFmX/dvv9odOM9yfQqZQqW+JL7YSN1eGUFO2c/hFMNAiEAn/JBwWxI8ciSyj/7sl7w2SlDoANkgi3Uzp0emBIwIhc="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.5_1589420746039_0.31483932529159087"},"_hasShrinkwrap":false},"3.0.0-beta.6":{"name":"vue-tsx-support","version":"3.0.0-beta.6","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-syntax-jsx":"^7.2.0","@babel/preset-env":"^7.5.4","@types/jest":"^25.2.1","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.0.0","@vue/composition-api":"^0.5.0","@vue/test-utils":"1.0.0-beta.29","babel-jest":"^25.3.0","glob":"^7.1.2","hoek":"^5.0.3","jest":"^25.3.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.3","prettier":"1.13.7","rimraf":"^2.6.2","ts-jest":"^25.4.0","tsc-test":"^0.2.0","typescript":"~3.9.2","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"0b56166f6f6d7e6ca2e6597229c34ff3bbda3f99","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n\n- [vue-tsx-support](#vue-tsx-support)\n - [:warning: CAUTION](#warning-caution)\n - [TABLE OF CONTENTS](#table-of-contents)\n - [NEW FEATURES](#new-features)\n - [INSTALLATION](#installation)\n - [Migration from V2](#migration-from-v2)\n - [USAGE](#usage)\n - [Intrinsic elements](#intrinsic-elements)\n - [Components](#components)\n - [Make existing components tsx-ready.](#make-existing-components-tsx-ready)\n - [Writing components by object-style API (Like `Vue.extend`)](#writing-components-by-object-style-api-like-vueextend)\n - [Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)](#writing-component-by-class-style-api-vue-class-component-andor-vue-property-decorator)\n - [1. Extends from `Component` class provided by `vue-tsx-support`](#1-extends-from-component-class-provided-by-vue-tsx-support)\n - [2. Add `_tsx` field to tell type information to TypeScript.](#2-add-_tsx-field-to-tell-type-information-to-typescript)\n - [Writing component by composition api (`@vue/composition-api`)](#writing-component-by-composition-api-vuecomposition-api)\n - [OPTIONS](#options)\n - [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n - [allow-unknown-props](#allow-unknown-props)\n - [enable-html-attrs](#enable-html-attrs)\n - [enable-nativeon](#enable-nativeon)\n - [enable-vue-router](#enable-vue-router)\n - [allow-props-object](#allow-props-object)\n - [APIS](#apis)\n - [modifiers](#modifiers)\n - [Available modifiers](#available-modifiers)\n - [LICENSE](#license)\n\n\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nAt this point, `vue-next` is not supported, `@vue/composition-api` and `babel-preset-vca-jsx` are needed instead.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-beta.6","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-WrQemM3/UBuVq/xosFtzltYq22Wz7pkNjDypy74jLIu/ABkW7O2RLEea+oYQCovblVyDaFArBj2UWrTIACbEDQ==","shasum":"3cc02cbc109c6b84c287cbac3184c8eb92484cf1","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.6.tgz","fileCount":30,"unpackedSize":97638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevOU7CRA9TVsSAnZWagAA8U4P/jZr5LETVuzr+f3HS8Yy\nxiEyrqMd92qEyXUH4JkEKIX8VPa9idfmypn5IY/mGxUuXyH2QwmFqCCWSMfB\nZKAXaKptGVhhHC6PI+SgobNDhD0qk0SvkH0wqOF0T2vyfhGl6hqSN29NX+6O\nuWltcLsLRtwaEfDP+AoLDkckVDAMeOmyJW4Q9IFnSuVzgQvqsvJSUqWJIldj\nU0itSTDx+T+7OsWhccrvFWOk9l3mWwboMALjFeBm+XcxixO2lgCDmYhSBtV+\nNvVmONVIuaMbKbjTo7C8qG5igJe/9/gFXXN1X8tWfaXruOlhklVqM03qk6YO\nnmk932NakLoEzaexQ/I0h4OhXMhA6ubHVCPR15gRCaeFOmgUQa+ja69Yl8s6\niA9A0VmIa3ySqhLoOll111wQYhzcA9msviQh2UCxHkiomKuscPPyukWt4v3G\nLmvYyOi5zD06nFmEW6ML+onP5ONmD5fnWQ16/MG+PAi9aIZIWuI0o+a2LS5l\nKaTBS4Kt9Jbmieps6eh2gXeTY1TNwTo0WjY3vvumDt6ZmFDHvWiVLQTDXhjz\ne776+nqEAbCWIZTB4q2IeUrRm9VV6R3NiYe6Ah2gxk/DhO+cA/sdvdSNmty5\nY8YIGROAIq3cJd6Ht0x1qyOgcBAhINTaqmO1wf3bYtS8o8a1ih/wJnB5SS+u\nqYFB\r\n=Lr7+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpZcXf/5eemrgu8MzRiWnmo6QUla32qBAH2grT9Lw0KAiBiolWpvxw8v4GTWObFTI380wHEWrHVzeEibXYYcDXJ4Q=="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.6_1589437755238_0.09272847587697086"},"_hasShrinkwrap":false},"3.0.0-beta.7":{"name":"vue-tsx-support","version":"3.0.0-beta.7","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-syntax-jsx":"^7.8.3","@babel/preset-env":"^7.9.6","@types/jest":"^25.2.2","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.1.2","@vue/composition-api":"^0.5.0","@vue/test-utils":"1.0.2","babel-jest":"<26.0.0","glob":"^7.1.6","hoek":"^6.1.3","jest":"<26.0.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.0.5","rimraf":"^3.0.2","ts-jest":"^25.5.1","tsc-test":"^0.2.0","typescript":"~3.9.2","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100,"trailingComma":"none","arrowParens":"avoid"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"686ed67c0bb2c3ce282b71748e1f1f40b8b4ffec","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n\n- [vue-tsx-support](#vue-tsx-support)\n - [:warning: CAUTION](#warning-caution)\n - [TABLE OF CONTENTS](#table-of-contents)\n - [NEW FEATURES](#new-features)\n - [INSTALLATION](#installation)\n - [Migration from V2](#migration-from-v2)\n - [USAGE](#usage)\n - [Intrinsic elements](#intrinsic-elements)\n - [Components](#components)\n - [Make existing components tsx-ready.](#make-existing-components-tsx-ready)\n - [Writing components by object-style API (Like `Vue.extend`)](#writing-components-by-object-style-api-like-vueextend)\n - [Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)](#writing-component-by-class-style-api-vue-class-component-andor-vue-property-decorator)\n - [1. Extends from `Component` class provided by `vue-tsx-support`](#1-extends-from-component-class-provided-by-vue-tsx-support)\n - [2. Add `_tsx` field to tell type information to TypeScript.](#2-add-_tsx-field-to-tell-type-information-to-typescript)\n - [Writing component by composition api (`@vue/composition-api`)](#writing-component-by-composition-api-vuecomposition-api)\n - [OPTIONS](#options)\n - [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n - [allow-unknown-props](#allow-unknown-props)\n - [enable-html-attrs](#enable-html-attrs)\n - [enable-nativeon](#enable-nativeon)\n - [enable-vue-router](#enable-vue-router)\n - [allow-props-object](#allow-props-object)\n - [APIS](#apis)\n - [modifiers](#modifiers)\n - [Available modifiers](#available-modifiers)\n - [LICENSE](#license)\n\n\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nAt this point, `vue-next` is not supported, `@vue/composition-api` and `babel-preset-vca-jsx` are needed instead.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-beta.7","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-mla6xQZGGV3zzSxn4b9gmCeOHf+nrfzizuqQFIUd14EYEwN+Y5pVQb9OW/IvjrJ2Q2qOH/uIkcegdP1BuGNd9A==","shasum":"63be5cce72c2b5fc0c9525f14b02a4fae8b441dd","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.7.tgz","fileCount":30,"unpackedSize":97690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevPmxCRA9TVsSAnZWagAAoiQQAJd/6fGkdE8mKJ/TibQF\n/pK3uj6yYdh3b8TTKAC6m0VS4RiZ8iYgjyG47C39GG52lskEC0hGKQLdDRxU\n2iTuTG73L+vtpV/hNor9+2LkN6P4YE/M/ck9XBcba6cd151g0/NH0vzJnJZh\n2/BdB5N7eG3NK0lN1b3wAzUsq0LIW5HMTVjrnJ0eC06Ur83luZuQ3uM/fTNA\nq7lElT+wgGhbIs6QqPyGTPyrGKksRWB/rPKKtNzKVSnuMxnSJPU+8rSVkKYk\nA+ezajBK/p7KYus4lOERXjGdyzNOkBJ699TOu/ACtT+NBfWdrKdSxlOa/3b0\nnrQYOPew2vrnk2lKTpmFld/X9x/BkBxGI4mlQQ27zgccTNJm9M9YSVlaAecX\ndXr6PaPCz4Cma9tp74xS3SNozO1EK4j2T9rxO81e5dZ6v7UGw0eDU9mJcUw7\nWQc+gUFfgRvCr+1a38Jo9xkOv5qs0k2y0YVMcHav88YPfKGuxsuf2nMGolJm\nRKlf91yWKlO9wIyXUA9LjV4oVEGuETuVGJdSvcrtSmB98ZgYZMG94hCh1Msg\nMobc9PNgXra2IgZREyYH15SALBnxU4kjloPwO/EDzChW/ufRyTlOf2eUmiIO\nG51uM12k9psYTltbp+v8QIGJPHjx3Tw6X71ZGi9i/zSN3UOn1n/WO+j5wpJb\ngaM5\r\n=mTtC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOxp28j1GmYG4v4TdlcRjWvSWju9bqe4OeSICZxcHvnAiEA4McQf8eh4+S/WviNc/z+Mfso+ZaqlpS0pXi6K0MEmYY="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.7_1589442992894_0.0830782456351078"},"_hasShrinkwrap":false},"3.0.0-beta.8":{"name":"vue-tsx-support","version":"3.0.0-beta.8","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-syntax-jsx":"^7.8.3","@babel/preset-env":"^7.9.6","@types/jest":"^25.2.2","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.1.2","@vue/composition-api":"^0.5.0","@vue/test-utils":"1.0.2","babel-jest":"<26.0.0","glob":"^7.1.6","hoek":"^6.1.3","jest":"<26.0.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.0.5","rimraf":"^3.0.2","ts-jest":"^25.5.1","tsc-test":"^0.2.0","typescript":"~3.9.5","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100,"trailingComma":"none","arrowParens":"avoid"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"729859e81913d2fffff0fdbe3eda8f48afc3c67d","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n\n- [vue-tsx-support](#vue-tsx-support)\n - [:warning: CAUTION](#warning-caution)\n - [TABLE OF CONTENTS](#table-of-contents)\n - [NEW FEATURES](#new-features)\n - [INSTALLATION](#installation)\n - [Migration from V2](#migration-from-v2)\n - [USAGE](#usage)\n - [Intrinsic elements](#intrinsic-elements)\n - [Components](#components)\n - [Make existing components tsx-ready.](#make-existing-components-tsx-ready)\n - [Writing components by object-style API (Like `Vue.extend`)](#writing-components-by-object-style-api-like-vueextend)\n - [Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)](#writing-component-by-class-style-api-vue-class-component-andor-vue-property-decorator)\n - [1. Extends from `Component` class provided by `vue-tsx-support`](#1-extends-from-component-class-provided-by-vue-tsx-support)\n - [2. Add `_tsx` field to tell type information to TypeScript.](#2-add-_tsx-field-to-tell-type-information-to-typescript)\n - [Writing component by composition api (`@vue/composition-api`)](#writing-component-by-composition-api-vuecomposition-api)\n - [OPTIONS](#options)\n - [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n - [allow-unknown-props](#allow-unknown-props)\n - [enable-html-attrs](#enable-html-attrs)\n - [enable-nativeon](#enable-nativeon)\n - [enable-vue-router](#enable-vue-router)\n - [allow-props-object](#allow-props-object)\n - [APIS](#apis)\n - [modifiers](#modifiers)\n - [Available modifiers](#available-modifiers)\n - [LICENSE](#license)\n\n\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nAt this point, `vue-next` is not supported, `@vue/composition-api` and `babel-preset-vca-jsx` are needed instead.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-beta.8","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-39r/Pxoic24Aoh2y0I3Mg81OploTpNBkrEMXpkEeMrJneKhyZqVFSFhi9Wj7rlDzYUajrZ3YZI5rw1oBc2uvoA==","shasum":"7e9ea317f311025bbde5c7b4fbb8d3530aaba988","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-beta.8.tgz","fileCount":30,"unpackedSize":98027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ZCHCRA9TVsSAnZWagAAU3gP/jxk6Aky9lAD/02qyX60\ny/uciWJxoLM3Meaeb6j75QO8wsxZMylUwI8YhIEUYDuFnjECSspXfPiP/X1/\niflKP/gyVI5M3gHutqUtBWhHElq9YGJPb9Z7YqCqi/v0LXMD98BZvVHsJbQb\n5KIvyIMM9InLoj/st3ZVueaTxwPG2wKSQVVmIltOhf333TfHYQo1WDaYKIY0\nenVUeYxWwY51ow9AYjLN6Pd1pPSbECBmgZlAsGEWMaPH+j88Ao9juSh6lEsT\nP0wBSLqTUeSY7Q8AzE+84FFjQXcENS1r5ZLuC7x2yQy83HbqvrA+4YnbtWMZ\n6jV+H2TPjwNJWUaRHVamfKSeF+l+VZc5Z9FKDgyQ2okyowXZO4HePJKp7/P6\nESMXZVxBJUeAfymiXy7uDgzk+3jlvOLloXg6QLbDr0GWan/dvScRBhj8GUv5\nMTfL6zkcZuZcnI0OCh9HH+pf1Q+7EFj6ny92FHQ5RJRUe+Vm4ExM5YmZ/U5N\ncrHPi0n3Sk7AkkBXhtaBH+5iqlJK96aQIJrGNqw7qwE9FlggcpoV/jbHUJxw\nvrk68z1RaomI8M/PP8IqUIudjm5nTfF8tTq4nYZiO8Lo++CChOJS+nUCprwy\nXZoxVSdsj0rBsck3iCeaCH33GiqxsBYbX5MlQ+tw4nodOXtskeC+0vWbIahR\nltT3\r\n=D1y5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9o2DNjksHnUKfQGD763Pai7aQEDrRH3VUXhcGikj5iAIgOiDQW7nPvQDZq6ns9ZAVcofLcFim2N9RDYGt0Ux6Udg="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-beta.8_1591578759124_0.8170341896019853"},"_hasShrinkwrap":false},"3.0.0-preview.1":{"name":"vue-tsx-support","version":"3.0.0-preview.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-syntax-jsx":"^7.8.3","@babel/preset-env":"^7.9.6","@types/jest":"^25.2.2","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.1.2","@vue/composition-api":"^0.5.0","@vue/test-utils":"1.0.2","babel-jest":"<26.0.0","glob":"^7.1.6","hoek":"^6.1.3","jest":"<26.0.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.0.5","rimraf":"^3.0.2","ts-jest":"^25.5.1","tsc-test":"^0.2.0","typescript":"~3.9.5","vue":"2.6.11","vue-property-decorator":"^8.2.1","vue-router":"2.5.3","vue-template-compiler":"2.6.11"},"peerDependencies":{"typescript":">=3.5.1","vue":">=2.5.13"},"prettier":{"printWidth":100,"trailingComma":"none","arrowParens":"avoid"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"920bbc59a69efd5874316e7a388bf7498bf8abeb","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: CAUTION\n\n__This is the document for beta version (v3.0.0-beta)__\n\nStable version is [here](https://github.com/wonderful-panda/vue-tsx-support/blob/v2/README.md)\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n\n- [vue-tsx-support](#vue-tsx-support)\n - [:warning: CAUTION](#warning-caution)\n - [TABLE OF CONTENTS](#table-of-contents)\n - [NEW FEATURES](#new-features)\n - [INSTALLATION](#installation)\n - [Migration from V2](#migration-from-v2)\n - [USAGE](#usage)\n - [Intrinsic elements](#intrinsic-elements)\n - [Components](#components)\n - [Make existing components tsx-ready.](#make-existing-components-tsx-ready)\n - [Writing components by object-style API (Like `Vue.extend`)](#writing-components-by-object-style-api-like-vueextend)\n - [Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)](#writing-component-by-class-style-api-vue-class-component-andor-vue-property-decorator)\n - [1. Extends from `Component` class provided by `vue-tsx-support`](#1-extends-from-component-class-provided-by-vue-tsx-support)\n - [2. Add `_tsx` field to tell type information to TypeScript.](#2-add-_tsx-field-to-tell-type-information-to-typescript)\n - [Writing component by composition api (`@vue/composition-api`)](#writing-component-by-composition-api-vuecomposition-api)\n - [OPTIONS](#options)\n - [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n - [allow-unknown-props](#allow-unknown-props)\n - [enable-html-attrs](#enable-html-attrs)\n - [enable-nativeon](#enable-nativeon)\n - [enable-vue-router](#enable-vue-router)\n - [allow-props-object](#allow-props-object)\n - [APIS](#apis)\n - [modifiers](#modifiers)\n - [Available modifiers](#available-modifiers)\n - [LICENSE](#license)\n\n\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is also needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a number\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nAt this point, `vue-next` is not supported, `@vue/composition-api` and `babel-preset-vca-jsx` are needed instead.\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `createComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.0-preview.1","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-JmbF7yBSBdrYT90lmpee+0VeCbTpLU2Fz2mybHkxgxgF0PwrwC+DaWaQHajX3aVQX3ZaYOkVWIEGiK6Zo7U9AA==","shasum":"11a446c6b8c84835681917450fa0455c8b3733f4","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.0-preview.1.tgz","fileCount":30,"unpackedSize":98030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6IsSCRA9TVsSAnZWagAAg4oP+gPuCC5Ij//4eTgMzctV\nB0EU3w7va5Q65XpFpENHcnyDS5KbNJ5z4La159hij97RZ49HWQY1D9GP4232\naYC/ItrdUp7Ih6s/2sLYkZCac/TKEHKeFz/POWY4/HFk16Scjr7gp/DzZDL5\n1pknpyoBRz+gcn8KhC8yU8mv3ejKlUDXuP9hahwMI+11K4yealhVD5vne60I\nQRWEqnVWrmOLnpM5Q+YZOn1CGJHuYZt/6Smg8N+lBATOmCjgXlp6RNgrWngg\nS9DoEL63uZLraaoFw71CqFE8k7KMNERgEM+ffUjrCu+Brn05rtzOKqb8NVym\nJntc/K/Hdb//xCMZByaHYv7vS6/4Z/Az6HT2e/0OzuJM+DqyjdibZw1741Xh\nlRLsvXQTLGBZwnaFxI88MNLPTZfK5bWd8/IX++f6/mFLkc4zU/fs+m9cSd8a\nNdLGRLmiAaZRjXFl0KC3NhiiAerVY4xVe/jXlMoBRXHl3SbIqwfa9LThUsrb\nTQh0YjrmChtvK0TKG1c1d2kpyHQvnV/96vCgUTqHw4akUt/PMdnKt6kmHhIA\nhM95Z0PrgmpmWbYaC8qd0wi9MGSr3JcA/0ufTl4sXnmJO9HI7VRy5iSk8KyK\n+4S0x3rIksuhFQx15BmSG78FNUPIQf2B1g4ZXeYQy0j//owTwRH9edsLkDsE\nck3/\r\n=VKZh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeRqQ27dMdrEP4z1DUwo6FRY0a5dTVh9JkcBkFlHJsOAIhAJPoP8/529XCrgrqlL/fHKyHKp6IjJkTpVU+QgQGB0WA"}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.0-preview.1_1592298258290_0.7038483098887118"},"_hasShrinkwrap":false},"3.0.1":{"name":"vue-tsx-support","version":"3.0.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-syntax-jsx":"^7.8.3","@babel/preset-env":"^7.9.6","@types/jest":"^25.2.2","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.1.2","@vue/composition-api":"^1.0.0-beta.17","@vue/test-utils":"1.0.2","babel-jest":"<26.0.0","glob":"^7.1.6","hoek":"^6.1.3","jest":"<26.0.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.0.5","rimraf":"^3.0.2","ts-jest":"^25.5.1","tsc-test":"^0.3.1","typescript":"~4.0.3","vue":"2.6.12","vue-class-component":"^7.2.6","vue-property-decorator":"^9.0.2","vue-router":"^3.4.7","vue-template-compiler":"2.6.12"},"peerDependencies":{"typescript":">=3.8.0","vue":">=2.6.0"},"prettier":{"printWidth":100,"trailingComma":"none","arrowParens":"avoid"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"b68143203471bf4f45605de0ff5bde0f91675186","readme":"[![Build Status](https://travis-ci.org/wonderful-panda/vue-tsx-support.svg?branch=master)](https://travis-ci.org/wonderful-panda/vue-tsx-support)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: BREAKING CHANGES\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n\n- [vue-tsx-support](#vue-tsx-support)\n - [:warning: BREAKING CHANGES](#warning-breaking-changes)\n - [TABLE OF CONTENTS](#table-of-contents)\n - [NEW FEATURES](#new-features)\n - [PREREQUISITE](#prerequisite)\n - [INSTALLATION](#installation)\n - [Migration from V2](#migration-from-v2)\n - [USAGE](#usage)\n - [Intrinsic elements](#intrinsic-elements)\n - [Components](#components)\n - [Make existing components tsx-ready.](#make-existing-components-tsx-ready)\n - [Writing components by object-style API (Like `Vue.extend`)](#writing-components-by-object-style-api-like-vueextend)\n - [Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)](#writing-component-by-class-style-api-vue-class-component-andor-vue-property-decorator)\n - [1. Extends from `Component` class provided by `vue-tsx-support`](#1-extends-from-component-class-provided-by-vue-tsx-support)\n - [2. Add `_tsx` field to tell type information to TypeScript.](#2-add-_tsx-field-to-tell-type-information-to-typescript)\n - [Writing component by composition api (`@vue/composition-api`)](#writing-component-by-composition-api-vuecomposition-api)\n - [OPTIONS](#options)\n - [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n - [allow-unknown-props](#allow-unknown-props)\n - [enable-html-attrs](#enable-html-attrs)\n - [enable-nativeon](#enable-nativeon)\n - [enable-vue-router](#enable-vue-router)\n - [allow-props-object](#allow-props-object)\n - [APIS](#apis)\n - [modifiers](#modifiers)\n - [Available modifiers](#available-modifiers)\n - [LICENSE](#license)\n\n\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support (experimental)\n\n## PREREQUISITE\n\n- Vue >= 2.6.0, < 3.0.0\n- TypeScript >= 3.8.0\n\n `vue-tsx-support` does not support Vue 3 because Vue 3 has it's own JSX type checker and there are some incompatibilities with Vue 2.\n\n If you want to use composition API with `vue-tsx-support`, you can use [@vue/composition-api](https://github.com/vuejs/composition-api).\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, `@vue/babel-preset-jsx` >= 1.2.1 or [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support@beta -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a string\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nVue 3 is not supported.\nTo use composition api with Vue 2, You can use `@vue/composition-api`.\n\nThere are 2 babel presets which support JSX syntax with `@vue/composition-api`.\n- `@vue/babel-preset-jsx` >= 1.2.1 (You must enable composition-api support explicitly by specifying `{ compositionAPI: true }`)\n- `babel-preset-vca-jsx`\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `defineComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","readmeFilename":"README.md","_id":"vue-tsx-support@3.0.1","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-DI2nmaNVgVIXnHEGLq0qjU7c+O/SpOg5oTBtrAovL3EeDIiChNv6dnBEyhRpKzCNM9f5dBrffrsKPqKol5167Q==","shasum":"0500fb25265dda0453d774d2121be1adaecc79f3","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.1.tgz","fileCount":29,"unpackedSize":99154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfi/vdCRA9TVsSAnZWagAAFhkP+wWMMRcvDVwetJ+Be5mh\ndO0eJeLra1UTmzKw5GTXXTUGEP6n+55me+cb0xJGT9WYoJxL6yZq+3LyMhD/\nH88r0xN5lR8KgzbxCpog5j1GSfdC29Jbl4ebzvyWk8eMAdto7Z0kkkO9hGCP\nQ3Y9Wt5x4VvfxZGdKkMztkjs1H0ffqbdLfHtk2DafEI0lotIyW1OFHavoHh0\nc/tDPO8EaKdo/AXyI4maFFezIPugzKm8vtyadJ/qMOdLRl1qU7Zh20SlX/iZ\n0wGJfdwKs3/B7dHAvG6LXsQ6kwFHRUbYrNiE/CK/ItvCrHsTKLRcdLdcj0hT\nCSDhxUo32TMVW7/OjDLLdemHmWr2mZEvoVLyqcYxvlcN/uPEp6em11PLoSZy\njD3pfdhVRG3EOctdSYqCld301oHs2LfxZHe3NWvriLFvnbk6QuYtwBR94zUV\n1bahcWnEw9gVSkcVKHRMVwXTbSq/VnYd+XfpqXXCDA4x+Rwx8lFZuVZ1Dz/Z\nSAjL8PP5XbWCoi6IysjC2XJ/N7xLkQKPOQOVEieimSogo55QH++aOEW+kZpD\nuSC+1rZB8Oc7p+/cDDcVx47G0ea2q7Ne3NapWrc8NJtsU/vtPV+9N49gU+Bf\nRvCCmyMOZGS5yBd2fqbF+iFoO+HpEazLtmSoH6fptpuoVPAxwswKRpM5GSpE\nDwZx\r\n=P2xh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERBvacyaRiv+JfwWXcnz+yT824NG7WBKMlMfkfHWx+lAiEAr/Yf0jXKVJARZaB48ac5GNU/XiDzg/ci6UoLUQjWqj4="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.1_1603009501123_0.192918693200554"},"_hasShrinkwrap":false},"3.0.2":{"name":"vue-tsx-support","version":"3.0.2","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-syntax-jsx":"^7.8.3","@babel/preset-env":"^7.9.6","@types/jest":"^25.2.2","@vue/babel-helper-vue-jsx-merge-props":"^1.0.0","@vue/babel-preset-jsx":"^1.1.2","@vue/composition-api":"^1.0.0-beta.17","@vue/test-utils":"1.0.2","babel-jest":"<26.0.0","glob":"^7.1.6","hoek":"^6.1.3","jest":"<26.0.0","lodash":"^4.17.14","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.0.5","rimraf":"^3.0.2","ts-jest":"^25.5.1","tsc-test":"^0.3.1","typescript":"~4.0.3","vue":"2.6.12","vue-class-component":"^7.2.6","vue-property-decorator":"^9.0.2","vue-router":"^3.4.7","vue-template-compiler":"2.6.12"},"peerDependencies":{"typescript":">=3.8.0","vue":">=2.6.0"},"prettier":{"printWidth":100,"trailingComma":"none","arrowParens":"avoid"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsConfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"gitHead":"024a553c40e4acd9969bdeeec7704be5015e163a","_id":"vue-tsx-support@3.0.2","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-22sN2lbMoxHJrG0FrvJk43CSTfFL7yeIY97X3VPU7pzBSiNyZgKnUcHP8rAo6i4T3jQ2lbJ0kEmAUbk3h8AgKA==","shasum":"898a3d89ac85f3dab546545702d1fd79bd24d4d6","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.2.tgz","fileCount":29,"unpackedSize":99142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjACsCRA9TVsSAnZWagAA+7YP/isQEyCAubcc+Rp2Wr66\n9JDHtwaDy0eO+TQ4gSJhD7L4dUTNa7L9QqZOzzE4wI1RWcA1kdbGX4sY/KQk\nmXNOgAPx30wT+BjxA06ElWgxkvn+otQyBSowFEskdN3STfzXMMcZRTtFrvZy\nQimq+P83Y7VSSxGuXBGk4wYw6s+HrhkVNJ0dkwURnxNtYMVfIABRA5GnKHsd\nWNK/6DSm0PTiug9kanOmkqRtkN2tqWIS9HRKLQ9HYDOJo2zqvCvQqUSlpA4a\neU4349RVg0Mbe++fILjSTRTa6pxRgyB/ssg1fPveSOwxB5lZlc/fpf7YV9ID\no0yj29OUGX+To2r7jLcdcNXcBK9/SiWTOruqf1JO9wEYwkmCaJ82cKUec0fS\nZYc1tPoe9IiXi/6rcmQCsILa32LcqK2vwqWvAGtVqpnpJSMY4SXuafCXg2f7\n3DmDaQUa3vXBwkr3B+l9plZuvCesIWZxQxsz2SjEkYSUNiw7GXefM+zk6Z5c\nuk7lIhSYeOOe1qm8eSzPOY4GiyKwXeIXIM31BrBlkufQNlcKK4PH0rZvITJo\nh9YI7kbCkl/4j4hnjf4ShHAEl5tBY1EumlhyZVKPp/SfXnZxZpYInvsvJHaV\nNUhsCCRjHlQW2unI4YVzJW4fRYAqbv5Sk3Bpk/a/RABD6t+/iErYZIHlixF4\njs1r\r\n=hX0M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQj6/Ebr2lpa7pFYJrH0kTimj/DI5hCxJv2oOmZmY9tAiEA/+kr173rWcsEnLBkOQzse3+bifIxnHyMfT1IPdZePZI="}]},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.2_1603010731912_0.7206240789245937"},"_hasShrinkwrap":false},"3.0.3":{"name":"vue-tsx-support","version":"3.0.3","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib test/tsc/**/.temp","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.12.3","@babel/plugin-syntax-jsx":"^7.12.1","@babel/preset-env":"^7.12.1","@types/jest":"^26.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.2.1","@vue/babel-preset-jsx":"^1.2.4","@vue/composition-api":"^1.0.0-beta.19","@vue/test-utils":"1.1.1","babel-jest":"26.6.3","glob":"^7.1.6","hoek":"^6.1.3","jest":"26.6.3","lodash":"^4.17.20","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.1.2","rimraf":"^3.0.2","ts-jest":"^26.4.4","typescript":"4.1.2","vue":"2.6.12","vue-class-component":"^7.2.6","vue-property-decorator":"^9.0.2","vue-router":"^3.4.9","vue-template-compiler":"2.6.12"},"peerDependencies":{"typescript":">=3.8.0","vue":">=2.6.0"},"prettier":{"printWidth":100,"trailingComma":"none","arrowParens":"avoid"},"jest":{"moduleFileExtensions":["js","ts","tsx","json"],"moduleNameMapper":{"^vue$":"/node_modules/vue/dist/vue.js"},"testRegex":"test/jest/(.*)\\.tsx?$","transform":{"^.+\\.tsx?$":"ts-jest"},"globals":{"ts-jest":{"tsconfig":"test/jest/tsconfig.json","babelConfig":{"presets":["@babel/env","@vue/babel-preset-jsx"]}}}},"licenseText":"MIT License\n\nCopyright (c) 2017 wonderful-panda\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"vue-tsx-support@3.0.3","dist":{"shasum":"769733751d04de906f74f4e35ecb13733ff206be","integrity":"sha512-TnY0BPTdK6YZ+kE8mBXC+Fpfz7JTPoZjNLvP+DLfDEYtotXrkQOwVSTsQtFZsDuukgPYz6gc/uA+fu6yPu/v/w==","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.0.3.tgz","fileCount":32,"unpackedSize":99266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfufkOCRA9TVsSAnZWagAADuQP/RiZ2tEHtkFvQ80eUvC4\nKWVXF6aSadr9eGVjZA2T6G9pBl51m1J+Am17BXGUNsBVayEjI2+Hj/AbF8/p\nP+4gMqNLQbh39YGMRrNBj8W1YWCKXr/O1RXz7n0wcIe3pDjB8tKhQlHG2mJb\no29fbYVmTSsZA0bbluq5FRm/r6yk4XG+28ba0xawrCAl7y/GJ9w1Iqzpdzwu\nzjIuMHY7wFcLV6W+7arrD6mnBXzIVQOXodnKWw4AOgEtpb8yaQvlz0OPIlbr\nuZnHyhPTad6J3KOddrxo9COB1T3j9EA+/R6QeQs7CQuNvP4V1zRg3fNvafE0\n2q1IH2Kg6Olo6JfQmkI9TgZBDEjWoLk0mLwbhP61B8Ay2IDHoBoZdQmZgX+w\nXNMk20ouAu3UL88dMoKe0NQN6jAErcrknyJTXova6a9KG44kA9y3A3aOn+HE\neq+R8cN/BSfBwTKaHTBSvz++Y24LW5F3RApOSNzdqdLTmexeSjU4bUoYLjiY\nDxy6fub7DQk6KUySsNY7EWzX2A1coCPiDH6FoWZDRNFOiwJCCfvL7eNJNAF8\nPk8rda2gH/bA29q/fAQyjUABsR6i4zP71C0eorhFzvyUO3BudoExxX9RpqXy\nXyOYV7RVNIpRWhX5bxW890TQztXu5QhRi0fDLNLUcjT7NFB/FH5WGLtyrxCD\n9TUh\r\n=5uwq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEm41RtFV32dyp85SxJ+vh0yNVk3HpAQPO36hblJQrzCAiBVomYJ4D5N9qGJS9Egu5GMPNUIRtKiceJFlMSjcw5BWQ=="}]},"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.0.3_1606023438378_0.6502474177505588"},"_hasShrinkwrap":false},"3.1.0":{"name":"vue-tsx-support","version":"3.1.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"clean":"rimraf lib test/tsc/**/.temp","build":"tsc","watch":"tsc -w","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.12.3","@babel/plugin-syntax-jsx":"^7.12.1","@babel/preset-env":"^7.12.1","@types/jest":"^26.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.2.1","@vue/babel-preset-jsx":"^1.2.4","@vue/composition-api":"^1.0.0-beta.19","@vue/test-utils":"1.1.1","babel-jest":"26.6.3","glob":"^7.1.6","hoek":"^6.1.3","jest":"26.6.3","lodash":"^4.17.20","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.1.2","rimraf":"^3.0.2","ts-jest":"^26.4.4","typescript":"4.1.3","vue":"2.6.12","vue-class-component":"^7.2.6","vue-property-decorator":"^9.0.2","vue-router":"^3.4.9","vue-template-compiler":"2.6.12"},"peerDependencies":{"typescript":">=3.8.0","vue":">=2.6.0"},"licenseText":"MIT License\n\nCopyright (c) 2017 wonderful-panda\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"vue-tsx-support@3.1.0","dist":{"shasum":"8de51116017c1bb16a665222bd3d9846f2a058a6","integrity":"sha512-zkdsR4lPRHUYs5hsAErSo7NunkFpgW2MprsH7ePCO6beGEYd/1KdLTA8CALZuUVkohnabEPe2Jcx8bMeeHZZ8g==","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.1.0.tgz","fileCount":35,"unpackedSize":98118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBXfoCRA9TVsSAnZWagAAOkEP/1ROgyDPKNNkhGTcRyjp\nFs5ud29CPiD6laDs0PFKtv3Ob2N/ckNtPe9QeyxOoPfhJk//49ZU8X+trNXd\nuHU7zf83RPbH31V3GdMlBfs66o9wb/mY2ByEZz8yiUViDhEplHj2TBdiCcl4\n7CxCiSmVbUHNCvezk5LYtiNpHq1sduGv2MQTNLkdAWEs1j9cfW9siYs2rwMb\nhdMz+ArXVlTWpEzS5REz3Yb0yudtjbk26Z9bLoWKkf8CkNHPUE8PBQzGpFS/\nxb6fUltNp5nqC8+aZ7oZOnZxjtlUEddAvp3Ue0MbaDkfpFNaOYM8P/PknyQ9\nAAO5KmmDRE2MnF5revXWSAVfqylqexFwPFoUGP7WMcwe6sUleN0WUthCy+J4\n5y0Vr5WGcT4Jb5MIYX6ZBXImqfuX0N4ALNwqehKPMUcFVBPIE7gBt9t3pT6f\n7asl4RtHLZjVLGuJLT3tmao4yHB+zwGLuCo1BD0DJ5Nb3OW4v6VsxVFVo3qR\n05debstsBYcqXPG+n9p9aDWfJnbU9WgwYhP47dsOWSztig1y/lfu5aUj3A+4\ndyM/Ci7ctwDCBnI0w8L1fjcsm7TqTOtUNlEBD8+rn3Verz5e4i3IvPVZJPa7\n0+uZgzcywOQ7wnWRDlfZ2juX0M4ABvHmjPXwd6VweLM4s7kmR8d+2fVaJHVZ\nABSa\r\n=eK7n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoAp65GO38S9hQ9fur76Gmi9p+QjuAEfDT4O0czEGALwIhANJJ6iUmF3wyRt9cIF8pPIX34MV408/PC5rwSgE0c7UR"}]},"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.1.0_1610971112226_0.413516180096398"},"_hasShrinkwrap":false},"3.2.0-beta.1":{"name":"vue-tsx-support","version":"3.2.0-beta.1","description":"TSX (JSX for TypeScript) support library for Vue","main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"lib/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.js","default":"./dist/esm/index.js"},"./lib/*":{"import":"./dist/esm/*.js","require":"./dist/cjs/*.js","default":"./dist/esm/*.js"}},"scripts":{"clean":"rimraf lib dist test/tsc/**/.temp","build:esm":"tsc -p tsconfig.json --outDir dist/esm --module esnext","build:cjs":"tsc -p tsconfig.json --outDir dist/cjs --module commonjs","build":"npm-run-all build:*","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.12.3","@babel/plugin-syntax-jsx":"^7.12.1","@babel/preset-env":"^7.12.1","@types/jest":"^26.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.2.1","@vue/babel-preset-jsx":"^1.2.4","@vue/composition-api":"^1.0.0-beta.19","@vue/test-utils":"1.1.1","babel-jest":"26.6.3","glob":"^7.1.6","hoek":"^6.1.3","jest":"26.6.3","lodash":"^4.17.20","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.1.2","rimraf":"^3.0.2","ts-jest":"^26.4.4","typescript":"4.3.2","vue":"2.6.13","vue-class-component":"^7.2.6","vue-property-decorator":"^9.0.2","vue-router":"^3.4.9","vue-template-compiler":"2.6.13"},"peerDependencies":{"typescript":">=3.8.0","vue":">=2.6.0"},"licenseText":"MIT License\n\nCopyright (c) 2017 wonderful-panda\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"vue-tsx-support@3.2.0-beta.1","dist":{"shasum":"e5af61cefc37c0bae3dc969c3ae3aecdcb175b14","integrity":"sha512-zFGFGz7vpA6QVm1stukZq3kdHuGmnHtExdyLh/b5E8bqJ2XzIQX/mFmJSI2uybIWaspNexnHetpcM+L+pZCesQ==","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.2.0-beta.1.tgz","fileCount":43,"unpackedSize":132258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguzolCRA9TVsSAnZWagAA+wMP/2FDDcx+Wa5H9sgmtE+I\ndE2+qK8ekBbSsqNXeQRd06+aA6TTtAhbla42p/TUdPydhZlShOBPuBF0cTii\nYXB2LmWYF20WX0lRl2EbnYvymZzG+QC72E0IpuC8xrW3+VOiLBBqG/pJkEtC\nD/FJxw6XTl41tlsWnV10FA1F+/2sIV0neJ77QQzv/HjEpjOSSi6HzgCW2TS7\nwCPWVlAZ1qOCGUod/+xUo3sEaGhZRn5FYubTOGhyUkHEfKjndZnkmZmEkPi0\nyhRWZt0y5PJ6F5EUMjIYSQscQn7aUx0yKmGtdU6VZfunicECBlP8x6zz96r+\nKvUhwpu7C5uQ89KDG6R5G8PQNAOie1ltOh7DaVoFyuYi3bPOHpJ97exi8xmW\nhKg0e38MSHiOtiuVQTAFSIfp7SlDkT6PrQSdpjWUGz5QNNZtPMykhdslkfBc\nXi0EGX+u/GbeVOVB/LdW4ACOqTjpnILxh9UZ5BdvwH0imQc2xS0m0J4mLwCC\nmRmenuMdPVpXTY38qMUW2cFWXpRFntc8dWrcOUIYsUFdErTUKuGLLKvvQMX/\nNTVJToS3OkQHjuFQo3BXe5KSFC9a56t6FP79w0/GQNfVK7+NLUeXsPMJevPl\n74d1svA3kfy6GgkhX/vUj2uzlhtYsCazY8GXSR5yyIeeYllfcnZ6MqVrlkn8\nn+q/\r\n=C/0H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPgtO6hkhn3xtST4XU0rDww2wnV49M9u1rrUwAol5/7AiAs9H4+JF35IGHuKmtFhnUXXhvAiOnkvOLcG6n10se+PQ=="}]},"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.2.0-beta.1_1622882852875_0.3200587589805042"},"_hasShrinkwrap":false},"3.2.0":{"name":"vue-tsx-support","version":"3.2.0","description":"TSX (JSX for TypeScript) support library for Vue","main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"lib/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.js","default":"./dist/esm/index.js"},"./lib/*":{"import":"./dist/esm/*.js","require":"./dist/cjs/*.js","default":"./dist/esm/*.js"}},"scripts":{"clean":"rimraf lib dist test/tsc/**/.temp","build:esm":"tsc -p tsconfig.json --outDir dist/esm --module esnext","build:cjs":"tsc -p tsconfig.json --outDir dist/cjs --module commonjs","build":"npm-run-all build:*","prettier":"prettier --list-different \"{src,types,options,test}/**/*.{ts,tsx}\"","prettier:fix":"prettier --write \"{src,types,options,test}/**/*.{ts,tsx}\"","jest":"jest","tsc-test":"node test/tsc/runner.js","test":"npm-run-all prettier tsc-test jest"},"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"keywords":["Vue","TypeScript","JSX","TSX"],"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","devDependencies":{"@babel/core":"^7.12.3","@babel/plugin-syntax-jsx":"^7.12.1","@babel/preset-env":"^7.12.1","@types/jest":"^26.0.15","@vue/babel-helper-vue-jsx-merge-props":"^1.2.1","@vue/babel-preset-jsx":"^1.2.4","@vue/composition-api":"^1.0.0-beta.19","@vue/test-utils":"1.1.1","babel-jest":"26.6.3","glob":"^7.1.6","hoek":"^6.1.3","jest":"26.6.3","lodash":"^4.17.20","mixin-deep":"^2.0.0","npm-run-all":"^4.1.5","prettier":"2.1.2","rimraf":"^3.0.2","ts-jest":"^26.4.4","typescript":"4.3.4","vue":"2.6.14","vue-class-component":"^7.2.6","vue-property-decorator":"^9.0.2","vue-router":"^3.4.9","vue-template-compiler":"2.6.14"},"peerDependencies":{"typescript":">=3.8.0","vue":">=2.6.0"},"licenseText":"MIT License\n\nCopyright (c) 2017 wonderful-panda\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"vue-tsx-support@3.2.0","dist":{"shasum":"678b7ecc49473bf743be78482f8edad0331536c0","integrity":"sha512-Uc3i9deEvZeHKc43Lcsh1ihCWvG1yygFnbY1jMe49K+DWCmGgwYWUkD0mxdgPwAMc6gi23CRVkrJsvamfCvD7A==","tarball":"https://registry.npmjs.org/vue-tsx-support/-/vue-tsx-support-3.2.0.tgz","fileCount":43,"unpackedSize":132251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzeLRCRA9TVsSAnZWagAA5CgP/jsOAZBzXvOrhDvUSOIK\nJU9OfYn9yPJU30N6f4QAhS0hw1scwTDqVYUOq+Y56Vi05s7K3NIEq/NahaGv\nrvW8AxkivBhrTTdiv3bt8/S3/3JSzkYf8/cVZdinp/Y9haK1sP/w+erXzU89\n/Ej05rzsA2mn577DJfkcb4pLCJifq4eGAfZzXWyleG7lKg00UzjubABMWm7Y\ntSSjXDKRbiOn2bKwd4hRiI/kwpmxIsaLRJc+3rMQ6PM57YRTgGgrtMF+8VAJ\n+LsCTodYErdr4TbyAvtloLcQNnhoSOVVpx5aymjVeFMR4MVc62IFOPtgqBOM\nuGysQHWLhw+Gzi0WBqrvrtfh3lDgvKBN+2d0UpRQ5L0XjF6gc6Rg2fEE268h\nqFMGOCCYP1U1h7Ygc+zv42zpzklLoXy4pJmIthAVeNleIyRIJPu5jTskDiRi\nRfAemIWUwDDC9IloaeduSHlRG2IJBTKaVkg4/4CaFZeH7Sop7gYKbiOwbrxX\nUbwxlJ3iPlyN6f7wI8Zj9hM7dnYAwQkW2CD56FqDANwbLh8/Qi9VKmu/CYPQ\nJIDh2BjAfR99QMsIvLXnulUAoxCG0KZf0m39ElG/Zt06xtiC6Q9evFcjydph\nmaRJlpcVCncMG1yGduSqLuajMxgpzhVa3YsXxTukfw0SpzTIVjF+gOGswZwh\ntzcT\r\n=9Zdl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8jPZYoEsc/t/i64at6krVFQReZ5x1SZlu7GBRqbMbBAiEA/VxoKThcrDecSl26UWVjQ0gFLdTdv32ydb5HLcRxw3k="}]},"_npmUser":{"name":"iwata0303","email":"iwata0303@gmail.com"},"directories":{},"maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-tsx-support_3.2.0_1624105681102_0.41317700729757734"},"_hasShrinkwrap":false}},"readme":"[![npm version](https://badge.fury.io/js/vue-tsx-support.svg)](https://badge.fury.io/js/vue-tsx-support)\n[![build](https://github.com/wonderful-panda/vue-tsx-support/workflows/build/badge.svg)](https://github.com/wonderful-panda/vue-tsx-support/actions?query=workflow%3Abuild)\n\n# vue-tsx-support\nTSX (JSX for TypeScript) support library for Vue\n\n## :warning: BREAKING CHANGES\n\nIf your project already uses vue-tsx-support v2, see [Migration from V2](#migration-from-v2) section.\n\n## TABLE OF CONTENTS\n\n\n- [vue-tsx-support](#vue-tsx-support)\n - [:warning: BREAKING CHANGES](#warning-breaking-changes)\n - [TABLE OF CONTENTS](#table-of-contents)\n - [NEW FEATURES](#new-features)\n - [PREREQUISITE](#prerequisite)\n - [INSTALLATION](#installation)\n - [Migration from V2](#migration-from-v2)\n - [USAGE](#usage)\n - [Intrinsic elements](#intrinsic-elements)\n - [Components](#components)\n - [Make existing components tsx-ready.](#make-existing-components-tsx-ready)\n - [Writing components by object-style API (Like `Vue.extend`)](#writing-components-by-object-style-api-like-vueextend)\n - [Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)](#writing-component-by-class-style-api-vue-class-component-andor-vue-property-decorator)\n - [1. Extends from `Component` class provided by `vue-tsx-support`](#1-extends-from-component-class-provided-by-vue-tsx-support)\n - [2. Add `_tsx` field to tell type information to TypeScript.](#2-add-_tsx-field-to-tell-type-information-to-typescript)\n - [Writing component by composition api (`@vue/composition-api`)](#writing-component-by-composition-api-vuecomposition-api)\n - [OPTIONS](#options)\n - [allow-element-unknown-attrs](#allow-element-unknown-attrs)\n - [allow-unknown-props](#allow-unknown-props)\n - [enable-html-attrs](#enable-html-attrs)\n - [enable-nativeon](#enable-nativeon)\n - [enable-vue-router](#enable-vue-router)\n - [allow-props-object](#allow-props-object)\n - [APIS](#apis)\n - [modifiers](#modifiers)\n - [Available modifiers](#available-modifiers)\n - [LICENSE](#license)\n\n\n\n## NEW FEATURES\n\n- Typesafe emit for declared events\n- @vue/composition-api support\n\n## PREREQUISITE\n\n- Vue >= 2.6.0, < 3.0.0\n- TypeScript >= 3.8.0 (3.9.2 or later recommended)\n\n `vue-tsx-support` does not support Vue 3 because Vue 3 has it's own JSX type checker and there are some incompatibilities with Vue 2.\n\n If you want to use composition API with `vue-tsx-support`, you can use [@vue/composition-api](https://github.com/vuejs/composition-api).\n\n## INSTALLATION\n\n1. Create Vue project with TypeScript and babel support.\n\n vue-tsx-support is a type checker for TypeScript, not a transpiler. \n You must install babel presets (@vue/babel-preset-app or @vue/babel-preset-jsx) separatedly.\n\n Vue CLI may help you.\n\n - [Installation - Vue.js](https://vuejs.org/v2/guide/installation.html)\n - [Vue CLI](https://cli.vuejs.org/)\n - [vuejs/jsx](https://github.com/vuejs/jsx)\n\n :bulb: If you want use @vue/composition-api, `@vue/babel-preset-jsx` >= 1.2.1 or [babel-preset-vue-vca](https://github.com/luwanquan/babel-preset-vca-jsx) is needed.\n\n2. Install vue-tsx-support from npm\n\n ```\n yarn add vue-tsx-support -D\n ```\n\n3. In `tsconfig.json`, set `\"preserve\"` to `jsx` and `\"VueTsxSupport\"` to `jsxFactory`\n\n ```json\n {\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"VueTsxSupport\",\n \"...\": \"...\"\n },\n \"include\": [\n \"...\"\n ]\n }\n ```\n\n4. import `vue-tsx-support/enable-check.d.ts` somewhere, \n\n ```typescript\n import \"vue-tsx-support/enable-check\"\n ```\n\n or add it to \"include\" in `tsconfig.json`\n\n ```json\n {\n \"compilerOptions\": {\n \"...\": \"...\"\n },\n \"include\": [\n \"node_modules/vue-tsx-support/enable-check.d.ts\",\n \"...\"\n ]\n }\n ```\n\n### Migration from V2\n\n1. In `tsconfig.json`, set `\"VueTsxSupport\"` to `jsxFactory`\n\n2. Enable `allow-props-object` option (Optional)\n\n\n## USAGE\n\n### Intrinsic elements\n\nStandard HTML elements are defined as intrinsic elements.\nSo, compiler can check attribute names and attribute types of them:\n\n```jsx\n// OK\n
;\n// OK\n;\n// OK\n;\n// NG: because `href` is not a valid attribute of `div`\n
;\n// NG: because `id` must be a string\n
;\n```\n\nLower case tags are treated as unknown intrinsic element.\nTypeScript checks nothing for such tags.\n\n```jsx\n// OK\n\n```\n\n### Components\n\nBasically, `vue-tsx-support` checks three types for each component.\n\n- __Prop types__ \n Determine name, type, and required or optional of each props. \n When using existing component as-is, you must specify prop types manually. \n When writing component with APIs of `vue-tsx-support`, prop types are automatically obtained from component definition. \n\n- __Custom event types (optional)__ \n If the component has custom events, you can specify custom event types additionally, \n and `vue-tsx-support` will check if event names and argument types are correct or not.\n\n- __Scoped slot types (optional)__ \n If the component has uses scoped slots, you can specify scoped slot types additionally, \n and `vue-tsx-support` will check if scoped slot names and argument types are correct or not.\n\n#### Make existing components tsx-ready.\n\nBy default, `vue-tsx-support` does not allow unknown props. \nFor example, below code causes compilation error.\n\n ```jsx\n import Vue from \"vue\";\n import AwesomeButton from \"third-party-library/awesome-button\";\n\n export default Vue.extend({\n render() {\n // ERROR: because TypeScript does not know that AwesomeButton has 'text' prop.\n return ;\n }\n });\n ```\n\nYou can add type information to existing component without modifying component itself, like below:\n\n ```typescript\n import AwesomeButtonOrig from \"third-party-library/awesome-button\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeButtonProps = {\n text: string;\n raised?: boolean;\n rounded?: boolean;\n }\n\n // Now, AwesomeButton has 1 required prop(text) and 2 optional props(raised, rounded)\n export const AwesomeButton = tsx.ofType().convert(AwesomeButtonOrig);\n ```\n\nYou also can specify custom event types as second type parameter, and scoped slot types as third type parameter.\n\nFor example:\n\n ```typescript\n import AwesomeListOrig from \"third-party-library/awesome-list\";\n import * as tsx from \"vue-tsx-support\";\n\n type Item = { id: string, text: string };\n\n type AwesomeListProps = {\n items: ReadonlyArray;\n rowHeight: number;\n }\n\n type AwesomeListEvents = {\n // member name must be ['on' + event name(with capitalizing first charactor)]\n onRowClicked: { item: Item, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: Item }\n }\n\n export const AwesomeList = tsx.ofType<\n AwesomeListProps,\n AwesomeListEvents,\n AwesomeListScopedSlots\n >().convert(AwesomeListOrig);\n ```\n\nThen you can use AwesomeList like below:\n\n ```jsx\n import { VNode } from \"vue\";\n const App = Vue.extend({\n render(): VNode {\n return (\n console.log(`${p.item.text} clicked!`)}\n scopedSlots={{\n row: item =>
{item.text}
\n }}\n />\n );\n }\n });\n ```\n\n#### Writing components by object-style API (Like `Vue.extend`)\n\nIf you use `Vue.extend()`, just replace it by `componentFactory.create` and your component becomes TSX-ready.\n\nProps type is infered from props definition automatically. \nFor example, props type will be `{ text: string, important?: boolean }` in below code.\n\n:warning: In some environment, `as const` may be needed to make prop required properly.\n\n ```jsx\n import { VNode } from \"vue\";\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.componentFactory.create({\n props: {\n text: { type: String, required: true },\n important: Boolean,\n } as const, // `as const` is needed in some cases.\n computed: {\n className(): string {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n },\n methods: {\n onClick(event: Event) { this.$emit(\"ok\", event); }\n },\n render(): VNode {\n return {this.text};\n }\n });\n ```\n\n:bulb: You can use `component` as as shorthand of `componentFactory.create`.\n\n ```jsx\n import * as tsx from \"vue-tsx-support\";\n const MyComponent = tsx.component({\n /* snip */\n });\n ```\n\nIf your component has custom events or scoped slots, use `componentFactoryOf` instead.\n\n ```typescript\n import { VNode } from \"vue\";\n import * as tsx from \"vue-tsx-support\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = tsx.componentFactoryOf<\n AwesomeListEvents,\n AwesomListScopedSlots\n >().create({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n computed: { /* ... */},\n method: {\n emitRowClicked(item: {}, index: number): void {\n // Equivalent to `this.$emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n tsx.emitOn(this, \"onRowClicked\", { item, index });\n }\n },\n render(): VNode {\n return (\n
\n {\n this.visibleItems.map((item, index) => (\n
this.$emit(\"rowClicked\", { item, index })}>\n {\n // slot name ('row') and argument types are statically checked.\n this.$scopedSlots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n#### Writing component by class-style API (`vue-class-component` and/or `vue-property-decorator`)\n\nIf you prefer class-style component by using `vue-class-component` and/or `vue-property-decorator`,\nthere are some options to make it tsx-ready.\n\n##### 1. Extends from `Component` class provided by `vue-tsx-support`\n\n ```jsx\n import { VNode } from \"vue\";\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n type MyComponentProps = {\n text: string;\n important?: boolean;\n }\n\n @Component\n export class MyComponent extends tsx.Component {\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n onClick(event: MouseEvent) {\n this.$emit(\"ok\", event);\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n :warning: Unfortunately, `vue-tsx-support` can't infer prop types automatically in this case, so you must write type manually.\n\n##### 2. Add `_tsx` field to tell type information to TypeScript.\n\n ```jsx\n import { VNode } from \"vue\";\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: {\n // specify props type to `props`.\n props: Pick\n };\n\n @Prop({ type: String, required: true })\n text!: string;\n @Prop(Boolean)\n important?: boolean;\n\n get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n render(): VNode {\n return {this.text};\n }\n }\n ```\n\n You can use `DeclareProps` instead of `{ props: T }`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: `PickProps` is more convenient than `Pick` here, it removes attributes from `Vue` from completion candidates. (e.g. `$data`, `$props`, and so on)\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: When you can make all data, computed and methods private, you can use `AutoProps` instead. \n `AutoProps` picks all public members other than members from component options(`render`, `created` etc).\n \n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>\n\n @Prop({ type: String, required: true })\n text!: string;\n\n @Prop(Boolean)\n important?: boolean;\n\n // data\n private count = 0;\n // computed\n private get className() {\n return this.important ? \"label-important\" : \"label-normal\";\n }\n // methods\n private onClick() {\n this.count += 1;\n }\n\n render(): VNode {\n return (\n \n {`${this.text}-${this.count}`}\n \n );\n }\n }\n ```\n\n :bulb: If your component has custom events, you can specify events handlers type additionally.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps> &\n tsx.DeclareOnEvents<{ onOk: string }>;\n\n /* ...snip... */\n }\n ```\n\n :bulb: If your component uses scoped slots, you should add type to `$scopedSlots` by `tsx.InnerScopedSlots`.\n\n ```jsx\n import { Component, Prop } from \"vue-property-decorator\";\n import * as tsx from \"vue-tsx-support\";\n\n @Component\n export class MyComponent extends Vue {\n _tsx!: tsx.DeclareProps>;\n\n $scopedSlots!: tsx.InnerScopedSlots<{ default?: string }>;\n\n /* ...snip... */\n }\n ```\n\n#### Writing component by composition api (`@vue/composition-api`)\n\nVue 3 is not supported.\nTo use composition api with Vue 2, You can use `@vue/composition-api`.\n\nThere are 2 babel presets which support JSX syntax with `@vue/composition-api`.\n- `@vue/babel-preset-jsx` >= 1.2.1 (You must enable composition-api support explicitly by specifying `{ compositionAPI: true }`)\n- `babel-preset-vca-jsx`\n\nTo make TSX-ready component by composition api, use `component` of `vue-tsx-support/lib/vca` instead of `defineComponent` of `@vue/composition-api`.\n\n ```jsx\n import { computed } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n const MyComponent = vca.component({\n name: \"MyComponent\",\n props: {\n text: { type: String, required: true },\n important: Boolean,\n },\n setup(p) {\n const className = computed(() => p.important ? \"label-important\" : \"label-normal\");\n return () => (\n {p.text};\n );\n }\n });\n ```\n\nIf your component has custom event or scoped slots, specify them types in 2nd argument of `setup`.\n\n ```jsx\n import { computed, onMounted } from \"@vue/composition-api\";\n import * as vca from \"vue-tsx-support/lib/vca\";\n\n type AwesomeListEvents = {\n onRowClicked: { item: {}, index: number };\n }\n\n type AwesomeListScopedSlots = {\n row: { item: {} }\n }\n\n export const AwesomeList = vca.component({\n name: \"AwesomeList\",\n props: {\n items: { type: Array, required: true },\n rowHeight: { type: Number, required: true }\n },\n setup(p, ctx: vca.SetupContext) {\n const visibleItems = computed(() => ... );\n const emitRowClicked = (item: {}, index: number) => {\n // Equivalent to `ctx.emit(\"rowClicked\", { item, index })`,\n // And event name and payload type are statically checked.\n vca.emitOn(ctx, \"onRowClicked\", { item, index });\n }\n\n return () => (\n
\n {\n visibleItems.value.map((item, index) => (\n
emitRowClicked(item, index)}>\n {\n // slot name ('row') and argument types are statically checked.\n ctx.slots.row({ item })\n }\n
\n )\n }\n
\n );\n }\n });\n ```\n\n## OPTIONS\n\n`vue-tsx-support` has some options which change behaviour globally.\nSee under the `options` directory.\n\nTo enable each options, import them somewhere\n\n```typescript\n// enable `allow-unknown-props` option\nimport \"vue-tsx-support/options/allow-unknown-props\";\n```\n\n:warning: Scope of option is whole project, not a file.\n\n### allow-element-unknown-attrs\n\nMake enabled to specify unknown attributes to intrinsic elements\n\n```jsx\n// OK:`foo` is unknown attribute, but can be compiled\n
;\n```\n\n### allow-unknown-props\n\nMake enabled to specify unknown props to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `bar` is unknown prop, but can be compiled\n;\n```\n\n### enable-html-attrs\n\nMake enabled to specify HTML attributes to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK: `min` and `max` are valid HTML attributes\n;\n// NG: compiler checks type of `min` (`min` must be number)\n;\n```\n\n### enable-nativeon\n\nMake enabled to specify native event listeners to Vue component.\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n ... } />; // and `e` is infered as MouseEvent\n```\n\n### enable-vue-router\n\nAdd definitions of `router-link` and `router-view`\n\n### allow-props-object\n\nMake enabled to pass props as \"props\".\n\n```jsx\nconst MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });\n// OK\n;\n```\n\n## APIS\n\n### modifiers\n\nEvent handler wrappers which work like some event modifiers available in template\n\n```typescript\nimport { modifiers as m } from \"vue-tsx-support\";\n\n// Basic usage:\n// Equivalent to `
`\n
;\n\n// Use multiple modifiers:\n// Equivalent to `
`\n
;\n\n// Use without event handler:\n// Equivalent to `
`\n
;\n\n// Use multiple keys:\n// Equivalent to `
`\n
;\n\n// Use exact modkey combination:\n// Equivalent to `
`\n
;\n```\n\n#### Available modifiers\n\n* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`\n\n Execute event handler only when specified key is pressed. \n :warning: `del` allows not only DELETE, but also BACKSPACE. \n :warning: `left` and `right` have another behavior when specified to mouse event \n :warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys) \n\n* `left`, `right`, `middle`\n\n Execute event handler only when specified mouse button is pressed. \n :warning: `left` and `right` have another behavior when specified to keyboard event \n\n* `ctrl`, `shift`, `alt`, `meta`\n\n Execute event handler only when specified system modifier key is pressed. \n\n* `noctrl`, `noshift`, `noalt`, `nometa`\n\n Execute event handler only when specified system modifier key is not pressed. \n\n* `self`\n\n Execute event handler only when event.target is the element itself (not from children). \n\n* `prevent`, `stop`\n\n Call `preventDefault` or `stopPropagation` of event object before executing event handler. \n\n\n* `keys(...args)`\n\n Execute event handler only when one of specified key is pressed. \n Known key name(\"esc\", \"tab\", \"enter\", ...) or number can be specified. \n\n ```typescript\n // when enter or esc pressed\n
;\n // when 'a' pressed\n
;\n ```\n\n* `exact(...args)`\n\n Execute event handler only when specified system modifier keys are all pressed, and others are not pressed. \n\n ```typescript\n // when CTRL, SHIFT are both pressed, and ALT, META are both not pressed\n
;\n ```\n\n## LICENSE\n\nMIT\n\n","maintainers":[{"name":"iwata0303","email":"iwata0303@gmail.com"}],"time":{"modified":"2022-06-28T20:37:15.194Z","created":"2017-08-17T02:12:41.015Z","0.0.2":"2017-08-17T02:12:41.015Z","0.0.3":"2017-08-17T05:40:58.287Z","0.0.4":"2017-08-17T06:17:35.150Z","0.1.0":"2017-08-19T12:45:59.128Z","0.2.0":"2017-08-30T21:21:25.153Z","0.2.1":"2017-09-04T18:56:28.174Z","0.2.2":"2017-09-11T21:12:39.204Z","0.2.3":"2017-09-12T15:21:27.660Z","0.2.4":"2017-09-21T16:53:20.626Z","0.2.5":"2017-09-22T20:34:03.125Z","0.2.6":"2017-09-23T06:42:32.978Z","0.2.7":"2017-09-23T09:43:10.178Z","0.3.0":"2017-10-02T15:15:10.519Z","0.3.1":"2017-10-04T20:28:54.066Z","0.4.0":"2017-10-11T18:51:35.340Z","0.4.1":"2017-10-17T08:48:36.536Z","0.4.2":"2017-10-27T12:08:43.239Z","0.5.0":"2017-10-27T12:13:12.523Z","1.0.0":"2017-10-30T04:32:50.888Z","1.1.0":"2017-11-13T14:48:49.131Z","1.1.1":"2017-11-13T23:01:36.792Z","1.1.2":"2017-11-15T03:29:51.281Z","1.1.3":"2017-11-15T13:30:35.847Z","1.2.0":"2017-11-21T03:09:58.995Z","1.2.1":"2018-04-27T22:32:33.546Z","1.2.2":"2018-06-04T03:56:44.911Z","1.3.0":"2018-07-01T00:23:54.367Z","2.0.0":"2018-07-15T05:58:00.772Z","2.0.1":"2018-07-21T23:12:25.930Z","2.1.0":"2018-07-30T21:46:14.209Z","2.1.1":"2018-07-31T20:45:14.397Z","3.0.0-beta.1":"2018-09-07T12:20:04.725Z","3.0.0-beta.2":"2018-09-07T22:33:36.332Z","3.0.0-beta.3":"2018-09-08T03:13:55.332Z","3.0.0-beta.4":"2018-09-13T00:18:31.426Z","2.2.0":"2018-10-12T03:11:28.127Z","2.2.1":"2018-11-08T12:23:13.372Z","2.2.2":"2018-12-18T03:51:07.137Z","2.3.0":"2019-04-15T17:39:37.478Z","3.0.0-dev.1":"2019-06-27T04:15:49.916Z","3.0.0-dev.2":"2019-07-01T12:05:27.543Z","3.0.0-dev.3":"2019-07-01T12:15:44.718Z","2.3.1":"2019-07-16T21:45:16.513Z","2.3.2":"2019-09-03T15:35:22.143Z","3.0.0-dev.4":"2019-09-08T23:43:37.741Z","3.0.0-dev.5":"2019-09-17T22:02:25.560Z","3.0.0-dev.6":"2019-09-25T22:15:29.683Z","3.0.0-dev.6a":"2019-09-28T01:32:40.616Z","3.0.0-dev.6b":"2019-10-07T21:54:24.480Z","3.0.0-dev.6c":"2019-10-08T08:49:29.446Z","3.0.0-dev.6d":"2019-10-08T22:07:48.024Z","3.0.0-dev.6e":"2019-10-15T16:53:33.156Z","2.3.3":"2020-01-09T12:24:27.593Z","3.0.0-dev.7a":"2020-01-13T02:24:28.379Z","3.0.0-dev.8b":"2020-04-20T11:20:10.186Z","3.0.0-dev.9":"2020-05-13T06:01:19.143Z","3.0.0-beta.5":"2020-05-14T01:45:46.166Z","3.0.0-beta.6":"2020-05-14T06:29:15.430Z","3.0.0-beta.7":"2020-05-14T07:56:33.057Z","3.0.0-beta.8":"2020-06-08T01:12:39.298Z","3.0.0-preview.1":"2020-06-16T09:04:18.423Z","3.0.1":"2020-10-18T08:25:01.300Z","3.0.2":"2020-10-18T08:45:32.097Z","3.0.3":"2020-11-22T05:37:18.483Z","3.1.0":"2021-01-18T11:58:32.347Z","3.2.0-beta.1":"2021-06-05T08:47:33.018Z","3.2.0":"2021-06-19T12:28:01.285Z"},"homepage":"https://github.com/wonderful-panda/vue-tsx-support#readme","keywords":["Vue","TypeScript","JSX","TSX"],"repository":{"type":"git","url":"git+https://github.com/wonderful-panda/vue-tsx-support.git"},"author":{"name":"Iwata Hidetaka","email":"iwata0303@gmail.com"},"bugs":{"url":"https://github.com/wonderful-panda/vue-tsx-support/issues"},"license":"MIT","readmeFilename":"README.md"}