Merge pull request #61 from TomCaserta/react-fix

Fixes script race condition, updates react to latest and fixes travis tests

.gitignore

@@ -1,3 +1,4 @@
 /vendor/
 composer.lock
 node_modules/
+package.json

.travis.yml

@@ -9,9 +9,10 @@ before_install:
   - sudo apt-get update
   - sudo apt-get install libv8-dev g++ cpp valgrind libxml2-dev -y
   - printf "\n" | pecl install v8js-0.1.3
+  - phpenv config-add travis.php.ini
   - travis_retry composer self-update
 
 install:
   - travis_retry composer install --no-interaction --prefer-source
 
-script: valgrind --trace-children=yes vendor/bin/phpunit --debug --verbose
+script: valgrind --trace-children=yes vendor/bin/phpunit --debug --verbose

README.md

@@ -57,7 +57,7 @@ The `@react_component` directive accepts 3 arguments:
 
   //example
   @react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])
-  
+
   // example using namespaced component
   @react_component('Acme.Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])
 ```
@@ -71,7 +71,7 @@ The `@react_component` directive accepts 3 arguments:
 
 All your components should be inside `public/js/components.js` (you can configure it, see below) and be global.
 
-You must include `react.js` and `react_ujs.js` (in this order) in your view.
+You must include `react.js`, `react-dom.js` and `react_ujs.js` (in this order) in your view. You can concatenate these files together using laravel-elixir.
 
 `react-laravel` provides a ReactJS installation and the `react_us.js` file, they'll be at `public/vendor/react-laravel` folder after you install `react-laravel` and run:
 
@@ -83,6 +83,7 @@ For using the files provided by `react-laravel` and your `components.js` file, a
 
 ```html
   <script src="{{ asset('vendor/react-laravel/react.js') }}"></script>
+  <script src="{{ asset('vendor/react-laravel/react-dom.js') }}"></script>
   <script src="{{ asset('js/components.js') }}"></script>
   <script src="{{ asset('vendor/react-laravel/react_ujs.js') }}"></script>
 ```
@@ -96,13 +97,17 @@ You can change settings to `react-laravel` at the `config/react.php` file:
 ```php
   return [
     'source' => 'path_for_react.js',
+    'dom-source' => 'path_for_react-dom.js',
+    'dom-server-source' => 'path_for_react-dom-server.js',
     'components' => 'path_for_file_containing_your_components.js'
   ];
 ```
 
-Both of then are optional.
+All of them are optional.
 
-* `source`: defaults to `public/vendor/react/laravel/react.js`.
+* `source`: defaults to `public/vendor/react-laravel/react.js`.
+* `dom-source`: defaults to `public/vendor/react-laravel/react-dom.js`.
+* `dom-server-source`: defaults to `public/vendor/react-laravel/react-dom-server.js`.
 * `components`: defaults to `public/js/components.js`
 
 Your `components.js` file should also be included at your view, and all your components must be at the `window` object.

assets/react_ujs.js

@@ -32,20 +32,25 @@
         reactClass = element.getAttribute(ReactLaravelUJS.CLASS_NAME_ATTR).split('.').reduce(index, window);
         props = JSON.parse(element.getAttribute(ReactLaravelUJS.PROPS_ATTR));
 
-        React.render(React.createElement(reactClass, props), element);
+        ReactDOM.render(React.createElement(reactClass, props), element);
       }
     },
 
     unmountComponents: function unmountComponents() {
       var elements = ReactLaravelUJS.getElements();
 
       for(var i = 0; i < elements.length; i++) {
-        React.unmountComponentAtNode(elements[i]);
+        ReactDOM.unmountComponentAtNode(elements[i]);
       }
     },
 
     handleEvents: function handleEvents() {
-      document.addEventListener('DOMContentLoaded', ReactLaravelUJS.mountComponents);
+      if (document.readyState == "complete" || document.readyState == "loaded" || document.readyState == "interactive") {
+        ReactLaravelUJS.mountComponents();
+      }
+      else {
+        document.addEventListener('DOMContentLoaded', ReactLaravelUJS.mountComponents);
+      }
       window.addEventListener('unload', ReactLaravelUJS.unmountComponents);
     }
   };

composer.json

@@ -13,7 +13,8 @@
   },
   "extra": {
     "require-npm": {
-      "react": "^0.13.3"
+      "react": "^0.14.6",
+      "react-dom": "^0.14.6"
     }
   },
   "authors": [

config/config.php

@@ -2,5 +2,7 @@
 
 return [
   'source'     => public_path('vendor/react-laravel/react.js'),
-  'components' => public_path('js/components.js'),
+  'dom-source' => public_path('vendor/react-laravel/react-dom.js'),
+  'dom-server-source' => public_path('vendor/react-laravel/react-dom-server.js'),
+  'components' => public_path('js/components.js')
 ];

lib/ReactServiceProvider.php

@@ -21,6 +21,7 @@ public function boot() {
     $this->publishes([
       $prev . 'assets'            => public_path('vendor/react-laravel'),
       $prev . 'node_modules/react/dist' => public_path('vendor/react-laravel'),
+      $prev . 'node_modules/react-dom/dist' => public_path('vendor/react-laravel'),
     ], 'assets');
 
     $this->publishes([
@@ -44,8 +45,13 @@ public function register() {
 
         $this->mergeConfigFrom(__DIR__ . '/../config/config.php', 'react');
 
-        $reactSource = file_get_contents(config('react.source'));
+        $reactBaseSource = file_get_contents(config('react.source'));
+        $reactDomSource = file_get_contents(config('react.dom-source'));
+        $reactDomServerSource = file_get_contents(config('react.dom-server-source'));
         $componentsSource = file_get_contents(config('react.components'));
+        $reactSource = $reactBaseSource;
+        $reactSource .= $reactDomSource;
+        $reactSource .= $reactDomServerSource;
 
         if(App::environment('production')) {
           Cache::forever('reactSource', $reactSource);

phpunit.php

@@ -9,6 +9,8 @@
 require_once 'vendor/autoload.php';
 
 $GLOBALS['reactSource'] = file_get_contents(__DIR__ . '/node_modules/react/dist/react.js');
+$GLOBALS['reactSource'] .= file_get_contents(__DIR__ . '/node_modules/react-dom/dist/react-dom.js');
+$GLOBALS['reactSource'] .= file_get_contents(__DIR__ . '/node_modules/react-dom/dist/react-dom-server.js');
 $GLOBALS['componentsSource'] = file_get_contents(__DIR__ . '/tests/fixtures/components.js');
 
 class TestHelpers {

tests/PrerenderTest.php

@@ -3,7 +3,7 @@
 use React\React;
 
 class PrerenderTagTest extends PHPUnit_Framework_TestCase {
-  
+
   protected $react;
 
   public function setUp() {
@@ -25,9 +25,9 @@ public function testWithPrerender() {
 
     $expectedElement = TestHelpers::stringToElement('<div><span>Hello, </span><strong>react-laravel</strong></div>');
     $elementWithoutAttributes = TestHelpers::removeAttributes($wrapperElement->childNodes->item(0));
-    
+
     $this->assertEquals(TestHelpers::innerHTML($expectedElement),
                         TestHelpers::innerHTML($elementWithoutAttributes));
   }
 
-}
+}

tests/fixtures/components.js

@@ -4,4 +4,4 @@ var Alert = React.createClass({displayName: 'Alert',
       React.createElement('strong', null, this.props.name)
     );
   }
-});
+});

travis.php.ini

@@ -0,0 +1 @@
+extension=v8js.so