add with-emotion example

examples/with-emotion/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["razzle/babel"],
+  "env": {
+    "production": {
+      "plugins": ["@emotion"]
+    },
+    "development": {
+      "plugins": [["@emotion", { "sourceMap": true }]]
+    }
+  }
+}

examples/with-emotion/.gitignore

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

examples/with-emotion/README.md

@@ -0,0 +1,24 @@
+# Razzle with-emotion 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-emotion
+cd with-emotion
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn start
+```
+
+## Idea behind the example
+This is a basic, bare-bones example that shows a very minimal implementation
+of [emotion 11](https://github.com/emotion-js/emotion).
+It satisfies the entry points `src/index.js` for the server and`src/client.js`
+for the browser.
+There are comments in `src/server.js` to show how the styles are gathered and
+rendered into to the DOM

examples/with-emotion/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "razzle-examples-with-emotion",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "express": "^4.15.2",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "@emotion/cache": "^11.0.0-next.10",
+    "@emotion/css": "^11.0.0-next.11",
+    "@emotion/react": "^11.0.0-next.11",
+    "@emotion/server": "^11.0.0-next.10",
+    "@emotion/styled": "^11.0.0-next.11"
+  },
+  "devDependencies": {
+    "razzle": "^3.0.0",
+    "@emotion/babel-plugin": "^11.0.0-next.10"
+  }
+}

examples/with-emotion/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+

examples/with-emotion/src/App.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Route, Switch, Link } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { GreenPage } from './pages/green/green.page';
+import { HomePage } from './pages/home/home.page';
+import { Footer } from './components/footer';
+import { Header } from './components/header';
+
+const Root = styled.div`
+  width: 980px;
+  margin: auto;
+`;
+
+const App = () => (
+  <Root>
+    <Header />
+    <div>
+      <Switch>
+        <Route exact path="/" component={HomePage} />
+        <Route path="/green" component={GreenPage} />
+      </Switch>
+    </div>
+    <Footer />
+  </Root>
+);
+
+export default App;

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

@@ -0,0 +1,16 @@
+import App from './App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import MemoryRouter from 'react-router-dom/MemoryRouter';
+
+describe('<App />', () => {
+  test('renders without exploding', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(
+      <MemoryRouter>
+        <App />
+      </MemoryRouter>,
+      div
+    );
+  });
+});

examples/with-emotion/src/client.js

@@ -0,0 +1,33 @@
+import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+import React from 'react';
+import { hydrate } from 'react-dom';
+import { CacheProvider, Global, css } from '@emotion/react';
+import { cache } from '@emotion/css';
+
+hydrate(
+  <CacheProvider value={cache}>
+    <Global
+      styles={css`
+        html {
+          height: 100%;
+          min-height: 100%;
+        }
+        body {
+          margin: 0;
+          padding: 0;
+          font-family: sans-serif;
+          min-height: 100%;
+        }
+      `}
+    />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </CacheProvider>,
+  document.getElementById('root')
+);
+
+if (module.hot) {
+  module.hot.accept();
+}

examples/with-emotion/src/components/footer/footer.component.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+
+export const Footer = () => (
+  <div style={{ margin: 'auto', display: 'flex', justifyContent: 'center' }}>
+    <ul
+      css={css`
+        list-style: none;
+        display: inline-flex;
+        margin: auto;
+        padding: 0;
+        li {
+          margin-right: 1rem;
+        }
+      `}
+    >
+      <li>
+        <a href="https://github.com/jaredpalmer/razzle">Docs</a>
+      </li>
+      <li>
+        <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
+      </li>
+      <li>
+        <a href="https://palmer.chat">Community Slack</a>
+      </li>
+    </ul>
+  </div>
+);

examples/with-emotion/src/components/footer/index.js

@@ -0,0 +1 @@
+export * from './footer.component';

examples/with-emotion/src/components/header/header.component.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import logo from '../../react.svg';
+import { Link } from 'react-router-dom';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const Root = styled.div`
+  .top-bar {
+    display: flex;
+    .left {
+      flex: 1;
+      display: flex;
+      img {
+        width: 64px;
+        margin-right: 1rem;
+      }
+    }
+    .right {
+      flex: 0;
+      list-style: none;
+      display: inline-flex;
+      margin: 2rem auto;
+      li {
+        margin: 0 1rem;
+      }
+    }
+  }
+`;
+
+export const Header = () => (
+  <Root>
+    <div className="top-bar">
+      <div className="left">
+        <img src={logo} className="Home-logo" alt="logo" />
+        <h1>Razzle</h1>
+      </div>
+      <ul className="right">
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/green">Green</Link>
+        </li>
+      </ul>
+    </div>
+  </Root>
+);

examples/with-emotion/src/components/header/index.js

@@ -0,0 +1 @@
+export * from './header.component';

examples/with-emotion/src/index.js

@@ -0,0 +1,32 @@
+import http from 'http';
+
+let app = require('./server').default;
+
+const server = http.createServer(app);
+
+let currentApp = app;
+
+server.listen(process.env.PORT || 3000, error => {
+  if (error) {
+    console.log(error);
+  }
+
+  console.log('🚀 started');
+});
+
+if (module.hot) {
+  console.log('✅  Server-side HMR Enabled!');
+
+  module.hot.accept('./server', () => {
+    console.log('🔁  HMR Reloading `./server`...');
+
+    try {
+      app = require('./server').default;
+      server.removeListener('request', currentApp);
+      server.on('request', app);
+      currentApp = app;
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}

examples/with-emotion/src/pages/green/green.page.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as S from './green.styled';
+
+export const GreenPage = () => {
+  return (
+    <>
+      <S.Title>Hello, I am Green</S.Title>
+    </>
+  );
+};

examples/with-emotion/src/pages/green/green.styled.js

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const Title = styled.h3`
+  color: green;
+`;

examples/with-emotion/src/pages/green/index.js

@@ -0,0 +1 @@
+export * from './green.page';

examples/with-emotion/src/pages/home/home.page.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import logo from '../../react.svg';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import { Header } from '../../components/header';
+
+const Blue = styled.h3`
+  color: blue;
+`;
+
+export const HomePage = () => {
+  return (
+    <div>
+      <p>
+        To get started, edit <code>src/App.js</code> or <code>src/Home.js</code>{' '}
+        and save to reload.
+      </p>
+      <div>
+        <Blue>Hello, I am Blue</Blue>
+      </div>
+    </div>
+  );
+};

examples/with-emotion/src/server.js

@@ -0,0 +1,55 @@
+import App from './App';
+import React from 'react';
+import { StaticRouter } from 'react-router-dom';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+import { extractCritical } from '@emotion/server';
+
+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 context = {};
+    const { css, html: markup, ids } = extractCritical(
+      renderToString(
+        <StaticRouter context={context} location={req.url}>
+          <App />
+        </StaticRouter>
+      )
+    );
+
+    if (context.url) {
+      res.redirect(context.url);
+    } else {
+      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">
+        <style data-emotion-css=${ids.join(' ')}>${css}</style>
+        ${
+          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>
+        <div id="root">${markup}</div>
+    </body>
+</html>`
+      );
+    }
+  });
+
+export default server;