server side rendering fixed

.babelrc

@@ -1,3 +1,7 @@
 {
-    "presets": ["es2015", "react", "stage-0"]
+    "presets": ["es2015", "react", "stage-1"],
+    "plugins": [
+        "transform-es3-member-expression-literals",
+        "transform-es3-property-literals"
+    ]
 }

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,2 @@
+examples/*/node_modules/
+examples/*/dist/

.eslintrc

@@ -0,0 +1,11 @@
+{
+    "extends": "rackt",
+    "rules": {
+      "react/jsx-uses-react": 1,
+      "react/jsx-no-undef": 2,
+      "react/wrap-multilines": 2
+    },
+    "plugins": [
+      "react"
+    ]
+}

.gitignore

@@ -1,36 +1,5 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
+lib
 node_modules
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
-
-.idea
-lib
+coverage
+*.log
+.idea

CHANGELOG.md

@@ -0,0 +1,5 @@
+## [0.0.3](https://github.com/misterfresh/react-easy-transition/compare/v0.0.2...v0.0.3)
+
+- Server rendering now works as expected. [Issue #1](https://github.com/misterfresh/react-easy-transition/issues/1)
+- Added optional leaveStyle parameter [PR #1](https://github.com/misterfresh/react-easy-transition/pull/2)
+- Bumped dependencies [PR #3](https://github.com/misterfresh/react-easy-transition/pull/3)

LICENSE

@@ -1,13 +1,11 @@
-The MIT License (MIT)
+Copyright (c) 2015 James Long
 
-Copyright (c) 2016 Antoine S
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.

README.md

@@ -36,7 +36,7 @@ Multiple transitions on different properties:
 </EasyTransition>
 ```
 
-Set leave animation transition on different properties:
+Optionally set a leaveStyle if it is different than the initialStyle:
 
 ```jsx
 <EasyTransition
@@ -52,7 +52,7 @@ Set leave animation transition on different properties:
 
 ## Live Demo
 
-Live Demo here : http://misterfresh.github.io/react-easy-transition
+[Live Demo here](http://misterfresh.github.io/react-easy-transition)
 
 ## Why use this
 
@@ -66,7 +66,9 @@ Live Demo here : http://misterfresh.github.io/react-easy-transition
 
 * The fade-in effect when component mounts is rather straightforward to do with pure CSS transitions. However, the fade-out effect is impossible to do using only CSS because the component disappears immediately when unmounted.
 * The new component appears before the end of the fade-out transition of the previous component, so both are shown at the same time, one on top of the other.
+* Transition on initial render when rendering on the server
 
-## Example
+## Examples
 
-Go to the examples/basic directory to see an example of integration with react-router and redux
+* Integration with react-router and redux in examples/basic
+* Integration with server-side rendering in examples/server

examples/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
 *.log
+.idea

examples/basic/README.md

@@ -7,7 +7,7 @@ In components/App.js, we wrap props.children in an
 ``` 
 tag. That's it.
 
-Demo : http://misterfresh.github.io/react-easy-transition
+Demo : [http://misterfresh.github.io/react-easy-transition](http://misterfresh.github.io/react-easy-transition)
 
 Based on react-router-redux basic example. 
 
@@ -22,6 +22,16 @@ This example also demonstrates integration with
 **To run, follow these steps:**
 
 1. Install dependencies with `npm install` in this directory (make sure it creates a local node_modules)
-2. Start build with `npm start`
-3. Open [http://localhost:8080/](http://localhost:8080/)
+2. By default, it uses the local version from `src` of react-router-redux, so you need to run `npm install` from there first. If you want to use a version straight from npm, remove the lines in `webpack.config.js` at the bottom.
+3. Start build with `npm start`
+4. Open [http://localhost:8080/](http://localhost:8080/)
 
+-
+
+If you want to run the example from the npm published version of
+**react-easy-transition**, remove the alias in `webpack.config`
+to the source from line 21.
+
+This example uses the latest version, switch to a specific tag to use a stable version:
+
+e.g. [react-router-redux tag 1.0.2](https://github.com/reactjs/react-router-redux/tree/1.0.2/examples/basic)

examples/basic/app.js

@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom'
 import { createStore, combineReducers } from 'redux'
 import { Provider } from 'react-redux'
 import { Router, Route, IndexRoute, browserHistory } from 'react-router'
-import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
+import { syncHistoryWithStore, routerReducer } from './react-router-redux'
 
 import * as reducers from './reducers'
 import { App, Home, Foo, Bar } from './components'

examples/basic/components/App.js

@@ -3,7 +3,7 @@ import { Link, browserHistory } from 'react-router'
 import EasyTransition from 'react-easy-transition'
 
 export default function App(props) {
-    return (
+  return (
     <div>
       <header>
         Links:
@@ -20,11 +20,11 @@ export default function App(props) {
       <div style={{ marginTop: '1.5em' }}>
           <EasyTransition
               path={props.location.pathname}
-              initialStyle={{opacity: 0, transform: 'scaleY(0.5)'}}
+              initialStyle={{ opacity: 0, transform: 'scaleY(0.5)' }}
               transition="opacity 0.8s ease-in, transform 0.3s ease-in-out 0.3s"
-              finalStyle={{opacity: 1, transform: 'scaleY(1.2)'}}
+              finalStyle={{ opacity: 1, transform: 'scaleY(1.2)' }}
           >
-              {props.children}
+          {props.children}
           </EasyTransition>
       </div>
     </div>

examples/basic/package.json

@@ -1,16 +1,16 @@
 {
   "name": "ret-basic-example",
-  "version": "0.0.1",
-  "repository": "reactjs/react-easy-transition",
+  "version": "0.0.3",
+  "repository": "misterfresh/react-easy-transition",
   "license": "MIT",
   "dependencies": {
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7",
-    "react-easy-transition": "^0.0.2",
+    "react": "^0.14.0 || 15.0",
+    "react-dom": "^0.14.0 || 15.0",
     "react-redux": "^4.3.0",
     "react-router": "^2.0.0",
     "redux": "^3.2.1",
-    "react-router-redux": "^4.0.0"
+    "react-router-redux": "^4.0.0",
+    "react-easy-transition": "^0.0.3"
   },
   "devDependencies": {
     "babel-core": "^6.4.5",
@@ -29,7 +29,6 @@
     "webpack-dev-server": "^1.14.1"
   },
   "scripts": {
-    "start": "webpack-dev-server --history-api-fallback --no-info --open",
-    "deploy": "NODE_ENV=production webpack -p"
+    "start": "webpack-dev-server --history-api-fallback --no-info --open"
   }
 }

examples/basic/react-router-redux/actions.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/**
+ * This action type will be dispatched by the history actions below.
+ * If you're writing a middleware to watch for navigation events, be sure to
+ * look for actions of this type.
+ */
+var CALL_HISTORY_METHOD = exports.CALL_HISTORY_METHOD = '@@router/CALL_HISTORY_METHOD';
+
+function updateLocation(method) {
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return {
+      type: CALL_HISTORY_METHOD,
+      payload: { method: method, args: args }
+    };
+  };
+}
+
+/**
+ * These actions correspond to the history API.
+ * The associated routerMiddleware will capture these events before they get to
+ * your reducer and reissue them as the matching function on your history.
+ */
+var push = exports.push = updateLocation('push');
+var replace = exports.replace = updateLocation('replace');
+var go = exports.go = updateLocation('go');
+var goBack = exports.goBack = updateLocation('goBack');
+var goForward = exports.goForward = updateLocation('goForward');
+
+var routerActions = exports.routerActions = { push: push, replace: replace, go: go, goBack: goBack, goForward: goForward };

examples/basic/react-router-redux/index.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.routerMiddleware = exports.routerActions = exports.goForward = exports.goBack = exports.go = exports.replace = exports.push = exports.CALL_HISTORY_METHOD = exports.routerReducer = exports.LOCATION_CHANGE = exports.syncHistoryWithStore = undefined;
+
+var _reducer = require('./reducer');
+
+Object.defineProperty(exports, 'LOCATION_CHANGE', {
+  enumerable: true,
+  get: function get() {
+    return _reducer.LOCATION_CHANGE;
+  }
+});
+Object.defineProperty(exports, 'routerReducer', {
+  enumerable: true,
+  get: function get() {
+    return _reducer.routerReducer;
+  }
+});
+
+var _actions = require('./actions');
+
+Object.defineProperty(exports, 'CALL_HISTORY_METHOD', {
+  enumerable: true,
+  get: function get() {
+    return _actions.CALL_HISTORY_METHOD;
+  }
+});
+Object.defineProperty(exports, 'push', {
+  enumerable: true,
+  get: function get() {
+    return _actions.push;
+  }
+});
+Object.defineProperty(exports, 'replace', {
+  enumerable: true,
+  get: function get() {
+    return _actions.replace;
+  }
+});
+Object.defineProperty(exports, 'go', {
+  enumerable: true,
+  get: function get() {
+    return _actions.go;
+  }
+});
+Object.defineProperty(exports, 'goBack', {
+  enumerable: true,
+  get: function get() {
+    return _actions.goBack;
+  }
+});
+Object.defineProperty(exports, 'goForward', {
+  enumerable: true,
+  get: function get() {
+    return _actions.goForward;
+  }
+});
+Object.defineProperty(exports, 'routerActions', {
+  enumerable: true,
+  get: function get() {
+    return _actions.routerActions;
+  }
+});
+
+var _sync = require('./sync');
+
+var _sync2 = _interopRequireDefault(_sync);
+
+var _middleware = require('./middleware');
+
+var _middleware2 = _interopRequireDefault(_middleware);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+exports.syncHistoryWithStore = _sync2['default'];
+exports.routerMiddleware = _middleware2['default'];

examples/basic/react-router-redux/middleware.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports['default'] = routerMiddleware;
+
+var _actions = require('./actions');
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+/**
+ * This middleware captures CALL_HISTORY_METHOD actions to redirect to the
+ * provided history object. This will prevent these actions from reaching your
+ * reducer or any middleware that comes after this one.
+ */
+function routerMiddleware(history) {
+  return function () {
+    return function (next) {
+      return function (action) {
+        if (action.type !== _actions.CALL_HISTORY_METHOD) {
+          return next(action);
+        }
+
+        var _action$payload = action.payload;
+        var method = _action$payload.method;
+        var args = _action$payload.args;
+
+        history[method].apply(history, _toConsumableArray(args));
+      };
+    };
+  };
+}