add react-meta-tags

chenos · Mar 30, 2018 · 80efe62 · 80efe62
1 parent 6bd9c22
commit 80efe62
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 22 deletions.
diff --git a/examples/react-router/index.php b/examples/react-router/index.php
@@ -5,17 +5,17 @@
 require __DIR__.'/autoload.php';
 
 $app = new App();
-$html = $app->respond($_SERVER['REQUEST_URI']);
+$data = $app->respond($_SERVER['REQUEST_URI']);
 
 echo <<<HTML
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Document</title>
+    {$data['meta']}
 </head>
 <body>
-    <div id="app">{$html}</div>
+    <div id="app">{$data['main']}</div>
     <script src="build/client.compiled.js"></script>
 </body>
 </html>

diff --git a/examples/react-router/js/App.js b/examples/react-router/js/App.js
@@ -1,12 +1,23 @@
 import React from 'react'
 import { Link, Route, Switch } from 'react-router-dom'
+import MetaTags from 'react-meta-tags';
 
 const Home = () => (
-  <h1>Home Page</h1>
+  <div className="page">
+    <MetaTags>
+      <title>React Meta Tags | Home</title>
+    </MetaTags>
+    <h1>Home Page</h1>
+  </div>
 )
 
 const About = () => (
-  <h1>About Page</h1>
+  <div className="page">
+    <MetaTags>
+      <title>React Meta Tags | About Us</title>
+    </MetaTags>
+    <h1>About Page</h1>
+  </div>
 )
 
 const NotFound = () => {
@@ -15,7 +26,12 @@ const NotFound = () => {
   }
 
   return (
-    <h1>Not Found</h1>
+    <div className="page">
+      <MetaTags>
+        <title>React Meta Tags | Not Found</title>
+      </MetaTags>
+      <h1>Not Found</h1>
+    </div>
   )
 }
 

diff --git a/examples/react-router/js/server.js b/examples/react-router/js/server.js
@@ -1,11 +1,18 @@
 import React from 'react'
 import { StaticRouter } from 'react-router-dom'
+import MetaTagsServer from 'react-meta-tags/lib/meta_tags_server';
+import { MetaTagsContext } from 'react-meta-tags/lib/index';
+
 import App from './App'
 
 var context = {}
 
+export const metaTagsInstance = MetaTagsServer();
+
 export default (props) => (
-  <StaticRouter location={props.location} context={context}>
-    <App/>
-  </StaticRouter>
+  <MetaTagsContext extract = {metaTagsInstance.extract}>
+    <StaticRouter location={props.location} context={context}>
+      <App/>
+    </StaticRouter>
+  </MetaTagsContext>
 )
diff --git a/examples/react-router/js/template.js b/examples/react-router/js/template.js
@@ -0,0 +1,16 @@
+const app = require('./build/server.compiled.js')
+let html = ReactDomServer.renderToString(app)
+
+let template = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    ${meta}
+</head>
+<body>
+    <div id="app">${html}</div>
+    <script src="build/client.compiled.js"></script>
+</body>
+</html>
+`
diff --git a/examples/react-router/package.json b/examples/react-router/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-meta-tags": "^0.3.0",
     "react-router-dom": "^4.2.2"
   },
   "devDependencies": {

diff --git a/examples/react-router/src/App.php b/examples/react-router/src/App.php
@@ -34,15 +34,14 @@ public function __construct()
 
     public function respond($location)
     {
-        $this->context->data = ['location' => $location];
+        $this->context->set('req', ['location' => $location]);
+        $this->context->set('res', new Response);
+        $this->context->require('./build/server.compiled.js', ['default' => 'App', 'metaTagsInstance']);
 
-        $this->context->res = ['status' => function ($status) {
-            http_response_code($status);
-        }];
+        $main = $this->context->eval("ReactDOMServer.renderToString(React.createElement(App, {location: httpServer.req.location}))");
+        $meta = $this->context->eval('metaTagsInstance.renderToString()');
 
-        $this->context->require('./build/server.compiled.js', ['default' => 'App']);
-
-        return $this->context->eval("ReactDOMServer.renderToString(React.createElement(App, httpServer.data))");
+        return ['meta' => $meta, 'main' => $main];
     }
 
     public function getContext()

diff --git a/examples/react-router/src/Response.php b/examples/react-router/src/Response.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Chenos\ExecJs\ReactRouter;
+
+class Response
+{
+    public function status($status)
+    {
+        http_response_code($status);
+
+        return $this;
+    }
+
+    public function send($html)
+    {
+        echo $html;
+    }
+}
+
diff --git a/examples/react-router/test.js b/examples/react-router/test.js
@@ -1,14 +1,16 @@
 var React = require('react')
 var ReactDOMServer = require('react-dom/server')
 var App = require('./build/server.compiled.js').default
+var metaTagsInstance = require('./build/server.compiled.js').metaTagsInstance
 
 for (var i = 0; i < 10000; i++) {
-    var element = React.createElement(App, { location: '/react-router/' })
+    var element = React.createElement(App, { location: '/react-router/about' })
     var html = ReactDOMServer.renderToString(element)
 }
 
-// if (typeof print === 'undefined') {
-//     global.print = console.log
-// }
-
-// print(html)
+if (typeof print === 'undefined') {
+    global.print = console.log
+}
+const meta = metaTagsInstance.renderToString();
+print(meta)
+print(html)
diff --git a/examples/react-router/webpack.config.js b/examples/react-router/webpack.config.js
@@ -25,6 +25,7 @@ module.exports = [{
   },
   externals: {
     'react': 'react',
+    'react-dom/server': 'react-dom/server',
     'react-router-dom': 'react-router-dom',
   },
   module: { rules },