chore: remove commonjs bundle split points (#417)

* chore: removes dynamic requires

* chore: updates bundlesize

* chore: remove console log

* chore: updates comments

package.json

@@ -96,7 +96,7 @@
     },
     {
       "path": "./packages/react/dist/browser/runtime.js",
-      "limit": "489B",
+      "limit": "445B",
       "import": "{ CC, CS }",
       "ignore": [
         "react"

packages/react/src/__tests__/server-side-hydrate.test.tsx

@@ -1,31 +1,21 @@
 import React from 'react';
-import { renderToString } from 'react-dom/server';
-import ReactDOM from 'react-dom';
-import { styled } from '@compiled/react';
-import { isNodeEnvironment } from '@compiled/react/dist/runtime/is-node';
-import { useCache } from '@compiled/react/dist/runtime/provider';
+import { hydrate } from 'react-dom';
+import { CC, CS } from '../runtime';
 
-jest.mock('@compiled/react/dist/runtime/is-node');
+jest.mock('../runtime/is-node', () => ({
+  isNodeEnvironment: () => false,
+}));
 
 describe('server side hydrate', () => {
   beforeEach(() => {
     jest.spyOn(global.console, 'error');
-    flushEnvironment('node');
   });
 
-  const flushEnvironment = (env: 'node' | 'browser') => {
-    // This isn't a real hook.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const cache = useCache();
-    for (const key in cache) {
-      // Flush the cache out - unfortunately it persisted between tests.
-      delete cache[key];
-    }
-    (isNodeEnvironment as jest.Mock).mockReturnValue(env === 'node');
+  const flushRuntimeModule = () => {
     jest.resetModules();
     // We need to force this module to re-instantiate because on the client
     // when it does it will move all found SSRd style elements to the head.
-    require('@compiled/react/runtime');
+    require('../runtime');
   };
 
   const appendHTML = (markup: string) => {
@@ -36,16 +26,20 @@ describe('server side hydrate', () => {
   };
 
   it('should not log any warnings when hydrating HTML', () => {
-    const StyledDiv = styled.div`
-      font-size: 12px;
-      color: blue;
-      border: 1px solid black;
-    `;
+    // It's notoriously hard to do both server and client rendering in this test.
+    // Instead of doing the server flow we hardcode the result instead.
+    const elem = appendHTML(
+      `<style data-cmpld="true">.foo{color:blue}</style><div class="foo">hello world</div>`
+    );
 
-    const element = <StyledDiv>hello world</StyledDiv>;
-    const app = appendHTML(renderToString(element));
-    flushEnvironment('browser');
-    ReactDOM.hydrate(element, app);
+    flushRuntimeModule();
+    hydrate(
+      <CC>
+        <CS>{['.foo { color: blue; }', '.foo { color: blue; }']}</CS>
+        <div className="foo">hello world</div>
+      </CC>,
+      elem
+    );
 
     expect(console.error).not.toHaveBeenCalled();
   });

packages/react/src/runtime/index.tsx

@@ -1,3 +1,3 @@
 export { default as CS } from './style';
-export { default as CC } from './provider';
+export { default as CC } from './style-cache';
 export { default as ax } from './ax';

packages/react/src/runtime/style-cache.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { isNodeEnvironment } from './is-node';
+import { ProviderComponent, UseCacheHook } from './types';
+
+/**
+ * Cache to hold already used styles.
+ * React Context on the server - singleton object on the client.
+ */
+const Cache: any = isNodeEnvironment() ? createContext<Record<string, true> | null>(null) : {};
+
+if (!isNodeEnvironment()) {
+  /**
+   * Iterates through all found style elements generated when server side rendering.
+   *
+   * @param cb
+   */
+  const ssrStyles = document.querySelectorAll<HTMLStyleElement>('style[data-cmpld]');
+  for (let i = 0; i < ssrStyles.length; i++) {
+    // Move all found server-side rendered style elements to the head before React hydration happens.
+    document.head.appendChild(ssrStyles[i]);
+  }
+}
+
+/**
+ * Hook using the cache created on the server or client.
+ */
+export const useCache: UseCacheHook = () => {
+  if (isNodeEnvironment()) {
+    // On the server we use React Context to we don't leak the cache between SSR calls.
+    // During runtime this hook isn't conditionally called - it is at build time that the flow gets decided.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useContext(Cache) || {};
+  }
+
+  // On the client we use the object singleton.
+  return Cache;
+};
+
+/**
+ * On the server this ensures the minimal amount of styles will be rendered
+ * safely using React Context.
+ *
+ * On the browser this turns into a fragment with no React Context.
+ */
+const StyleCacheProvider: ProviderComponent = (props) => {
+  if (isNodeEnvironment()) {
+    // This code path isn't conditionally called at build time - safe to ignore.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const inserted = useCache();
+    return <Cache.Provider value={inserted}>{props.children}</Cache.Provider>;
+  }
+
+  return props.children as JSX.Element;
+};
+
+export default StyleCacheProvider;

packages/react/src/runtime/style.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
 import { analyzeCssInDev } from './dev-warnings';
 import { StyleSheetOpts, Bucket } from './types';
-import { useCache } from './provider';
+import { useCache } from './style-cache';
 import { isNodeEnvironment } from './is-node';
 
 interface StyleProps extends StyleSheetOpts {

packages/react/src/runtime/types.tsx

@@ -29,3 +29,7 @@ export type Bucket =
   | 'a'
   // at-rules
   | 'm';
+
+export type UseCacheHook = () => Record<string, true>;
+
+export type ProviderComponent = (props: { children: JSX.Element[] | JSX.Element }) => JSX.Element;