Breaking changes in vue-router

Author: Akryum

.meteor/packages

@@ -23,8 +23,12 @@ apollo
 ccorcos:subs-cache
 meteorhacks:fast-render
 
-akryum:vue-app
+akryum:vue
+akryum:vue-component
+akryum:vue-router
+akryum:vuex
 akryum:vue-apollo
+akryum:vue-i18n
 akryum:vue-i18n-ui
 akryum:vue-less
 akryum:vue-sass

.meteor/versions

@@ -11,7 +11,7 @@ akryum:vue-i18n@0.0.3
 akryum:vue-i18n-ui@0.0.4
 akryum:vue-jade@0.0.1
 akryum:vue-less@0.0.3
-akryum:vue-router@0.1.2
+akryum:vue-router@0.2.0
 akryum:vue-sass@0.0.1
 akryum:vue-stylus@0.0.1
 akryum:vuex@0.3.0

client/main.js

@@ -6,9 +6,6 @@ import {Router} from 'meteor/akryum:vue-router';
 // Api
 import '/imports/api/methods';
 
-// Routes
-//import './routes';
-
 // Subscriptions cache
 const subsCache = new SubsCache({
     expireAfter: 15,
@@ -21,20 +18,23 @@ Vue.config.meteor.subscribe = function(...args) {
   return subsCache.subscribeFor.apply(subsCache, args);
 };
 
+// Router
+const router = new Router({
+  history: true,
+  saveScrollPosition: true
+});
+
 // App layout
 import AppLayout from '/imports/ui/AppLayout.vue';
 
 // Not found
 import NotFound from '/imports/ui/NotFound.vue';
-Router.on('*', {
+router.on('*', {
   component: NotFound
 });
 
 // App start
 Meteor.startup(function() {
   // Start the router and create root vue instance
-  Router.start({
-    history: true,
-    saveScrollPosition: true
-  }, AppLayout, '#app');
+  router.start(AppLayout, '#app');
 });

packages/vue-router/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## 0.2.0 - 2016/07/06
+
+ - (BREAKING CHANGE) You now have to create the router instance from the `Router` class in your client.
+ - (BREAKING CHANGE) The `Router` class now extends the native vue-router class directly. `Router.lib` removed.

packages/vue-router/README.md

@@ -14,7 +14,7 @@ See the [example here](https://github.com/Akryum/meteor-vue-example-routing).
 
 ### Route definition
 
-In your client, add some routes (for more info about route definition, check the [vue-router documentation](http://router.vuejs.org/en/nested.html)):
+In your client, add some routes with the `Router.configure()` method (for more info about route definition, check the [vue-router documentation](http://router.vuejs.org/en/nested.html)):
 
 ```javascript
 /* /client/routes.js */
@@ -27,23 +27,27 @@ import Home from '/imports/ui/Home.vue';
 import Forum from '/imports/ui/Forum.vue';
 import Apollo from '/imports/ui/Apollo.vue';
 
-// Simple routes
-Router.map({
-  '/': {
-    name: 'home',
-    component: Home
-  },
-  '/forum': {
-    name: 'forum',
-    component: Forum
-  },
-  '/apollo': {
-    name: 'apollo',
-    component: Apollo
-  }
+Router.configure(router => {
+  // Simple routes
+  router.map({
+    '/': {
+      name: 'home',
+      component: Home
+    },
+    '/forum': {
+      name: 'forum',
+      component: Forum
+    },
+    '/apollo': {
+      name: 'apollo',
+      component: Apollo
+    }
+  });
 });
 ```
 
+The callbacks you pass to the `Router.configure()` calls will be called before the router is started, regardless of the file load order.
+
 #### Simple syntax
 
 You can use an alternative special syntax in `.routes.js` files:
@@ -132,12 +136,18 @@ export default {
 To add a 'not found' page, add a `*` route in your client code:
 
 ```javascript
-/* /client/client.js */
+/* /client/routes.js */
+
+// Import the router
+import {Router} from 'meteor/akryum:vue-router';
 
 // Not found
 import NotFound from '/imports/ui/NotFound.vue';
-Router.on('*', {
-  component: NotFound
+
+Router.configure(router => {
+  router.on('*', {
+    component: NotFound
+  });
 });
 ```
 
@@ -152,38 +162,34 @@ Then import the routes and start the router in your client:
 import {Meteor} from 'meteor/meteor';
 import {Router} from 'meteor/akryum:vue-router';
 
+// Create the router instance
+const router = new Router({
+  history: true,
+  saveScrollPosition: true
+});
+
 // App layout
 import AppLayout from '/imports/ui/AppLayout.vue';
 
 // App start
 Meteor.startup(() => {
-  // Start the router and create root vue instance
-  Router.start({
-    history: true,
-    saveScrollPosition: true
-  }, AppLayout, 'app');
+  // Start the router
+  router.start(AppLayout, 'app');
 });
 ```
 
 **If you put your routes files in the `/imports` folder, you need to import them manually.**
 
-The most important method is `Router.start(options, App, el, callback)` that takes these parameters:
+When you create the router instance, you can pass `options` that allow you to customize the router behavior ([more info](http://router.vuejs.org/en/options.html)).
+
+To start the router, use the `router.start(App, el, callback)` method inside a `Meteor.startup()` call. It takes these parameters:
 
- - `options` allow you to customize the router behavior ([more info](http://router.vuejs.org/en/options.html)).
  - `App` is a vue component definition that will be used as the main layout and root instance. **Note that the router cannot be started with Vue instances.**
  - `el` determines which HTML element the root instance will be attached on ([more info](https://vuejs.org/api/#el)). Can be a CSS selector string or an actual element.
  - `callback` is an optional function which will be called when the router app's initial render is complete.
 
 For more info about router start, check the [vue-router documentation](http://router.vuejs.org/en/api/start.html).
 
-### Access all the `vue-router` methods
-
-Use the `lib` property:
-
-```javascript
-Router.lib.on('/home', {...});
-```
-
 ### Fast-render
 
 You can use the [meteorhacks:fast-render](https://github.com/kadirahq/fast-render) package to inject the subscriptions data in the html. This greatly speeds up the initial render of your app if it depends on subscriptions.

packages/vue-router/client/client.js

@@ -3,36 +3,27 @@ import VueRouter from 'vue-router';
 
 Vue.use(VueRouter);
 
-class RouterClass {
-  constructor() {
-    this._defs = [];
-  }
-
-  map(def) {
-    this._defs.push(def);
-  }
+export class Router extends VueRouter {
+  constructor(options) {
+    super(options);
 
-  on(path, options) {
-    this._defs.push({
-      [path]: options
-    });
-  }
-
-  start(options, App, el, callback) {
-    this.lib = new VueRouter(options);
-    for(let def of this._defs) {
-      this.lib.map(def);
-    }
-    this.lib.start(App, el, callback);
+    Router.instance = this;
+    Router._init(this);
   }
 }
 
+const _initCbs = [];
 
-export const Router = new RouterClass();
+Router._init = function(instance) {
+  _initCbs.forEach(cb => {
+    cb(instance);
+  });
+};
 
-/*export function getData(id) {
-  let fastData = window.__fast_data__;
-  if(fastData) {
-    return fastData[id];
+Router.configure = function(cb) {
+  if(Router.instance) {
+    cb(Router.instance);
+  } else {
+    _initCbs.push(cb);
   }
-}*/
+}

packages/vue-router/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vue-router',
-  version: '0.1.2',
+  version: '0.2.0',
   summary: 'Easy vue routing for Meteor',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md'
@@ -24,8 +24,6 @@ Package.onUse(function(api) {
   api.use('ecmascript');
   api.use('akryum:npm-check@0.0.2');
   api.use('akryum:vue@1.0.2');
-  //api.use('webapp', 'server');
-  //api.mainModule('server/server.js', 'server');
   api.mainModule('client/client.js', 'client');
   api.export('Router', 'client');
 });

packages/vue-router/plugin/plugin.js

@@ -32,7 +32,7 @@ class VueRouterCompiler extends CachingCompiler  {
     code = code.replace(componentReg, 'component: require($1).default');
     code = 'let r = (()=>{' + code + `})();
     import {Router} from 'meteor/akryum:vue-router';
-    Router.map(r);`;
+    Router.configure(router => { router.map(r); })`;
     let map = '';
 
     let babelOptions = Babel.getDefaultOptions();