-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: preliminary TS plugin imeplementation
- Loading branch information
Showing
17 changed files
with
528 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
module.exports = (api, options) => { | ||
api.render('./template') | ||
|
||
api.extendPackage({ | ||
scripts: { | ||
lint: 'vue-cli-service lint' | ||
} | ||
}) | ||
|
||
if (options.classComponent) { | ||
api.extendPackage({ | ||
devDependencies: { | ||
'vue-class-component': '^6.0.0', | ||
'vue-property-decorator': '^6.0.0' | ||
} | ||
}) | ||
} | ||
|
||
// delete all js files that have a ts file of the same name | ||
// TODO compat with PWA and test plugins | ||
const jsRE = /\.js$/ | ||
api.postProcessFiles(files => { | ||
for (const file in files) { | ||
if (jsRE.test(file) && files[file.replace(jsRE, '.ts')]) { | ||
delete files[file] | ||
} | ||
} | ||
}) | ||
} |
70 changes: 70 additions & 0 deletions
70
packages/@vue/cli-plugin-typescript/generator/template/src/App.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
<%_ if (!rootOptions.router) { _%> | ||
<template> | ||
<div id="app"> | ||
<img src="./assets/logo.png"> | ||
<HelloWorld msg="Welcome to Your Vue.js App"/> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
<%_ if (!options.classComponent) { _%> | ||
import Vue from 'vue'; | ||
import HelloWorld from './components/HelloWorld.vue'; | ||
export default Vue.extend({ | ||
name: 'app', | ||
components: { | ||
HelloWorld | ||
} | ||
}); | ||
<%_ } else { _%> | ||
import { Component, Vue } from 'vue-property-decorator'; | ||
import HelloWorld from './components/HelloWorld.vue'; | ||
@Component({ | ||
components: { | ||
HelloWorld, | ||
}, | ||
}) | ||
export default class App extends Vue {} | ||
<%_ } _%> | ||
</script> | ||
<%_ } else { _%> | ||
<template> | ||
<div id="app"> | ||
<div id="nav"> | ||
<router-link to="/">Home</router-link> | | ||
<router-link to="/about">About</router-link> | ||
</div> | ||
<router-view/> | ||
</div> | ||
</template> | ||
<%_ } _%> | ||
|
||
<style> | ||
#app { | ||
font-family: 'Avenir', Helvetica, Arial, sans-serif; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
text-align: center; | ||
color: #2c3e50; | ||
<%_ if (!rootOptions.router) { _%> | ||
margin-top: 60px; | ||
<%_ } _%> | ||
} | ||
<%_ if (rootOptions.router) { _%> | ||
#nav { | ||
padding: 30px; | ||
} | ||
#nav a { | ||
font-weight: bold; | ||
color: #2c3e50; | ||
} | ||
#nav a.router-link-exact-active { | ||
color: #42b983; | ||
} | ||
<%_ } _%> | ||
</style> |
59 changes: 59 additions & 0 deletions
59
packages/@vue/cli-plugin-typescript/generator/template/src/components/HelloWorld.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<template> | ||
<div class="hello"> | ||
<h1>{{ msg }}</h1> | ||
<h2>Essential Links</h2> | ||
<ul> | ||
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> | ||
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> | ||
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li> | ||
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> | ||
<br> | ||
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> | ||
</ul> | ||
<h2>Ecosystem</h2> | ||
<ul> | ||
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> | ||
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> | ||
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> | ||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> | ||
</ul> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
<%_ if (!options.classComponent) { _%> | ||
import Vue from 'vue'; | ||
export default Vue.extend({ | ||
name: 'HelloWorld', | ||
props: { | ||
msg: String, | ||
}, | ||
}); | ||
<%_ } else { _%> | ||
import { Component, Prop, Vue } from 'vue-property-decorator'; | ||
@Component | ||
export default class HelloWorld extends Vue { | ||
@Prop() private msg: string; | ||
} | ||
<%_ } _%> | ||
</script> | ||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only --> | ||
<style scoped> | ||
h1, h2 { | ||
font-weight: normal; | ||
} | ||
ul { | ||
list-style-type: none; | ||
padding: 0; | ||
} | ||
li { | ||
display: inline-block; | ||
margin: 0 10px; | ||
} | ||
a { | ||
color: #42b983; | ||
} | ||
</style> |
20 changes: 20 additions & 0 deletions
20
packages/@vue/cli-plugin-typescript/generator/template/src/main.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import Vue from 'vue'; | ||
import App from './App.vue'; | ||
<%_ if (rootOptions.router) { _%> | ||
import router from './router'; | ||
<%_ } _%> | ||
<%_ if (rootOptions.vuex) { _%> | ||
import store from './store'; | ||
<%_ } _%> | ||
|
||
Vue.config.productionTip = false; | ||
|
||
new Vue({ | ||
<%_ if (rootOptions.router) { _%> | ||
router, | ||
<%_ } _%> | ||
<%_ if (rootOptions.vuex) { _%> | ||
store, | ||
<%_ } _%> | ||
render: h => h(App), | ||
}).$mount('#app'); |
23 changes: 23 additions & 0 deletions
23
packages/@vue/cli-plugin-typescript/generator/template/src/router.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<%_ if (rootOptions.router) { _%> | ||
import Vue from 'vue'; | ||
import Router from 'vue-router'; | ||
import Home from './views/Home.vue'; | ||
import About from './views/About.vue'; | ||
|
||
Vue.use(Router); | ||
|
||
export default new Router({ | ||
routes: [ | ||
{ | ||
path: '/', | ||
name: 'home', | ||
component: Home | ||
}, | ||
{ | ||
path: '/about', | ||
name: 'about', | ||
component: About | ||
} | ||
] | ||
}); | ||
<%_ } _%> |
18 changes: 18 additions & 0 deletions
18
packages/@vue/cli-plugin-typescript/generator/template/src/store.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<%_ if (rootOptions.vuex) { _%> | ||
import Vue from 'vue'; | ||
import Vuex from 'vuex'; | ||
|
||
Vue.use(Vuex); | ||
|
||
export default new Vuex.Store({ | ||
state: { | ||
|
||
}, | ||
mutations: { | ||
|
||
}, | ||
actions: { | ||
|
||
} | ||
}); | ||
<%_ } _%> |
7 changes: 7 additions & 0 deletions
7
packages/@vue/cli-plugin-typescript/generator/template/src/views/About.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<%_ if (rootOptions.router) { _%> | ||
<template> | ||
<div class="about"> | ||
<h1>This is an about page</h1> | ||
</div> | ||
</template> | ||
<%_ } _%> |
32 changes: 32 additions & 0 deletions
32
packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<%_ if (rootOptions.router) { _%> | ||
<template> | ||
<div class="home"> | ||
<img src="../assets/logo.png"> | ||
<HelloWorld msg="Welcome to Your Vue.js App"/> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
<%_ if (!options.classComponent) { _%> | ||
import Vue from 'vue'; | ||
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src | ||
export default Vue.extend({ | ||
name: 'home', | ||
components: { | ||
HelloWorld, | ||
}, | ||
}); | ||
<%_ } else { _%> | ||
import { Component, Vue } from 'vue-property-decorator'; | ||
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src | ||
@Component({ | ||
components: { | ||
HelloWorld, | ||
}, | ||
}) | ||
export default class Home extends Vue {} | ||
<%_ } _%> | ||
</script> | ||
<%_ } _%> |
4 changes: 4 additions & 0 deletions
4
packages/@vue/cli-plugin-typescript/generator/template/src/vue-shims.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
declare module '*.vue' { | ||
import Vue from 'vue'; | ||
export default Vue; | ||
} |
26 changes: 26 additions & 0 deletions
26
packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "es5", | ||
"module": "es2015", | ||
"strict": true, | ||
"moduleResolution": "node", | ||
<%_ if (options.classComponent) { _%> | ||
"experimentalDecorators": true, | ||
"emitDecoratorMetadata": true, | ||
<%_ } _%> | ||
"sourceMap": true, | ||
"baseUrl": ".", | ||
"paths": { | ||
"@/*": [ | ||
"src/*" | ||
] | ||
} | ||
}, | ||
"include": [ | ||
"src/**/*.ts", | ||
"src/**/*.vue" | ||
], | ||
"exclude": [ | ||
"node_modules" | ||
] | ||
} |
21 changes: 21 additions & 0 deletions
21
packages/@vue/cli-plugin-typescript/generator/template/tslint.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
{ | ||
"defaultSeverity": "warning", | ||
"extends": [ | ||
"tslint:recommended" | ||
], | ||
"rules": { | ||
"quotemark": [ | ||
true, | ||
"single" | ||
], | ||
"indent": [ | ||
true | ||
], | ||
"interface-name": [ | ||
false | ||
], | ||
"arrow-parens": false, | ||
// Pending fix for shorthand property names. | ||
"object-literal-sort-keys": false | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
module.exports = api => { | ||
api.chainWebpack(config => { | ||
config.entry('app') | ||
.clear() | ||
.add('./src/main.ts') | ||
|
||
config.resolve | ||
.extensions | ||
.merge(['.ts', '.tsx']) | ||
|
||
config.module | ||
.rule('ts') | ||
.test(/\.tsx?$/) | ||
.include | ||
.add(api.resolve('src')) | ||
.end() | ||
.use('ts-loader') | ||
.loader('ts-loader') | ||
.options({ | ||
transpileOnly: true, | ||
appendTsSuffixTo: [/\.vue$/] | ||
}) | ||
|
||
config | ||
.plugin('fork-ts-checker') | ||
.use(require('fork-ts-checker-webpack-plugin'), [{ | ||
vue: true, | ||
tslint: true, | ||
formatter: 'codeframe' | ||
}]) | ||
}) | ||
|
||
api.registerCommand('lint', { | ||
descriptions: 'lint source files with TSLint', | ||
usage: 'vue-cli-service lint [options] [...files]', | ||
options: { | ||
'--format': 'specify formatter (default: codeframe)', | ||
'--no-fix': 'do not fix errors' | ||
}, | ||
details: 'For more options, see https://palantir.github.io/tslint/usage/cli/' | ||
}, (args) => { | ||
const { run } = require('tslint/lib/runner') | ||
|
||
return run({ | ||
files: args._ && args._.length ? args._ : ['src/**/*.ts'], | ||
exclude: args.exclude || [], | ||
fix: !args['no-fix'], | ||
project: api.resolve('tsconfig.json'), | ||
config: api.resolve('tslint.json'), | ||
force: args.force, | ||
format: args.format, | ||
formattersDirectory: args['formatters-dir'], | ||
init: args.init, | ||
out: args.out, | ||
outputAbsolutePaths: args['output-absolute-paths'], | ||
rulesDirectory: args['rules-dir'], | ||
test: args.test, | ||
typeCheck: args['type-check'] | ||
}, { | ||
log (m) { process.stdout.write(m) }, | ||
error (m) { process.stdout.write(m) } | ||
}).then(code => { | ||
process.exitCode = code | ||
}).catch(err => { | ||
console.error(err) | ||
process.exitCode = 1 | ||
}) | ||
}) | ||
} |
Oops, something went wrong.