Pool Emotion objects (#63)

* Pool emotion objects

* Update entry

* Update entry

Author: compulim

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
-- Support `nonce` prop for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), in PR [#62](https://github.com/compulim/react-scroll-to-bottom/pull/62)
+- Support `nonce` prop for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), in PR [#62](https://github.com/compulim/react-scroll-to-bottom/pull/62) and PR [#63](https://github.com/compulim/react-scroll-to-bottom/pull/63)
 
 ### Changed
 

packages/component/package-lock.json

@@ -55,7 +55,9 @@
   "dependencies": {
     "classnames": "2.2.6",
     "create-emotion": "10.0.27",
-    "prop-types": "15.7.2"
+    "math-random": "2.0.1",
+    "prop-types": "15.7.2",
+    "simple-update-in": "2.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.6"

packages/component/package.json

@@ -15,7 +15,7 @@ const BasicScrollToBottomCore = ({ children, className, followButtonClassName, s
   const rootCSS = useStyleToClassName()(ROOT_STYLE);
 
   return (
-    <div className={classNames(rootCSS + '', (className || '') + '')}>
+    <div className={classNames(rootCSS, (className || '') + '')}>
       <Panel className={(scrollViewClassName || '') + ''}>{children}</Panel>
       <AutoHideFollowButton className={(followButtonClassName || '') + ''} />
     </div>
@@ -46,10 +46,6 @@ const BasicScrollToBottom = ({
   nonce,
   scrollViewClassName
 }) => {
-  const styleToClassName = useStyleToClassName();
-
-  const rootCSS = styleToClassName(ROOT_STYLE);
-
   return (
     <Composer checkInterval={checkInterval} debounce={debounce} mode={mode} nonce={nonce}>
       <BasicScrollToBottomCore

packages/component/src/BasicScrollToBottom.js

@@ -34,7 +34,7 @@ const AutoHideFollowButton = ({ children, className }) => {
 
   return (
     !sticky && (
-      <button className={classNames(rootCSS + '', (className || '') + '')} onClick={scrollToEnd} type="button">
+      <button className={classNames(rootCSS, (className || '') + '')} onClick={scrollToEnd} type="button">
         {children}
       </button>
     )

packages/component/src/ScrollToBottom/AutoHideFollowButton.js

@@ -2,6 +2,7 @@ import createEmotion from 'create-emotion';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import createCSSKey from '../createCSSKey';
 import EventSpy from '../EventSpy';
 import FunctionContext from './FunctionContext';
 import InternalContext from './InternalContext';
@@ -14,6 +15,10 @@ const MODE_TOP = 'top';
 const NEAR_END_THRESHOLD = 1;
 const SCROLL_DECISION_DURATION = 34; // 2 frames
 
+// We pool the emotion object by nonce.
+// This is to make sure we don't generate too many unneeded <style> tags.
+const emotionPool = {};
+
 function setImmediateInterval(fn, ms) {
   fn();
 
@@ -259,9 +264,10 @@ const Composer = ({ checkInterval, children, debounce, mode, nonce }) => {
   );
 
   const styleToClassName = useMemo(() => {
-    const emotion = createEmotion({ key: 'rstb', nonce });
+    const emotion =
+      emotionPool[nonce] || (emotionPool[nonce] = createEmotion({ key: `rstb-${createCSSKey()}`, nonce }));
 
-    return emotion.css.bind(emotion);
+    return style => emotion.css(style) + '';
   }, [nonce]);
 
   const internalContext = useMemo(

packages/component/src/ScrollToBottom/Composer.js

@@ -16,7 +16,7 @@ const Panel = ({ children, className }) => {
   const rootCSS = useStyleToClassName()(ROOT_STYLE);
 
   return (
-    <div className={classNames(rootCSS + '', (className || '') + '')} ref={setTarget}>
+    <div className={classNames(rootCSS, (className || '') + '')} ref={setTarget}>
       {children}
     </div>
   );

packages/component/src/ScrollToBottom/Panel.js

@@ -0,0 +1,8 @@
+import random from 'math-random';
+
+export default function useCSSKey() {
+  return random()
+    .toString(26)
+    .substr(2, 5)
+    .replace(/\d/g, value => String.fromCharCode(value.charCodeAt(0) + 65));
+}