Merge ba6fab7 into f02b881

babel.config.js

@@ -2,7 +2,7 @@ module.exports = {
     presets: [['@babel/preset-env']],
     overrides: [
         {
-            test: ['./packages/core/**/spec/**'],
+            test: ['./packages/core/**/spec/**', './packages/react/**/spec/**'],
             presets: [
                 [
                     '@babel/preset-react',

jest.config.js

@@ -1,5 +1,8 @@
 const lib = '/lib/';
 
+const react = ['<rootDir>/packages/react'];
+const runtime = ['<rootDir>/packages/core'];
+
 module.exports = {
     testPathIgnorePatterns: [lib],
     collectCoverageFrom: [
@@ -16,7 +19,7 @@ module.exports = {
     projects: [
         {
             displayName: 'client',
-            roots: ['<rootDir>/packages/core'],
+            roots: [...react, ...runtime],
             modulePathIgnorePatterns: [lib],
             setupFilesAfterEnv: ['jest-enzyme'],
             testEnvironment: 'enzyme',
@@ -27,7 +30,7 @@ module.exports = {
         {
             displayName: 'node',
             roots: ['<rootDir>/packages/'],
-            modulePathIgnorePatterns: [lib, '<rootDir>/packages/core'],
+            modulePathIgnorePatterns: [lib, ...react, ...runtime],
             testEnvironment: 'node',
         },
     ],

packages/core/index.js

@@ -27,6 +27,7 @@ const create = args => {
     const len = args.length;
     let newStyle = {};
     let id = '';
+    const vars = {};
 
     for (let i = 0; i < len; i++) {
         let style = args[i];
@@ -42,6 +43,10 @@ const create = args => {
 
         id += '_' + style[KEYS.__id__];
 
+        if (style[KEYS.__style__]) {
+            Object.assign(vars, style[KEYS.__style__]);
+        }
+
         if (style[KEYS.__store__][id]) {
             newStyle = style[KEYS.__store__][id];
             continue;
@@ -60,6 +65,7 @@ const create = args => {
         newStyle[KEYS.__store__] = {
             ['_' + style[KEYS.__id__]]: newStyle,
         };
+        newStyle[KEYS.__style__] = vars;
     }
 
     return newStyle;
@@ -138,6 +144,11 @@ const set = (args, newStyle) => {
 
     styles = newStyles;
     style = newStyle;
+    if (styles[KEYS.__style__]) {
+        style = style
+            ? Object.assign(style, styles[KEYS.__style__])
+            : styles[KEYS.__style__];
+    }
     styled[KEYS.__styles__] = styles;
     styled[KEYS.__style__] = style;
 };

packages/react/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled, {KEYS, map, create} from '@reshadow/core';
+import {createStyled, css} from '@reshadow/runtime';
+import tags from '@reshadow/utils/html-tags';
+
+export function jsx() {
+    const args = Array.prototype.slice.call(arguments);
+    const element = args[0];
+    if (typeof element === 'string' && !tags.has(element)) {
+        args[0] = 'div';
+    }
+    args[1] = map(element, args[1]);
+    return React.createElement.apply(null, args);
+}
+
+export {css, create};
+
+const reactStyled = createStyled(elem => {
+    let style = styled[KEYS.__style__];
+    let result = styled(elem);
+    if (style) {
+        result = React.cloneElement(result, {
+            style: Object.assign(style, result.props.style),
+        });
+    }
+    return result;
+});
+
+reactStyled.jsx = jsx;
+
+export default reactStyled;

packages/react/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "@reshadow/react",
+    "version": "0.0.1-alpha.41",
+    "description": "reshadow react",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/lttb/reshadow.git"
+    },
+    "author": "Kenzhaev Artur <kenzhaev.artur@gmail.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/lttb/reshadow/issues"
+    },
+    "homepage": "https://reshadow.dev",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "../../build.sh && ./build.sh"
+    },
+    "dependencies": {
+        "@reshadow/core": "^0.0.1-alpha.41",
+        "@reshadow/runtime": "^0.0.1-alpha.41",
+        "@reshadow/utils": "^0.0.1-alpha.30"
+    },
+    "optionalDependencies": {
+        "react": ">=15"
+    },
+    "devDependencies": {
+        "enzyme": "^3.8.0",
+        "enzyme-adapter-react-16": "^1.7.1",
+        "react": "^16.7.0",
+        "react-dom": "^16.7.0"
+    }
+}

packages/react/spec/__snapshots__/index.test.js.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react should apply dynamic styles 1`] = `
+<button
+  class="__button_xkvkx5"
+  style="--xkvkx5_1:red"
+>
+  click me
+</button>
+`;
+
+exports[`react should apply dynamic styles 2`] = `".__button_3rhptm{color:red;}.__button_xkvkx5{color:var(--xkvkx5_1);}"`;
+
+exports[`react should apply dynamic styles 3`] = `
+<button
+  class="__button_xkvkx5"
+  style="--xkvkx5_1:green"
+>
+  click me
+</button>
+`;
+
+exports[`react should apply dynamic styles 4`] = `".__button_3rhptm{color:red;}.__button_xkvkx5{color:var(--xkvkx5_1);}"`;
+
+exports[`react should apply external dynamic styles 1`] = `
+<button
+  class="__button_xkvkx5"
+  style="--xkvkx5_1:red"
+>
+  click me
+</button>
+`;
+
+exports[`react should apply external dynamic styles 2`] = `".__button_3rhptm{color:red;}.__button_xkvkx5{color:var(--xkvkx5_1);}"`;
+
+exports[`react should apply external dynamic styles 3`] = `
+<button
+  class="__button_xkvkx5"
+  style="--xkvkx5_1:green"
+>
+  click me
+</button>
+`;
+
+exports[`react should apply external dynamic styles 4`] = `".__button_3rhptm{color:red;}.__button_xkvkx5{color:var(--xkvkx5_1);}"`;
+
+exports[`react should apply external styles 1`] = `
+<button
+  class="__button_3rhptm"
+>
+  click me
+</button>
+`;
+
+exports[`react should apply external styles 2`] = `".__button_3rhptm{color:red;}.__button_xkvkx5{color:var(--xkvkx5_1);}"`;
+
+exports[`react should apply styles 1`] = `
+<button
+  class="__button_3rhptm"
+>
+  click me
+</button>
+`;
+
+exports[`react should apply styles 2`] = `".__button_3rhptm{color:red;}"`;

packages/react/spec/index.test.js

@@ -0,0 +1,78 @@
+/**
+ * @jest-environment enzyme
+ */
+
+/** @jsx jsx */
+import styled, {css, jsx} from '..';
+import {render, shallow} from 'enzyme';
+
+const getStyles = () =>
+    [...document.getElementsByTagName('style')]
+        .map(x => x.textContent)
+        .join('');
+
+describe('react', () => {
+    it('should apply styles', () => {
+        const Button = ({children, ...props}) => styled`
+            button {
+                color: red;
+            }
+        `(<button>{children}</button>);
+
+        const wrapper = render(<Button>click me</Button>);
+        expect(wrapper).toMatchSnapshot();
+        expect(getStyles()).toMatchSnapshot();
+    });
+
+    it('should apply dynamic styles', () => {
+        const Button = ({children, color, ...props}) => styled`
+            button {
+                color: ${color};
+            }
+        `(<button>{children}</button>);
+
+        const wrapper = shallow(<Button color="red">click me</Button>);
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(getStyles()).toMatchSnapshot();
+
+        wrapper.setProps({color: 'green'});
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(getStyles()).toMatchSnapshot();
+    });
+
+    it('should apply external styles', () => {
+        const styles = css`
+            button {
+                color: red;
+            }
+        `;
+
+        const Button = ({children, color, ...props}) => styled(styles)(
+            <button>{children}</button>,
+        );
+
+        const wrapper = render(<Button>click me</Button>);
+        expect(wrapper).toMatchSnapshot();
+        expect(getStyles()).toMatchSnapshot();
+    });
+
+    it('should apply external dynamic styles', () => {
+        const styles = ({color}) => css`
+            button {
+                color: ${color};
+            }
+        `;
+
+        const Button = ({children, color, ...props}) => styled(styles({color}))(
+            <button>{children}</button>,
+        );
+
+        const wrapper = shallow(<Button color="red">click me</Button>);
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(getStyles()).toMatchSnapshot();
+
+        wrapper.setProps({color: 'green'});
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(getStyles()).toMatchSnapshot();
+    });
+});

packages/reshadow/index.js

@@ -1,2 +1,2 @@
-export * from '@reshadow/core';
-export {default} from '@reshadow/core';
+export * from '@reshadow/react';
+export {default} from '@reshadow/react';

packages/reshadow/package.json

@@ -26,6 +26,7 @@
         "@reshadow/macro": "^0.0.1-alpha.41",
         "@reshadow/postcss": "^0.0.1-alpha.30",
         "@reshadow/prettier": "^0.0.1-alpha.30",
+        "@reshadow/react": "^0.0.1-alpha.41",
         "@reshadow/svelte": "^0.0.1-alpha.41",
         "@reshadow/vue": "^0.0.1-alpha.41",
         "@reshadow/webpack": "^0.0.1-alpha.36"

packages/runtime/index.js

@@ -0,0 +1,71 @@
+import {use, set, create, __css__, KEYS} from '@reshadow/core';
+import stringHash from 'string-hash';
+import parse from './parse';
+
+export {use};
+
+const cache = {};
+
+function css() {
+    const str = arguments[0];
+    const hash = stringHash(str.raw.join('')).toString(36);
+    let parsed;
+
+    const vars = {};
+    for (let i = 1, len = arguments.length; i < len; i++) {
+        const name = '--' + hash + '_' + i;
+        vars[name] = arguments[i];
+    }
+
+    if (cache[hash]) {
+        parsed = cache[hash];
+    } else {
+        const values = [];
+        for (let name in vars) {
+            values.push('var(' + name + ')');
+        }
+        const code = String.raw(str, ...values);
+        parsed = parse(code, hash);
+        __css__(parsed.css, hash);
+        cache[hash] = parsed;
+    }
+    cache[hash].tokens[KEYS.__style__] = vars;
+    return cache[hash].tokens;
+}
+
+function createStyled(styled) {
+    let styles = null;
+
+    function taggedStyled() {
+        const str = arguments[0];
+        if (!(str[0] && str.raw)) {
+            return styled.apply(null, arguments);
+        }
+
+        const tokens = css.apply(null, arguments);
+
+        if (styles) {
+            styled();
+        }
+
+        set([styles, tokens]);
+        styles = null;
+
+        return styled;
+    }
+
+    function carriedStyled() {
+        const str = arguments[0];
+        if (str[0] && str.raw) {
+            return taggedStyled.apply(null, arguments);
+        } else {
+            styles = create(Array.prototype.slice.call(arguments));
+            set([styles]);
+            return taggedStyled;
+        }
+    }
+
+    return carriedStyled;
+}
+
+export {createStyled, css};