init

fdecampredon · Jun 2, 2016 · a7b19fc · a7b19fc
commit a7b19fc
Show file tree

Hide file tree

Showing 19 changed files with 495 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,10 @@
+{
+  "extends": "airbnb-base/legacy",
+  "rules": {
+    "no-underscore-dangle": 0,
+    "no-trailing-spaces": 0,
+    "no-param-reassign": 0,
+    "func-names": 0,
+    "vars-on-top": 0
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+bundle.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false,
+  "eslint.enable": true
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,98 @@
+# react-vstyle
+
+> React bindings for [VStyle](https://github.com/fdecampredon/vstyle)
+
+
+## Install
+You can install react-vstyle through npm: 
+```
+npm install react-vstyle
+```
+
+## Usage
+
+### StylesRendererProvider
+
+react-vstyle let you inject a VStyle `StylesRenderer` in the react context with the `StylesRendererProvider` component: 
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createStylesRenderer } from 'vstyle';
+import { StylesRendererProvider } from 'react-vstyle';
+import MyComponent from './myComponent';
+
+const stylesRenderer = createStylesRenderer();
+
+ReactDOM.render(
+  <StylesRendererProvider stylesRenderer={stylesRenderer}>
+    <MyComponent />
+  </StylesRendererProvider>,
+  docuent.getElementById('root')
+);
+```
+
+once you have injected your `StylesRenderer` into the context you can consume your styles in 2 ways :
+
+## withRenderStyles
+
+`withRenderStyles` is an higher order component that will inject the `renderStyles`
+function of the `StylesRenderer` to the props of the wrapped component:
+
+```javascript
+import React from 'react';
+import { StyleSheet } from 'vstyle';
+import { withRenderStyles } from 'react-vstyle';
+
+const styles = StyleSheet.create({
+  button: {
+    color: 'blue',
+  },
+});
+
+function MyComponent({ renderStyles, styles: otherStyles }) {
+  return <Button className={renderStyles(styles.button, otherStyles)} />;
+}
+
+export default withRenderStyles(MyComponent)
+```
+
+## Navive component injection
+
+Alternatively you can use the experimental `injectNativeComponent` function of react-vstyle,
+then you can drop your styles in the `styles` (notice the _s_) property of your DOM components:
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createStylesRenderer } from 'vstyle';
+import { StylesRendererProvider, injectNativeComponent  } from 'react-vstyle';
+import MyComponent from './myComponent';
+
+injectNativeComponent();
+
+const stylesRenderer = createStylesRenderer();
+
+ReactDOM.render(
+  <StylesRendererProvider stylesRenderer={stylesRenderer}>
+    <MyComponent />
+  </StylesRendererProvider>,
+  docuent.getElementById('root')
+);
+```
+
+```javascript
+import React from 'react';
+import { StyleSheet } from 'vstyle';
+import { withRenderStyles } from 'react-vstyle';
+
+const styles = StyleSheet.create({
+  button: {
+    color: 'blue',
+  },
+});
+
+export default function MyComponent({ styles: otherStyles }) {
+  return <Button styles={[styles.button, otherStyles]} />;
+}
+```
diff --git a/examples/.babelrc b/examples/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["es2015", "react"] }
diff --git a/examples/.eslintrc b/examples/.eslintrc
@@ -0,0 +1,10 @@
+{
+  "extends": "airbnb",
+  "rules": {
+    "no-trailing-spaces": 0,
+    "no-param-reassign": 0,
+    "func-names": 0,
+    "vars-on-top": 0,
+    "react/prop-types": 0
+  }
+}
diff --git a/examples/.gitignore b/examples/.gitignore
@@ -0,0 +1 @@
+bundle.js
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,18 @@
+# Example
+
+To run this example start by installing dependencies : 
+```
+npm install
+```
+
+Then you can either run the client only example by excuting this script: 
+```
+npm run build
+```
+Then open the `index.html` file in your favorite browser.
+
+You can also run the server-side rendered example by executing this script:
+```
+npm start
+```
+Then open your browser at http://localhost:3000 .
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <style id="style"></style>
+    </head>
+    <body>
+        <div id="content"></div>
+        <script src="./bundle.js"></script>
+    </body>
+</html>
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,29 @@
+{
+  "scripts": {
+    "start": "babel-node server.js",
+    "build": "browserify -d ./src/index.js > bundle.js"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "babel-cli": "^6.9.0"
+  },
+  "dependencies": {
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.0.1",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "serialize-javascript": "^1.2.0",
+    "vstyle": "^0.1.2",
+    "react-vstyle": "file:.."
+  },
+  "browserify": {
+    "transform": [
+      [
+        "babelify"
+      ]
+    ]
+  }
+}
diff --git a/examples/server.js b/examples/server.js
@@ -0,0 +1,45 @@
+import http from 'http';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import browserify from 'browserify';
+import serialize from 'serialize-javascript';
+import { createStylesRenderer } from 'vstyle';
+import { StylesRendererProvider, injectNativeComponent } from 'react-vstyle';
+import App from './src/App';
+
+injectNativeComponent();
+
+http.createServer((req, res) => {
+  if (req.url === '/bundle.js') {
+    res.setHeader('content-type', 'application/javascript');
+    const b = browserify(`${__dirname}/src/index.js`).transform('babelify').bundle();
+    b.pipe(res);
+  } else {
+    const stylesRenderer = createStylesRenderer();
+    const markup = ReactDOMServer.renderToString(
+      <StylesRendererProvider stylesRenderer={stylesRenderer}>
+        <App stylesRenderer={stylesRenderer} />
+      </StylesRendererProvider>
+    );
+    const styles = stylesRenderer.renderToString();
+    const rendererStates = stylesRenderer.serialize();
+
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(`
+      <!doctype html>
+      <html>
+          <head>
+              <meta charset="utf-8">
+              <style id="style">${styles}</style>
+          </head>
+          <body>
+              <div id="content">${markup}</div>
+              <script>
+                window.STYLES_RENDERER_STATES = ${serialize(rendererStates)}
+              </script>
+              <script src="./bundle.js"></script>
+          </body>
+      </html>
+    `);
+  }
+}).listen(3000);
diff --git a/examples/src/App.js b/examples/src/App.js
@@ -0,0 +1,64 @@
+// this example has been taken from aphrodite: https://github.com/Khan/aphrodite
+
+import React from 'react';
+import { StyleSheet, registerPlugin } from 'vstyle';
+import defaultUnitPlugin from 'vstyle/lib/plugins/default-unit';
+import { withRenderStyles } from 'react-vstyle';
+
+registerPlugin(defaultUnitPlugin());
+
+
+const styles = StyleSheet.create({
+  blue: {
+    backgroundColor: 'blue',
+    color: 'white',
+    padding: 20,
+  },
+  red: {
+    backgroundColor: 'red',
+  },
+  code: {
+    backgroundColor: 'white',
+    color: 'black',  
+    padding: 10,
+    fontStyle: 'italic',
+    fontWeight: 'bold',
+    borderRadius: 4,
+  },
+});
+
+const WithRenderStylesDiv = withRenderStyles(({ renderStyles: r, red }) => (
+  <div className={r(styles.blue, red && styles.red)}>
+    I render my style using the <span className={r(styles.code)}>widthRenderStyles</span> HOC
+  </div>
+));
+
+const InjectNativeDiv = ({ red }) => (
+  <div styles={[styles.blue, red && styles.red]}>
+    I render my style using the <span styles={styles.code}>styles</span> property and
+    {' '}
+    <span styles={styles.code}>injectNativeComponent</span>
+  </div>
+);
+
+export default class App extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = { timer: false };
+  }
+
+  componentDidMount() {
+    setInterval(() => this.setState({ timer: !this.state.timer }), 500);
+  }
+
+  render() {
+    const { timer } = this.state;
+    return (
+      <div>
+        <WithRenderStylesDiv red={timer} />
+        <InjectNativeDiv red={!timer} />
+      </div>
+    );
+  }
+}
diff --git a/examples/src/index.js b/examples/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createStylesRenderer } from 'vstyle';
+import { StylesRendererProvider, injectNativeComponent } from 'react-vstyle';
+import App from './App';
+
+injectNativeComponent();
+
+const stylesRenderer = createStylesRenderer(window.STYLES_RENDERER_STATES);
+stylesRenderer.attach(document.getElementById('style'));
+
+ReactDOM.render(
+  <StylesRendererProvider stylesRenderer={stylesRenderer}>
+    <App stylesRenderer={stylesRenderer} />
+  </StylesRendererProvider>,
+  document.getElementById('content')
+);
diff --git a/lib/StylesRendererProvider.js b/lib/StylesRendererProvider.js
@@ -0,0 +1,32 @@
+var React = require('react');
+var stylesRendererShape = require('./stylesRendererShape');
+
+var StylesRendererProvider = React.createClass({
+
+  propTypes: {
+    stylesRenderer: stylesRendererShape.isRequired,
+    children: React.PropTypes.element.isRequired
+  },
+
+  childContextTypes: {
+    _stylesRenderer: stylesRendererShape.isRequired
+  },
+
+  getChildContext: function () {
+    return { _stylesRenderer: this.props.stylesRenderer };
+  },
+
+  componentWillReceiveProps: function (props) {
+    if (props.stylesRenderer !== this.props.stylesRenderer) {
+      throw new Error(
+        '<StylesRendererProvider> does not support changing `stylesRenderer` on the fly.'
+      );
+    }
+  },
+
+  render: function () {
+    return React.Children.only(this.props.children);
+  }
+});
+
+module.exports = StylesRendererProvider;