Merge pull request #2 from bearsunday/wip

[BC break] new ReduxModule

.travis.yml

@@ -1,27 +1,31 @@
-sudo: false
+sudo: true
 language: php
 php:
-  - 5.5
-  - 5.6
   - hhvm
   - 7
+  - 7.1
 matrix:
   include:
-    - php: 5.5
-      env: dependencies=lowest
-    - php: 5.6
-      env: dependencies=lowest
     - php: hhvm
       env: dependencies=lowest
     - php: 7
       env: dependencies=lowest
+    - php: 7.1
+      env: dependencies=lowest
+      before_install:
+
 before_script:
+  - sudo add-apt-repository ppa:pinepain/libv8-5.2 -y
+  - sudo apt-get update -q
+  - sudo apt-get install -y libv8-5.2-dev
+  - printf "\n" | pecl install -f v8js
+  - phpenv config-add travis.php.ini
   - composer self-update
   - if [ -z "$dependencies" ]; then composer install; fi;
   - if [ "$dependencies" = "lowest" ]; then composer update --prefer-lowest; fi;
 script:
- - if [ "$TRAVIS_PHP_VERSION" != "７" ]; then phpunit; fi
- - if [ "$TRAVIS_PHP_VERSION" == "７" ]; then phpunit --coverage-text --coverage-clover=coverage.clover; fi
+ - if [ "$TRAVIS_PHP_VERSION" != "７.1" ]; then phpunit; fi
+ - if [ "$TRAVIS_PHP_VERSION" == "７.1" ]; then phpunit --coverage-text --coverage-clover=coverage.clover; fi
 after_script:
   - wget https://scrutinizer-ci.com/ocular.phar
-  - if [ "$TRAVIS_PHP_VERSION" == "７" ]; then php ocular.phar code-coverage:upload --format=php-clover coverage.clover; fi
+  - if [ "$TRAVIS_PHP_VERSION" == "７.1" ]; then php ocular.phar code-coverage:upload --format=php-clover coverage.clover; fi

README.md

@@ -16,22 +16,31 @@
 composer require bear/reactjs-module
 ```
 
-### Redux React Application
+### JavaScript code
+
+You need three js bundled file.
+
+ * react.bundle.js React library bundled code
+ * {app-name}.bundle.js Application bundled code for client side
+ * {ssr-app-name}.bundle.js Application bundled code for server side 
+
+You can include JavaScript client code (CSS, DOM ..) for `{app}.bundle.js` only. See more detail at the [example](https://github.com/bearsunday/BEAR.ReactJsModule/tree/1.x/docs/demo/ui/webpack.config.js#L7-L9).
 
-You need two js bundled file. The one is an application bundled file `{app_name}.bundle.js` and react bundled js file `react.bundle.js`. 
-For instance, you named application simply 'app'. You need `app.bundle.js` and `react.bundle.js`
 
 ### Module Install
 
 ```php
-$baseDir = dirname(__DIR__, 2);
-$this->install(new ReduxModule($baseDir, 'app');
+$distDir = dirname(__DIR__, 2) . '/var/www/dist';
+$this->install(new ReduxModule($distDir, 'ssr_app');
 ```
 
+In this canse, you need to place `ssr-app.bundle.js` at `$baseDir` directory.
 
 ### ResourceOjbect
 
-Set `Redux Server Side Renderer` with named binding. The biding name format is `redux_{app_name}`.
+To inject SSR renderer, Annotate `@Inject` with `@Named` annotation to `setRenderer` setter method
+with `{ssr-app-name}` application name.
+
 
 ```php
 
@@ -44,7 +53,7 @@ class Greeting extends ResourceObject
 {
     /**
      * @Inject
-     * @Named("redux_app")
+     * @Named("ssr_app")
      */
     public function setRenderer(RenderInterface $renderer)
     {
@@ -92,3 +101,4 @@ return <<<"EOT"
 EOT;
 
 ```
+Note: `app.bundle.js` is client javascript code. The page is rendered fully even {$markup} is removed by client JS code.

composer.json

@@ -19,7 +19,8 @@
     "autoload": {
         "psr-4": {
             "BEAR\\ReactJsModule\\": [
-                "src/"
+                "src/",
+                "src-deprecated"
             ]
         }
     },

docs/demo/Greeting.html.php

@@ -1,6 +1,7 @@
 <?php
 
 use BEAR\ReactJsModule\Ssr;
+
 /* @var $ssr Ssr */
 list($markup, $script) = $ssr->render(['hello']);
 

docs/demo/Greeting.php

@@ -9,7 +9,7 @@ class Greeting extends ResourceObject
 {
     /**
      * @Inject
-     * @Named("redux_app")
+     * @Named("ssr_app")
      */
     public function setRenderer(RenderInterface $renderer)
     {

docs/demo/README.md

@@ -0,0 +1,8 @@
+
+How to run demo
+
+```
+npm install
+npm run build
+npm start
+```

docs/demo/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "redux-react-min-ssr-example",
+  "version": "0.1.0",
+  "description": "",
+  "scripts": {
+    "build": "webpack --config ui/webpack.config.js",
+    "start": "php -S 127.0.0.1:3000 -t www"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-redux": "^4.4.4",
+    "redux": "^3.4.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.7.6",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "webpack": "^1.12.15"
+  }
+}

docs/demo/ui/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

docs/demo/ui/app/client.js

@@ -0,0 +1,7 @@
+import configureStore from '../common/store/configureStore';
+import App from '../common/components/App';
+
+global.App = App;
+global.configureStore = configureStore;
+
+// you can add client-only code here. (CSS, etc..)

docs/demo/ui/app/server.js

@@ -0,0 +1,8 @@
+import configureStore from '../common/store/configureStore';
+import App from '../common/components/App';
+
+global.App = App;
+global.configureStore = configureStore;
+
+// export App and configureStore
+// SSR component only

docs/demo/ui/common/actions/index.js

@@ -0,0 +1,13 @@
+/*
+ * action types
+ */
+export const HELLO_WORLD = 'HELLO_WORLD'
+
+/*
+ * action creators
+ */
+export const helloWorld = () => {
+  return {
+    type: HELLO_WORLD
+  }
+}

docs/demo/ui/common/components/App.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Hello from '../containers/HelloWorld'
+
+const App = () => (
+  <div>
+    <Hello />
+  </div>
+)
+
+export default App

docs/demo/ui/common/components/Hello.js

@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react'
+
+const Hello = ({ onClick, message }) => (
+    <div>
+      <h1>{ message }</h1>
+      <button onClick={onClick}>Click</button>
+    </div>
+)
+
+Hello.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  message: PropTypes.string.isRequired
+}
+
+export default Hello

docs/demo/ui/common/containers/HelloWorld.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import { helloWorld } from '../actions'
+import Hello from './../components/Hello'
+
+const mapStateToProps = (state) => {
+  return {
+    message: state.hello.message
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onClick: () => {
+      dispatch(helloWorld())
+    }
+  }
+}
+
+const HelloWorld = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Hello)
+
+export default HelloWorld

docs/demo/ui/common/reducers/hello.js

@@ -0,0 +1,12 @@
+import { HELLO_WORLD } from '../actions'
+
+const hello = (state = { message: 'Hello CSR !' }, action) => {
+  switch (action.type) {
+    case HELLO_WORLD:
+      return Object.assign({}, state, { message: 'Hello, World!' })
+    default:
+      return state
+  }
+}
+
+export default hello

docs/demo/ui/common/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import hello from './hello';
+
+const rootReducer = combineReducers({
+  hello
+})
+
+export default rootReducer

docs/demo/ui/common/store/configureStore.js

@@ -0,0 +1,10 @@
+import { createStore, applyMiddleware } from 'redux'
+import rootReducer from '../reducers'
+
+export default function configureStore(preloadedState) {
+  const store = createStore(
+    rootReducer,
+    preloadedState
+  );
+  return store
+}