Add styled-components-ssr example

.gitignore

@@ -10,3 +10,9 @@ node_modules
 /*/*/es
 /*/*/build
 /*/*/coverage
+addons/styled-components/.DS_Store
+addons/.DS_Store
+yarn.lock
+yarn-error.log
+yarn.lock
+yarn.lock

addons/styled-components/neutrino.js

@@ -0,0 +1 @@
+module.exports = require('./lib/neutrino').default

addons/styled-components/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "tux-addon-styled-components",
+  "version": "0.4.0",
+  "description": "Use Styled Components on the server and client.",
+  "bugs": {
+    "url": "https://github.com/aranja/tux/issues"
+  },
+  "repository": "aranja/tux",
+  "keywords": ["react", "styled-components", "tux-addon"],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "prepublish": "NODE_ENV=production ../../tasks/build-package.js",
+    "watch": "../../tasks/build-package.js --watch",
+    "test": "../../node_modules/.bin/jest"
+  },
+  "peerDependencies": {
+    "react": ">16.0.0-beta",
+    "react-chain": "^0.5.0"
+  },
+  "files": ["es", "lib"],
+  "license": "MIT",
+  "devDependencies": {
+    "jest": "^18.1.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "styled-components": "^3.3.3",
+    "babel-plugin-styled-components": "^1.5.1"
+  }
+}

addons/styled-components/src/index.ts

@@ -0,0 +1,18 @@
+import { Middleware } from 'react-chain'
+import { ServerStyleSheet } from 'styled-components'
+
+const styled = (): Middleware => session => {
+  if (!process.env.BROWSER && session.req) {
+    const sheet = new ServerStyleSheet()
+    session.on('server', render => {
+      render()
+      const styles = sheet.getStyleElement()
+      session.document.head.push(...styles)
+    })
+
+    return async next => sheet.collectStyles(await next())
+  }
+  return undefined
+}
+
+export default styled

addons/styled-components/src/neutrino.ts

@@ -0,0 +1,27 @@
+import { Neutrino } from 'neutrino'
+
+const { merge } = require('@neutrinojs/compile-loader')
+
+const styledMiddleware = (neutrino: Neutrino, opts = {}) => {
+  const options = Object.assign(
+    {
+      ssr: true,
+      displayName: process.env.NODE_ENV !== 'production',
+    },
+    opts
+  )
+
+  // prettier-ignore
+  neutrino.config.module
+    .rule('compile')
+      .use('babel')
+        .tap(babelOptions => 
+          merge(babelOptions, {
+            plugins: [
+              [require.resolve('babel-plugin-styled-components'), options],
+            ],
+          })
+        )
+}
+
+module.exports = styledMiddleware

addons/styled-components/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../shared/tsconfig.base.json",
+  "compilerOptions": {
+  },
+  "include": [
+    "./src",
+    "../../shared/types"
+  ]
+}

examples/styled-components-ssr/.gitignore

@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log

examples/styled-components-ssr/.neutrinorc.js

@@ -0,0 +1,12 @@
+const { version: appVersion } = require('./package.json')
+
+module.exports = {
+	options: {
+		serverEntry: 'server',
+	},
+	use: [
+		'tux/neutrino',
+		// Styled components
+		'tux-addon-styled-components/neutrino',
+	],
+}

examples/styled-components-ssr/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "tux-example-styled-components-ssr",
+  "version": "0.1.0",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "styled-components": "^3.3.3",
+    "tux": "^0.5.0"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.5.1",
+    "tux-scripts": "0.5.3"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "scripts": {
+    "start": "tux-scripts start",
+    "build": "tux-scripts build",
+    "serve": "tux-scripts serve"
+  }
+}

examples/styled-components-ssr/src/app.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { createApp } from 'tux'
+import styled from 'tux-addon-styled-components'
+import Home from './components/Home'
+
+// Create a Tux app.
+const app = createApp()
+
+// SSR middleware for styled components.
+app.use(styled())
+
+// Lastly, serve a component on client and server.
+app.use(<Home />)
+
+export default app

examples/styled-components-ssr/src/components/Description.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+const Description = styled.p`
+	color: rgba(0, 0, 0, 0.75);
+	font-size: 2rem;
+	font-weight: 300;
+	margin: 0;
+	text-align: center;
+`
+
+export default Description

examples/styled-components-ssr/src/components/Header.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+const HeaderContainer = styled.div`
+	position: fixed;
+	display: flex;
+	align-items: ceneter;
+	justify-content: center;
+	top: 0;
+	width: 100%;
+	padding: 1.5em;
+	text-align: center;
+	background: #f9f9f9;
+	border-bottom: 1px solid #ccc;
+`
+
+export class Header extends Component {
+	render() {
+		return <HeaderContainer>Tux</HeaderContainer>
+	}
+}
+
+export default Header

examples/styled-components-ssr/src/components/Home.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import styled, { injectGlobal } from 'styled-components'
+import Header from './Header'
+import TuxLogo from './TuxLogo/'
+import Description from './Description'
+
+injectGlobal`
+	html {
+		font-family: sans-serif;
+		font-size: 16px;
+		line-height: 1.5;
+	}
+	body {
+		margin: 0rem;
+		background: #fff;
+	}
+`
+
+const HomeContainer = styled.div`
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	justify-content: center;
+	margin-top: 5rem;
+`
+
+const Home = () => {
+	return (
+		<HomeContainer>
+			<Header />
+			<TuxLogo />
+			<Description>Edit app.js to get started</Description>
+		</HomeContainer>
+	)
+}
+
+export default Home

examples/styled-components-ssr/src/components/TuxLogo/TuxLogo.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import tuxLogo from './tux.svg'
+
+const LogoImg = styled.img`
+	display: block;
+	margin: 0 auto;
+	width: 25rem;
+`
+
+export class TuxLogo extends Component {
+	render() {
+		return <LogoImg src={tuxLogo} />
+	}
+}
+
+export default TuxLogo

examples/styled-components-ssr/src/components/TuxLogo/index.js

@@ -0,0 +1 @@
+export { default } from './TuxLogo'

examples/styled-components-ssr/src/server/index.js

@@ -0,0 +1,16 @@
+import { serve, buildAssets } from "tux/server";
+import Document from "react-document";
+import app from "../app";
+import express from "express";
+
+export default ({ clientStats }) => {
+  const expressApp = express();
+  expressApp.use(
+    serve({
+      Document,
+      assets: buildAssets(clientStats),
+      app
+    })
+  );
+  return expressApp;
+};