✨ Release v1.0.1

Author: Anthony Du Pont

README.md

@@ -154,7 +154,7 @@ const H = new Highway.Core({
 OK so now you have your custom renderers but you are sad because there are no transitions between your pages...  
 Don't be afraid, let's now see how to create our first transition!
 
-Transitions in **Highway** are really simple, these are objects with two methods:
+Transitions in **Highway** are really simple, you need to extend `Highway.Transition` and provide two required methods:
 
 - `in`: The `in` method should contain the transition to show a `[router-view]`.
 - `out`: The `out` method should contain the transition to hide a `[router-view]`.
@@ -166,14 +166,18 @@ Each one get two parameters you can call howewer you want but here are good defa
 
 **transition.js**
 ```javascript
-const Transition = {
-  in: (view, done) => {
+// Import Highway
+import Highway from '@dogstudio/highway';
+
+class Transition extends Highway.Transition {
+  in(view, done) {
     // [...]
-  },
-  out: (view, done) => {
+  }
+
+  out(view, done) {
     // [...]
   }
-};
+}
 
 // Don't forget to export your transition
 export default Transition;

dist/highway.js

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",
@@ -16,6 +16,6 @@
     "webpack-cli": "^2.0.12"
   },
   "dependencies": {
-    "@dogstudio/highway": "^1.0.0"
+    "@dogstudio/highway": "^1.0.1"
   }
 }

dist/highway.min.js

@@ -1,25 +1,29 @@
+// Import Highway
+import Highway from '@dogstudio/highway';
+
 // To create your custom transition you need to provide two required methods:
 // - `in`: The transition part to show your view.
 // - `out`: The transition part to hide you view.
 //
-// Each method receives two parameters, the `view` and a callback method called
-// `done` you will always have to call when the method is over.
-const Fade = {
-  in: (view, done) => {
+// Each method receives a callback method called `done` you will always have to
+// call when the a transition is over.
+class Fade extends Highway.Transition {
+  in(view, done) {
     // Add a classname to trigger the animation
     view.classList.add('fade-in');
 
     // Wait for the animation to end
     view.addEventListener('animationend', done);
-  },
-  out: (view, done) => {
+  }
+
+  out(view, done) {
     // Add a classname to trigger the animation
     view.classList.add('fade-out');
 
     // Wait for the animation to end
     view.addEventListener('animationend', done);
   }
-};
+}
 
 // Don't forget to export in some way your custom transition.
 export default Fade;

dist/highway.min.js.gz

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@dogstudio/highway@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@dogstudio/highway/-/highway-1.0.0.tgz#7bd3a7271674a8d2dfac400cf6367411aa276bfd"
+"@dogstudio/highway@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@dogstudio/highway/-/highway-1.0.1.tgz#1d38da001396363b2502b3c38a61ba2c13921131"
 
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"

examples/basic-css-transition/dist/index.js

@@ -1,7 +1,7 @@
 {
   "name": "@dogstudio/highway",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",
@@ -16,6 +16,6 @@
     "webpack-cli": "^2.0.12"
   },
   "dependencies": {
-    "@dogstudio/highway": "^1.0.0"
+    "@dogstudio/highway": "^1.0.1"
   }
 }