prop: {{propMessage}}
-msg: {{msg}}
-helloMsg: {{helloMsg}}
-computed msg: {{computedMsg}}
- -prop: {{ propMessage }}
+msg: {{ msg }}
+helloMsg: {{ helloMsg }}
+computed msg: {{ computedMsg }}
++ +
+ ++ Clicked: {{ count }} times + +
+hello times: {{ helloTimes }}
+ + + + diff --git a/example/src/components/World.tsx b/example/src/components/World.tsx new file mode 100644 index 0000000..a2f7de5 --- /dev/null +++ b/example/src/components/World.tsx @@ -0,0 +1,9 @@ +import Vue, { CreateElement } from 'vue' +import Component from '../../../lib/index' + +@Component +export default class World extends Vue { + render (h: CreateElement) { + returnThis is rendered via TSX
+ } +} diff --git a/example/example.ts b/example/src/main.ts similarity index 79% rename from example/example.ts rename to example/src/main.ts index 6770f0b..f9913ff 100644 --- a/example/example.ts +++ b/example/src/main.ts @@ -1,9 +1,10 @@ import Vue from 'vue' import App from './App.vue' +import store from './store' -// mount new Vue({ el: '#app', + store, render: h => h(App, { props: { propMessage: 'World' } }) diff --git a/example/src/shims-tsx.d.ts b/example/src/shims-tsx.d.ts new file mode 100644 index 0000000..64fc0a8 --- /dev/null +++ b/example/src/shims-tsx.d.ts @@ -0,0 +1,11 @@ +import Vue, { VNode } from 'vue' + +declare global { + namespace JSX { + interface Element extends VNode {} + interface ElementClass extends Vue {} + interface IntrinsicElements { + [elem: string]: any + } + } +} diff --git a/example/sfc.d.ts b/example/src/shims-vue.d.ts similarity index 65% rename from example/sfc.d.ts rename to example/src/shims-vue.d.ts index eb40980..d9f24fa 100644 --- a/example/sfc.d.ts +++ b/example/src/shims-vue.d.ts @@ -1,4 +1,4 @@ -declare module "*.vue" { +declare module '*.vue' { import Vue from 'vue' export default Vue } diff --git a/example/src/store.ts b/example/src/store.ts new file mode 100644 index 0000000..e37ffe4 --- /dev/null +++ b/example/src/store.ts @@ -0,0 +1,23 @@ +import Vue from 'vue' +import Vuex from 'vuex' + +interface CounterState { + count: number +} + +Vue.use(Vuex) + +const state = { + count: 0 +} + +const mutations = { + increment (state: CounterState) { + state.count++ + } +} + +export default new Vuex.Store({ + state, + mutations +}) diff --git a/example/tsconfig.json b/example/tsconfig.json index 083aab7..bd9647c 100644 --- a/example/tsconfig.json +++ b/example/tsconfig.json @@ -1,20 +1,18 @@ { "compilerOptions": { - "target": "es5", + "target": "esnext", "lib": [ "dom", - "es2015" + "esnext" ], - "module": "commonjs", + "module": "es2015", "moduleResolution": "node", - "isolatedModules": false, "experimentalDecorators": true, - "noImplicitAny": true, - "noImplicitThis": true, - "strictNullChecks": true, - "removeComments": true, - "suppressImplicitAnyIndexErrors": true, - "allowSyntheticDefaultImports": true + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "jsx": "preserve", + "jsxFactory": "h" }, "include": [ "./**/*.ts" diff --git a/example/webpack.config.js b/example/webpack.config.js index 56b85ce..be70819 100644 --- a/example/webpack.config.js +++ b/example/webpack.config.js @@ -1,30 +1,43 @@ +const VueLoaderPlugin = require('vue-loader/lib/plugin') + module.exports = { - entry: './example/example.ts', + mode: 'development', + context: __dirname, + entry: './src/main.ts', output: { path: __dirname, filename: 'build.js' }, resolve: { - extensions: ['.ts', '.js'] + alias: { + vue$: 'vue/dist/vue.esm.js' + }, + extensions: ['.ts', '.tsx', '.js'] }, module: { rules: [ { - test: /\.ts$/, - exclude: /node_modules|vue\/src/, - loader: 'ts-loader', - options: { - appendTsSuffixTo: [/\.vue$/] - } + test: /\.tsx?$/, + exclude: /node_modules/, + use: [ + 'babel-loader', + { + loader: 'ts-loader', + options: { + appendTsSuffixTo: [/\.vue$/], + appendTsxSuffixTo: [/\.vue$/] + } + } + ] }, { test: /\.vue$/, - loader: 'vue-loader', - options: { - esModule: true - } + use: ['vue-loader'] } ] }, - devtool: 'source-map' + devtool: 'source-map', + plugins: [ + new VueLoaderPlugin() + ] } diff --git a/hooks.d.ts b/hooks.d.ts new file mode 100644 index 0000000..afc0986 --- /dev/null +++ b/hooks.d.ts @@ -0,0 +1,20 @@ +import { VNode } from 'vue' + +declare module 'vue/types/vue' { + interface Vue { + data?(): object + beforeCreate?(): void + created?(): void + beforeMount?(): void + mounted?(): void + beforeDestroy?(): void + destroyed?(): void + beforeUpdate?(): void + updated?(): void + activated?(): void + deactivated?(): void + render?(createElement: CreateElement): VNode + errorCaptured?(err: Error, vm: Vue, info: string): boolean | undefined + serverPrefetch?(): Promise