├── .gitignore ├── README.md ├── example ├── .babelrc ├── main.tsx ├── tsconfig.json ├── App.tsx └── webpack.config.js ├── tsconfig.json ├── lib └── jsx.d.ts ├── package.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | example/build.js 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-tsx 2 | 3 | Still experimental 4 | 5 | ## License 6 | 7 | MIT 8 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"], 3 | "plugins": ["transform-vue-jsx"] 4 | } 5 | -------------------------------------------------------------------------------- /example/main.tsx: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | new Vue({ 5 | render (h) { 6 | return ( 7 | 8 | ) 9 | } 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "extends": "../tsconfig.json", 4 | "compilerOptions": { 5 | "jsx": "preserve", 6 | "noEmit": false 7 | }, 8 | "include": [ 9 | "**/*.tsx", 10 | "../lib/**/*.d.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | export default Vue.extend({ 4 | props: { 5 | name: String 6 | }, 7 | 8 | render (h: Function) { 9 | return ( 10 |
Hello {this.name}!
11 | ) 12 | } 13 | }) 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "target": "esnext", 5 | "module": "es2015", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "noEmit": true 9 | }, 10 | "include": [ 11 | "lib/**/*.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /lib/jsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | interface Element extends VNode {} 6 | interface ElementClass extends Vue {} 7 | interface ElementAttributesProperty { 8 | $props: {} 9 | } 10 | 11 | interface IntrinsicElements { 12 | div: any 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | context: path.resolve(__dirname), 5 | entry: './main.tsx', 6 | output: { 7 | path: path.resolve(__dirname), 8 | filename: 'build.js' 9 | }, 10 | resolve: { 11 | extensions: ['.js', '.json', '.ts', '.tsx'] 12 | }, 13 | module: { 14 | loaders: [ 15 | { test: /\.tsx?$/, loader: ['babel-loader', 'ts-loader'] } 16 | ] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tsx", 3 | "version": "1.0.0", 4 | "description": "TSX hook for Vue.js", 5 | "keywords": [ 6 | "TSX", 7 | "JSX", 8 | "TypeScript", 9 | "Vue.js" 10 | ], 11 | "main": "lib/index.js", 12 | "typings": "lib/index.d.ts", 13 | "files": [ 14 | "lib" 15 | ], 16 | "scripts": { 17 | "build": "tsc -p .", 18 | "example": "webpack --config example/webpack.config.js", 19 | "lint": "tslint --project . && tslint --project example" 20 | }, 21 | "devDependencies": { 22 | "babel-core": "^6.26.0", 23 | "babel-helper-vue-jsx-merge-props": "^2.0.2", 24 | "babel-loader": "^7.1.2", 25 | "babel-plugin-syntax-jsx": "^6.18.0", 26 | "babel-plugin-transform-vue-jsx": "^3.5.0", 27 | "babel-preset-env": "^1.6.0", 28 | "ts-loader": "^2.3.7", 29 | "tslint": "^5.7.0", 30 | "typescript": "^2.5.3", 31 | "vue": "^2.5.1", 32 | "webpack": "^3.7.1" 33 | }, 34 | "peerDependencies": { 35 | "vue": "^2.5.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "forin": true, 9 | "indent": [ 10 | true, 11 | "spaces" 12 | ], 13 | "jsdoc-format": true, 14 | "label-position": true, 15 | "label-undefined": true, 16 | "member-ordering": true, 17 | "no-arg": true, 18 | "no-console": true, 19 | "no-construct": true, 20 | "no-duplicate-key": true, 21 | "no-duplicate-variable": true, 22 | "no-eval": true, 23 | "no-trailing-whitespace": true, 24 | "no-unreachable": true, 25 | "no-unused-expression": true, 26 | "no-unused-variable": true, 27 | "no-var-keyword": true, 28 | "quotemark": [ 29 | true, 30 | "single", 31 | "jsx-double" 32 | ], 33 | "semicolon": [ 34 | true, 35 | "never" 36 | ], 37 | "trailing-comma": [ 38 | true, 39 | { 40 | "singleline": "never", 41 | "multiline": "never" 42 | } 43 | ], 44 | "typedef-whitespace": [ 45 | true, 46 | "onespace" 47 | ], 48 | "whitespace": [ 49 | true, 50 | "check-branch", 51 | "check-decl", 52 | "check-operator", 53 | "check-module", 54 | "check-separator", 55 | "check-type" 56 | ] 57 | } 58 | } 59 | --------------------------------------------------------------------------------