From b478814a83d2af1e108f7a97c5ab7612b524471d Mon Sep 17 00:00:00 2001 From: Stephan Wagner Date: Fri, 13 Apr 2018 15:16:43 +0200 Subject: [PATCH] Adapted to work with new Vue.js and TypeScript versions. --- .gitignore | 5 ++++- README.md | 17 ++++------------- index.d.ts | 5 ++--- package.json | 4 ++-- test/it-compiles.ts | 2 +- tsconfig.json | 21 ++++++++++----------- 6 files changed, 23 insertions(+), 31 deletions(-) diff --git a/.gitignore b/.gitignore index 8bfb2da..1ba39cc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,8 @@ /ignore/ +# build directory +/build/ + # Created by https://www.gitignore.io/api/macos,windows,linux,visualstudiocode,webstorm,sublimetext,node,git ### macOS ### @@ -198,6 +201,6 @@ jspm_packages # Optional REPL history .node_repl_history - ### Git ### *.orig + diff --git a/README.md b/README.md index 07ca86c..c1c708b 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,11 @@ # vue-typescript-import-dts [![Build Status](https://travis-ci.org/locoslab/vue-typescript-import-dts.svg?branch=master)](https://travis-ci.org/locoslab/vue-typescript-import-dts) [![npm version](https://badge.fury.io/js/vue-typescript-import-dts.svg)](https://badge.fury.io/js/vue-typescript-import-dts) -TypeScript declaration file that allows using `import` with `*.vue` files. The primary use case is a bundler environment like [Browserify](http://browserify.org/) with [vueify](https://github.com/vuejs/vueify). The file itself consists of 5 lines; this package is just for convenience. - -## CommonJS vs. ES6 modules -There are two current versions: version 2.x for a CommonJS environment, e.g., Browserify/vueify and version 3.x for an ES6 environment that uses `export default`. +TypeScript declaration file that allows using `import` with `*.vue` files. The primary use case is a bundler environment like [webpack](https://webpack.js.org/). The file itself consists of 4 lines; this package is just for convenience. ## Usage This package requires TypeScript 2 and Vue.js 2, which ships with new type definitions in the Vue.js package itself. Both must be installed separately in your project, which allows choosing a suitable version. 1. Install - * For ES6 modules: `npm install vue-typescript-import-dts --save-dev` - * For CommonJS: `npm install vue-typescript-import-dts@2 --save-dev` + * `npm install vue-typescript-import-dts --save-dev` 2. Import (one of): * Import this module before the import of a `.vue` file: `import 'vue-typescript-import-dts'` @@ -24,19 +20,14 @@ This package requires TypeScript 2 and Vue.js 2, which ships with new type defin Then, it is possible to `import` a `*.vue` file: -* For ES6 modules: `import Child from './child.vue'` -* For CommonJS, one of: - - `import Child = require('./child.vue')` - - `import * as Child from './child.vue'` +* `import Child from './child.vue'` -Note: TypeScript will not type check, parse, or even verify the existence of the `.vue` file: this project only instructs the TypeScript compiler to assume the import of 'something' that ends with `.vue` succeeds and is a `Vue.ComponentOptions` object. +Note: TypeScript will not type check, parse, or even verify the existence of the `.vue` file: this project only instructs the TypeScript compiler to assume the import of 'something' that ends with `.vue` succeeds and is a `Vue` object. ## Shameless Plug If you are using TypeScript 2 together with Vue.js 2, you might also be interested in -* [vue-typescript-component](https://github.com/locoslab/vue-typescript-component) to use TypeScript classes as Vue.js components * [vue-typescript-jest](https://github.com/locoslab/vue-typescript-jest) to test Vue.js components and TypeScript sources using Jest * [vue-jest-utils](https://github.com/locoslab/vue-jest-utils) to simplify snapshot testing of Vue.js components using Jest and html2jade -* [vue-typescript-component-example](https://github.com/locoslab/vue-typescript-component-example) as an example for this package and the projects above that shows a TypeScript/Tsify/Vue.js/Vueify/Pug setup supporting Hot Module Replacement and unit/snapshot testing with Jest ## License [MIT](http://opensource.org/licenses/MIT) diff --git a/index.d.ts b/index.d.ts index f2c2c8f..079dded 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,4 @@ declare module '*.vue' { - import Vue = require('vue') - const value: Vue.ComponentOptions - export default value + import Vue from 'vue' + export default Vue } diff --git a/package.json b/package.json index dd4b355..307562c 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "prepublish": "tsc" }, "devDependencies": { - "vue": "^2.0.0", - "typescript": "^2.0.3" + "vue": "^2.5.16", + "typescript": "^2.8.1" } } diff --git a/test/it-compiles.ts b/test/it-compiles.ts index 5679666..42fa261 100644 --- a/test/it-compiles.ts +++ b/test/it-compiles.ts @@ -3,4 +3,4 @@ import Child from './child.vue' // access something to generate code -const d1 = Child.methods +const d1 = Child.component diff --git a/tsconfig.json b/tsconfig.json index 8bec929..b588b67 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,17 +1,16 @@ { "compilerOptions": { - "target": "es5", - "module": "commonjs", - "noImplicitAny": true, - "strictNullChecks": true, - "sourceMap": false, - "pretty": true, - "outDir": "ignore", - "lib": ["es5", "dom", "es2015.promise"] + "lib": ["dom", "es5", "es2015"], + "target": "es2015", + "module": "es6", + "moduleResolution": "node", + "sourceMap": true, + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "allowJs": true, + "outDir": "build" }, - "exclude": [ - "node_modules" - ], + "exclude": ["node_modules", "build"], "atom": { "rewriteTsconfig": false },