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

added forced babel.config.js setup.  will overwrite existing.

Author: jawa-the-hutt

generator/index.js

@@ -1,20 +1,33 @@
 const path = require('path');
-const fs = require('fs')
-const globby = require('globby');
-const rimraf = require('rimraf')
+const fs = require('fs-extra');
 const replace = require('replace-in-file');
 
+
 module.exports = (api, options, rootOptions) => {
+
+  console.log('options.isNativeOnly - ', options.isNativeOnly)
+  console.log('options.isNVW - ', options.isNVW)
+  console.log('options.isNewProject - ', options.isNewProject)
+
+  // New Project & Native Only -- should never be able to use Nativescript-Vue-Web
+  if(options.isNativeOnly && options.isNVW) {
+    throw Error('Invalid options chosen.  You cannot have a Native only project and use Nativescript-Vue-Web')
+  }
+
+  if(options.isNativeOnly)
+    options.isNVW = false;
 
-  const commonRendorOptions = {
+  const commonRenderOptions = {
     applicationName: api.generator.pkg.name,
     applicationVersion: api.generator.pkg.version,
     applicationAndroidVersionCode: api.generator.pkg.version.split('.').join('0'),
     applicationDescription: api.generator.pkg.description || api.generator.pkg.name,
     applicationLicense: api.generator.pkg.license || 'MIT',
     applicationId: options.applicationId,
     historyMode: options.historyMode || false,
-    doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
+    doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript'),
+    usingBabel: api.hasPlugin('babel'),
+    usingTS: api.hasPlugin('typescript')
   }
 
   console.log('adding to package.json');
@@ -30,107 +43,174 @@ module.exports = (api, options, rootOptions) => {
       }
     },
     scripts: {
+      "setup-webpack-config": "node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre",
+      "remove-webpack-config": "node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance post",
       "serve:web": "vue-cli-service serve --mode development.web",
-      "serve:android": "vue-cli-service tns:dev --mode development.android",
-      "serve:ios": "vue-cli-service tns:dev --mode development.ios",
+      "serve:android": "npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns run android --bundle && npm run remove-webpack-config",
+      "serve:ios": "npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.ios tns run ios --bundle && npm run remove-webpack-config",
       "build:web": "vue-cli-service build --mode production.web",
-      "build:android": "vue-cli-service tns:prod --mode production.android",
-      "build:ios": "vue-cli-service tns:prod --mode production.ios",
-    },
+      "build:android": "npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.android tns run android --bundle && npm run remove-webpack-config",
+      "build:ios": "npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.ios tns run ios --bundle && npm run remove-webpack-config",
+      },
     dependencies: {
       'nativescript-vue': '^2.0.2',
       'tns-core-modules': '^4.2.1',
     },
     devDependencies: {
-      '@babel/core': '^7.1.2',
-      '@babel/preset-env': '^7.1.0',
-      '@babel/types': '^7.1.3',
-      'babel-loader': '^8.0.4',
-      'babel-traverse': '^6.26.0',
       'clean-webpack-plugin': '^0.1.19',
-      'copy-webpack-plugin': '^4.5.4',
+      'copy-webpack-plugin': '^4.6.0',
+      'cross-env': '^5.2.0',
       'nativescript-dev-webpack': '^0.17.0',
       'nativescript-vue-template-compiler': '^2.0.2',
       'nativescript-worker-loader': '~0.9.1',
       'replace-in-file': '^3.4.2',
-      "string-replace-loader": "^2.1.1",
     }
   })
 
-  console.log('deleting from package.json');
-
+  // if the project is using babel, then load appropriate packages
+  if(api.hasPlugin('babel')) {
+    api.extendPackage({
+      devDependencies: {
+        '@babel/core': '^7.1.2',
+        '@babel/preset-env': '^7.1.0',
+        '@babel/types': '^7.1.3',
+        'babel-loader': '^8.0.4',
+        'babel-traverse': '^6.26.0',
+      }
+    })
+  }
 
+  console.log('deleting from package.json');
   api.extendPackage(pkg => {
-    // delete pkg.dependencies['vue']
-    delete pkg.devDependencies[
-      // 'vue-template-compiler',
-      'babel-core'
-    ]
-    // delete pkg.browserslist
+    // if the project is using babel, then delete babel-core
+    if(api.hasPlugin('babel')) {
+      delete pkg.devDependencies[
+        'babel-core'
+      ]
+    }
+    // we will be replacing these
     delete pkg.scripts['serve'],
     delete pkg.scripts['build']
 
   })
 
   console.log('doing template rendering');
 
-  // render the App_Resources files
-  api.render('./templates/App_Resources', commonRendorOptions)
-
   // use the answer from the invoke prompt and if it's a new project use the new template
   // and if it is an existing project, use the existing template
   if(options.isNewProject) {
-    api.render('./templates/simple/new', commonRendorOptions)
-  } else {
-    api.render('./templates/simple/existing', commonRendorOptions)
+
+    // New Project and not using Nativescript-Vue-Web
+    if(!options.isNVW && !options.isNativeOnly) {
+      api.render('./templates/simple/without-nvw/new', commonRenderOptions)
+  
+      if(api.hasPlugin('vue-router')){
+        api.injectImports('src/main.js', `import router from '~/router'`)
+        api.injectRootOptions('src/main.js', `router`)
+      }
+  
+      if(api.hasPlugin('vuex')){
+        api.injectImports('src/main.js', `import store from '~/store'`)
+        api.injectRootOptions('src/main.js', `store`)
+        api.injectImports('app/main.js', `import store from 'src/store'`)
+        api.injectRootOptions('app/main.js', `store`)
+  
+      }
+    } 
+
+    // New Project and is using Nativescript-Vue-Web
+    if(options.isNVW && !options.isNativeOnly) {
+      
+    } 
+
+    // New Project & Native Only -- should never be able to use Nativescript-Vue-Web
+    if(!options.isNVW && options.isNativeOnly) {
+      api.render('./templates/simple/native-only/new', commonRenderOptions);
+    }
+
+    if(options.isNativeOnly && options.isNVW) {
+      // should never reach this block of code
+    }
+  
+
+  } else { // Exising Project
+
+    // Existing Project and not using Nativescript-Vue-Web
+    if(!options.isNVW && !options.isNativeOnly) {
+      api.render('./templates/simple/without-nvw/existing', commonRenderOptions)
+    } 
+
+    // Existing Project and is using Nativescript-Vue-Web
+    if(options.isNVW && !options.isNativeOnly) {
+      
+    } 
+
+    // Existing Project & Native Only -- should never be able to use Nativescript-Vue-Web
+    if(!options.isNVW && options.isNativeOnly) {
+      api.render('./templates/simple/native-only/existing', commonRenderOptions)
+    }
+
+    if(options.isNVW && options.isNativeOnly) {
+      // should never reach this block of code
+    }
+
   }
 
+  
+ 
+
+ 
   api.onCreateComplete(() => {
 
     const newline = process.platform === 'win32' ? '\r\n' : '\n';
-    const webpackConfigFile = api.resolve('./webpack.config.js');
-    const src = api.resolve('src');
     const gitignorePath = api.resolve('.gitignore');
+    const gitignoreWebpackConfig = api.resolve('.webpack.config.js');
+
+    // // setup string replacement options for babel.config.js file
+    // if(api.hasPlugin('babel') && fs.existsSync('./babel.config.js')) {
+    //   const replaceOptions = {
+    //     files: './babel.config.js',
+    //     from: '  \'@vue/app\'',
+    //     to: '  process.env.VUE_PLATFORM === \'web\' ? \'@vue/app\' : {}, ' + newline + '    [\'@babel/env\', { targets: { esmodules: true } }]',
+    //   }
+    //   replace(replaceOptions, (err, changes) => {
+    //     if (err) throw err;
+    //   });
+    // }
+
+
+    // for new projects that are native only, move files/dirs and delete others
+    if(options.isNewProject && options.isNativeOnly) {
+
+      // move store.js file from ./src to ./app
+      if(api.hasPlugin('vuex')) {
+        fs.move('./src/store.js', './app/store.js', (err) => {
+          if(err) throw err;
+        })
+      }
 
-    // // // // delete the 'public' directory
-    // // // const publicPath = api.resolve('public')
-    // // // if(fs.existsSync(publicPath)) {
-    // // //   rimraf.sync(publicPath)
-    // // // }
-
-    // rename any webpack.config.js file that might already be there
-    if(fs.existsSync(webpackConfigFile)) {
-      fs.rename(webpackConfigFile, './webpack.config.old', (err) => {
-        if (err) throw err;
-      });
-    }
+      // move assets directory from ./src/assets to ./app/assets
+      fs.ensureDir('./src/assets', err => {
+        if(err) throw err;
+        fs.move('./src/assets', './app/assets', err => {
+          if (err) throw err;
+        })
+      })
 
-    // rename main.js to main.web.js
-    if(fs.existsSync(path.resolve(src, 'main.js'))) {
-      fs.rename(path.resolve(src, 'main.js'), path.resolve(src, 'main.web.js'), (err) => {
-        if (err) throw err;
-      });
-    }
+      fs.remove('./src', err => {
+        if (err) throw err
+      })
 
-    // setup string replacement options for babel.config.js file
-    if(api.hasPlugin('babel') && fs.existsSync('./babel.config.js')) {
-      const replaceOptions = {
-        files: './babel.config.js',
-        from: '  \'@vue/app\'',
-        to: '  process.env.VUE_PLATFORM === \'web\' ? \'@vue/app\' : {}, ' + newline + '    [\'@babel/env\', { targets: { esmodules: true } }]',
-      }
-      replace(replaceOptions, (err, changes) => {
-        if (err) throw err;
-      });
     }
 
+
     // write out environmental files
-    const developmentAndroid = 'NODE_ENV=development' + newline + 'VUE_PLATFORM=android' + newline + 'VUE_APP_MODE=native';
-    const developmentIOS = 'NODE_ENV=development' + newline + 'VUE_PLATFORM=ios' + newline + 'VUE_APP_MODE=native';
-    const developmentWeb = 'NODE_ENV=development' + newline + 'VUE_PLATFORM=web' + newline + 'VUE_APP_MODE=web';
-    const productionAndroid = 'NODE_ENV=production' + newline + 'VUE_PLATFORM=android' + newline + 'VUE_APP_MODE=native';
-    const productionIOS = 'NODE_ENV=production' + newline + 'VUE_PLATFORM=ios' + newline + 'VUE_APP_MODE=native';
-    const productionWeb = 'NODE_ENV=production' + newline + 'VUE_PLATFORM=web' + newline + 'VUE_APP_MODE=web';
+    const developmentAndroid = 'NODE_ENV=development' + newline + 'VUE_APP_PLATFORM=android' + newline + 'VUE_APP_MODE=native';
+    const developmentIOS = 'NODE_ENV=development' + newline + 'VUE_APP_PLATFORM=ios' + newline + 'VUE_APP_MODE=native';
+    const developmentWeb = 'NODE_ENV=development' + newline + 'VUE_APP_PLATFORM=web' + newline + 'VUE_APP_MODE=web';
+    const productionAndroid = 'NODE_ENV=production' + newline + 'VUE_APP_PLATFORM=android' + newline + 'VUE_APP_MODE=native';
+    const productionIOS = 'NODE_ENV=production' + newline + 'VUE_APP_PLATFORM=ios' + newline + 'VUE_APP_MODE=native';
+    const productionWeb = 'NODE_ENV=production' + newline + 'VUE_APP_PLATFORM=web' + newline + 'VUE_APP_MODE=web';
 
     fs.writeFileSync('./.env.development.android', developmentAndroid, { encoding: 'utf8' }, (err) => {if (err) throw err;});
     fs.writeFileSync('./.env.development.ios', developmentIOS, { encoding: 'utf8' }, (err) => {if (err) throw err;});
@@ -142,8 +222,8 @@ module.exports = (api, options, rootOptions) => {
 
     // write nsconfig.json
     const nsconfig = {
-      'appPath': 'src',
-      'appResourcesPath': 'src/App_Resources'
+      'appPath': 'app',
+      'appResourcesPath': 'app/App_Resources'
     }
     fs.writeFileSync('./nsconfig.json', JSON.stringify(nsconfig, null, 2), {encoding: 'utf8'}, (err) => {if (err) throw err;});
 
@@ -156,7 +236,7 @@ module.exports = (api, options, rootOptions) => {
       gitignoreContent = '';
     }
 
-    const gitignoreAdditions = newline + '# NativeScript application' + newline + 'hooks' + newline + 'platforms'
+    const gitignoreAdditions = newline + '# NativeScript application' + newline + 'hooks' + newline + 'platforms' + newline + './webpack.config.js'
     if (gitignoreContent.indexOf(gitignoreAdditions) === -1) {
       gitignoreContent += gitignoreAdditions
 
@@ -165,6 +245,6 @@ module.exports = (api, options, rootOptions) => {
 
   })
 
-
+  
 
 }

generator/templates/simple/native-only/existing/example/app/App.android.vue

@@ -0,0 +1,92 @@
+<%_ if (!rootOptions.router) { _%>
+<%# This code is the same as having a router. #%>
+<%# Setting this space aside for future possible use in the template  #%>
+<template>
+  <Page>
+    <ActionBar :title="navbarTitle"/>
+    <GridLayout rows="auto, auto">
+        <Button text="Home" @tap="goToHomePage" row="0"/>
+        <Button text="About" @tap="goToAboutPage" row="1"/>
+    </GridLayout>
+  </Page>
+</template>
+<script>
+  // ~ is an alias to /src
+  import Home from '~/views/Home';
+  import About from '~/views/About';
+
+  export default {
+
+    data() {
+      return {
+        navbarTitle: 'App.android.vue',
+      }
+    },    
+    methods: {
+      goToHomePage() {
+        this.$navigateTo(Home);
+      },
+      goToAboutPage() {
+        this.$navigateTo(About);
+      }
+    }
+  }
+
+</script>
+<%_ } else { _%>
+<%# This code is the same as not having a router. #%>
+<%# See note above #%>
+<template>
+  <Page>
+    <ActionBar :title="navbarTitle"/>
+    <GridLayout rows="auto, auto">
+        <Button text="Home" @tap="goToHomePage" row="0"/>
+        <Button text="About" @tap="goToAboutPage" row="1"/>
+    </GridLayout>
+  </Page>
+</template>
+<script>
+  // ~ is an alias to /src
+  import Home from '~/views/Home';
+  import About from '~/views/About';
+
+  export default {
+
+    data() {
+      return {
+        navbarTitle: 'App.android.vue',
+      }
+    },    
+    methods: {
+      goToHomePage() {
+        this.$navigateTo(Home);
+      },
+      goToAboutPage() {
+        this.$navigateTo(About);
+      }
+    }
+  }
+
+</script>
+<%_ } _%>
+
+<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
+<style<%-
+  rootOptions.cssPreprocessor
+    ? ` lang="${
+        rootOptions.cssPreprocessor === 'sass'
+          ? 'scss'
+          : rootOptions.cssPreprocessor
+      }"`
+    : ``
+%>>
+  ActionBar {
+    color: #42b983;
+  }
+</style>
+<%_ } else { _%>
+<style lang="stylus">
+  ActionBar
+    color: #42b983
+</style>
+<%_ } _%>