fix: memoize emotion and fix error boundry

packages/blockTools/demo/index.js

@@ -17,25 +17,38 @@
 import React from 'react';
 import { render } from 'react-dom';
 
-import { makeCss, ErrorBoundary } from '../src';
+import { makeCssClass, ErrorBoundary } from '../src';
 
 // eslint-disable-next-line no-undef
 const documentCtx = document;
 
 const ErrorComp = () => <div>{this.unknown}</div>;
+const FallbackComp = ({ name, error }) => (
+  <div>
+    {name} {error.message}
+  </div>
+);
+
 const Demo = () => (
   <div id="page">
     <h4>ErrorBoundary with renderError=true :</h4>
-    <ErrorBoundary renderError={true}>
+    <ErrorBoundary renderError>
       <ErrorComp />
     </ErrorBoundary>
     <h4>ErrorBoundary with renderError=false :</h4>
     <ErrorBoundary>
       <ErrorComp />
     </ErrorBoundary>
+    <h4>ErrorBoundary with fallback :</h4>
+    <ErrorBoundary fallback={(error) => <FallbackComp name="Fallback test" error={error} />}>
+      <ErrorComp />
+    </ErrorBoundary>
+
     <div id="emotion" />
-    <h4>{"makeCss({ color: 'red' })"} :</h4>
-    <div className={makeCss({ color: 'red' })}>Red text</div>
+    <h4>{"makeCssClass({ color: 'red' })"} :</h4>
+    <div className={makeCssClass({ color: 'red' })}>Red text</div>
+
+    <h4>Loading component :</h4>
   </div>
 );
 

packages/blockTools/src/ErrorBoundary.js

@@ -34,12 +34,14 @@ class ErrorBoundary extends Component {
     const { hasError, error } = this.state;
     if (hasError) {
       if (fallback) {
-        return fallback;
+        return fallback(error);
       }
       if (renderError) {
-        <div>
-          {'Error: ' + (message || error.message) + (description && '<br />' + description)}
-        </div>;
+        return (
+          <div>
+            {`Error:  ${(message || error.message) + (description && `<br /> ${description}`)}`}
+          </div>
+        );
       }
       // Throw to console but fail silently to user?
       return '';

packages/blockTools/src/getEmotionCss.js

@@ -18,15 +18,18 @@ import createEmotion from 'create-emotion';
 
 const windowContext = window || {};
 
-const initEmotion = () => {
-  const { css, injectGlobal } = createEmotion({
-    container: document.getElementById('emotion'),
-  });
-  windowContext.emotion = { css, injectGlobal };
-};
-
 const getEmotionCss = () => {
-  return windowContext.emotion.css;
+  try {
+    if (!windowContext.emotion) {
+      const { css } = createEmotion({
+        container: document.getElementById('emotion'),
+      });
+      windowContext.emotion = { css };
+    }
+    return windowContext.emotion.css;
+  } catch (error) {
+    throw new Error('Emotion failed to initilize: ' + error.message);
+  }
 };
 
-export { initEmotion, getEmotionCss };
+export default getEmotionCss;

packages/blockTools/src/index.js

@@ -15,7 +15,7 @@
 */
 
 import connectBlock from './connectBlock';
-import { getEmotionCss, initEmotion } from './emotion';
+import getEmotionCss from './getEmotionCss';
 import ErrorBoundary from './ErrorBoundary';
 import makeCssClass from './makeCssClass.js';
 import mediaToCssObject from './mediaToCssObject.js';
@@ -25,7 +25,6 @@ export {
   connectBlock,
   ErrorBoundary,
   getEmotionCss,
-  initEmotion,
   makeCssClass,
   mediaToCssObject,
   useRunAfterUpdate,

packages/blockTools/src/makeCssClass.js

@@ -16,7 +16,7 @@
 
 import { mergeObjects } from '@lowdefy/helpers';
 import mediaToCssObject from './mediaToCssObject';
-import { getEmotionCss } from './emotion';
+import getEmotionCss from './getEmotionCss';
 
 const makeCssClass = (styles, options = {}) => {
   const css = getEmotionCss();

packages/blockTools/tests/makeCssClass.test.js

@@ -15,7 +15,6 @@
 */
 
 import makeCssClass from '../src/makeCssClass';
-import { initEmotion } from '../src/emotion';
 
 const mockCss = jest.fn();
 const mockCssImp = (obj) => ({
@@ -29,7 +28,6 @@ jest.mock('create-emotion', () => () => ({
 beforeEach(() => {
   mockCss.mockReset();
   mockCss.mockImplementation(mockCssImp);
-  initEmotion();
 });
 
 test('object with no media', () => {

packages/renderer/src/Renderer.js

@@ -24,8 +24,6 @@ import get from '@lowdefy/get';
 import useGqlClient from './utils/graphql/useGqlClient';
 import PageContext from './PageContext';
 
-import { initEmotion } from '@lowdefy/block-tools';
-
 // eslint-disable-next-line no-undef
 const windowContext = window;
 // eslint-disable-next-line no-undef
@@ -35,8 +33,6 @@ const Components = {};
 const contexts = {};
 const input = {};
 
-initEmotion();
-
 const GET_ROOT = gql`
   fragment MenuLinkFragment on MenuLink {
     id