Merge pull request #21 from fabyo82/feature/add_componentId

Implement SSR rendering support (#20)
- add new options:
  - `ssr: boolean` to enable `componentId` based on file path and binding name
  - `displayName: boolean` to opt out display name generation
  - `styledIdentifiers: string[]` to allow custom wrappers
  - `rootCheck: string` to customize root recognition
- known issues:
  - components with the same name and path get same component id
- added example of SSR with express server

Author: Igorbek

example/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

example/.gitignore

@@ -0,0 +1,16 @@
+dist/
+node_modules/
+
+# OS generated files #
+######################
+.AppleDouble/
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+.idea
+*.happypack*
+ehthumbs.db
+Thumbs.db
+npm-debug.log

example/README.md

@@ -0,0 +1,33 @@
+# typescript-plugin-styled-components SSR example
+
+## Getting Started
+
+- Build `typescript-plugin-styled-components`
+
+```
+$ cd .. 
+```
+
+```
+$ npm i
+```
+
+```
+$ npm run build
+```
+
+- Run example 
+
+```
+$ cd example 
+```
+
+```
+$ npm i
+```
+
+```
+$ npm run dev
+```
+
+Note: see  [`ttypescript`](https://github.com/cevek/ttypescript) if you want to compile the server without webpack

example/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "ts-react-ssr-boilerplate",
+  "version": "2.0.1",
+  "description": "A starter boilerplate to create comprehensive React apps with TypeScript, Redux, Styled-Components and server-side rendering.",
+  "author": "sandervispoel <contact@sandervispoel.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sandervspl/ts-react-ssr-boilerplate"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-cli --config webpack/config.server.js && node dist/server"
+  },
+  "dependencies": {
+    "express": "^4.16.4",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "styled-components": "^4.0.3"
+  },
+  "devDependencies": {
+    "@types/express": "^4.16.0",
+    "@types/react": "^16.4.18",
+    "@types/react-dom": "^16.0.9",
+    "@types/styled-components": "^4.0.3",
+    "@types/webpack": "^4.4.17",
+    "awesome-typescript-loader": "^5.2.1",
+    "cross-env": "^5.2.0",
+    "typescript": "^3.1.5",
+    "webpack": "^4.23.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-middleware": "^3.4.0"
+  }
+}

example/src/AppClient.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import App from './app/App';
+import { ThemeProvider } from 'styled-components';
+import { BrowserRouter } from 'react-router-dom'
+
+const app = document.getElementById('app');
+
+ReactDOM.hydrate(
+
+<ThemeProvider theme={{bgColor: 'red'}}>
+ <BrowserRouter>
+    <App />
+  </BrowserRouter>
+</ThemeProvider>, app);
+

example/src/app/App.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Component1 } from './Component1';
+
+const BodyStyle = styled.div`
+  background: blue;
+  padding: 20px;
+`;
+
+const Header = styled.h2`
+  color: yellow;
+`;
+
+class App extends React.Component<{}> {
+
+  render(){
+    return (
+      <div>
+        <BodyStyle>
+          <Header>Welcome to Typescript Styled Components SSR</Header>
+          <Component1 />
+        </BodyStyle>
+      </div>
+    );
+  }
+} 
+
+export default App;

example/src/app/Component1.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const Component1Style = styled.div`
+    background: #fff;
+    text-align: center;
+`;
+
+const TextStyle = styled.h3`
+    color:  #000;
+    font-weight: bold;
+`;
+export const Component1 : React.SFC = () =>  (
+    <Component1Style>
+        <TextStyle>SubComponent</TextStyle>
+    </Component1Style>
+)

example/src/server/AppServer.tsx

@@ -0,0 +1,21 @@
+import * as React from 'React'
+import { ThemeProvider } from 'styled-components';
+import { StaticRouter } from 'react-router-dom'
+import App from '../app/App';
+export const AppServer = (url) => (
+    <StaticRouter
+        location={url}
+        context={{}}
+    >
+        <ThemeProvider theme={{ bgColor: 'red' }}>
+            <html>
+                <head>
+                    <title>Test App</title>
+                </head>
+                <body>
+                    <div id="app"><App /></div>                    
+                    <script src="./app.js"></script>
+                </body>
+            </html>
+        </ThemeProvider>
+    </StaticRouter>)

example/src/server/index.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import * as express from 'express';
+export const port = process.env.PORT || 3000;
+import { ServerStyleSheet } from 'styled-components';
+import {  renderToNodeStream } from 'react-dom/server';
+import * as webpack from 'webpack';
+const webpackDevMiddleware = require('webpack-dev-middleware');
+import config from '../../webpack/config';
+import {AppServer} from './AppServer';
+
+
+const app = express();
+
+  const compiler = webpack(config);
+
+  app.use(webpackDevMiddleware(compiler, {
+    publicPath: config.output.publicPath,
+    historyApiFallback: true,
+    hot: true,
+    noInfo: true,
+    stats: { colors: true },
+  }));
+
+  app.get('/', (req, res) => {
+    res.contentType('text/html');
+    res.write('<!DOCTYPE html>');
+    const sheet = new ServerStyleSheet();
+    const jsx = sheet.collectStyles(<AppServer url={req.url}/>)
+    const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx))
+    stream.pipe(
+      res,
+      { end: false }
+    )
+    
+  });
+
+
+
+app.listen(port, () => {
+  console.log(`[${process.env.NODE_ENV}] server running on http://localhost:${port}/`);
+});

example/transformer.js

@@ -0,0 +1 @@
+const transformer = '../'