Make everything async

Author: lordofthelake

src/flexToSketchJSON.ts

@@ -9,14 +9,15 @@ function missingRendererError(type: string, annotations?: string) {
   );
 }
 
-const flexToSketchJSON = (
+const flexToSketchJSON = async (
   node: TreeNode | string,
-):
+): Promise<
   | FileFormat.SymbolMaster
   | FileFormat.Artboard
   | FileFormat.Group
   | FileFormat.ShapeGroup
-  | FileFormat.SymbolInstance => {
+  | FileFormat.SymbolInstance
+> => {
   if (typeof node === 'string') {
     throw missingRendererError('string');
   }
@@ -45,17 +46,19 @@ const flexToSketchJSON = (
   }
 
   const renderer = new Renderer();
-  const groupLayer = renderer.renderGroupLayer(node);
+  const groupLayer = await renderer.renderGroupLayer(node);
 
   if (groupLayer._class === 'symbolInstance') {
     return groupLayer;
   }
 
-  const backingLayers = renderer.renderBackingLayers(node);
+  const backingLayers = await renderer.renderBackingLayers(node);
 
   // stopping the walk down the tree if we have an svg
   const sublayers =
-    children && type !== 'sketch_svg' ? children.map(child => flexToSketchJSON(child)) : [];
+    children && type !== 'sketch_svg'
+      ? await Promise.all(children.map(child => flexToSketchJSON(child)))
+      : [];
 
   // Filter out anything null, undefined
   const layers = [...backingLayers, ...sublayers].filter(l => l);

src/jsonUtils/sketchImpl/makeImageDataFromUrl.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { fromSJSON } from './jsonUtils/sketchImpl/json-to-sketch';
 import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
+import { fromSJSON } from './jsonUtils/sketchImpl/json-to-sketch';
 import buildTree from './buildTree';
 import flexToSketchJSON from './flexToSketchJSON';
 import { resetLayer, resetDocument } from './resets';
@@ -13,7 +13,7 @@ import isNativePage from './utils/isNativePage';
 import isNativeSymbolsPage from './utils/isNativeSymbolsPage';
 import { getSketchVersion } from './utils/getSketchVersion';
 
-export const renderToJSON = (element: React.ReactElement): FileFormat.AnyLayer => {
+export const renderToJSON = async (element: React.ReactElement): Promise<FileFormat.AnyLayer> => {
   const tree = buildTree(element);
   return flexToSketchJSON(tree);
 };
@@ -36,14 +36,17 @@ const getDefaultPage = (): SketchLayer => {
   return isNativeSymbolsPage(currentPage) ? doc.addBlankPage() : currentPage;
 };
 
-const renderContents = (tree: TreeNode | string, container: SketchLayer): SketchLayer => {
-  const json = flexToSketchJSON(tree);
+const renderContents = async (
+  tree: TreeNode | string,
+  container: SketchLayer,
+): Promise<SketchLayer> => {
+  const json = await flexToSketchJSON(tree);
   const layer = fromSJSON(json, '119');
 
   return renderLayers([layer], container);
 };
 
-const renderPage = (tree: TreeNode, page: SketchPage): Array<SketchLayer> => {
+const renderPage = async (tree: TreeNode, page: SketchPage): Promise<Array<SketchLayer>> => {
   const children = tree.children || [];
 
   // assume if name is set on this nested page, the intent is to overwrite
@@ -52,10 +55,13 @@ const renderPage = (tree: TreeNode, page: SketchPage): Array<SketchLayer> => {
     page.setName(tree.props.name);
   }
 
-  return children.map(child => renderContents(child, page));
+  return Promise.all(children.map(child => renderContents(child, page)));
 };
 
-const renderDocument = (tree: TreeNode, documentData: SketchDocumentData): Array<SketchLayer> => {
+const renderDocument = async (
+  tree: TreeNode,
+  documentData: SketchDocumentData,
+): Promise<Array<SketchLayer>> => {
   if (!isNativeDocument(documentData)) {
     throw new Error('Cannot render a Document into a child of Document');
   }
@@ -74,7 +80,10 @@ const renderDocument = (tree: TreeNode, documentData: SketchDocumentData): Array
   });
 };
 
-const renderTree = (tree: TreeNode, _container?: SketchLayer): SketchLayer | Array<SketchLayer> => {
+const renderTree = async (
+  tree: TreeNode,
+  _container?: SketchLayer,
+): Promise<SketchLayer | Array<SketchLayer>> => {
   if (isNativeDocument(_container) && tree.type !== 'sketch_document') {
     throw new Error('You need to render a Document into Document');
   }
@@ -98,10 +107,10 @@ const renderTree = (tree: TreeNode, _container?: SketchLayer): SketchLayer | Arr
     : renderContents(tree, container);
 };
 
-export const render = (
+export const render = async (
   element: React.ReactElement,
   container?: SketchLayer | WrappedSketchLayer,
-): SketchLayer | Array<SketchLayer> => {
+): Promise<SketchLayer | Array<SketchLayer>> => {
   if (getSketchVersion() === 'NodeJS') {
     return renderToJSON(element);
   }
@@ -124,7 +133,8 @@ export const render = (
 
     injectSymbols(getDocumentDataFromContainer(nativeContainer));
 
-    return renderTree(tree, nativeContainer);
+    const layer = await renderTree(tree, nativeContainer);
+    return layer;
   } catch (err) {
     // eslint-disable-next-line no-console
     console.error(err);

src/render.tsx

@@ -6,7 +6,7 @@ import { TreeNode } from '../types';
 import { Props } from '../components/Artboard';
 
 export default class ArtboardRenderer extends SketchRenderer {
-  renderGroupLayer({ layout, style, props }: TreeNode<Props>): FileFormat.Artboard {
+  async renderGroupLayer({ layout, style, props }: TreeNode<Props>): Promise<FileFormat.Artboard> {
     let color: FileFormat.Color;
     if (style.backgroundColor !== undefined) {
       color = makeColorFromCSS(style.backgroundColor);

src/renderers/ArtboardRenderer.ts

@@ -16,7 +16,7 @@ function extractURLFromSource(source?: string | { uri?: string }): string | unde
 }
 
 export default class ImageRenderer extends SketchRenderer {
-  renderBackingLayers({ layout, style, props }: TreeNode<Props>) {
+  async renderBackingLayers({ layout, style, props }: TreeNode<Props>) {
     let layers: FileFormat.ShapeGroup[] = [];
 
     const {
@@ -28,7 +28,7 @@ export default class ImageRenderer extends SketchRenderer {
 
     const url = extractURLFromSource(props.source);
 
-    const image = getImageDataFromURL(url);
+    const image = await getImageDataFromURL(url);
 
     const fillImage = makeJSONDataReference(image);
 

src/renderers/ImageRenderer.ts

@@ -11,16 +11,17 @@ export default class SketchRenderer {
     return 'Group';
   }
 
-  renderGroupLayer({
+  async renderGroupLayer({
     layout,
     style,
     props,
-  }: TreeNode):
+  }: TreeNode): Promise<
     | FileFormat.SymbolMaster
     | FileFormat.Artboard
     | FileFormat.Group
     | FileFormat.ShapeGroup
-    | FileFormat.SymbolInstance {
+    | FileFormat.SymbolInstance
+  > {
     // Default SketchRenderer just renders an empty group
 
     const transform = processTransform(layout, style);
@@ -42,23 +43,25 @@ export default class SketchRenderer {
     };
   }
 
-  renderBackingLayers(
+  async renderBackingLayers(
     _node: TreeNode,
-  ): (
-    | FileFormat.ShapePath
-    | FileFormat.Rectangle
-    | FileFormat.SymbolMaster
-    | FileFormat.Group
-    | FileFormat.Polygon
-    | FileFormat.Star
-    | FileFormat.Triangle
-    | FileFormat.ShapeGroup
-    | FileFormat.Text
-    | FileFormat.SymbolInstance
-    | FileFormat.Slice
-    | FileFormat.Hotspot
-    | FileFormat.Bitmap
-  )[] {
+  ): Promise<
+    (
+      | FileFormat.ShapePath
+      | FileFormat.Rectangle
+      | FileFormat.SymbolMaster
+      | FileFormat.Group
+      | FileFormat.Polygon
+      | FileFormat.Star
+      | FileFormat.Triangle
+      | FileFormat.ShapeGroup
+      | FileFormat.Text
+      | FileFormat.SymbolInstance
+      | FileFormat.Slice
+      | FileFormat.Hotspot
+      | FileFormat.Bitmap
+    )[]
+  > {
     return [];
   }
 }

src/renderers/SketchRenderer.ts

@@ -65,8 +65,8 @@ export default class SvgRenderer extends ViewRenderer {
     return props.name || 'Svg';
   }
 
-  renderBackingLayers(node: TreeNode<Props>) {
-    const layers = super.renderBackingLayers(node);
+  async renderBackingLayers(node: TreeNode<Props>) {
+    const layers = await super.renderBackingLayers(node);
 
     const { layout, props, children } = node;
 

src/renderers/SvgRenderer.ts

@@ -98,7 +98,7 @@ const extractOverrides = (layers: FileFormat.AnyLayer[] = [], path?: string): Ov
 };
 
 export default class SymbolInstanceRenderer extends SketchRenderer {
-  renderGroupLayer({ layout, props }: TreeNode<SymbolInstanceProps & { symbolID: string }>) {
+  async renderGroupLayer({ layout, props }: TreeNode<SymbolInstanceProps & { symbolID: string }>) {
     const masterTree = getSymbolMasterById(props.symbolID);
 
     const symbolInstance = makeSymbolInstance(
@@ -114,8 +114,8 @@ export default class SymbolInstanceRenderer extends SketchRenderer {
 
     const overridableLayers = extractOverrides(masterTree.layers);
 
-    const overrides = overridableLayers.reduce(function inject(
-      memo: FileFormat.OverrideValue[],
+    const overrides = await overridableLayers.reduce(async function inject(
+      memo: Promise<FileFormat.OverrideValue[]>,
       reference: Override,
     ) {
       if (reference.type === 'symbolID') {
@@ -141,7 +141,9 @@ export default class SymbolInstanceRenderer extends SketchRenderer {
             );
           }
 
-          memo.push(makeOverride(reference.path, reference.type, replacementMaster.symbolID));
+          (await memo).push(
+            makeOverride(reference.path, reference.type, replacementMaster.symbolID),
+          );
 
           extractOverrides(replacementMaster.layers, newPath).reduce(inject, memo);
 
@@ -165,7 +167,7 @@ export default class SymbolInstanceRenderer extends SketchRenderer {
             `The override value of a Text must be a string.\n\nIn Symbol Instance: "${props.name}"\nFor Override: "${reference.name}"`,
           );
         }
-        memo.push(makeOverride(reference.path, reference.type, overrideValue));
+        (await memo).push(makeOverride(reference.path, reference.type, overrideValue));
       }
 
       if (reference.type === 'image') {
@@ -174,18 +176,18 @@ export default class SymbolInstanceRenderer extends SketchRenderer {
             `The override value of an Image must be a url.\n\nIn Symbol Instance: "${props.name}"\nFor Override: "${reference.name}"`,
           );
         }
-        memo.push(
+        (await memo).push(
           makeOverride(
             reference.path,
             reference.type,
-            makeJSONDataReference(getImageDataFromURL(overrideValue)),
+            makeJSONDataReference(await getImageDataFromURL(overrideValue)),
           ),
         );
       }
 
       return memo;
     },
-    []);
+    Promise.resolve([]));
 
     symbolInstance.overrideValues = overrides;
 

src/renderers/SymbolInstanceRenderer.ts

@@ -4,7 +4,7 @@ import { TreeNode } from '../types';
 import { SymbolMasterProps } from '../symbol';
 
 export default class SymbolMasterRenderer extends SketchRenderer {
-  renderGroupLayer({ layout, props }: TreeNode<SymbolMasterProps & { symbolID: string }>) {
+  async renderGroupLayer({ layout, props }: TreeNode<SymbolMasterProps & { symbolID: string }>) {
     return makeSymbolMaster(
       makeRect(layout.left, layout.top, layout.width, layout.height),
       props.symbolID,

src/renderers/SymbolMasterRenderer.ts

@@ -10,7 +10,7 @@ export default class TextRenderer extends SketchRenderer {
     return props.name || 'Text';
   }
 
-  renderBackingLayers({ layout, style, textStyle, props }: TreeNode<Props>) {
+  async renderBackingLayers({ layout, style, textStyle, props }: TreeNode<Props>) {
     let { name } = props;
 
     // Append all text nodes's content into one string