Add an example with Hyperapp (#549)

* Setup Hyperapp example

Enable HMR

Don't touch the yarn lock

Cleanup

Keep naming convention

Don't touch preact

Reverse formatting on the preact example

* Undo formatting something in the preact example

Fix formatting

Fix formatting

Fix formatting

Fix format

* 2.0.0-alpha.7

* Bump hyperapp version

examples/with-hyperapp/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "razzle/babel"
+  ],
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "h"
+      }
+    ]
+  ]
+}

examples/with-hyperapp/.gitignore

@@ -0,0 +1,13 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

examples/with-hyperapp/README.md

@@ -0,0 +1,30 @@
+# Razzle Hyperapp Example
+
+## How to use
+
+Download the example [or clone the whole project](https://github.com/jaredpalmer/razzle.git):
+
+```bash
+curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-hyperapp
+cd with-hyperapp
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn start
+```
+
+## Idea behind the example
+
+This shows how to setup [Hyperapp](https://github.com/hyperapp/hyperapp/) with Razzle.
+
+Here is a list of changes from Razzle's base template:
+
+1.  Install `babel-plugin-transform-react-jsx` as a devDependency.
+2.  Extend Razzle's babel config with a custom `.babelrc`
+3.  Install `hyperapp` and `"@hyperapp/render`
+4.  Remove `react`, `react-dom`, `react-router-dom` entirely
+5.  Update `server.js` to use `@hyperapp/render`'s `withRender` function. Also remove the `<div id="root">` element from our html template since Hyperapp can render to the body.
+6.  Add a `main.js` file which exports the essential pieces of Hyperapp, which are the `state`, `actions`, and `view`. These are to be shared between the `server.js` and `client.js` files.

examples/with-hyperapp/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "razzle-examples-with-hyperapp",
+  "version": "2.0.0-alpha.7",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "@hyperapp/render": "^2.0.0",
+    "express": "^4.15.2",
+    "hyperapp": "^1.2.5"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-react-jsx": "^6.23.0",
+    "razzle": "^2.0.0-alpha.7"
+  }
+}

examples/with-hyperapp/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /api/
+Disallow: /publicapi/
+Disallow: /query/

examples/with-hyperapp/src/App.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}

examples/with-hyperapp/src/App.js

@@ -0,0 +1,18 @@
+/** @jsx h */
+import { h } from 'hyperapp';
+
+import HyperappLogo from './hyperapp.svg';
+import './App.css';
+
+const App = ({ state, actions }) => (
+  <div class="App">
+    <img src={HyperappLogo} alt="Hyperapp Logo" />
+    <p>Hello Hyperapp!</p>
+
+    <h3>Count is {state.count}</h3>
+
+    <button onclick={() => actions.up(1)}>up</button>
+    <button onclick={() => actions.down(1)}>down</button>
+  </div>
+);
+export default App;

examples/with-hyperapp/src/App.test.js

@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'hyperapp';
+import { renderToString } from '@hyperapp/render';
+import App from './App';
+
+describe('<App />', () => {
+  test('renders without exploding', () => {
+    const body = document.createElement('body');
+    const markup = renderToString(<App state={{}} actions={{}} />);
+
+    expect(markup).toContain('App');
+  });
+});

examples/with-hyperapp/src/client.js

@@ -0,0 +1,10 @@
+/** @jsx h */
+import { app } from 'hyperapp';
+
+import { state, actions, view } from './main';
+
+app(state, actions, view, document.body);
+
+if (module.hot) {
+  module.hot.accept();
+}

examples/with-hyperapp/src/index.js

@@ -0,0 +1,21 @@
+import express from 'express';
+import app from './server';
+
+if (module.hot) {
+  module.hot.accept('./server', function() {
+    console.log('🔁  HMR Reloading `./server`...');
+  });
+  console.info('✅  Server-side HMR Enabled!');
+}
+
+const port = process.env.PORT || 3000;
+
+export default express()
+  .use((req, res) => app.handle(req, res))
+  .listen(port, function(err) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(`> Started on port ${port}`);
+  });

examples/with-hyperapp/src/main.js

@@ -0,0 +1,17 @@
+/** @jsx h */
+import { h } from 'hyperapp';
+import App from './App';
+
+/* MODEL */
+const state = { count: 0 };
+
+/* UPDATE */
+const actions = {
+  down: value => state => ({ count: state.count - value }),
+  up: value => state => ({ count: state.count + value }),
+};
+
+/* VIEW */
+const view = (state, actions) => <App state={state} actions={actions} />;
+
+export { state, actions, view };

examples/with-hyperapp/src/main.test.js

@@ -0,0 +1,12 @@
+import { app } from 'hyperapp';
+import { withRender } from '@hyperapp/render';
+import { state, actions, view } from './main';
+
+describe('main app', () => {
+  test('renders without exploding', () => {
+    const body = document.createElement('body');
+    const markup = withRender(app)(state, actions, view, body).toString();
+
+    expect(markup).toContain('Hello Hyperapp');
+  });
+});

examples/with-hyperapp/src/server.js

@@ -0,0 +1,43 @@
+/** @jsx h */
+import express from 'express';
+import { app } from 'hyperapp';
+import { withRender } from '@hyperapp/render';
+
+import { state, actions, view } from './main';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get('/*', (req, res) => {
+    const markup = withRender(app)(state, actions, view).toString();
+
+    res.status(200).send(
+      `<!doctype html>
+    <html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <title>Welcome to Razzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        }
+        ${
+          process.env.NODE_ENV === 'production'
+            ? `<script src="${assets.client.js}" defer></script>`
+            : `<script src="${assets.client.js}" defer crossorigin></script>`
+        }
+    </head>
+    <body>
+        ${markup}
+    </body>
+</html>`
+    );
+  });
+
+export default server;

examples/with-preact/src/server.js

@@ -21,12 +21,16 @@ server
         <meta charSet='utf-8' />
         <title>Welcome to Razzle</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        ${assets.client.css
-          ? `<link rel="stylesheet" href="${assets.client.css}">`
-          : ''}
-        ${process.env.NODE_ENV === 'production'
-          ? `<script src="${assets.client.js}" defer></script>`
-          : `<script src="${assets.client.js}" defer crossorigin></script>`}
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        }
+        ${
+          process.env.NODE_ENV === 'production'
+            ? `<script src="${assets.client.js}" defer></script>`
+            : `<script src="${assets.client.js}" defer crossorigin></script>`
+        }
     </head>
     <body>
         ${markup}