├── example
    ├── build
    │   └── .gitkeep
    ├── src
    │   ├── react-bundle.js
    │   └── table.js
    ├── package.json
    ├── README.md
    └── example.php
├── .gitignore
├── composer.json
├── LICENSE
├── PATENTS
├── README.md
└── ReactJS.php


/example/build/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | example/node_modules
2 | example/build
3 | 


--------------------------------------------------------------------------------
/example/src/react-bundle.js:
--------------------------------------------------------------------------------
1 | // We know we're using browserify which compiles modules with global exposted
2 | global.React = require('react');
3 | global.ReactDOM = require('react-dom');
4 | global.ReactDOMServer = require('react-dom/server');
5 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reactjs/react-php-v8js",
 3 |   "description": "PHP library that renders React components on the server",
 4 |   "require": {
 5 |     "ext-v8js": ">=0.1.3"
 6 |   },
 7 |   "license": "BSD-3-Clause",
 8 |   "autoload": {
 9 |     "classmap": ["ReactJS.php"]
10 |   }
11 | }


--------------------------------------------------------------------------------
/example/src/table.js:
--------------------------------------------------------------------------------
 1 | /**!
 2 |  * Copyright (c) 2014, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | var Table = React.createClass({
10 |   render: function () {
11 |     var rows = this.props.data.map(function (row) {
12 |       var cells = row.map(function(cell) {
13 |         return <td>{cell}</td>;
14 |       });
15 | 
16 |       return <tr>{cells}</tr>;
17 |     });
18 | 
19 |     return (
20 |       <table>
21 |         <tbody>{rows}</tbody>
22 |       </table>
23 |     );
24 |   }
25 | });
26 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-php-v8js",
 3 |   "private": true,
 4 |   "version": "1.0.0",
 5 |   "scripts": {
 6 |     "make": "npm run make-dev && npm run make-min && npm run make-table",
 7 |     "make-dev": "browserify -t [ envify --NODE_ENV development ] src/react-bundle.js > build/react-bundle.js",
 8 |     "make-min": "browserify -t [ envify --NODE_ENV production ] src/react-bundle.js | uglifyjs > build/react-bundle.min.js",
 9 |     "make-table": "babel --presets react src/table.js > build/table.js"
10 |   },
11 |   "dependencies": {
12 |     "babel-cli": "^6.3.17",
13 |     "babel-preset-react": "^6.3.13",
14 |     "browserify": "^12.0.1",
15 |     "envify": "^3.4.0",
16 |     "react": "^0.14.5",
17 |     "react-dom": "^0.14.5",
18 |     "uglifyjs": "^2.4.10"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD License for React-PHP-V8Js
 2 | 
 3 | Copyright (c) 2014, Facebook, Inc. All rights reserved.
 4 | 
 5 | Redistribution and use in source and binary forms, with or without modification,
 6 | are permitted provided that the following conditions are met:
 7 | 
 8 |  * Redistributions of source code must retain the above copyright notice, this
 9 |    list of conditions and the following disclaimer.
10 | 
11 |  * Redistributions in binary form must reproduce the above copyright notice,
12 |    this list of conditions and the following disclaimer in the documentation
13 |    and/or other materials provided with the distribution.
14 | 
15 |  * Neither the name Facebook nor the names of its contributors may be used to
16 |    endorse or promote products derived from this software without specific
17 |    prior written permission.
18 | 
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
20 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
21 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
23 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
24 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
25 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
26 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
28 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Example
 2 | 
 3 | This example uses npm to build a custom library that will be inserted to be used for rendering React. You may want to do something similar in your own project.
 4 | 
 5 | ## Set up
 6 | 
 7 | 1. Ensure node and npm are installed
 8 | 2. `npm install`
 9 | 3. `npm run make`
10 | 
11 | This will create several files in the `build/` directory. `bundle-react.js` is what will be passed into the `ReactJS` constructor as `libsrc`. It exposes 3 globals: `React`, `ReactDOM`, and `ReactDOMServer`.
12 | 
13 | ## Alternative Approach
14 | 
15 | This example works by building a single bundle for React exposing 3 globals. Another approach would be to concatenate the existing 3 browser bundles that React ships with. Each of these exposes the necessary globals. Here's how you might change the existing `example.php` to make this work.
16 | 
17 | ```diff
18 | @@ -14,9 +14,11 @@
19 |  include '../ReactJS.php';
20 | 
21 |  $rjs = new ReactJS(
22 |    // location of React's code
23 | -  file_get_contents('build/react-bundle.js'),
24 | +  file_get_contents('path/to/react/react.js') .
25 | +    file_get_contents('path/to/react/react-dom.js') .
26 | +    file_get_contents('path/to/react/react-dom-server.js'),
27 |    // app code
28 |    file_get_contents('build/table.js')
29 |  );
30 | 
31 | @@ -46,9 +48,10 @@ $rjs->setComponent('Table', $data);
32 |      <!-- render server content here -->
33 |      <div id="page"><?php echo $rjs->getMarkup(); ?></div>
34 | 
35 |      <!-- load react and app code -->
36 | -    <script src="react/build/react.min.js"></script>
37 | +    <script src="path/to/react/react.js"></script>
38 | +    <script src="path/to/react/react-dom.js"></script>
39 |      <script src="build/table.js"></script>
40 | 
41 |      <script>
42 |      // client init/render
43 | 
44 | ```
45 | 


--------------------------------------------------------------------------------
/example/example.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**!
 3 |  * Copyright (c) 2014, Facebook, Inc.
 4 |  * All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the BSD-style license found in the
 7 |  * LICENSE file in the root directory of this source tree. An additional grant
 8 |  * of patent rights can be found in the PATENTS file in the same directory.
 9 |  */
10 | 
11 | /**
12 |  * Example of using the ReactJS class
13 |  */
14 | include '../ReactJS.php';
15 | 
16 | $rjs = new ReactJS(
17 |   // location of React's code
18 |   file_get_contents('build/react-bundle.js'),
19 |   // app code
20 |   file_get_contents('build/table.js')
21 | );
22 | 
23 | // data to be passed to the component
24 | $data =
25 |   array('data' => array(
26 |     array(1, 2, 3),
27 |     array(4, 5, 6),
28 |     array(7, 8, 9)
29 |   ));
30 | 
31 | // set the component and its data
32 | // after this you can call getMarkup()/getJS()
33 | // Then you can set another component to render
34 | // and do that as many times as the components you need
35 | // all the while reusing the $rjs instance
36 | $rjs->setComponent('Table', $data);
37 | ?>
38 | <!doctype html>
39 | <html>
40 |   <head>
41 |     <title>React page</title>
42 |     <!-- css and stuff -->
43 |   </head>
44 |   <body>
45 | 
46 |     <!-- render server content here -->
47 |     <div id="page"><?php echo $rjs->getMarkup(); ?></div>
48 | 
49 |     <!-- load react and app code -->
50 |     <script src="react/build/react.min.js"></script>
51 |     <script src="build/table.js"></script>
52 | 
53 |     <script>
54 |     // client init/render
55 |     // this is a straight echo of the JS because the JS resources
56 |     // were loaded synchronously
57 |     // You may want to load JS async and wrap the return of getJS()
58 |     // in a function you can call later
59 |     <?php echo $rjs->getJS('#page', "GLOB"); ?>
60 |     </script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/PATENTS:
--------------------------------------------------------------------------------
 1 | Additional Grant of Patent Rights Version 2
 2 | 
 3 | "Software" means the React-PHP-V8Js software distributed by Facebook, Inc.
 4 | 
 5 | Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software
 6 | ("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable
 7 | (subject to the termination provision below) license under any Necessary
 8 | Claims, to make, have made, use, sell, offer to sell, import, and otherwise
 9 | transfer the Software. For avoidance of doubt, no license is granted under
10 | Facebook's rights in any patent claims that are infringed by (i) modifications
11 | to the Software made by you or any third party or (ii) the Software in
12 | combination with any software or other technology.
13 | 
14 | The license granted hereunder will terminate, automatically and without notice,
15 | if you (or any of your subsidiaries, corporate affiliates or agents) initiate
16 | directly or indirectly, or take a direct financial interest in, any Patent
17 | Assertion: (i) against Facebook or any of its subsidiaries or corporate
18 | affiliates, (ii) against any party if such Patent Assertion arises in whole or
19 | in part from any software, technology, product or service of Facebook or any of
20 | its subsidiaries or corporate affiliates, or (iii) against any party relating
21 | to the Software. Notwithstanding the foregoing, if Facebook or any of its
22 | subsidiaries or corporate affiliates files a lawsuit alleging patent
23 | infringement against you in the first instance, and you respond by filing a
24 | patent infringement counterclaim in that lawsuit against that party that is
25 | unrelated to the Software, the license granted hereunder will not terminate
26 | under section (i) of this paragraph due to such counterclaim.
27 | 
28 | A "Necessary Claim" is a claim of a patent owned by Facebook that is
29 | necessarily infringed by the Software standing alone.
30 | 
31 | A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
32 | or contributory infringement or inducement to infringe any patent, including a
33 | cross-claim or counterclaim.
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React-PHP-V8Js
 2 | ===========
 3 | 
 4 | React-PHP-V8Js is an experimental library that uses the power of Facebook's
 5 | [React](http://facebook.github.io/react/) library to render UI components
 6 | on the server-side with PHP as well as on the client.
 7 | 
 8 | Prerequisites
 9 | ===========
10 | * Server running PHP 5.3.3+
11 | * [V8Js PHP extension](http://php.net/v8js)
12 | 
13 | For a walkthrough how to setup V8Js PHP extension, use the links below:
14 | 
15 | - [On Linux](https://github.com/preillyme/v8js/blob/master/README.Linux.md)
16 | - [On MacOS](https://github.com/preillyme/v8js/blob/master/README.MacOS.md)
17 | - [On Windows](https://github.com/preillyme/v8js/blob/master/README.Win32.md)
18 | 
19 | Usage
20 | ===========
21 | ```php
22 | // the library
23 | $react_source = file_get_contents('/path/to/build/react.js');
24 | // all custom code concatenated
25 | $app_source = file_get_contents('/path/to/custom/components.js');
26 | 
27 | $rjs = new ReactJS($react_source, $app_source);
28 | $rjs->setComponent('MyComponent', array(
29 |   'any'   =>  1,
30 |   'props' =>  2
31 |   )
32 | );
33 | 
34 | /// ...
35 | 
36 | // print rendered markup
37 | echo '<div id="here">' . $rjs->getMarkup() . '</div>';
38 | 
39 | /// ...
40 | 
41 | // load JavaScript somehow - concatenated, from CDN, etc
42 | // including react.js and custom/components.js
43 | 
44 | // init client
45 | echo '<script>' . $rjs->getJS("#here") . '</script>'; 
46 | 
47 | /// ...
48 | 
49 | // repeat setComponent(), getMarkup(), getJS() as necessary
50 | // to render more components
51 | ```
52 | 
53 | License
54 | =======
55 | BSD License for React-PHP-V8Js
56 | 
57 | Copyright (c) 2014, Facebook, Inc. All rights reserved.
58 | 
59 | Redistribution and use in source and binary forms, with or without modification,
60 | are permitted provided that the following conditions are met:
61 | 
62 |  * Redistributions of source code must retain the above copyright notice, this
63 |    list of conditions and the following disclaimer.
64 |  * Redistributions in binary form must reproduce the above copyright notice,
65 |    this list of conditions and the following disclaimer in the documentation
66 |    and/or other materials provided with the distribution.
67 |  * Neither the name Facebook nor the names of its contributors may be used to
68 |    endorse or promote products derived from this software without specific
69 |    prior written permission.
70 | 
71 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
72 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
73 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
74 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
75 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
76 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
77 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
78 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
79 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
80 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
81 | 
82 | 


--------------------------------------------------------------------------------
/ReactJS.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**!
  3 |  * Copyright (c) 2014, Facebook, Inc.
  4 |  * All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the BSD-style license found in the
  7 |  * LICENSE file in the root directory of this source tree. An additional grant
  8 |  * of patent rights can be found in the PATENTS file in the same directory.
  9 |  */
 10 | 
 11 | /**
 12 |  * A PHP class to render React components on the server
 13 |  * and then hook the components on the client side.
 14 |  * Requires V8JS PHP extension: http://php.net/v8js
 15 |  */
 16 | class ReactJS {
 17 | 
 18 |   private
 19 |     /**
 20 |      * Name of the component to render
 21 |      * @var string
 22 |      */
 23 |     $component,
 24 | 
 25 |     /**
 26 |      * Properties that go along with the component
 27 |      * @var mixed
 28 |      */
 29 |     $data = null,
 30 | 
 31 |     /**
 32 |      * Instance of V8Js class
 33 |      * @var object
 34 |      */
 35 |     $v8,
 36 | 
 37 |     /**
 38 |      * Custom error handler
 39 |      * @var callable
 40 |      */
 41 |     $errorHandler;
 42 | 
 43 |   /**
 44 |    * Initialize by passing JS code as a string.
 45 |    * The application source code is concatenated string
 46 |    * of all custom components and app code
 47 |    *
 48 |    * @param string $libsrc React's source code
 49 |    * @param string $appsrc Application source code
 50 |    */
 51 |   function __construct($libsrc, $appsrc) {
 52 |     $react = array();
 53 |     // stubs, react
 54 |     $react[] = "var console = {warn: function(){}, error: print};";
 55 |     $react[] = "var global = global || this, self = self || this, window = window || this;";
 56 |     $react[] = $libsrc;
 57 |     $react[] = "var React = global.React, ReactDOM = global.ReactDOM, ReactDOMServer = global.ReactDOMServer;";
 58 |     // app's components
 59 |     $react[] = $appsrc;
 60 |     $react[] = ';';
 61 | 
 62 |     $concatenated = implode(";\n", $react);
 63 | 
 64 |     $this->v8 = new V8Js();
 65 |     $this->executeJS($concatenated);
 66 |   }
 67 | 
 68 |   /**
 69 |    * Which components is to be rendered along with it's data
 70 |    * E.g.
 71 |    *   $rjs->setComponent('MyTable', array('content' => $q4_results));
 72 |    *
 73 |    * @param string $component Component name
 74 |    * @param mixed $data Any type of data to be passed as params
 75 |    *              when initializing the component. Optional.
 76 |    * @return object $this instance
 77 |    */
 78 |   function setComponent($component, $data = null) {
 79 |     $this->component = $component;
 80 |     $this->data = json_encode($data);
 81 |     return $this;
 82 |   }
 83 | 
 84 |   /**
 85 |    * Custom error handler. The default one var_dumps the exception
 86 |    * and die()s.
 87 |    *
 88 |    * @param callable $err Callback passed to call_user_func()
 89 |    * @return object $this instance
 90 |    */
 91 |   function setErrorHandler($err) {
 92 |     $this->errorHandler = $err;
 93 |     return $this;
 94 |   }
 95 | 
 96 |   /**
 97 |    * Returns the markup to print to the page
 98 |    *
 99 |    * @return string HTML string
100 |    */
101 |   function getMarkup() {
102 |     $js = sprintf(
103 |       "print(ReactDOMServer.renderToString(React.createElement(%s, %s)))",
104 |       $this->component,
105 |       $this->data);
106 | 
107 |     return $this->executeJS($js);
108 |   }
109 | 
110 |   /**
111 |    * Returns JS to be inlined in the page (without <script> tags)
112 |    * It instantiates the client side, once the JS arrives
113 |    *
114 |    * NOTE: This class makes no attempt to load files JS so you can load it
115 |    * however is appropriate - from a CDN, asynchronously, etc.
116 |    *
117 |    * e.g. getJS('document.body');
118 |    *     renders in body and doesn't retain a var
119 |    * e.g. getJS('#page', "GLOB");
120 |    *      renders in element id="page" and assigns the component to
121 |    *      a JavaScript variable named GLOB for later use if needed
122 |    * @param string $where A reference to a DOM object, or an ID
123 |    *               for convenience if prefixed by a #. E.g. "#page"
124 |    *               It will be passed to document.getElementById('page')
125 |    * @param string $return_var Optional name of JS variable to be assigned to
126 |    *               the rendered component
127 |    * @return string JS code
128 |    */
129 |   function getJS($where, $return_var = null) {
130 |     // special case for IDs
131 |     if (substr($where, 0, 1) === '#') {
132 |       $where = sprintf(
133 |         'document.getElementById("%s")',
134 |         substr($where, 1)
135 |       );
136 |     }
137 |     return
138 |       ($return_var ? "var $return_var = " : "") .
139 |       sprintf(
140 |         "ReactDOM.render(React.createElement(%s, %s), %s);",
141 |         $this->component,
142 |         $this->data,
143 |         $where
144 |       );
145 |   }
146 | 
147 |   /**
148 |    * Executes Javascript using V8JS, with primitive exception handling
149 |    *
150 |    * @param string $js JS code to be executed
151 |    * @return string The execution response
152 |    */
153 |   private function executeJS($js) {
154 |     try {
155 |       ob_start();
156 |       $this->v8->executeString($js);
157 |       return ob_get_clean();
158 |     } catch (V8JsException $e) {
159 |       if ($this->errorHandler) {
160 |         call_user_func($this->errorHandler, $e);
161 |       } else {
162 |         // default error handler blows up bad
163 |         echo "<pre>";
164 |         echo $e->getMessage();
165 |         echo "</pre>";
166 |         die();
167 |       }
168 |     }
169 |   }
170 | 
171 | }
172 | 


--------------------------------------------------------------------------------