HMR Working (#19)

* fix regex to detect current working directory at install
* webpack config update
* updated dependencies
* got HMR working
* removed forcing a webpack dev-dependecy install
* manually adding PR#10 changes

Author: jawa-the-hutt

Diff for: README.md

@@ -53,7 +53,7 @@ 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`, `.css`, `.styl`, and `.less` files.
 
 | File Type  | Android __and__ IOS | Android only    | IOS only        | Web only        |
 | ---------- | ------------------- | --------------- | --------------- | --------------- |
@@ -62,6 +62,8 @@ If you want complete seperation of concerns between Web and Native for component
 | ts         | *.native.ts         | *.android.ts    | *.ios.ts        | *.ts            |
 | scss       | *.native.scss       | *.android.scss  | *.ios.scss      | *.scss          |
 | css        | *.native.css        | *.android.css   | *.ios.css       | *.css           |
+| stylus     | *.native.styl       | *.android.styl  | *.ios.styl      | *.styl          |
+| less       | *.native.less       | *.android.less  | *.ios.less      | *.less          |
 
 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.
 
@@ -204,10 +206,12 @@ You should be able to use the NativeScript Playground and Preview Apps via the f
 1.  `npm run preview:android`
 2.  `npm run preview:ios`
 
-#### --env command line recognition
+#### --env & --hmr command line recognition
 Basic support for passing the `env` command line option is in place, but has a slightly different syntax since we're working with the CLI 3 webpack infrastructure.  To inject items into `env` at run-time, you will need to add `-- --env.option` Where option is one of the recognized options that Nativescript-Vue and this project supports.
 An example of this would be something like this: `npm run serve:android -- --env.production`.  This would allow you to serve up a Production build of your Android app versus just running `npm run serve:android` which would serve a Development version of the same.
 
+HMR will also work by passing in `-- --hmr`.  An example of this would be `npm run serve:android -- --hmr`
+
 #### Webpack related information
 The options passed in at `npm run` will dictate what webpack config is provided.  The first choice webpack will make is if this is a `web` or `native` environment.  Then, if it's a `native` environment, it will determine choices to be made between `ios` and `android`.
 

Diff for: generator/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+
 const path = require('path');
 const fs = require('fs-extra');
 const replace = require('replace-in-file');
@@ -53,10 +54,10 @@ module.exports = async (api, options, rootOptions) => {
     nativescript: {
       id: 'org.nativescript.application',
       'tns-ios': {
-        version: '5.2.0'
+        version: '5.4.0'
       },
       'tns-android': {
-        version: '5.2.1'
+        version: '5.4.0'
       }
     },
     scripts: {
@@ -77,18 +78,18 @@ module.exports = async (api, options, rootOptions) => {
       'clean:ios': 'rimraf platforms/ios'
     },
     dependencies: {
-      'nativescript-vue': '^2.2.0',
-      'tns-core-modules': '^5.2.2'
+      'nativescript-vue': '^2.2.2',
+      'tns-core-modules': '^5.4.1'
     },
     devDependencies: {
-      'nativescript-dev-webpack': '^0.20.3',
-      'nativescript-vue-template-compiler': '^2.2.0',
+      'nativescript-dev-webpack': '^0.22.0',
+      'nativescript-vue-template-compiler': '^2.2.2',
       'nativescript-worker-loader': '~0.9.5',
       'node-sass': '^4.11.0',
       'string-replace-loader': '^2.1.1',
-      rimraf: '^2.6.3',
-      webpack: '^4.29.6',
-      'webpack-cli': '^3.3.0'
+      rimraf: '^2.6.3'
+      // webpack: '4.28.4',
+      // 'webpack-cli': '^3.3.2'
     }
   });
 
@@ -126,8 +127,8 @@ module.exports = async (api, options, rootOptions) => {
     api.extendPackage({
       dependencies: {},
       devDependencies: {
-        'fork-ts-checker-webpack-plugin': '^1.0.0',
-        'terser-webpack-plugin': '^1.2.3'
+        'fork-ts-checker-webpack-plugin': '^1.3.4',
+        'terser-webpack-plugin': '^1.3.0'
         //'tns-platform-declarations': '^4.2.1'
       }
     });
@@ -137,7 +138,7 @@ module.exports = async (api, options, rootOptions) => {
       api.extendPackage({
         dependencies: {},
         devDependencies: {
-          '@babel/types': '^7.4.0'
+          '@babel/types': '^7.4.4'
         }
       });
     }
@@ -147,10 +148,10 @@ module.exports = async (api, options, rootOptions) => {
   if (api.hasPlugin('babel')) {
     api.extendPackage({
       devDependencies: {
-        '@babel/core': '^7.4.0',
-        '@babel/preset-env': '^7.4.1',
-        'babel-loader': '^8.0.5',
-        '@babel/traverse': '^7.4.0'
+        '@babel/core': '^7.4.5',
+        '@babel/preset-env': '^7.4.5',
+        'babel-loader': '^8.0.6',
+        '@babel/traverse': '^7.4.5'
       }
     });
 
@@ -277,9 +278,13 @@ module.exports = async (api, options, rootOptions) => {
         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);
+        require('../lib/tslint')(
+          {
+            _: [`${baseDir}**/*.ts`, `${baseDir}**/*.vue`, `${baseDir}**/*.tsx`, 'tests/**/*.ts', 'tests/**/*.tsx']
+          },
+          api,
+          false
+        );
       }
     }
 
@@ -844,8 +849,7 @@ const renderDirectoryStructure = (module.exports.renderDirectoryStructure = asyn
 ) => {
   try {
     const files = new Array();
-    const baseDir = await extractCallDir();
-    const _files = await getAllFilesInDirStructure(srcPathPrefix, baseDir);
+    const _files = await getAllFilesInDirStructure(srcPathPrefix, __dirname);
 
     for (const rawPath of _files) {
       // // // let filename = path.basename(rawPath);
@@ -899,22 +903,41 @@ const renderDirectoryStructure = (module.exports.renderDirectoryStructure = asyn
   }
 });
 
-// extract callsite file location using error stack
-const extractCallDir = (module.exports.extractCallDir = () => {
-  try {
-    const obj = {};
-    Error.captureStackTrace(obj);
-    const callSite = obj.stack.split('\n')[3];
-    let { fileName } = /(?<fileName>[^(\s]+):[0-9]+:[0-9]+/.exec(callSite).groups;
-    if (fileName.indexOf('file') >= 0) {
-      fileName = new URL(fileName).pathname;
-    }
-    let dirname = path.dirname(fileName);
-    return dirname;
-  } catch (err) {
-    throw err;
-  }
-});
+// THIS FUNCTION MAY NOT LONGER BE NEEDED AS OF 0.0.16
+// WILL KEEP THIS COMMENTED OUT CODE IN FOR A FEW OF RELEASES
+// // extract callsite file location using error stack
+// const extractCallDir = (module.exports.extractCallDir = () => {
+//   try {
+//     const obj = {};
+//     console.log('__dirname - ', __dirname);
+//     Error.captureStackTrace(obj);
+//     const callSite = obj.stack.split('\n')[3];
+//     console.log('callSite - ', callSite);
+
+//     let { fileName } = /(?<fileName>[^(]+):[0-9]+:[0-9]+/.exec(callSite).groups;
+//     console.log('fileName 1 - ', fileName);
+
+//     if (fileName.indexOf('file') >= 0) {
+//       fileName = new URL(fileName).pathname;
+//     }
+
+//     if (fileName.indexOf(fileName.length - 1) === ')') {
+//       fileName = fileName.splice(0, fileName.length - 1);
+//     }
+
+//     console.log(`fileName 2 - '`, fileName + `'`);
+
+//     fileName = fileName.replace('at ', '');
+//     console.log(`fileName 3 - '`, fileName) + `'`;
+
+//     let dirname = path.dirname(fileName);
+//     console.log(`dirname - '`, dirname + `'`);
+
+//     return __dirname;
+//   } catch (err) {
+//     throw err;
+//   }
+// });
 
 // utility function used to get all the files in a directory structure.  is recursive in nature due to globby
 const getAllFilesInDirStructure = (module.exports.replaceInFile = async (srcPathPrefix, baseDir) => {