alexrqs · alexrqs · Dec 19, 2018 · Dec 20, 2018 · Dec 28, 2018 · Dec 28, 2018
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,11 @@ node_modules
 lib
 public
 yarn-error.log
+element.js
+intercept.js
+JSXComponent.js
+reduxish.js
+renderClient.js
+renderServer.js
+synteticEvents.js
+utils.js
diff --git a/.npmignore b/.npmignore
@@ -3,3 +3,13 @@ src
 examples
 .babelrc
 .travis.yml
+recipes
+test
+.babelrc
+.editorconfig
+README.md
+yarn.lock
+.travis.yml
+.gitignore
+.prettierrc
+yarn-error.log
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![travis](https://travis-ci.org/alecsgone/jsx-render.svg?branch=master)](https://travis-ci.org/alecsgone/jsx-render)
 
-Small file to render jsx as a stateless component from react but without the heavy kb use of it.
+Small file to render jsx as a stateless component from react but without the heavy kb use of it. and now includes server side rendering
 
 ## Contents
 
@@ -35,10 +35,7 @@ Make sure you have the pragma fn defined and its name is "dom"
 ```json
 // .babelrc
 {
-  "presets": [
-    "babel-preset-primavera",
-    ["@babel/preset-react", { "pragma": "dom" }]
-  ]
+  "presets": ["@babel/preset-env", ["@babel/preset-react", { "pragma": "dom" }]]
 }
 ```
 
@@ -51,6 +48,17 @@ const DummyComponent = props => (<div>{props.children}</div>)
 export default DummyComponent
 ```
 
+and render is possible both client and server side (check the recipe for SSR)
+
+```jsx
+// client
+import renderClient from 'jsx-render/renderClient'
+import DummyComponent from './DummyComponent'
+
+const element = renderClient(<DummyComponent />)
+document.body.appendChild(element)
+```
+
 or Fragments
 
 ```jsx
@@ -139,3 +147,4 @@ function render() {
 - [ClassComponents](recipes/classComponents.md)
 - [Events](recipes/events.md)
 - [Testing](recipes/testing.md)
+- [Server Side Rendering](recipes/ssr.md)
diff --git a/examples/logo.js b/examples/logo.js
@@ -1,6 +1,6 @@
-import dom from '../src/dom'
+import dom from '../src/element'
 
-const Logo = () => (
+const Logo = ({ color } = {}) => (
   <svg
     id="Layer_1"
     data-name="Layer 1"
@@ -13,7 +13,7 @@ const Logo = () => (
       <path
         d="M241.74,421.43v-41h28.61v41H241.74Zm24.47-4.13V384.56H245.86V417.3h20.35Z"
         transform="translate(-241.74 -380.43)"
-        style={{ fill: '#ffcd05' }}
+        style={{ fill: `${color || '#ffcd05'}` }}
       />
       <path
         d="M289.36,398.82h-1.77c-2.32-3.28-4.63-6.54-6.93-10.23h0v10.23h-2V384.55h1.77c2.32,3.26,4.63,6.5,6.91,10.17h0V384.55h2v14.27Z"

diff --git a/examples/ssr/client.js b/examples/ssr/client.js
@@ -0,0 +1,15 @@
+import dom from '../../src/element'
+import renderClient from '../../src/renderClient'
+import App from './entry'
+
+const content = document.querySelector('.app') || document.createElement('div')
+
+if (content) {
+  content.replaceChild(renderClient(<App />), content.firstElementChild)
+} else {
+  content.className = 'app'
+  document.body.appendChild(content)
+  content.appendChild(renderClient(<App />))
+}
+
+console.log('client render ok')
diff --git a/examples/ssr/entry.js b/examples/ssr/entry.js
@@ -0,0 +1,37 @@
+import dom from '../../src/element'
+import Logo from '../logo'
+
+const websites = ['foo', 'bar', 'baz', 'quex']
+
+function handleClick(node) {
+  node.addEventListener('click', event => {
+    alert('chimulla')
+  })
+}
+
+const Headline = () => (
+  <div>
+    <h2 className="css">Title</h2>
+    <Logo color="#34ff90" />
+    <Logo color="green" />
+    <p>
+      Lorem <br /> Ipsum
+    </p>
+    <hr />
+    <img
+      src="https://ih1.redbubble.net/image.10212890.8041/fc,550x550,white_brown.jpg"
+      width="150"
+      height="150"
+    />
+    <ul>
+      {websites.map(web => (
+        <li>
+          <a href="http://google.com">{web}</a>
+        </li>
+      ))}
+    </ul>
+    <button ref={handleClick}>Click me!</button>
+  </div>
+)
+
+export default Headline
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
@@ -0,0 +1,29 @@
+import express from 'express'
+import App from './entry'
+import renderServer from '../../src/renderServer'
+import dom from '../../src/element'
+
+const app = express()
+
+app.use(express.static('examples/ssr/public'))
+
+app.get('/', function root(req, res) {
+  res.send(`
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <title>Document</title>
+    </head>
+    <body>
+      <h1>SSR</h1>
+      <div class="app">${renderServer(<App />)}</div>
+      <script src="/client.js"></script>
+    </body>
+    </html>
+  `)
+})
+
+app.listen(3030, function cb() {
+  console.log(3030)
+})
diff --git a/examples/ssr/webpack.config.js b/examples/ssr/webpack.config.js
@@ -0,0 +1,36 @@
+const path = require('path')
+const HTMLPage = require('html-webpack-plugin')
+
+module.exports = {
+  devServer: {
+    port: 3030,
+  },
+
+  devtool: 'cheap-source-code',
+
+  entry: {
+    client: path.resolve(__dirname, './client.js'),
+  },
+
+  mode: 'development',
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          extends: path.resolve(__dirname, '../../.babelrc'),
+        },
+      },
+    ],
+  },
+
+  output: {
+    path: path.resolve(__dirname, 'public'),
+    filename: '[name].js',
+  },
+
+  plugins: [process.env.ONLY_CLIENT && new HTMLPage()].filter(Boolean),
+}
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('path')
 const HTMLPage = require('html-webpack-plugin')
 
 module.exports = {
@@ -9,29 +9,28 @@ module.exports = {
 
   devtool: 'cheap-source-code',
   entry: {
-    main: path.resolve(__dirname, './index.js'),
+    front: path.resolve(__dirname, './front.js'),
   },
 
   mode: 'development',
 
   module: {
-    rules: [{
-      test: /\.jsx?$/,
-      loader: 'babel-loader',
-      exclude: /node_modules/,
-      options: {
-        extends: path.resolve(__dirname, '../.babelrc'),
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          extends: path.resolve(__dirname, '../.babelrc'),
+        },
       },
-    }]
+    ],
   },
 
   output: {
-    path: path.resolve(''),
+    path: path.resolve('./examples/ssr/public/'),
     filename: '[name].js',
   },
 
-  plugins: [
-    new HTMLPage(),
-  ],
-
+  plugins: [new HTMLPage()],
 }