temp

danieldelcore · Sep 24, 2020 · 0e0b637 · 0e0b637
1 parent f35f7bf
commit 0e0b637
Show file tree

Hide file tree

Showing 4 changed files with 2,089 additions and 1,053 deletions.
diff --git a/package.json b/package.json
@@ -33,10 +33,10 @@
         "@babel/core": "^7.7.5",
         "@changesets/cli": "^2.6.2",
         "@manypkg/cli": "^0.11.1",
-        "@storybook/addon-storysource": "^5.2.8",
-        "@storybook/addons": "^5.2.8",
-        "@storybook/react": "^5.2.8",
-        "@storybook/source-loader": "^5.2.8",
+        "@storybook/addon-storysource": "^6.0.21",
+        "@storybook/addons": "^6.0.21",
+        "@storybook/react": "^6.0.21",
+        "@storybook/source-loader": "^6.0.21",
         "@storybook/storybook-deployer": "^2.8.1",
         "@testing-library/react": "^10.0.0",
         "@types/jest": "^25.2.0",

diff --git a/packages/core/src/jsx.tsx b/packages/core/src/jsx.tsx
@@ -4,43 +4,42 @@ import {
     ElementType,
     ReactNode,
     useLayoutEffect,
+    useMemo,
 } from 'react';
-
 import { StyleCollector, CSSProps } from '@trousers/utils';
-import { registry, Registry } from '@trousers/registry';
+import { registry } from '@trousers/registry';
 import { parseObject } from '@trousers/parser';
 import { useTheme } from '@trousers/theme';
 import { toHash } from '@trousers/hash';
-import './types';
+
 import css from './css';
-import { interpolateStyles } from './common';
+
+type DynamicExpressions = Record<string, any>;
 
 interface ActiveDefinition {
     componentId: string;
     styles: string;
+    dynamicExpressions: DynamicExpressions;
 }
+
 function isCollector<Theme>(
     collector: StyleCollector<Theme> | CSSProps,
 ): collector is StyleCollector<Theme> {
     return !!(collector as StyleCollector<Theme>).get;
 }
 
-function getComponentId(
-    name: string,
-    stylesHash: string,
-    themeHash: string = '',
-) {
-    return `${name}${stylesHash}${themeHash}`;
-}
-
-function registerStyle(registry: Registry, definition: ActiveDefinition) {
-    const className = `.${definition.componentId}`;
-    if (registry.has(className)) return;
-    registry.register(className, definition.styles);
-}
+const interpolateStyles = (
+    styles: TemplateStringsArray | string[],
+    expressions: string[],
+) =>
+    expressions.reduce(
+        (result, expression, index) =>
+            `${result}var(${expression})${styles[index + 1]}`,
+        styles[0],
+    );
 
 const jsx = <
-    Props extends { css: StyleCollector<Theme> | CSSProps },
+    Props extends { css: StyleCollector<Theme> | CSSProps; [key: string]: any },
     Theme extends {} = {}
 >(
     type: ElementType<Omit<Props, 'css'>>,
@@ -51,53 +50,39 @@ const jsx = <
         return createElement(type, props, ...children);
     }
 
-    const { css: collector, ...rest } = props;
-    // @ts-ignore
-    console.log(collector.get && collector.get());
-
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const themeCtx = useTheme();
-    const styleDefinitions = isCollector<Theme>(collector)
-        ? collector.get()
-        : css([parseObject(css)]).get();
 
-    let hashedExpressions: any[] = [];
+    const { css: collector, ...rest } = props;
+    const styleDefinitions = (isCollector<Theme>(collector)
+        ? collector
+        : css([parseObject(css)])
+    ).get();
 
     const activeDefinitions: ActiveDefinition[] = styleDefinitions
-        .filter(({ predicate }: any) => !!predicate)
-        .map(definition => {
-            hashedExpressions = definition.expressions.reduce(
-                (accum, expression) => {
-                    accum.push({
-                        // @ts-ignore
-                        hash: `--trousers-${hashedExpressions.length}`,
-                        // @ts-ignore
-                        expression,
-                    });
-
-                    return accum;
-                },
-                [],
-            );
+        .filter(({ predicate }) => !!predicate)
+        .map((definition, i) => {
+            const dynamicExpressions = definition.expressions.reduce<
+                DynamicExpressions
+            >((accum, expression, j) => {
+                accum[`--trousers-${i}-${j}`] = expression;
+                return accum;
+            }, {});
 
             const styles = interpolateStyles(
                 definition.styles,
-                hashedExpressions.reduce((accum, { hash }) => {
-                    accum.push(`var(${hash})`);
-                    return accum;
-                }, []),
-                themeCtx.theme,
+                Object.keys(dynamicExpressions),
             );
 
-            const componentId = getComponentId(
-                definition.name,
-                toHash(styles).toString(),
-                themeCtx.hash.toString(),
-            );
+            const componentId =
+                definition.name +
+                toHash(styles).toString() +
+                themeCtx.hash.toString();
 
             return {
                 styles,
                 componentId,
+                dynamicExpressions,
             };
         });
 
@@ -112,29 +97,41 @@ const jsx = <
         const clientRegistry = registry(headElement, 'data-trousers');
 
         activeDefinitions.forEach(definition =>
-            registerStyle(clientRegistry, definition),
+            clientRegistry.register(
+                `.${definition.componentId}`,
+                definition.styles,
+            ),
         );
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hash]);
 
-    // // eslint-disable-next-line react-hooks/rules-of-hooks
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const style = useMemo(
+        () =>
+            activeDefinitions.reduce<CSSProps>(
+                (accum, { dynamicExpressions }) => {
+                    Object.keys(dynamicExpressions).forEach(key => {
+                        const expression = dynamicExpressions[key];
+                        // @ts-ignore
+                        accum[key] =
+                            typeof expression === 'function'
+                                ? expression(themeCtx.theme as Theme)
+                                : expression;
+                    });
+
+                    return accum;
+                },
+                {},
+            ),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [hash],
+    );
+
     const className = activeDefinitions
-        .reduce((accum, definition) => `${accum} ${definition.componentId}`, '')
+        .map(definition => definition.componentId)
+        .join(' ')
         .trim();
 
-    const style = {
-        ...hashedExpressions.reduce((accum, { hash, expression }) => {
-            if (typeof expression === 'function') {
-                accum[hash] = expression(); // todo pass theme here
-            } else {
-                accum[hash] = expression;
-            }
-            return accum;
-        }, {}),
-        // @ts-ignore
-        ...(rest.style || {}),
-    };
-
     return createElement(type, { ...rest, className, style }, ...children);
 };
 

diff --git a/packages/core/src/useStyles.ts b/packages/core/src/useStyles.ts
@@ -3,7 +3,7 @@ import { STYLE_ID, StyleCollector, CSSProps } from '@trousers/utils';
 import { toHash } from '@trousers/hash';
 import { useTheme } from '@trousers/theme';
 import { ServerContext, ServerCtx } from '@trousers/server';
-import { registry, Registry } from '@trousers/registry';
+import { registry } from '@trousers/registry';
 import { parseObject } from '@trousers/parser';
 
 import { interpolateStyles, isBrowser } from './common';
@@ -14,20 +14,6 @@ interface ActiveDefinition {
     styles: string;
 }
 
-function getComponentId(
-    name: string,
-    stylesHash: string,
-    themeHash: string = '',
-) {
-    return `${name}${stylesHash}${themeHash}`;
-}
-
-function registerStyle(registry: Registry, definition: ActiveDefinition) {
-    const className = `.${definition.componentId}`;
-    if (registry.has(className)) return;
-    registry.register(className, definition.styles);
-}
-
 function isCollector<Theme>(
     collector: StyleCollector<Theme> | CSSProps,
 ): collector is StyleCollector<Theme> {
@@ -51,11 +37,10 @@ export default function useStyles<Theme = {}>(
                 themeCtx.theme,
             );
 
-            const componentId = getComponentId(
-                definition.name,
-                toHash(styles).toString(),
-                themeCtx.hash.toString(),
-            );
+            const componentId =
+                definition.name +
+                toHash(styles).toString() +
+                themeCtx.hash.toString();
 
             return {
                 styles,
@@ -70,7 +55,10 @@ export default function useStyles<Theme = {}>(
     }
 
     if (!isBrowser() && !!serverStyleRegistry) {
-        registerStyle(serverStyleRegistry, activeDefinitions[0]);
+        serverStyleRegistry.register(
+            `.${activeDefinitions[0].componentId}`,
+            activeDefinitions[0].styles,
+        );
     }
 
     const hash = activeDefinitions.reduce(
@@ -83,7 +71,7 @@ export default function useStyles<Theme = {}>(
         const clientRegistry = registry(headElement, STYLE_ID);
 
         activeDefinitions.forEach(definition =>
-            registerStyle(clientRegistry, definition),
+            clientRegistry.register(definition.componentId, definition.styles),
         );
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hash]);