Merge pull request #30 from jawa-the-hutt/dev

Dev to Master

Author: jawa-the-hutt

Diff for: README.md

@@ -53,19 +53,19 @@ An example of this would be the following Vue component:
 ```
 
 ### Optional Separation of concerns for Web and Native SFC's
-If you want complete seperation of concerns between Web and Native for components, core logic and styling, you can also provide an alternate file naming scheme in your project. The name will dictate which mode (Web or Native) and platform (Android or IOS) the file will be used with. The same overall schema will work for `.vue`, `.js`, `.ts`, `.scss` and `.css` files. 
+If you want complete seperation of concerns between Web and Native for components, core logic and styling, you can also provide an alternate file naming scheme in your project. The name will dictate which mode (Web or Native) and platform (Android or IOS) the file will be used with. The same overall schema will work for `.vue`, `.js`, `.ts`, `.scss` and `.css` files.
 
 | File Type  | Android __and__ IOS | Android only    | IOS only        | Web only        |
 | ---------- | ------------------- | --------------- | --------------- | --------------- |
-| vue        | *.native.vue        | *.android.vue   | *.ios.vue       | *.vue           |   
+| vue        | *.native.vue        | *.android.vue   | *.ios.vue       | *.vue           |
 | js         | *.native.js         | *.android.js    | *.ios.js        | *.js            |
 | ts         | *.native.ts         | *.android.ts    | *.ios.ts        | *.ts            |
 | scss       | *.native.scss       | *.android.scss  | *.ios.scss      | *.scss          |
 | css        | *.native.css        | *.android.css   | *.ios.css       | *.css           |
 
 Webpack will handle figuring out which files to include based on the `npm run` command syntax you pass in.  You can also mix and match this file naming schema with the `web` or `native` tag options mentioned above.
 
-At `serve` or `build` in conjunction with the mode such as `android` or `ios`, Webpack will filter which files are looked at.  For instance, if you do `npm run serve:android`, then it will look for `*.native.vue` and `*.android.vue` files and ignore `*.ios.vue` files entirely.  Conversely, it will do the same when you are working with `ios` and will ignore `*.android.vue` files. 
+At `serve` or `build` in conjunction with the mode such as `android` or `ios`, Webpack will filter which files are looked at.  For instance, if you do `npm run serve:android`, then it will look for `*.native.vue` and `*.android.vue` files and ignore `*.ios.vue` files entirely.  Conversely, it will do the same when you are working with `ios` and will ignore `*.android.vue` files.
 
 This will allow you to develop generic native components under the `*.native.vue` file extension, but in special cases, it may require you to do platform specific components, core logic and styling.  Use the corrosponding file extension to allow this to happen.
 
@@ -218,7 +218,7 @@ Each time the project is built or served, the plugin will copy the latest webpac
 If you'd like to see what the webpack config is doing then you can run one of the following:
 
 1. `vue inspect -- --env.android > out-android.js`
-2. `vue inspect -- --env.ios > out-android.js`
+2. `vue inspect -- --env.ios > out-ios.js`
 3. `vue inspect -- --env.web > out-web.js`
 
 These will default to showing you the Development version of the webpack config. You can pass in the `-- --env.production` option to see the Production version of the config.  Subtitute `development.android` or `production.ios`, etc to see the different configs based on the environmental variables.

Diff for: generator/index.js

@@ -56,47 +56,48 @@ module.exports = async (api, options, rootOptions) => {
         version: '5.2.0'
       },
       'tns-android': {
-        version: '5.2.0'
+        version: '5.2.1'
       }
     },
     scripts: {
-      'build:android':
-        // eslint-disable-next-line max-len
-        'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.android tns build android --bundle --env.production && npm run remove-webpack-config',
-      'build:ios':
-        'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.ios tns build ios --bundle --env.production && npm run remove-webpack-config',
+      'build:android': 'npm run setup-webpack-config && tns build android --bundle --env.production && npm run remove-webpack-config',
+      'build:ios': 'npm run setup-webpack-config && tns build ios --bundle --env.production && npm run remove-webpack-config',
       'remove-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance post',
-      'serve:android': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns run android --bundle --env.development',
-      'serve:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.ios tns run ios --bundle --env.development',
+      'serve:android': 'npm run setup-webpack-config && tns run android --bundle --env.development',
+      'serve:ios': 'npm run setup-webpack-config && tns run ios --bundle --env.development',
       // 'inspect:android': 'npm run setup-webpack-config && vue inspect -- --env.android > out-android.js',
       // 'inspect:ios': 'npm run setup-webpack-config && vue inspect -- --env.ios > out-ios.js',
-      'debug:android': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns debug android --bundle --env.development',
-      'debug:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.ios tns debug ios --bundle --env.development',
-      'preview:android':
-        'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns preview --bundle --env.development --env.android',
-      'preview:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns preview --bundle --env.development --env.ios',
-      'setup-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre'
+      'debug:android': 'npm run setup-webpack-config && tns debug android --bundle --env.development',
+      'debug:ios': 'npm run setup-webpack-config && tns debug ios --bundle --env.development',
+      'preview:android': 'npm run setup-webpack-config && tns preview --bundle --env.development --env.android',
+      'preview:ios': 'npm run setup-webpack-config && tns preview --bundle --env.development --env.ios',
+      'setup-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre',
+      'clean:platforms': 'rimraf platforms',
+      'clean:android': 'rimraf platforms/android',
+      'clean:ios': 'rimraf platforms/ios'
     },
     dependencies: {
       'nativescript-vue': '^2.0.2',
       'tns-core-modules': '^5.2.1'
     },
     devDependencies: {
-      'cross-env': '^5.2.0',
       'nativescript-dev-webpack': '^0.17.0',
       'nativescript-vue-template-compiler': '^2.0.2',
       'nativescript-worker-loader': '~0.9.1',
       'node-sass': '^4.11.0',
-      'string-replace-loader': '^2.1.1'
+      'string-replace-loader': '^2.1.1',
+      rimraf: '^2.6.3',
+      webpack: '^4.29.6',
+      'webpack-cli': '^3.2.3'
     }
   });
 
   // add scripts when we are also developing for the web
   if (!options.isNativeOnly) {
     api.extendPackage({
       scripts: {
-        'serve:web': 'vue-cli-service serve --mode development.web --env.development --env.web',
-        'build:web': 'vue-cli-service build --mode production.web --env.production --env.web'
+        'serve:web': 'vue-cli-service serve --mode development.web',
+        'build:web': 'vue-cli-service build --mode production.web'
         //'inspect:web': 'npm run setup-webpack-config && vue inspect -- --env.web > out-web.js'
       }
     });
@@ -118,7 +119,7 @@ module.exports = async (api, options, rootOptions) => {
       dependencies: {},
       devDependencies: {
         'fork-ts-checker-webpack-plugin': '^0.4.15',
-        'uglifyjs-webpack-plugin': '^2.0.1'
+        'terser-webpack-plugin': '^1.2.3'
         //'tns-platform-declarations': '^4.2.1'
       }
     });
@@ -138,10 +139,10 @@ module.exports = async (api, options, rootOptions) => {
   if (api.hasPlugin('babel')) {
     api.extendPackage({
       devDependencies: {
-        '@babel/core': '^7.1.2',
-        '@babel/preset-env': '^7.1.0',
-        'babel-loader': '^8.0.4',
-        'babel-traverse': '^6.26.0'
+        '@babel/core': '^7.3.4',
+        '@babel/preset-env': '^7.3.4',
+        'babel-loader': '^8.0.5',
+        '@babel/traverse': '^7.3.4'
       }
     });
 
@@ -237,7 +238,7 @@ module.exports = async (api, options, rootOptions) => {
     });
   }
 
-  api.onCreateComplete(() => {
+  api.onCreateComplete(async () => {
     // make changes to .gitignore
     gitignoreAdditions(api);
 
@@ -252,15 +253,26 @@ module.exports = async (api, options, rootOptions) => {
       nativeOnlyRenameFiles(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier.slice(0, -1));
     }
 
-    if (api.hasPlugin('typescript')) {
-      if (fs.existsSync(api.resolve('tslint.json'))) {
-        require('../lib/tslint')({}, api, true);
-        tslintSetup(genConfig.dirPathPrefix, api.resolve('tslint.json'), genConfig.tsExclusionArray);
-      }
+    // remove router config for projects that don't use vue-router
+    if (!rootOptions.router) {
+      fs.remove(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'router' + genConfig.jsOrTs, (err) => {
+        if (err) throw err;
+      });
+    }
 
+    if (api.hasPlugin('typescript')) {
       // we need to edit the tsconfig.json file in /app
       // for a Native only project to remove references to /src
-      tsconfigSetup(options, genConfig.dirPathPrefix, genConfig.nativeAppPathModifier);
+      await tsconfigSetup(options, genConfig.dirPathPrefix, genConfig.nativeAppPathModifier);
+
+      if (fs.existsSync(api.resolve('tslint.json'))) {
+        await tslintSetup(genConfig.dirPathPrefix, api.resolve('tslint.json'), genConfig.tsExclusionArray);
+
+        const baseDir = genConfig.nativeAppPathModifier;
+        require('../lib/tslint')({
+          '_': [`${baseDir}**/*.ts`, `${baseDir}**/*.vue`, `${baseDir}**/*.tsx`, 'tests/**/*.ts', 'tests/**/*.tsx']
+        }, api, false);
+      }
     }
 
     // the main difference between New and Existing for this section is
@@ -709,7 +721,7 @@ const tslintSetup = (module.exports.tslintSetup = async (dirPathPrefix, tslintPa
 // setup tsconfig for native only projects
 const tsconfigSetup = (module.exports.tsconfigSetup = async (options, dirPathPrefix, nativeAppPathModifier) => {
   try {
-    // setup the abilty to edit the tsconfig.json file in the root of the project
+    // setup the ability to edit the tsconfig.json file in the root of the project
     let tsConfigContent = '';
     let tsConfigPath = path.join(dirPathPrefix, 'tsconfig.json');
 
@@ -724,6 +736,9 @@ const tsconfigSetup = (module.exports.tsconfigSetup = async (options, dirPathPre
     tsConfigContent.compilerOptions.noImplicitAny = false;
     // // // tsConfigContent.compilerOptions.types = [];
 
+    // edit types attribute to fix build
+    tsConfigContent.compilerOptions.types = ['node'];
+
     // edit some of the options in compilerOptions.paths object array
     tsConfigContent.compilerOptions.paths['@/*'] = [nativeAppPathModifier + '*'];
     tsConfigContent.compilerOptions.paths['assets/*'] = [nativeAppPathModifier + 'assets/*'];
@@ -821,7 +836,7 @@ const renderDirectoryStructure = (module.exports.renderDirectoryStructure = asyn
 ) => {
   try {
     const files = new Array();
-    const baseDir = await extractCallDir()
+    const baseDir = await extractCallDir();
     const _files = await getAllFilesInDirStructure(srcPathPrefix, baseDir);
 
     for (const rawPath of _files) {
@@ -902,7 +917,6 @@ const getAllFilesInDirStructure = (module.exports.replaceInFile = async (srcPath
 // utility function used to remove sections of strings from files
 const replaceInFile = (module.exports.replaceInFile = async (options) => {
   try {
-    //const changes = 
     await replace(options);
   } catch (error) {
     console.error('Error occurred:', error);

Diff for: generator/templates/nvw/src/App.vue

@@ -197,7 +197,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style web lang="scss">
+<style web>
   @import '~styles/style-one';
 
   .w-page {
@@ -209,7 +209,7 @@
     color: #42b983;
   }
 </style>
-<style native lang="scss">
+<style native>
   @import '~styles/style-one';
 </style>
 <%_ } _%>

Diff for: generator/templates/nvw/src/components/HelloWorld.android.vue

@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }

Diff for: generator/templates/nvw/src/components/HelloWorld.ios.vue

@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }

Diff for: generator/templates/nvw/src/components/HelloWorld.native.vue

@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }

Diff for: generator/templates/nvw/src/components/HelloWorld.vue

@@ -92,7 +92,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
     display: block;

Diff for: generator/templates/nvw/src/views/About.vue

@@ -105,7 +105,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   @import '~styles/style-two';
   @import '~styles/style-one';
 

Diff for: generator/templates/nvw/src/views/Home.vue

@@ -122,7 +122,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   @import '~styles/style-one';
   @import '~styles/style-two';
 

Diff for: generator/templates/simple/src/App.vue

@@ -10,7 +10,8 @@
     </nav>
     <div class="w-container">
       <router-link tag="button" class="w-button" id="homeButton" to="/">Home</router-link>
-      <router-link tag="button" class="w-button" id="aboutButton" to="/about">About</router-link>
+      <!-- alternate way to route manually and use the same method as native -->
+      <button class="w-button" id="aboutButton" v-on:click="goToAboutPage">About</button>
       <router-view/>
     </div>
   </div>
@@ -62,6 +63,8 @@
 
 <%_   if (!rootOptions.router) { _%>
   const { VUE_APP_MODE, VUE_APP_PLATFORM } = process.env;
+<%_   } else { _%>
+  const { VUE_APP_MODE } = process.env;
 <%_   } _%>
 
   export default {
@@ -84,7 +87,7 @@
         this.$navigateTo(Home);
       },
       goToAboutPage() {
-        this.$navigateTo(About);
+        VUE_APP_MODE == 'web' ? this.$router.push('about') : this.$navigateTo(About);
       }
 <%_   } _%>
     }
@@ -101,9 +104,11 @@
   import About from '~/views/About.vue';
 <%_ } _%>
 
-<%_ if (!rootOptions.router) { _%>
+<%_   if (!rootOptions.router) { _%>
   const { VUE_APP_MODE, VUE_APP_PLATFORM } = process.env;
-<%_ } _%>
+<%_   } else { _%>
+  const { VUE_APP_MODE } = process.env;
+<%_   } _%>
 
   @Component({
     name: 'home',
@@ -125,7 +130,7 @@
     }
 
     public goToAboutPage() {
-      Vue.prototype.$navigateTo(About);
+      VUE_APP_MODE == 'web' ? this.$router.push('about') : Vue.prototype.$navigateTo(About);
     }
 <%_ } _%>
   }
@@ -193,15 +198,15 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style web lang="scss">
+<style web>
   @import '~styles/style-one';
 
   .w-page {
     height: 100%;
     width: 100%;
   }
 </style>
-<style native lang="scss">
+<style native>
   @import '~styles/style-one';
 </style>
 <%_ } _%>

Diff for: generator/templates/simple/src/components/HelloWorld.android.vue

@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }

Diff for: generator/templates/simple/src/components/HelloWorld.ios.vue

@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }

Diff for: generator/templates/simple/src/components/HelloWorld.native.vue

@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }

Diff for: generator/templates/simple/src/components/HelloWorld.vue

@@ -89,7 +89,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
     display: block;

Diff for: generator/templates/simple/src/main.native.js

@@ -2,6 +2,7 @@
 extend: '@vue/cli-service/generator/template/src/main.js'
 replace:
   - !!js/regexp /import Vue from 'vue'/
+  - !!js/regexp /import App from './App.vue'/
   - !!js/regexp /Vue.config.productionTip = false/
   - !!js/regexp /h => h\(App\),/
   - !!js/regexp /}\)\.\$mount\('#app'\)/
@@ -11,6 +12,10 @@ replace:
 import Vue from 'nativescript-vue';
 <%# END_REPLACE %>
 
+<%# REPLACE %>
+import App from './App.vue';
+<%# END_REPLACE %>
+
 <%# REPLACE %>
 // Set the following to `true` to hide the logs created by nativescript-vue
 Vue.config.silent = false;