Merge pull request #8 from nativescript-vue/ns-vue-navigator

Integrate Nativescript-vue-navigator

Author: jawa-the-hutt

generator/index.js

@@ -114,6 +114,14 @@ module.exports = async (api, options, rootOptions) => {
     //
   }
 
+  if (rootOptions.router) {
+    api.extendPackage({
+      dependencies: {
+        'nativescript-vue-navigator': '^0.0.3'
+      }
+    });
+  }
+
   if (api.hasPlugin('typescript')) {
     api.extendPackage({
       dependencies: {},

generator/templates/simple/src/App.vue

@@ -56,9 +56,6 @@
 <script>
 <%_   if (!rootOptions.router) { _%>
   import HelloWorld from '~/components/HelloWorld';
-<%_   } else { _%>
-  import Home from '~/views/Home';
-  import About from '~/views/About';
 <%_   } _%>
 
 <%_   if (!rootOptions.router) { _%>
@@ -84,10 +81,13 @@
     methods: {
 <%_   if (rootOptions.router) { _%>
       goToHomePage() {
-        this.$navigateTo(Home);
+        this.goTo('home');
       },
       goToAboutPage() {
-        VUE_APP_MODE == 'web' ? this.$router.push('about') : this.$navigateTo(About);
+        this.goTo('about');
+      },
+      goTo(route) {
+        VUE_APP_MODE === 'web' ? this.$router.push(route) : this.$navigator.navigate(route);
       }
 <%_   } _%>
     }
@@ -99,9 +99,6 @@
   import { Component, Vue } from 'vue-property-decorator';
 <%_ if (!rootOptions.router) { _%>
   import HelloWorld from '~/components/HelloWorld.vue';
-<%_ } else { _%>
-  import Home from '~/views/Home.vue';
-  import About from '~/views/About.vue';
 <%_ } _%>
 
 <%_   if (!rootOptions.router) { _%>
@@ -125,12 +122,17 @@
 <%_ } _%>
 
 <%_ if (rootOptions.router) { _%>
+
     public goToHomePage() {
-      Vue.prototype.$navigateTo(Home);
+      this.goTo('home');
     }
 
     public goToAboutPage() {
-      VUE_APP_MODE === 'web' ? this.$router.push('about') : Vue.prototype.$navigateTo(About);
+      this.goTo('about');
+    }
+
+    public goTo(route) {
+      VUE_APP_MODE === 'web' ? this.$router.push(route) : Vue.prototype.$navigator.navigate(route);
     }
 <%_ } _%>
   }

generator/templates/simple/src/main.native.js

@@ -1,33 +1,29 @@
----
-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'\)/
----
-
-<%# REPLACE %>
 import Vue from 'nativescript-vue';
-<%# END_REPLACE %>
+<%_ if (rootOptions.router) { _%>
+import Navigator from 'nativescript-vue-navigator'
+<%_ } _%>
 
-<%# REPLACE %>
 import App from './App.vue';
-<%# END_REPLACE %>
+<%_ if (rootOptions.router) { _%>
+import { options } from './router';
+
+// adapt vue-router routes to nativescript-vue-navigator
+const routes = options.routes.reduce((data, route) => {
+  data[route.name] = {
+    component: route.component
+  }
+  return data
+}, {});
+
+Vue.use(Navigator, { routes });
+<%_ } _%>
 
-<%# REPLACE %>
 // Set the following to `true` to hide the logs created by nativescript-vue
 Vue.config.silent = false;
 // Set the following to `false` to not colorize the logs created by nativescript-vue
 // disabled in template due to typing issue for Typescript projects....NEEDS TO BE FIXED
 // Vue.config.debug = true;
-<%# END_REPLACE %>
-
-<%# REPLACE %>
-(h) => h('frame', [h(App)]),
-<%# END_REPLACE %>
 
-<%# REPLACE %>
+new Vue({
+  render: h => h('frame', [h(App)]),
 }).$start();
-<%# END_REPLACE %>

generator/templates/simple/src/router.js

@@ -3,9 +3,13 @@ extend: '@vue/cli-service/generator/router/template/src/router.js'
 replace:
   - !!js/regexp /import Vue from 'vue'/
   - !!js/regexp /import Router from 'vue-router'/
-  - !!js/regexp /Vue.use\(Router\)/   
-  - !!js/regexp /import Home from './views/Home.vue'/
-  - !!js/regexp /'./views/About.vue'\)/
+  - !!js/regexp /Vue.use\(Router\)/
+  - !!js/regexp /export default new Router\(\{/
+  - !!js/regexp /import Home from '\./views/Home.vue'/
+  - !!js/regexp /\(\) => import(.*)\.\/views\/About\.vue'\)/
+  - !!js/regexp /(\s+)\/\/ (.*)/
+  - !!js/regexp /(\s+)\/\/ (.*)/
+  - !!js/regexp /(\s+)\/\/ (.*)/
   - !!js/regexp /\}\)/
 ---
 
@@ -21,14 +25,29 @@ import Router from 'vue-router';
 Vue.use(Router);
 <%# END_REPLACE %>
 
+<%# REPLACE %>
+export const options = {
+<%# END_REPLACE %>
+
 <%# REPLACE %>
 import Home from '~/views/Home.vue';
+import About from '~/views/About.vue';
 <%# END_REPLACE %>
 
 <%# REPLACE %>
-'~/views/About.vue'),
+About,
 <%# END_REPLACE %>
 
 <%# REPLACE %>
-});
-<%# END_REPLACE %>
+<%# END_REPLACE %>
+
+<%# REPLACE %>
+<%# END_REPLACE %>
+
+<%# REPLACE %>
+<%# END_REPLACE %>
+
+<%# REPLACE %>
+};
+export default new Router(options);
+<%# END_REPLACE %>