Skip to content

Commit 9845443

Browse files
jawa-the-huttjawa-the-hutt
committed
initial typescript integration - WIP
1 parent 902b805 commit 9845443

File tree

16 files changed

+556
-104
lines changed

16 files changed

+556
-104
lines changed

‎generator/index.js‎

Lines changed: 103 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,21 @@ const fs = require('fs-extra');
33
const replace = require('replace-in-file');
44

55
const newline = process.platform === 'win32' ? '\r\n' : '\n';
6-
const babelReplaceOptions = {
7-
files: '',
8-
from: ' \'@vue/app\'',
9-
to: ' process.env.VUE_PLATFORM === \'web\' ? \'@vue/app\' : {}, ' + newline + ' [\'@babel/env\', { targets: { esmodules: true } }]',
10-
}
11-
12-
13-
146

157
module.exports = (api, options, rootOptions) => {
168

179
console.log('options.isNativeOnly - ', options.isNativeOnly)
1810
console.log('options.isNVW - ', options.isNVW)
1911
console.log('options.isNewProject - ', options.isNewProject)
12+
console.log('usingTS - ', api.hasPlugin('typescript'))
13+
console.log('usingBabel - ', api.hasPlugin('babel'))
2014

2115
const existingDirPath = './example/';
16+
const jsOrTs = api.hasPlugin('typescript') ? 'ts' : 'js'
2217

2318
const srcfiles = [
24-
'router.js',
25-
'main.js',
19+
'router.' + jsOrTs,
20+
'main.' + jsOrTs,
2621
'App.vue',
2722
'views/About.vue',
2823
'views/Home.vue',
@@ -32,7 +27,7 @@ module.exports = (api, options, rootOptions) => {
3227

3328
const appfiles = [
3429
'package.json',
35-
'main.js',
30+
'main.' + jsOrTs,
3631
'App.native.vue',
3732
'App.ios.vue',
3833
'App.android.vue',
@@ -152,8 +147,8 @@ module.exports = (api, options, rootOptions) => {
152147
renderFilesIndividually(api, srcfiles, commonRenderOptions, './templates/simple/without-nvw/src/', './src/');
153148
renderFilesIndividually(api, appfiles, commonRenderOptions, './templates/simple/without-nvw/app/', './app/');
154149

155-
vueRouterSetup(api, './');
156-
vuexSetup(api, './');
150+
vueRouterSetup(api, './', jsOrTs);
151+
vuexSetup(api, './', jsOrTs);
157152
}
158153

159154
// New Project and is using Nativescript-Vue-Web
@@ -187,8 +182,8 @@ module.exports = (api, options, rootOptions) => {
187182
renderFilesIndividually(api, srcfiles, commonRenderOptions, './templates/simple/without-nvw/src/', existingDirPath + 'src/');
188183
renderFilesIndividually(api, appfiles, commonRenderOptions, './templates/simple/without-nvw/app/', existingDirPath + 'app/');
189184

190-
vueRouterSetup(api, existingDirPath);
191-
vuexSetup(api, existingDirPath);
185+
vueRouterSetup(api, existingDirPath, jsOrTs);
186+
vuexSetup(api, existingDirPath, jsOrTs);
192187
}
193188

194189
// Existing Project and is using Nativescript-Vue-Web
@@ -224,6 +219,11 @@ module.exports = (api, options, rootOptions) => {
224219
writeEnvFiles('./')
225220
nsconfigSetup(api.resolve('nsconfig.json'));
226221

222+
if(hasPlugin('typescript')) {
223+
tsconfigSetup(api.resolve('tsconfig.json'));
224+
tslintSetup(api.resolve('tslint.json'));
225+
}
226+
227227
// for new projects that are native only, move files/dirs and delete others
228228
if (options.isNativeOnly) {
229229
// move store.js file from ./src to ./app
@@ -257,6 +257,13 @@ module.exports = (api, options, rootOptions) => {
257257
writeEnvFiles(existingDirPath)
258258
nsconfigSetup(api.resolve(existingDirPath + 'nsconfig.json'));
259259

260+
if(hasPlugin('typescript')) {
261+
tsconfigSetup(api.resolve(existingDirPath + 'tsconfig.json'));
262+
tslintSetup(api.resolve(existingDirPath + 'tslint.json'));
263+
264+
}
265+
266+
260267
// for existing projects that are native only, try and copy items from src
261268
// but do not delete anythign in src.
262269
if (options.isNativeOnly) {
@@ -283,11 +290,11 @@ module.exports = (api, options, rootOptions) => {
283290

284291
// setup vue-router options
285292
// will not setup any vue-router options for native app
286-
const vueRouterSetup = module.exports.vueRouterSetup = async (api, filePathPrepend) => {
293+
const vueRouterSetup = module.exports.vueRouterSetup = async (api, filePathPrepend, jsOrTs) => {
287294
try {
288295
if(api.hasPlugin('vue-router')){
289-
api.injectImports(filePathPrepend + 'src/main.js', `import router from '~/router'`)
290-
api.injectRootOptions(filePathPrepend + 'src/main.js', `router`)
296+
api.injectImports(filePathPrepend + 'src/main' + jsOrTs, `import router from '~/router'`)
297+
api.injectRootOptions(filePathPrepend + 'src/main' + jsOrTs, `router`)
291298
}
292299
} catch(err) {
293300
throw err
@@ -296,13 +303,13 @@ const vueRouterSetup = module.exports.vueRouterSetup = async (api, filePathPrepe
296303
}
297304

298305
// setup Vuex
299-
const vuexSetup = module.exports.vuexSetup = async (api, filePathPrepend) => {
306+
const vuexSetup = module.exports.vuexSetup = async (api, filePathPrepend, jsOrTs) => {
300307
try {
301308
if(api.hasPlugin('vuex')){
302-
api.injectImports(filePathPrepend + 'src/main.js', `import store from '~/store'`)
303-
api.injectRootOptions(filePathPrepend + 'src/main.js', `store`)
304-
api.injectImports(filePathPrepend + 'app/main.js', `import store from 'src/store'`)
305-
api.injectRootOptions(filePathPrepend + 'app/main.js', `store`)
309+
api.injectImports(filePathPrepend + 'src/main' + jsOrTs, `import store from '~/store'`)
310+
api.injectRootOptions(filePathPrepend + 'src/main' + jsOrTs, `store`)
311+
api.injectImports(filePathPrepend + 'app/main' + jsOrTs, `import store from 'src/store'`)
312+
api.injectRootOptions(filePathPrepend + 'app/main' + jsOrTs, `store`)
306313
}
307314
} catch(err) {
308315
throw err
@@ -312,6 +319,13 @@ const vuexSetup = module.exports.vuexSetup = async (api, filePathPrepend) => {
312319

313320
// write out babel.config.js options
314321
const applyBabelConfig = module.exports.applyBabelConfig = async (api, filePath) => {
322+
323+
const babelReplaceOptions = {
324+
files: '',
325+
from: ' \'@vue/app\'',
326+
to: ' process.env.VUE_PLATFORM === \'web\' ? \'@vue/app\' : {}, ' + newline + ' [\'@babel/env\', { targets: { esmodules: true } }]',
327+
}
328+
315329
try {
316330

317331
babelReplaceOptions.files = filePath;
@@ -411,6 +425,72 @@ const nsconfigSetup = module.exports.nsconfigSetup = async (nsconfigPath) => {
411425

412426
}
413427

428+
// setup tsconfigSetup
429+
const tsconfigSetup = module.exports.tsconfigSetup = async (tsconfigPath) => {
430+
let tsconfigContent = '';
431+
432+
try {
433+
if (fs.existsSync(tsconfigPath)) {
434+
tsconfigContent = JSON.parse(fs.readFileSync(tsconfigPath, { encoding: 'utf8' }));
435+
} else {
436+
tsconfigContent = {};
437+
}
438+
439+
delete tsconfigContent.paths['@/*'];
440+
tsconfigContent.paths['~/*'] = "src/*";
441+
tsconfigContent.paths['src/*'] = "src/*";
442+
tsconfigContent.paths['assets/*'] = "src/assets/*";
443+
tsconfigContent.paths['fonts/*'] = "src/fonts/*";
444+
tsconfigContent.paths['root/*'] = "/*";
445+
tsconfigContent.paths['components/*'] = "/src/components*";
446+
447+
tsconfigContent.include.push['app/**/*.ts'];
448+
tsconfigContent.include.push['app/**/*.tsx'];
449+
tsconfigContent.include.push['app/**/*.vue'];
450+
451+
tsconfigContent.exclude.push['platforms'];
452+
tsconfigContent.exclude.push['hooks'];
453+
454+
fs.writeFileSync(tsconfigPath, JSON.stringify(tsconfigContent, null, 2), {encoding: 'utf8'}, (err) => {
455+
if (err) console.error(err)
456+
});
457+
458+
459+
} catch(err) {
460+
throw err
461+
}
462+
463+
}
464+
465+
// setup tslintSetup
466+
const tslintSetup = module.exports.tslintSetup = async (tslintPath) => {
467+
let tslintContent = '';
468+
469+
try {
470+
if (fs.existsSync(tslintPath)) {
471+
tslintContent = JSON.parse(fs.readFileSync(tslintPath, { encoding: 'utf8' }));
472+
} else {
473+
return;
474+
}
475+
476+
tslintContent.linterOptions.exclude.push['platforms/**'];
477+
tslintContent.linterOptions.exclude.push['hooks/**'];
478+
479+
tslintContent.exclude.push['platforms'];
480+
tslintContent.exclude.push['hooks'];
481+
482+
483+
fs.writeFileSync(tslintPath, JSON.stringify(tslintContent, null, 2), {encoding: 'utf8'}, (err) => {
484+
if (err) console.error(err)
485+
});
486+
487+
488+
} catch(err) {
489+
throw err
490+
}
491+
492+
}
493+
414494
const copyDirs = module.exports.copyDirs = async (srcPath, destPath) => {
415495
try {
416496
const baseDir = extractCallDir()

‎generator/templates/simple/without-nvw/app/App.android.vue‎

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,19 @@
1010
</GridLayout>
1111
</Page>
1212
</template>
13+
<%_ } else { _%>
14+
<template>
15+
<Page>
16+
<ActionBar :title="navbarTitle"/>
17+
<GridLayout rows="auto, auto">
18+
<Button text="Home" @tap="goToHomePage" row="0"/>
19+
<Button text="About" @tap="goToAboutPage" row="1"/>
20+
</GridLayout>
21+
</Page>
22+
</template>
23+
<%_ } _%>
24+
25+
<%_ if (!rootOptions.router && !usingTS) { _%>
1326
<script>
1427
// ~ is an alias to /src
1528
import Home from '~/views/Home';
@@ -33,19 +46,33 @@
3346
}
3447

3548
</script>
36-
<%_ } else { _%>
37-
<%# This code is the same as not having a router. #%>
38-
<%# See note above #%>
39-
<template>
40-
<Page>
41-
<ActionBar :title="navbarTitle"/>
42-
<GridLayout rows="auto, auto">
43-
<Button text="Home" @tap="goToHomePage" row="0"/>
44-
<Button text="About" @tap="goToAboutPage" row="1"/>
45-
</GridLayout>
46-
</Page>
47-
</template>
49+
<%_ } else if (!rootOptions.router && usingTS) { _%>
50+
<script lang="ts">
51+
// ~ is an alias to /src
52+
import Home from '~/views/Home';
53+
import About from '~/views/About';
54+
55+
export default {
56+
57+
data() {
58+
return {
59+
navbarTitle: 'App.android.vue',
60+
}
61+
},
62+
methods: {
63+
goToHomePage() {
64+
this.$navigateTo(Home);
65+
},
66+
goToAboutPage() {
67+
this.$navigateTo(About);
68+
}
69+
}
70+
}
71+
72+
</script>
73+
<%_ } else if (rootOptions.router && !usingTS){ _%>
4874
<script>
75+
4976
// ~ is an alias to /src
5077
import Home from '~/views/Home';
5178
import About from '~/views/About';
@@ -68,8 +95,35 @@
6895
}
6996

7097
</script>
98+
<%_ } else if (rootOptions.router && usingTS){ _%>
99+
<script lang="ts">
100+
101+
// ~ is an alias to /src
102+
import Home from '~/views/Home';
103+
import About from '~/views/About';
104+
105+
export default {
106+
107+
data() {
108+
return {
109+
navbarTitle: 'App.android.vue',
110+
}
111+
},
112+
methods: {
113+
goToHomePage() {
114+
this.$navigateTo(Home);
115+
},
116+
goToAboutPage() {
117+
this.$navigateTo(About);
118+
}
119+
}
120+
}
121+
122+
</script>
123+
<%_ } else { _%>
71124
<%_ } _%>
72125

126+
73127
<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
74128
<style<%-
75129
rootOptions.cssPreprocessor

0 commit comments

Comments
 (0)