Skip to content

Commit

Permalink
feat(core): bring the api for the variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@lttb
lttb committed May 16, 2019
1 parent 63d0108 commit 9ab611f
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 76 deletions.
25 changes: 17 additions & 8 deletions packages/babel/index.js
View file
Expand Up @@ -8,9 +8,10 @@ const {stripIndent} = require('common-tags');
const stringHash = require('string-hash');

const utils = require('@reshadow/utils');
const {KEYS} = require('@reshadow/core');

const buildClassName = template.expression(`
NAME.styles["ELEMENT"]
NAME.${KEYS.__styles__}["ELEMENT"]
`);

const toObjectExpression = obj =>
Expand Down Expand Up @@ -223,13 +224,12 @@ module.exports = (babel, pluginOptions = {}) => {

const [jsxNode] = p.node.arguments;

const stylesSet = t.sequenceExpression([
t.callExpression(t.identifier(addImport('set')), [
t.arrayExpression(localStyles),
]),
jsxNode,
const setCall = t.callExpression(t.identifier(addImport('set')), [
t.arrayExpression(localStyles),
]);

const stylesSet = t.sequenceExpression([setCall, jsxNode]);

p.node.arguments = [stylesSet];

let path = p;
Expand Down Expand Up @@ -287,10 +287,19 @@ module.exports = (babel, pluginOptions = {}) => {
for (let x of elementPath.container) {
if (!t.isJSXElement(x)) continue;

if (setCall.arguments.length === 1) {
setCall.arguments.push(variables);
}

x.openingElement.attributes.push(
t.jSXAttribute(
t.JSXIdentifier('$$style'),
t.JSXExpressionContainer(variables),
t.JSXIdentifier(KEYS.__style__),
t.JSXExpressionContainer(
t.memberExpression(
t.identifier(name),
t.identifier(KEYS.__style__),
),
),
),
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/babel/package.json
View file
Expand Up @@ -24,6 +24,7 @@
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/template": "^7.2.2",
"@babel/types": "^7.3.0",
"@reshadow/core": "^0.0.1-alpha.21",
"@reshadow/postcss": "^0.0.1-alpha.21",
"@reshadow/utils": "^0.0.1-alpha.21",
"common-tags": "1.8.0",
Expand Down
65 changes: 31 additions & 34 deletions packages/babel/spec/__snapshots__/index.test.js.snap
View file
Expand Up @@ -7,14 +7,14 @@ import styles from './styles';
const styled_c8 = create([styles, __css__(\`Button {color: var(--c8_0)}\`, \\"3399371458\\")]);
new Vue({
el: \\"#app\\",
render: h => styled((set([styled_c8]), h(\\"Button\\", map(\\"Button\\", _mergeJSXProps([{
render: h => styled((set([styled_c8], {
\\"--c8_0\\": color
}), h(\\"Button\\", map(\\"Button\\", _mergeJSXProps([{
\\"class\\": \\"test\\",
\\"attrs\\": {
\\"size\\": \\"s\\",
\\"bgcolor\\": \\"red\\",
\\"$$style\\": {
\\"--c8_0\\": color
}
\\"$$style\\": styled.$$style
}
}, use({
mod: \\"value\\"
Expand All @@ -32,7 +32,7 @@ new Vue({
el: \\"#app\\",
render: h => styled((set([styled_c8]), h(\\"div\\", map(\\"div\\", {
\\"attrs\\": {
\\"className\\": styled.styles[\\"__div\\"]
\\"className\\": styled.$$styles[\\"__div\\"]
}
}), [h(\\"Button\\", map(\\"Button\\", {
\\"attrs\\": {
Expand Down Expand Up @@ -336,7 +336,7 @@ const App = ({
type: type,
disabled: disabled
}), React.createElement(\\"span\\", {
className: styled.styles[\\"__content\\"]
className: styled.$$styles[\\"__content\\"]
}, \\"content\\"))));
export default App;"
Expand All @@ -355,7 +355,7 @@ const App = ({
type: type,
disabled: disabled
}), React.createElement(\\"span\\", {
className: styled.styles[\\"__use--content\\"]
className: styled.$$styles[\\"__use--content\\"]
}, \\"content\\"))));
export default App;"
Expand All @@ -374,7 +374,7 @@ const App = ({
type: type,
disabled: disabled
}), React.createElement(\\"span\\", {
className: styled.styles[\\"__content\\"]
className: styled.$$styles[\\"__content\\"]
}, \\"content\\"))));
export default App;"
Expand All @@ -393,7 +393,7 @@ const App = ({
type: type,
disabled: disabled
}), React.createElement(\\"span\\", {
className: styled.styles[\\"__use--content\\"]
className: styled.$$styles[\\"__use--content\\"]
}, \\"content\\"))));
export default App;"
Expand Down Expand Up @@ -435,9 +435,9 @@ const App = ({
}, use({
theme: \\"normal\\"
})), styled((set([styled_12c]), React.createElement(\\"div\\", {
className: styled.styles[\\"__content\\"]
className: styled.$$styles[\\"__content\\"]
}, \\"content\\"))), React.createElement(\\"button\\", {
className: styled.styles[\\"__button\\"]
className: styled.$$styles[\\"__button\\"]
}, \\"click\\"))));
export default App;"
Expand Down Expand Up @@ -498,13 +498,13 @@ const App = ({
type,
color,
bgcolor
}) => styled((set([styled_c8]), React.createElement(\\"button\\", map(\\"button\\", {
}) => styled((set([styled_c8], {
\\"--c8_0\\": color,
\\"--c8_1\\": bgcolor
}), React.createElement(\\"button\\", map(\\"button\\", {
type: type,
disabled: disabled,
$$style: {
\\"--c8_0\\": color,
\\"--c8_1\\": bgcolor
}
$$style: styled.$$style
}, use({
theme: \\"normal\\"
})), \\"content\\")));
Expand All @@ -530,14 +530,14 @@ const App = ({
color,
bgcolor
}) => styled((set([styled_c8]), React.createElement(\\"div\\", {
className: styled.styles[\\"__div\\"]
}, styled((set([styled_12c]), React.createElement(\\"button\\", map(\\"button\\", {
className: styled.$$styles[\\"__div\\"]
}, styled((set([styled_12c], {
\\"--12c_0\\": color,
\\"--12c_1\\": bgcolor
}), React.createElement(\\"button\\", map(\\"button\\", {
type: type,
disabled: disabled,
$$style: {
\\"--12c_0\\": color,
\\"--12c_1\\": bgcolor
}
$$style: styled.$$style
}), \\"content\\"))))));
export default App;"
Expand All @@ -557,22 +557,19 @@ const App = ({
type,
color,
bgcolor
}) => styled((set([styled_c8]), React.createElement(React.Fragment, null, React.createElement(\\"button\\", map(\\"button\\", {
}) => styled((set([styled_c8], {
\\"--c8_0\\": color,
\\"--c8_1\\": bgcolor
}), React.createElement(React.Fragment, null, React.createElement(\\"button\\", map(\\"button\\", {
type: type,
disabled: disabled,
$$style: {
\\"--c8_0\\": color,
\\"--c8_1\\": bgcolor
}
$$style: styled.$$style
}, use({
theme: \\"normal\\"
})), \\"content\\"), React.createElement(\\"button\\", map(\\"button\\", {
type: type,
disabled: disabled,
$$style: {
\\"--c8_0\\": color,
\\"--c8_1\\": bgcolor
}
$$style: styled.$$style
}, use({
theme: \\"action\\"
})), \\"content 2\\"))));
Expand All @@ -594,10 +591,10 @@ const App = ({
type,
color,
bgcolor
}) => styled((set([styled_c8]), React.createElement(\\"button\\", map(\\"button\\", {
}) => styled((set([styled_c8], \`--c8_0:\${color};--c8_1:\${bgcolor};\`), React.createElement(\\"button\\", map(\\"button\\", {
type: type,
disabled: disabled,
$$style: \`--c8_0:\${color};--c8_1:\${bgcolor};\`
$$style: styled.$$style
}, use({
theme: \\"normal\\"
})), \\"content\\")));
Expand All @@ -618,7 +615,7 @@ const App = ({
type: type,
disabled: disabled
}), React.createElement(\\"span\\", {
className: styled.styles[\\"__content\\"]
className: styled.$$styles[\\"__content\\"]
}, \\"content\\"))));
export default App;"
Expand Down
86 changes: 61 additions & 25 deletions packages/core/index.js
View file
@@ -1,12 +1,13 @@
const _Symbol = key => (typeof Symbol !== 'undefined' ? Symbol(key) : key);

export const KEYS = {
const KEYS = {
__id__: _Symbol('__id__'),
__store__: _Symbol('__store__'),
__prev__: _Symbol('__prev__'),
__use__: _Symbol('__use__'),
__elements__: '__elements__',
__style__: '$$style',
__styles__: '$$styles',
};

let index = 0;
Expand Down Expand Up @@ -64,7 +65,7 @@ const isSSR = !(

let serverStyles = '';

export const getStyles = () => serverStyles;
const getStyles = () => serverStyles;

const RESHADOW_ID = '__reshadow__';

Expand Down Expand Up @@ -94,24 +95,32 @@ const css = (code, hash) => {
};

let styles = {};
let style;
const stack = [];

const styled = elem => {
styles = stack.pop() || styles;
styled.styles = styles;
const curr = stack.pop();

styles = curr[0] || styles;
style = curr[1] || style;

styled[KEYS.__styles__] = styles;
styled[KEYS.__style__] = style;

return elem;
};

styled.styles = styles;
styled[KEYS.__styles__] = styles;

const set = args => {
const set = (args, newStyle) => {
const newStyles = create(args);

stack.push(styles);
stack.push([styles, style]);

styles = newStyles;
styled.styles = styles;
style = newStyle;
styled[KEYS.__styles__] = styles;
styled[KEYS.__style__] = style;
};

/**
Expand All @@ -120,26 +129,26 @@ const set = args => {
*/
styled.classProp = 'className';

export const USE_PREFIX = 'use--';
export const ELEMENT_PREFIX = '__';
export const MOD_PREFIX = '_';
export const MOD_SEPARATOR = '_';
const USE_PREFIX = 'use--';
const ELEMENT_PREFIX = '__';
const MOD_PREFIX = '_';
const MOD_SEPARATOR = '_';

export const parseElement = name => name.replace(ELEMENT_PREFIX, '');
const parseElement = name => name.replace(ELEMENT_PREFIX, '');

export const parseAttribute = name =>
const parseAttribute = name =>
name.replace(MOD_PREFIX, '').split(MOD_SEPARATOR);

export const appendClassName = (className, cn = '') => {
const appendClassName = (className, cn = '') => {
if (className) {
cn += (cn ? ' ' : '') + className;
}
return cn;
};
export const appendElement = (styles, key, cn = '') =>
const appendElement = (styles, key, cn = '') =>
appendClassName(styles[ELEMENT_PREFIX + key], cn);

export const appendModifier = (styles, key, value, cn = '') => {
const appendModifier = (styles, key, value, cn = '') => {
// isFalsy
if (
value === undefined ||
Expand Down Expand Up @@ -170,7 +179,7 @@ export const appendModifier = (styles, key, value, cn = '') => {
function map(element) {
let nextProps = {};
let cn = appendElement(styles, element);
let style = null;
let vars = null;

const len = arguments.length;

Expand All @@ -182,7 +191,7 @@ function map(element) {
if (!currProps) continue;

useProps = useProps || currProps[KEYS.__use__];
style = style || currProps[KEYS.__style__];
vars = vars || currProps[KEYS.__style__];

for (let key in currProps) {
if (
Expand Down Expand Up @@ -212,16 +221,43 @@ function map(element) {

if (cn) nextProps[styled.classProp] = cn;

if (style) {
if (vars) {
nextProps.style =
typeof style === 'string'
? style + (nextProps.style || '')
: Object.assign(style, nextProps.style || {});
? vars + (nextProps.style || '')
: Object.assign(vars, nextProps.style || {});
}

return nextProps;
}

export {use, css, create, set, map, css as __css__};

export default styled;
Object.defineProperty(exports, '__esModule', {
value: true,
});

Object.assign(exports, {
default: styled,
use,
css,
create,
set,
map,
__css__: css,

// ssr
getStyles,

// utils
appendModifier,
appendElement,
appendClassName,
parseAttribute,
parseElement,

// constants
MOD_SEPARATOR,
MOD_PREFIX,
ELEMENT_PREFIX,
USE_PREFIX,
KEYS,
});
4 changes: 0 additions & 4 deletions packages/core/spec/setup.js
View file

This file was deleted.

0 comments on commit 9ab611f

Please sign in to comment.