@compiled/react 0.10.2 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -76,8 +76,10 @@
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.0.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^12.1.3",
+    "@types/jsdom": "^16.2.14",
     "@types/react-dom": "^17.0.11",
+    "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/src/runtime/__perf__/cs.test.tsx

@@ -1,111 +1,156 @@
 import { runBenchmark } from '@compiled/benchmark';
+import { JSDOM } from 'jsdom';
 import * as React from 'react';
+import { memo } from 'react';
+import { render } from 'react-dom';
 import { renderToString } from 'react-dom/server';
 
 import { CC, CS } from '../index';
 
-import { StyleArr, StyleStr } from './utils/cs';
+const MemoCS = memo(CS, () => true);
+
+import { StyleBucketFromArray, StyleBucketFromString } from './utils/cs';
 
 describe('CS benchmark', () => {
-  it('completes with CS (1 array element) or StyleArr as the fastest', async () => {
-    const stylesArr = [
-      '._s7n4jp4b{vertical-align:top}',
-      '._1reo15vq{overflow-x:hidden}',
-      '._18m915vq{overflow-y:hidden}',
-      '._1bto1l2s{text-overflow:ellipsis}',
-      '._o5721q9c{white-space:nowrap}',
-      '._ca0qidpf{padding-top:0}',
-      '._u5f31y44{padding-right:4px}',
-      '._n3tdidpf{padding-bottom:0}',
-      '._19bv1y44{padding-left:4px}',
-      '._p12f12xx{max-width:100px}',
-      '._1bsb1osq{width:100%}',
-    ];
+  describe.each(['server', 'client'])('on the %s', (env) => {
+    const document = globalThis.document;
+    const window = globalThis.window;
+
+    beforeAll(() => {
+      if (env === 'server') {
+        // @ts-expect-error
+        delete globalThis.document;
+        // @ts-expect-error
+        delete globalThis.window;
+      } else {
+        const dom = new JSDOM('<div id="root"></div>');
+        globalThis.document = dom.window.document;
+        // @ts-expect-error
+        globalThis.window = dom.window;
+      }
+    });
+
+    afterAll(() => {
+      globalThis.document = document;
+      globalThis.window = window;
+    });
+
+    const fastest =
+      env === 'server'
+        ? ['StyleBucketFromArray', 'StyleBucketFromString']
+        : ['MemoCS (1 array element)', 'MemoCS (n array elements)'];
 
-    const stylesStr = stylesArr.join('');
+    it(`completes with [${fastest.join(', ')}] as the fastest`, async () => {
+      const stylesArr = [
+        '._s7n4jp4b{vertical-align:top}',
+        '._1reo15vq{overflow-x:hidden}',
+        '._18m915vq{overflow-y:hidden}',
+        '._1bto1l2s{text-overflow:ellipsis}',
+        '._o5721q9c{white-space:nowrap}',
+        '._ca0qidpf{padding-top:0}',
+        '._u5f31y44{padding-right:4px}',
+        '._n3tdidpf{padding-bottom:0}',
+        '._19bv1y44{padding-left:4px}',
+        '._p12f12xx{max-width:100px}',
+        '._1bsb1osq{width:100%}',
+      ];
 
-    const className = [
-      '_bfhk1jys',
-      '_2rko1l7b',
-      '_vchhusvi',
-      '_syaz4rde',
-      '_1e0c1o8l',
-      '_1wyb1skh',
-      '_k48p1fw0',
-      '_vwz4kb7n',
-      '_p12f1osq',
-      '_ca0qyh40',
-      '_u5f3idpf',
-      '_n3td1l7b',
-      '_19bvidpf',
-      '_1p1dangw',
-      '_s7n41q9y',
-    ].join(' ');
+      const stylesStr = stylesArr.join('');
 
-    const style = {
-      '--_16owtcm': 'rgb(227, 252, 239)',
-      '--_kmurgp': 'rgb(0, 102, 68)',
-    } as any;
+      const className = stylesArr.map((rule) => rule.slice(1, 10)).join(' ');
+      const nonce = 'k0Mp1lEd';
 
-    const nonce = 'k0Mp1lEd';
+      const renderJSX =
+        env === 'server'
+          ? (jsx: (key: number) => JSX.Element) => {
+              renderToString(<>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>);
+            }
+          : (jsx: (key: number) => JSX.Element) => {
+              render(
+                <>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>,
+                globalThis.document.getElementById('root')
+              );
+            };
 
-    const benchmark = await runBenchmark('CS', [
-      {
-        name: 'CS (1 array element)',
-        fn: () => {
-          renderToString(
-            <CC>
-              <CS nonce={nonce}>{[stylesStr]}</CS>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+      const tests = [
+        {
+          name: 'CS (1 array element)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`cs1-${key}`}>
+                <CS nonce={nonce}>{[stylesStr]}</CS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'CS (n array elements)',
-        fn: () => {
-          renderToString(
-            <CC>
-              <CS nonce={nonce}>{stylesArr}</CS>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'CS (n array elements)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`csn-${key}`}>
+                <CS nonce={nonce}>{stylesArr}</CS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'StyleArr',
-        fn: () => {
-          renderToString(
-            <CC>
-              <StyleArr nonce={nonce}>{stylesArr}</StyleArr>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'MemoCS (1 array element)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`memo-cs1-${key}`}>
+                <MemoCS nonce={nonce}>{[stylesStr]}</MemoCS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'StyleStr',
-        fn: () => {
-          renderToString(
-            <CC>
-              <StyleStr nonce={nonce}>{stylesStr}</StyleStr>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'MemoCS (n array elements)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`memo-csn-${key}`}>
+                <MemoCS nonce={nonce}>{stylesArr}</MemoCS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-    ]);
+        ...(env === 'server'
+          ? [
+              {
+                name: 'StyleBucketFromArray',
+                fn: () => {
+                  renderJSX((key) => (
+                    <CC key={`sbfa-${key}`}>
+                      <StyleBucketFromArray nonce={nonce}>{stylesArr}</StyleBucketFromArray>
+                      <div className={className} />
+                    </CC>
+                  ));
+                },
+              },
+              {
+                name: 'StyleBucketFromString',
+                fn: () => {
+                  renderJSX((key) => (
+                    <CC key={`sbfs-${key}`}>
+                      <StyleBucketFromString nonce={nonce}>{stylesStr}</StyleBucketFromString>
+                      <div className={className} />
+                    </CC>
+                  ));
+                },
+              },
+            ]
+          : []),
+      ];
 
-    expect(benchmark).toMatchObject({
-      fastest: expect.not.arrayContaining(['StyleStr', 'CS (n array elements)']),
-    });
-  }, 30000);
+      const benchmark = await runBenchmark('CS', tests);
+
+      const slowest = tests.map((t) => t.name).filter((n) => !fastest.includes(n));
+      for (const name of slowest) {
+        expect(benchmark.fastest).not.toContain(name);
+      }
+    }, 60000);
+  });
 });

package/src/runtime/__perf__/utils/cs.tsx

@@ -2,20 +2,17 @@ import React, { createContext, useContext } from 'react';
 
 const Cache = createContext<Record<string, true> | null>(null);
 
-export const useCache = (): Record<string, true> => {
-  return useContext(Cache) || {};
-};
-
-export type StyleStrProps = {
-  children: string;
+export type StyleBucketFromArrayProps = {
+  children: string[];
   nonce: string;
 };
 
-export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null {
-  const inserted = useCache();
+export function StyleBucketFromArray({
+  children: sheets,
+  nonce,
+}: StyleBucketFromArrayProps): JSX.Element | null {
+  const inserted = useContext(Cache) || {};
 
-  // The following code will not exist in the browser bundle.
-  const sheets = children.split('.');
   let toInsert = '';
 
   for (let i = 0; i < sheets.length; i++) {
@@ -33,15 +30,18 @@ export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null
   return <style nonce={nonce}>{toInsert}</style>;
 }
 
-export type StyleArrProps = {
-  children: string[];
+export type StyleBucketFromStringProps = {
+  children: string;
   nonce: string;
 };
 
-export function StyleArr({ children: sheets, nonce }: StyleArrProps): JSX.Element | null {
-  const inserted = useCache();
+export function StyleBucketFromString({
+  children,
+  nonce,
+}: StyleBucketFromStringProps): JSX.Element | null {
+  const inserted = useContext(Cache) || {};
 
-  // The following code will not exist in the browser bundle.
+  const sheets = children.split('.');
   let toInsert = '';
 
   for (let i = 0; i < sheets.length; i++) {