Async rendering API and "pure" image fetching

__tests__/jest/components/nodeImpl/Svg.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable global-require */
 import * as React from 'react';
 
-import ReactSketch from '../../../../src';
+import * as ReactSketch from '../../../../src';
 import Svg from '../../../../src/components/Svg';
 
 jest.mock('../../../../src/jsonUtils/models', () => ({

src/Platform.ts

@@ -1,6 +1,8 @@
+import getSketchVersion from './utils/getSketchVersion';
+
 const Platform = {
   OS: 'sketch',
-  Version: 1,
+  Version: getSketchVersion(),
   select: (obj: { sketch: any }) => obj.sketch,
 };
 

src/buildTree.ts

@@ -1,7 +1,7 @@
 import * as TestRenderer from 'react-test-renderer';
 import yoga from 'yoga-layout-prebuilt';
 import Context from './utils/Context';
-import { TreeNode, TextNode } from './types';
+import { TreeNode, TextNode, PlatformBridge } from './types';
 import hasAnyDefined from './utils/hasAnyDefined';
 import pick from './utils/pick';
 import computeYogaTree from './jsonUtils/computeYogaTree';
@@ -87,7 +87,7 @@ export const reactTreeToFlexTree = (
   };
 };
 
-const buildTree = (element: React.ReactElement): TreeNode => {
+const buildTree = (element: React.ReactElement, bridge: PlatformBridge): TreeNode => {
   let renderer: TestRenderer.ReactTestRenderer;
 
   if (typeof TestRenderer.act !== 'undefined') {
@@ -100,7 +100,7 @@ const buildTree = (element: React.ReactElement): TreeNode => {
   }
 
   const json: TreeNode = renderer.toJSON();
-  const yogaNode = computeYogaTree(json, new Context());
+  const yogaNode = computeYogaTree(json, new Context(), bridge);
   yogaNode.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR);
   const tree = reactTreeToFlexTree(json, yogaNode, new Context());
 

src/components/Artboard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { or } from 'airbnb-prop-types';
-import StyleSheet from '../stylesheet';
+import StyleSheet from '../StyleSheet';
 import ViewStylePropTypes from './ViewStylePropTypes';
 
 const ViewportPropTypes = {

src/components/Image.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { or } from 'airbnb-prop-types';
-import StyleSheet from '../stylesheet';
+import StyleSheet from '../StyleSheet';
 import ResizeModePropTypes from './ResizeModePropTypes';
 import ImageStylePropTypes from './ImageStylePropTypes';
 import { ViewPropTypes } from './View';

src/components/Page.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { or } from 'airbnb-prop-types';
-import StyleSheet from '../stylesheet';
+import StyleSheet from '../StyleSheet';
 import PageStylePropTypes from './PageStylePropTypes';
 
 export const PagePropTypes = {

src/components/Svg/Svg.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { ViewPropTypes } from '../View';
-import StyleSheet from '../../stylesheet';
+import StyleSheet from '../../StyleSheet';
 import Circle from './Circle';
 import ClipPath from './ClipPath';
 import Defs from './Defs';

src/components/Svg/TextPath.tsx

@@ -12,9 +12,10 @@ export default class TextPath extends React.Component<Props> {
   render() {
     if (!this.props.href || !this.props.href.match(idExpReg)) {
       // eslint-disable-next-line no-console
-      console.warn(
-        `Invalid \`href\` prop for \`TextPath\` element, expected a href like \`"#id"\`, but got: "${this.props.href}"`,
-      );
+      if (process.env.NODE_ENV !== 'production')
+        console.warn(
+          `Invalid \`href\` prop for \`TextPath\` element, expected a href like \`"#id"\`, but got: "${this.props.href}"`,
+        );
     }
 
     const { children, ...rest } = this.props;

src/components/Svg/Use.tsx

@@ -22,10 +22,11 @@ export default class Use extends React.Component<Props> {
     const matched = href.match(idExpReg);
 
     if (!href || !matched) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `Invalid \`href\` prop for \`Use\` element, expected a href like \`"#id"\`, but got: "${href}"`,
-      );
+      if (process.env.NODE_ENV !== 'production')
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Invalid \`href\` prop for \`Use\` element, expected a href like \`"#id"\`, but got: "${href}"`,
+        );
     }
     const { children, ...rest } = this.props;
     return <svg_use {...rest}>{children}</svg_use>;

src/components/Text.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { or } from 'airbnb-prop-types';
-import StyleSheet from '../stylesheet';
+import StyleSheet from '../StyleSheet';
 import TextStylePropTypes from './TextStylePropTypes';
 import { ViewPropTypes } from './View';
 

src/components/View.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { or } from 'airbnb-prop-types';
-import StyleSheet from '../stylesheet';
+import StyleSheet from '../StyleSheet';
 import ViewStylePropTypes from './ViewStylePropTypes';
 import ResizingConstraintPropTypes from './ResizingConstraintPropTypes';
 import ShadowsPropTypes from './ShadowsPropTypes';

src/components/index.ts

@@ -0,0 +1,8 @@
+export { default as Document } from './Document';
+export { default as Page } from './Page';
+export { default as Artboard } from './Artboard';
+export { default as Image } from './Image';
+export { default as RedBox } from './RedBox';
+export { default as Svg } from './Svg';
+export { default as View } from './View';
+export { default as Text } from './Text';

src/flexToSketchJSON.ts

@@ -1,22 +1,24 @@
 import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
 import * as renderers from './renderers';
 import SketchRenderer from './renderers/SketchRenderer';
-import { TreeNode } from './types';
+import { TreeNode, PlatformBridge } from './types';
 
 function missingRendererError(type: string, annotations?: string) {
   return new Error(
     `Could not find renderer for type '${type}'.${annotations ? `\n${annotations}` : ''}`,
   );
 }
 
-const flexToSketchJSON = (
+const flexToSketchJSON = async (
   node: TreeNode | string,
-):
+  bridge: PlatformBridge,
+): Promise<
   | FileFormat.SymbolMaster
   | FileFormat.Artboard
   | FileFormat.Group
   | FileFormat.ShapeGroup
-  | FileFormat.SymbolInstance => {
+  | FileFormat.SymbolInstance
+> => {
   if (typeof node === 'string') {
     throw missingRendererError('string');
   }
@@ -44,18 +46,20 @@ const flexToSketchJSON = (
     throw missingRendererError(type);
   }
 
-  const renderer = new Renderer();
-  const groupLayer = renderer.renderGroupLayer(node);
+  const renderer = new Renderer(bridge);
+  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, bridge)))
+      : [];
 
   // Filter out anything null, undefined
   const layers = [...backingLayers, ...sublayers].filter(l => l);

src/index.common.ts

@@ -0,0 +1,4 @@
+export { default as Platform } from './Platform';
+export { default as StyleSheet } from './StyleSheet';
+export * from './components';
+export { getSymbolComponentByName, getSymbolMasterByName, injectSymbols } from './symbol';

src/index.node.ts

@@ -0,0 +1,45 @@
+import { default as _render } from './render';
+import { default as _renderToJSON } from './renderToJSON';
+import { makeSymbol as _makeSymbol, SymbolMasterProps } from './symbol';
+import {
+  SketchLayer,
+  WrappedSketchLayer,
+  PlatformBridge,
+  SketchDocumentData,
+  WrappedSketchDocument,
+  SketchDocument,
+} from './types';
+import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
+import { default as _TextStyles } from './sharedStyles/TextStyles';
+
+function getDefaultPlatformBridge() {
+  return require('./platformBridges/NodeMacOSBridge');
+}
+
+export async function render(
+  element: React.ReactElement,
+  container?: SketchLayer | WrappedSketchLayer,
+  platformBridge: PlatformBridge = getDefaultPlatformBridge(),
+): Promise<SketchLayer | Array<SketchLayer>> {
+  return _render(element, container, platformBridge);
+}
+
+export async function renderToJSON(
+  element: React.ReactElement,
+  platformBridge: PlatformBridge = getDefaultPlatformBridge(),
+): Promise<FileFormat.AnyLayer> {
+  return _renderToJSON(element, platformBridge);
+}
+
+export async function makeSymbol(
+  Component: React.ComponentType<any>,
+  symbolProps?: string | SymbolMasterProps,
+  document?: SketchDocumentData | SketchDocument | WrappedSketchDocument,
+  bridge: PlatformBridge = getDefaultPlatformBridge(),
+) {
+  return _makeSymbol(Component, symbolProps, document, bridge);
+}
+
+export const TextStyles = _TextStyles(getDefaultPlatformBridge);
+
+export * from './index.common';

src/index.sketch.ts

@@ -0,0 +1,42 @@
+import { default as _render } from './render';
+import { default as _renderToJSON } from './renderToJSON';
+import { makeSymbol as _makeSymbol, SymbolMasterProps } from './symbol';
+import {
+  SketchLayer,
+  WrappedSketchLayer,
+  PlatformBridge,
+  SketchDocumentData,
+  WrappedSketchDocument,
+  SketchDocument,
+} from './types';
+import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
+import { default as _TextStyles } from './sharedStyles/TextStyles';
+import SketchBridge from './platformBridges/SketchBridge';
+
+export async function render(
+  element: React.ReactElement,
+  container?: SketchLayer | WrappedSketchLayer,
+  platformBridge: PlatformBridge = SketchBridge,
+): Promise<SketchLayer | Array<SketchLayer>> {
+  return _render(element, container, platformBridge);
+}
+
+export async function renderToJSON(
+  element: React.ReactElement,
+  platformBridge: PlatformBridge = SketchBridge,
+): Promise<FileFormat.AnyLayer> {
+  return _renderToJSON(element, platformBridge);
+}
+
+export async function makeSymbol(
+  Component: React.ComponentType<any>,
+  symbolProps?: string | SymbolMasterProps,
+  document?: SketchDocumentData | SketchDocument | WrappedSketchDocument,
+  bridge: PlatformBridge = SketchBridge,
+) {
+  return _makeSymbol(Component, symbolProps, document, bridge);
+}
+
+export const TextStyles = _TextStyles(() => SketchBridge);
+
+export * from './index.common';

src/jsonUtils/computeYogaNode.ts

@@ -1,7 +1,7 @@
 import yoga from 'yoga-layout-prebuilt';
-import { TreeNode, ViewStyle } from '../types';
+import { TreeNode, ViewStyle, PlatformBridge } from '../types';
 import Context from '../utils/Context';
-import createStringMeasurer from '../utils/createStringMeasurer';
+import measureString from '../utils/measureString';
 import hasAnyDefined from '../utils/hasAnyDefined';
 import pick from '../utils/pick';
 import computeTextTree from './computeTextTree';
@@ -30,6 +30,7 @@ export const getStyles = (node: TreeNode | string): ViewStyle => {
 const computeYogaNode = (
   node: TreeNode | string,
   context: Context,
+  bridge: PlatformBridge,
 ): { node: yoga.YogaNode; stop?: boolean } => {
   const yogaNode = yoga.Node.create();
   const hasStyle = typeof node !== 'string' && node.props && node.props.style;
@@ -341,7 +342,7 @@ const computeYogaNode = (
 
     // Handle Text Children
     const textNodes = computeTextTree(node, context);
-    yogaNode.setMeasureFunc(createStringMeasurer(textNodes));
+    yogaNode.setMeasureFunc((width: number = 0) => measureString(bridge, textNodes, width));
 
     return { node: yogaNode, stop: true };
   }