Skip to content

Commit 135f567

Browse files
jawa-the-huttjawa-the-hutt
authored
Merge pull request #1 from jawa-the-hutt/dev
Initial Commit
2 parents 4f4cc0b + f023847 commit 135f567

File tree

15 files changed

+6057
-4112
lines changed

15 files changed

+6057
-4112
lines changed

‎generator/index.js

Lines changed: 125 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,66 @@
11
module.exports = (api, options, rootOptions) => {
22
const fs = require('fs')
33
const rimraf = require('rimraf')
4+
const replace = require('replace-in-file');
5+
const path = require('path');
6+
7+
console.log('adding to package.json');
48

59
api.extendPackage({
10+
nativescript: {
11+
'id': 'org.nativescript.application',
12+
'tns-ios': {
13+
'version': '4.2.0'
14+
},
15+
'tns-android': {
16+
'version': '4.2.0'
17+
}
18+
},
619
scripts: {
7-
'watch:android': 'vue-cli-service tns --android',
8-
'watch:ios': 'vue-cli-service tns --ios',
20+
"serve:web": "vue-cli-service serve --mode development.web",
21+
"serve:android": "vue-cli-service tns:dev --mode development.android",
22+
"serve:ios": "vue-cli-service tns:dev --mode development.ios",
23+
"build:web": "vue-cli-service build --mode production.web",
24+
"build:android": "vue-cli-service tns:prod --mode production.android",
25+
"build:ios": "vue-cli-service tns:prod --mode production.ios",
926
},
1027
dependencies: {
11-
'nativescript-vue': '^1.3.1'
28+
'nativescript-vue': '^2.0.2',
29+
'tns-core-modules': '^4.2.1',
1230
},
1331
devDependencies: {
14-
'nativescript-vue-loader': '1.0.0',
15-
'nativescript-vue-template-compiler': '^1.3.1',
16-
'tns-core-modules': '^4.0.0'
32+
'@babel/core': '^7.1.2',
33+
'@babel/preset-env': '^7.1.0',
34+
'@babel/types': '^7.1.3',
35+
'babel-loader': '^8.0.4',
36+
'babel-traverse': '^6.26.0',
37+
'clean-webpack-plugin': '^0.1.19',
38+
'copy-webpack-plugin': '^4.5.4',
39+
'nativescript-dev-webpack': '^0.17.0',
40+
'nativescript-vue-template-compiler': '^2.0.2',
41+
'nativescript-worker-loader': '~0.9.1',
42+
'replace-in-file': '^3.4.2',
43+
"string-replace-loader": "^2.1.1",
1744
}
1845
})
1946

47+
console.log('deleting from package.json');
48+
49+
2050
api.extendPackage(pkg => {
21-
delete pkg.dependencies['vue']
22-
delete pkg.devDependencies['vue-template-compiler']
23-
delete pkg.browserslist
24-
delete pkg.scripts['serve']
51+
// delete pkg.dependencies['vue']
52+
delete pkg.devDependencies[
53+
// 'vue-template-compiler',
54+
'babel-core'
55+
]
56+
// delete pkg.browserslist
57+
delete pkg.scripts['serve'],
58+
delete pkg.scripts['build']
59+
2560
})
2661

62+
console.log('doing template rendering');
63+
2764
api.render('./templates/simple', {
2865
applicationName: api.generator.pkg.name,
2966
applicationVersion: api.generator.pkg.version,
@@ -34,11 +71,85 @@ module.exports = (api, options, rootOptions) => {
3471
historyMode: options.historyMode || false,
3572
})
3673

37-
// delete the "public" directory
74+
console.log('onCreateComplete');
75+
76+
// delete the 'public' directory
3877
api.onCreateComplete(() => {
39-
const publicPath = api.resolve('public')
40-
if(fs.existsSync(publicPath)) {
41-
rimraf.sync(publicPath)
78+
const newline = process.platform === 'win32' ? '\r\n' : '\n';
79+
// // // const publicPath = api.resolve('public')
80+
const webpackConfigFile = api.resolve('./webpack.config.js')
81+
const main = api.resolve('src/main.js');
82+
const gitignorePath = api.resolve('.gitignore')
83+
84+
// // // if(fs.existsSync(publicPath)) {
85+
// // // rimraf.sync(publicPath)
86+
// // // }
87+
88+
// remove any webpack.config.js file that might already be there
89+
if(fs.existsSync(webpackConfigFile)) {
90+
fs.unlink(webpackConfigFile, (err) => {
91+
if (err) throw err;
92+
}); }
93+
94+
// delete main.js
95+
if(fs.existsSync(main)) {
96+
fs.unlink(main, (err) => {
97+
if (err) throw err;
98+
});
99+
}
100+
101+
// setup string replacement options for babel.config.js file
102+
if(fs.existsSync('./babel.config.js')) {
103+
const replaceOptions = {
104+
files: './babel.config.js',
105+
from: ' \'@vue/app\'',
106+
to: ' process.env.VUE_PLATFORM === \'web\' ? \'@vue/app\' : {}, ' + newline + ' [\'@babel/env\', { targets: { esmodules: true } }]',
107+
}
108+
replace(replaceOptions, (error, changes) => {
109+
if (error) {
110+
return console.error('Error occurred:', error);
111+
}
112+
})
42113
}
114+
115+
// write out environmental files
116+
const developmentAndroid = 'NODE_ENV=development' + newline + 'VUE_PLATFORM=android' + newline + 'VUE_APP_MODE=native';
117+
const developmentIOS = 'NODE_ENV=development' + newline + 'VUE_PLATFORM=ios' + newline + 'VUE_APP_MODE=native';
118+
const developmentWeb = 'NODE_ENV=development' + newline + 'VUE_PLATFORM=web' + newline + 'VUE_APP_MODE=web';
119+
const productionAndroid = 'NODE_ENV=production' + newline + 'VUE_PLATFORM=android' + newline + 'VUE_APP_MODE=native';
120+
const productionIOS = 'NODE_ENV=production' + newline + 'VUE_PLATFORM=ios' + newline + 'VUE_APP_MODE=native';
121+
const productionWeb = 'NODE_ENV=production' + newline + 'VUE_PLATFORM=web' + newline + 'VUE_APP_MODE=web';
122+
123+
fs.writeFileSync('./.env.development.android', developmentAndroid, { encoding: 'utf8' })
124+
fs.writeFileSync('./.env.development.ios', developmentIOS, { encoding: 'utf8' })
125+
fs.writeFileSync('./.env.development.web', developmentWeb, { encoding: 'utf8' })
126+
fs.writeFileSync('./.env.production.android', productionAndroid, { encoding: 'utf8' })
127+
fs.writeFileSync('./.env.production.ios', productionIOS, { encoding: 'utf8' })
128+
fs.writeFileSync('./.env.production.web', productionWeb, { encoding: 'utf8' })
129+
130+
131+
// write nsconfig.json
132+
const nsconfig = {
133+
'appPath': 'src',
134+
'appResourcesPath': 'src/App_Resources'
135+
}
136+
fs.writeFileSync('./nsconfig.json', JSON.stringify(nsconfig, null, 2), {encoding: 'utf8'});
137+
138+
// write .gitignore additions
139+
let gitignoreContent
140+
141+
if (fs.existsSync(gitignorePath)) {
142+
gitignoreContent = fs.readFileSync(gitignorePath, { encoding: 'utf8' })
143+
} else {
144+
gitignoreContent = ''
145+
}
146+
147+
const gitignoreAdditions = newline + '# NativeScript application' + newline + 'hooks' + newline + 'platforms'
148+
if (gitignoreContent.indexOf(gitignoreAdditions) === -1) {
149+
gitignoreContent += gitignoreAdditions
150+
151+
fs.writeFileSync(gitignorePath, gitignoreContent, { encoding: 'utf8' })
152+
}
153+
43154
})
44155
}

‎generator/templates/simple/src/App.vue

Lines changed: 175 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,89 @@
11
<%_ if (!rootOptions.router) { _%>
2-
<template>
2+
<template native>
33
<Page>
4-
<ActionBar title="NativeScript-Vue"/>
4+
<ActionBar :title="navbarTitle"/>
55
<GridLayout rows="auto, auto">
6-
<Image src="./assets/logo.png" row="0" />
6+
<Image src="~/assets/logo.png" row="0" />
77
<HelloWorld msg="Welcome to Your Vue.js App" row="1" />
88
</GridLayout>
99
</Page>
1010
</template>
11-
11+
<template web>
12+
<div class="w-page">
13+
<nav>
14+
<ul class="w-navbar">
15+
<li class="w-title" :text="navbarTitle">{{navbarTitle}}</li>
16+
</ul>
17+
</nav>
18+
<div class="w-container">
19+
<img src="@/assets/logo.png" alt="logo" height="20%" width="20%">
20+
<HelloWorld msg="Welcome to Your Vue.js App" />
21+
</div>
22+
</div>
23+
</template>
1224
<script>
13-
import HelloWorld from './components/HelloWorld.vue'
25+
// ~ is an alias to /src
26+
import HelloWorld from '~/components/HelloWorld.vue'
1427

15-
export default {
16-
name: 'app',
17-
components: {
18-
HelloWorld
28+
export default {
29+
name: 'app',
30+
components: {
31+
HelloWorld
32+
},
33+
data() {
34+
return {
35+
navbarTitle: process.env.TNS_APP_MODE === 'native' ? 'NativeScript-Vue' : 'Web Vue',
36+
}
37+
},
1938
}
20-
}
21-
</script>
39+
</script>
2240
<%_ } else { _%>
23-
<template>
41+
<template native>
2442
<Page>
25-
<ActionBar title="NativeScript-Vue"/>
26-
<GridLayout rows="auto, auto, *">
27-
<Button text="Home" @tap="$router.replace('/')" />
28-
<Button text="About" @tap="$router.replace('/about')" />
29-
30-
<router-view row="2" />
43+
<ActionBar title="NativeScript-Vue - App.vue"/>
44+
<GridLayout rows="auto, auto">
45+
<Button text="Home" @tap="goToHomePage" row="0"/>
46+
<Button text="About" @tap="goToAboutPage" row="1"/>
3147
</GridLayout>
3248
</Page>
3349
</template>
50+
<template web>
51+
<div class="w-page">
52+
<nav>
53+
<ul class="w-navbar">
54+
<li class="w-title" :text="navbarTitle">{{navbarTitle}}</li>
55+
</ul>
56+
</nav>
57+
<div class="w-container">
58+
<router-link tag="button" class="w-button" id="homeButton" to="/">Home</router-link>
59+
<router-link tag="button" class="w-button" id="aboutButton" to="/about">About</router-link>
60+
<router-view/>
61+
</div>
62+
</div>
63+
</template>
64+
<script>
65+
// ~ is an alias to /src
66+
import Home from '~/views/Home.vue';
67+
import About from '~/views/About.vue';
68+
69+
export default {
70+
71+
data() {
72+
return {
73+
navbarTitle: process.env.TNS_APP_MODE === 'native' ? 'NativeScript-Vue' : 'Web Vue',
74+
}
75+
},
76+
methods: {
77+
goToHomePage() {
78+
process.env.TNS_APP_MODE === 'native' ? this.$navigateTo(Home) : null;
79+
},
80+
goToAboutPage() {
81+
process.env.TNS_APP_MODE === 'native' ? this.$navigateTo(About): null;
82+
}
83+
}
84+
}
85+
86+
</script>
3487
<%_ } _%>
3588

3689
<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
@@ -43,13 +96,112 @@ export default {
4396
}"`
4497
: ``
4598
%>>
46-
ActionBar {
47-
color: #42b983;
48-
}
99+
ActionBar, .w-navbar {
100+
color: #42b983;
101+
}
102+
103+
.w-page {
104+
height: 100%;
105+
width: 100%;
106+
}
107+
108+
.w-navbar {
109+
position: fixed;
110+
z-index: 10000;
111+
height: 3em;
112+
width: 100%;
113+
top: 0px;
114+
left: 0px;
115+
margin: auto;
116+
list-style: none;
117+
118+
display: flex;
119+
align-items: center;
120+
padding: 0 10px;
121+
122+
-webkit-box-shadow: -8px 8px 6px -7px #999;
123+
-moz-box-shadow: -8px 8px 6px -7px #999;
124+
box-shadow: -8px 8px 6px -7px #999;
125+
126+
.w-title {
127+
margin-left: auto;
128+
margin-right: auto;
129+
}
130+
}
131+
132+
.w-container {
133+
height: 100%;
134+
width: 100%;
135+
padding-top: 3em;
136+
position: relative;
137+
overflow: hidden;
138+
display: flex;
139+
flex-direction: column;
140+
justify-content: top;
141+
align-items: center;
142+
143+
144+
.w-button {
145+
width: 50%;
146+
height: 2em;
147+
margin: .25em;
148+
display: flex;
149+
justify-content: center;
150+
align-items: center;
151+
background-color: #d7d7d7;
152+
border-width: 0px;
153+
font-weight: 600;
154+
border-radius: 3px;
155+
}
156+
157+
}
158+
49159
</style>
50160
<%_ } else { _%>
51161
<style lang="stylus">
52-
ActionBar
53-
color #42b983
162+
ActionBar, .w-navbar
163+
color: #42b983
164+
.w-page
165+
height: 100%
166+
width: 100%
167+
.w-navbar
168+
position: fixed
169+
z-index: 10000
170+
height: 3em
171+
width: 100%
172+
top: 0px
173+
left: 0px
174+
margin: auto
175+
list-style: none
176+
display: flex
177+
align-items: center
178+
padding: 0 10px
179+
-webkit-box-shadow: -8px 8px 6px -7px #999
180+
-moz-box-shadow: -8px 8px 6px -7px #999
181+
box-shadow: -8px 8px 6px -7px #999
182+
.w-title
183+
margin-left: auto
184+
margin-right: auto
185+
.w-container
186+
height: 100%
187+
width: 100%
188+
padding-top: 3em
189+
position: relative
190+
overflow: hidden
191+
display: flex
192+
flex-direction: column
193+
justify-content: top
194+
align-items: center
195+
.w-button
196+
width: 50%
197+
height: 2em
198+
margin: .25em
199+
display: flex
200+
justify-content: center
201+
align-items: center
202+
background-color: #d7d7d7
203+
border-width: 0px
204+
font-weight: 600
205+
border-radius: 3px
54206
</style>
55207
<%_ } _%>

0 commit comments

Comments
 (0)