Support async transformCode, catch transformCode errors

Author: srmagura

package.json

@@ -93,6 +93,8 @@
     "react live"
   ],
   "jest": {
+    "testEnvironment": "jsdom",
+    "resetMocks": true,
     "rootDir": "./src",
     "setupFiles": [
       "../jest.setup.js"

src/components/Live/LiveProvider.js

@@ -20,38 +20,55 @@ function LiveProvider({
     element: undefined
   });
 
-  function transpile(newCode) {
-    // Transpilation arguments
-    const input = {
-      code: transformCode ? transformCode(newCode) : newCode,
-      scope,
-      transpileOptions
+  function transpileAsync(newCode) {
+    const errorCallback = error => {
+      setState({ error: error.toString(), element: undefined });
     };
 
-    const errorCallback = error =>
-      setState({ error: error.toString(), element: undefined });
+    // - transformCode may be synchronous or asynchronous.
+    // - transformCode may throw an exception or return a rejected promise, e.g.
+    //   if newCode is invalid and cannot be transformed.
+    // - Not using async-await to since it requires targeting ES 2017 or
+    //   importing regenerator-runtime... in the next major version of
+    //   react-live, should target ES 2017+
+    try {
+      const transformResult = transformCode ? transformCode(newCode) : newCode;
 
-    const renderElement = element => setState({ error: undefined, element });
+      return Promise.resolve(transformResult)
+        .then(transformedCode => {
+          const renderElement = element =>
+            setState({ error: undefined, element });
 
-    try {
-      if (noInline) {
-        setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation
-        renderElementAsync(input, renderElement, errorCallback);
-      } else {
-        renderElement(generateElement(input, errorCallback));
-      }
-    } catch (error) {
-      errorCallback(error);
+          // Transpilation arguments
+          const input = {
+            code: transformedCode,
+            scope,
+            transpileOptions
+          };
+
+          if (noInline) {
+            setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation
+            renderElementAsync(input, renderElement, errorCallback);
+          } else {
+            renderElement(generateElement(input, errorCallback));
+          }
+        })
+        .catch(errorCallback);
+    } catch (e) {
+      errorCallback(e);
+      return Promise.resolve();
     }
   }
 
+  const onError = error => setState({ error: error.toString() });
+
   useEffect(() => {
-    transpile(code);
+    transpileAsync(code).catch(onError);
   }, [code, scope, noInline, transformCode, transpileOptions]);
 
-  const onChange = newCode => transpile(newCode);
-
-  const onError = error => setState({ error: error.toString() });
+  const onChange = newCode => {
+    transpileAsync(newCode).catch(onError);
+  };
 
   return (
     <LiveContext.Provider
@@ -78,7 +95,7 @@ LiveProvider.propTypes = {
   noInline: PropTypes.bool,
   scope: PropTypes.object,
   theme: PropTypes.object,
-  transformCode: PropTypes.node,
+  transformCode: PropTypes.func,
   transpileOptions: PropTypes.object
 };
 

src/components/Live/LiveProvider.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { renderElementAsync } from '../../utils/transpile';
+import { mount } from 'enzyme';
+import LiveProvider from './LiveProvider';
+import { useContext } from 'react';
+import LiveContext from './LiveContext';
+
+jest.mock('../../utils/transpile');
+
+function waitAsync() {
+  return act(() => new Promise(resolve => setTimeout(resolve, 0)));
+}
+
+it('applies a synchronous transformCode function', () => {
+  function transformCode(code) {
+    return `render(<div>${code}</div>)`;
+  }
+
+  mount(<LiveProvider code="hello" noInline transformCode={transformCode} />);
+
+  return waitAsync().then(() => {
+    expect(renderElementAsync).toHaveBeenCalledTimes(1);
+    expect(renderElementAsync.mock.calls[0][0].code).toBe(
+      'render(<div>hello</div>)'
+    );
+  });
+});
+
+it('applies an asynchronous transformCode function', () => {
+  function transformCode(code) {
+    return Promise.resolve(`render(<div>${code}</div>)`);
+  }
+
+  mount(<LiveProvider code="hello" noInline transformCode={transformCode} />);
+
+  return waitAsync().then(() => {
+    expect(renderElementAsync).toHaveBeenCalledTimes(1);
+    expect(renderElementAsync.mock.calls[0][0].code).toBe(
+      'render(<div>hello</div>)'
+    );
+  });
+});
+
+function ErrorRenderer() {
+  const { error } = useContext(LiveContext);
+  return <div data-testid="handledError">{error?.message}</div>;
+}
+
+it('catches errors from a synchronous transformCode function', () => {
+  function transformCode() {
+    throw new Error('testError');
+  }
+
+  const wrapper = mount(
+    <LiveProvider code="hello" noInline transformCode={transformCode}>
+      <ErrorRenderer />
+    </LiveProvider>
+  );
+
+  return waitAsync().then(() => {
+    expect(renderElementAsync).not.toHaveBeenCalled();
+
+    const handledErrorWrapper = wrapper.find('[data-testid="handledError"]');
+    expect(handledErrorWrapper.text()).toBe('testError');
+  });
+});
+
+it('catches errors from an asynchronous transformCode function', () => {
+  function transformCode() {
+    return Promise.reject(new Error('testError'));
+  }
+
+  const wrapper = mount(
+    <LiveProvider code="hello" noInline transformCode={transformCode}>
+      <ErrorRenderer />
+    </LiveProvider>
+  );
+
+  return waitAsync().then(() => {
+    expect(renderElementAsync).not.toHaveBeenCalled();
+
+    const handledErrorWrapper = wrapper.find('[data-testid="handledError"]');
+    expect(handledErrorWrapper.text()).toBe('testError');
+  });
+});

typings/react-live.d.ts

@@ -16,7 +16,7 @@ export type LiveProviderProps = Omit<DivProps, 'scope'> & {
   scope?: { [key: string]: any };
   code?: string;
   noInline?: boolean;
-  transformCode?: (code: string) => string;
+  transformCode?: (code: string) => (string | Promise<string>);
   transpileOptions?: TranspileOptions;
   language?: Language;
   disabled?: boolean;