airbnb · lordofthelake · Jan 20, 2020 · Jan 20, 2020 · Jan 20, 2020 · Jan 20, 2020
diff --git a/.travis.yml b/.travis.yml
@@ -16,6 +16,7 @@ node_js:
 before_script:
   - npm prune
 script:
+  - npm run build # smoke-test that everything transpiles correctly
   - npm run test:ci
   # - npm run test:e2e -- --app=/Applications/Sketch.app
 # after_script:

diff --git a/__tests__/jest/components/nodeImpl/Svg.tsx b/__tests__/jest/components/nodeImpl/Svg.tsx
@@ -1,6 +1,6 @@
 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', () => ({
@@ -9,7 +9,7 @@ jest.mock('../../../../src/jsonUtils/models', () => ({
 }));
 
 describe('node <Svg />', () => {
-  it('generates the json for an svg', () => {
+  it('generates the json for an svg', async () => {
     class SVGElement extends React.Component {
       render() {
         return (
@@ -25,6 +25,6 @@ describe('node <Svg />', () => {
       }
     }
 
-    expect(ReactSketch.renderToJSON(<SVGElement />)).toMatchSnapshot();
+    expect(await ReactSketch.renderToJSON(<SVGElement />)).toMatchSnapshot();
   });
 });
diff --git a/__tests__/jest/index.ts b/__tests__/jest/index.ts
@@ -1,8 +1,4 @@
-import ReactSketch from '../../src';
-jest.mock('../../src/jsonUtils/sketchImpl/createStringMeasurer');
-jest.mock('../../src/jsonUtils/sketchImpl/findFontName');
-jest.mock('../../src/jsonUtils/sketchImpl/makeImageDataFromUrl');
-jest.mock('../../src/jsonUtils/sketchImpl/makeSvgLayer');
+import * as ReactSketch from '../../src';
 
 describe('public API', () => {
   it('exports render', () => {

diff --git a/__tests__/jest/jsonUtils/computeYogaNode.ts b/__tests__/jest/jsonUtils/computeYogaNode.ts
@@ -1,6 +1,7 @@
 import yoga from 'yoga-layout-prebuilt';
 import computeYogaNode from '../../../src/jsonUtils/computeYogaNode';
 import Context from '../../../src/utils/Context';
+import NodeMacOSBridge from '../../../src/platformBridges/NodeMacOSBridge';
 
 const widthAndHeightStylesStub = {
   width: 10,
@@ -33,7 +34,7 @@ const createYogaNodes = (
   styles.forEach(style => {
     const treeNode = createTreeNode(style);
     const ctx = new Context();
-    const { node } = computeYogaNode(treeNode, ctx);
+    const { node } = computeYogaNode(treeNode, ctx, NodeMacOSBridge);
     node.calculateLayout(
       containerWidth || undefined,
       containerHeight || undefined,

diff --git a/__tests__/jest/jsonUtils/computeYogaTree.ts b/__tests__/jest/jsonUtils/computeYogaTree.ts
@@ -1,6 +1,7 @@
 import yoga from 'yoga-layout-prebuilt';
 import computeYogaTree from '../../../src/jsonUtils/computeYogaTree';
 import Context from '../../../src/utils/Context';
+import NodeMacOSBridge from '../../../src/platformBridges/NodeMacOSBridge';
 
 const treeRootStub = {
   type: 'artboard',
@@ -36,11 +37,11 @@ const treeRootStub = {
   ],
 };
 
-computeYogaTree(treeRootStub, new Context());
+computeYogaTree(treeRootStub, new Context(), NodeMacOSBridge);
 
 describe('Compute Yoga Tree', () => {
   it('correctly create yoga nodes into layout tree', () => {
-    const yogaTree = computeYogaTree(treeRootStub, new Context());
+    const yogaTree = computeYogaTree(treeRootStub, new Context(), NodeMacOSBridge);
     yogaTree.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR);
     expect(yogaTree.getComputedLayout()).toEqual({
       bottom: 0,

diff --git a/__tests__/jest/reactTreeToFlexTree.ts b/__tests__/jest/reactTreeToFlexTree.ts
@@ -2,6 +2,7 @@ import yoga from 'yoga-layout-prebuilt';
 import computeYogaTree from '../../src/jsonUtils/computeYogaTree';
 import Context from '../../src/utils/Context';
 import { reactTreeToFlexTree } from '../../src/buildTree';
+import NodeMacOSBridge from '../../src/platformBridges/NodeMacOSBridge';
 
 const treeRootStub = {
   type: 'artboard',
@@ -58,7 +59,7 @@ const treeRootStub = {
 
 describe('Compute Flex Tree', () => {
   it('correctly creates flex tree', () => {
-    const yogaNode = computeYogaTree(treeRootStub, new Context());
+    const yogaNode = computeYogaTree(treeRootStub, new Context(), NodeMacOSBridge);
     yogaNode.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR);
     const tree = reactTreeToFlexTree(treeRootStub, yogaNode, new Context());
 

diff --git a/__tests__/jest/sharedStyles/TextStyles.ts b/__tests__/jest/sharedStyles/TextStyles.ts
@@ -1,3 +1,5 @@
+import NodeMacOSBridge from '../../../src/platformBridges/NodeMacOSBridge';
+
 let TextStyles;
 let doc;
 let sharedTextStyles;
@@ -15,12 +17,7 @@ beforeEach(() => {
 
   jest.mock('../../../src/utils/sharedTextStyles');
 
-  jest.mock('../../../src/jsonUtils/sketchImpl/createStringMeasurer');
-  jest.mock('../../../src/jsonUtils/sketchImpl/findFontName');
-  jest.mock('../../../src/jsonUtils/sketchImpl/makeImageDataFromUrl');
-  jest.mock('../../../src/jsonUtils/sketchImpl/makeSvgLayer');
-
-  TextStyles = TextStyles.default;
+  TextStyles = TextStyles.default(() => NodeMacOSBridge);
   sharedTextStyles = sharedTextStyles.default;
 
   sharedTextStyles.setDocument = jest.fn(doc => {
@@ -114,41 +111,32 @@ describe('create', () => {
     });
 
     it('only stores text attributes', () => {
-      const whitelist = [
-        'color',
-        'fontFamily',
-        'fontSize',
-        'fontStyle',
-        'fontWeight',
-        'textShadowOffset',
-        'textShadowRadius',
-        'textShadowColor',
-        'textTransform',
-        'letterSpacing',
-        'lineHeight',
-        'textAlign',
-        'writingDirection',
-      ];
-
-      const blacklist = ['foo', 'bar', 'baz'];
-
-      const input = [...whitelist, ...blacklist].reduce(
-        (acc, key) => ({
-          ...acc,
-          [key]: true,
-        }),
-        {},
-      );
+      const whitelist = {
+        color: 'red',
+        fontFamily: 'Helvetica',
+        fontSize: 14,
+        fontStyle: 'italic',
+        fontWeight: 'bold',
+        textShadowOffset: 2,
+        textShadowRadius: 1,
+        textShadowColor: 'black',
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+        lineHeight: 18,
+        textAlign: 'left',
+        writingDirection: 'ltr',
+      };
 
-      const res = TextStyles.create({ foo: input }, { document: doc });
+      const blacklist = { foo: 1, bar: 2, baz: 3 };
 
+      const res = TextStyles.create({ foo: { ...whitelist, ...blacklist } }, { document: doc });
       const firstStoredStyle = res[Object.keys(res)[0]].cssStyle;
 
-      whitelist.forEach(key => {
-        expect(firstStoredStyle).toHaveProperty(key, true);
+      Object.keys(whitelist).forEach(key => {
+        expect(firstStoredStyle).toHaveProperty(key, whitelist[key]);
       });
 
-      blacklist.forEach(key => {
+      Object.keys(blacklist).forEach(key => {
         expect(firstStoredStyle).not.toHaveProperty(key);
       });
     });

diff --git a/docs/API.md b/docs/API.md
@@ -27,7 +27,7 @@
 - [`Symbols`](#symbols)
   - [`makeSymbol`](#makesymbolnode-name)
 
-### `render(element, container)`
+### `async render(element, container?, bridge?)`
 
 Returns the top-level rendered Sketch object or an array of Sketch objects if you use `<Page>` components.
 
@@ -57,6 +57,10 @@ The element to render into - will be replaced. Should either be a Sketch [Docume
 
 Example: `sketch.getSelectedDocument().selectedPage`.
 
+##### `bridge` (optional)
+
+An object implementing the [Platform Bridge API](/docs/PlatformBridges.md). When not specified, it will attempt to load the most suitable one for the platform in use among the ones bundled with the package.
+
 #### Returns
 
 The top-most rendered native Sketch layer.
@@ -73,12 +77,12 @@ const Document = props => (
   </View>
 );
 
-export default () => {
-  render(<Document />, sketch.getSelectedDocument().selectedPage);
+export default async () => {
+  await render(<Document />, sketch.getSelectedDocument().selectedPage);
 };
 ```
 
-### `renderToJSON(element)`
+### `async renderToJSON(element, bridge?)`
 
 Returns a Sketch JSON object for further consumption - doesn't add to the page.
 
@@ -88,6 +92,10 @@ Returns a Sketch JSON object for further consumption - doesn't add to the page.
 
 Top-level React component that defines your Sketch document.
 
+##### `bridge` (optional)
+
+An object implementing the [Platform Bridge API](/docs/PlatformBridges.md). When not specified, it will attempt to load the most suitable one for the platform in use among the ones bundled with the package.
+
 #### Returns
 
 The top-most Sketch layer as JSON.
@@ -625,7 +633,7 @@ Reset the registered styles.
 
 An interface to Sketch's symbols. Create symbols and optionally inject them into the symbols page.
 
-### `makeSymbol(node, props, document)`
+### `makeSymbol(node, props, document, bridge?)`
 
 Creates a new symbol and injects it into the `Symbols` page. The name of the symbol can be optionally provided and will default to the display name of the component.
 
@@ -640,6 +648,7 @@ Returns a react component which is an can be used to render instances of the sym
 | `props.name` | `String` | The node name | Optional name for the symbol, string can include backslashes to organize these symbols with Sketch. For example `squares/blue` |
 | `props.style` | [`Style`](/docs/styling.md) |  |  |
 | `document` | `Object` | The current document | The Sketch document to make the symbol in |
+| `bridge` | `Object` | _platform-dependent_ | An object implementing the [Platform Bridge API](/docs/PlatformBridges.md). |
 
 ### `getSymbolComponentByName(name)`
 

diff --git a/docs/PlatformBridges.md b/docs/PlatformBridges.md
@@ -0,0 +1,3 @@
+# Platform Bridge API
+
+_TODO_
diff --git a/examples/basic-setup-typescript/package.json b/examples/basic-setup-typescript/package.json
@@ -19,7 +19,7 @@
   "author": "Jon Gold <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.4.0",
+    "@skpm/builder": "^0.7.5",
     "@types/chroma-js": "^1.3.3",
     "typescript": "^3.7.2"
   },

diff --git a/examples/basic-setup/package.json b/examples/basic-setup/package.json
@@ -16,7 +16,7 @@
   "author": "Jon Gold <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.7.4"
+    "@skpm/builder": "^0.7.5"
   },
   "dependencies": {
     "chroma-js": "^1.2.2",

diff --git a/examples/basic-svg/package.json b/examples/basic-svg/package.json
@@ -16,7 +16,7 @@
   "author": "Jon Gold <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   },
   "dependencies": {
     "prop-types": "^15.5.8",

diff --git a/examples/colors/package.json b/examples/colors/package.json
@@ -25,6 +25,6 @@
     "webpack-shell-plugin": "^0.5.0"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -15,7 +15,7 @@
   "author": "Nitin Tulswani <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.4.3"
+    "@skpm/builder": "^0.7.5"
   },
   "dependencies": {
     "emotion-primitives": "^1.0.0-beta.6",

diff --git a/examples/form-validation/package.json b/examples/form-validation/package.json
@@ -28,6 +28,6 @@
   "devDependencies": {
     "extract-text-webpack-plugin": "^2.1.0",
     "nwb": "^0.15.6",
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/foursquare-maps/package.json b/examples/foursquare-maps/package.json
@@ -29,6 +29,6 @@
     "react-test-renderer": "^16.3.2"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/glamorous/package.json b/examples/glamorous/package.json
@@ -16,7 +16,7 @@
   "author": "Nitin Tulswani <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   },
   "dependencies": {
     "chroma-js": "^1.3.4",

diff --git a/examples/profile-cards-graphql/package.json b/examples/profile-cards-graphql/package.json
@@ -27,6 +27,6 @@
     "react-test-renderer": "^16.3.2"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/profile-cards-primitives/package.json b/examples/profile-cards-primitives/package.json
@@ -25,6 +25,6 @@
     "react-test-renderer": "^16.3.2"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/profile-cards-react-with-styles/package.json b/examples/profile-cards-react-with-styles/package.json
@@ -21,6 +21,6 @@
     "react-with-styles": "^1.4.0"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/profile-cards/package.json b/examples/profile-cards/package.json
@@ -20,6 +20,6 @@
     "react-test-renderer": "^16.3.2"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/styled-components/package.json b/examples/styled-components/package.json
@@ -16,7 +16,7 @@
   "author": "Mathieu Dutour <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   },
   "dependencies": {
     "chroma-js": "^1.2.2",

diff --git a/examples/styleguide/package.json b/examples/styleguide/package.json
@@ -21,6 +21,6 @@
     "react-test-renderer": "^16.3.2"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }
diff --git a/examples/symbols/package.json b/examples/symbols/package.json
@@ -16,7 +16,7 @@
   "author": "Jon Gold <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   },
   "dependencies": {
     "react": "^16.3.2",

diff --git a/examples/timeline-airtable/package.json b/examples/timeline-airtable/package.json
@@ -21,6 +21,6 @@
     "react-test-renderer": "^16.3.2"
   },
   "devDependencies": {
-    "@skpm/builder": "^0.4.0"
+    "@skpm/builder": "^0.7.5"
   }
 }