refactor platforms

__tests__/jest/components/Artboard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import Artboard from '../../../src/components/Artboard';
-import StyleSheet from '../../../src/stylesheet';
+import { Artboard } from '../../../src/components/Artboard';
+import { StyleSheet } from '../../../src/stylesheet';
 
 describe('<Artboard />', () => {
   it('renders children', () => {

__tests__/jest/components/Document.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import Document from '../../../src/components/Document';
+import { Document } from '../../../src/components/Document';
 
 describe('<Document />', () => {
   it('renders children', () => {

__tests__/jest/components/Image.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import Image from '../../../src/components/Image';
-import StyleSheet from '../../../src/stylesheet';
+import { Image } from '../../../src/components/Image';
+import { StyleSheet } from '../../../src/stylesheet';
 
 describe('<Image />', () => {
   it('renders children', () => {

__tests__/jest/components/Page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import Page from '../../../src/components/Page';
+import { Page } from '../../../src/components/Page';
 
 describe('<Page />', () => {
   it('renders children', () => {

__tests__/jest/components/RedBox.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import RedBox from '../../../src/components/RedBox';
+import { RedBox } from '../../../src/components/RedBox';
 
 describe('<RedBox />', () => {
   it('renders simple errors', () => {

__tests__/jest/components/Text.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import Text from '../../../src/components/Text';
-import StyleSheet from '../../../src/stylesheet';
+import { Text } from '../../../src/components/Text';
+import { StyleSheet } from '../../../src/stylesheet';
 
 describe('<Text />', () => {
   it('passes its children', () => {

__tests__/jest/components/View.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
-import View from '../../../src/components/View';
-import StyleSheet from '../../../src/stylesheet';
+import { View } from '../../../src/components/View';
+import { StyleSheet } from '../../../src/stylesheet';
 
 describe('<View />', () => {
   it('passes its children', () => {

__tests__/jest/components/nodeImpl/Svg.tsx

@@ -1,11 +1,11 @@
 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', () => ({
   ...require.requireActual('../../../../src/jsonUtils/models'),
-  generateID: jest.fn(seed => (seed ? `${seed}mockID` : 'mockID')),
+  generateID: jest.fn((seed) => (seed ? `${seed}mockID` : 'mockID')),
 }));
 
 describe('node <Svg />', () => {

__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', () => {

__tests__/jest/jsonUtils/computeTextTree.ts

@@ -1,5 +1,5 @@
-import computeTextTree from '../../../src/jsonUtils/computeTextTree';
-import Context from '../../../src/utils/Context';
+import { computeTextTree } from '../../../src/jsonUtils/computeTextTree';
+import { Context } from '../../../src/utils/Context';
 
 // Example Text component tree
 const treeStub = {

__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 { computeYogaNode } from '../../../src/jsonUtils/computeYogaNode';
+import { Context } from '../../../src/utils/Context';
+import bridge from '../../../src/platformBridges/macos';
 
 const widthAndHeightStylesStub = {
   width: 10,
@@ -30,10 +31,10 @@ const createYogaNodes = (
   containerHeight?: number,
 ) => {
   const yogaNodes = [];
-  styles.forEach(style => {
+  styles.forEach((style) => {
     const treeNode = createTreeNode(style);
     const ctx = new Context();
-    const { node } = computeYogaNode(treeNode, ctx);
+    const { node } = computeYogaNode(bridge)(treeNode, ctx);
     node.calculateLayout(
       containerWidth || undefined,
       containerHeight || undefined,

__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 { computeYogaTree } from '../../../src/jsonUtils/computeYogaTree';
+import { Context } from '../../../src/utils/Context';
+import bridge from '../../../src/platformBridges/macos';
 
 const treeRootStub = {
   type: 'artboard',
@@ -36,11 +37,11 @@ const treeRootStub = {
   ],
 };
 
-computeYogaTree(treeRootStub, new Context());
+computeYogaTree(bridge)(treeRootStub, new Context());
 
 describe('Compute Yoga Tree', () => {
   it('correctly create yoga nodes into layout tree', () => {
-    const yogaTree = computeYogaTree(treeRootStub, new Context());
+    const yogaTree = computeYogaTree(bridge)(treeRootStub, new Context());
     yogaTree.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR);
     expect(yogaTree.getComputedLayout()).toEqual({
       bottom: 0,

__tests__/jest/jsonUtils/layerGroup.ts

@@ -1,4 +1,4 @@
-import layerGroup from '../../../src/jsonUtils/layerGroup';
+import { layerGroup } from '../../../src/jsonUtils/layerGroup';
 
 describe('layer group', () => {
   it('is correctly constructed', () => {

__tests__/jest/reactTreeToFlexTree.ts

@@ -1,7 +1,8 @@
 import yoga from 'yoga-layout-prebuilt';
-import computeYogaTree from '../../src/jsonUtils/computeYogaTree';
-import Context from '../../src/utils/Context';
+import { computeYogaTree } from '../../src/jsonUtils/computeYogaTree';
+import { Context } from '../../src/utils/Context';
 import { reactTreeToFlexTree } from '../../src/buildTree';
+import bridge from '../../src/platformBridges/macos';
 
 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(bridge)(treeRootStub, new Context());
     yogaNode.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR);
     const tree = reactTreeToFlexTree(treeRootStub, yogaNode, new Context());
 

__tests__/jest/sharedStyles/TextStyles.ts

@@ -1,3 +1,5 @@
+import bridge from '../../../src/platformBridges/macos';
+
 let TextStyles;
 let doc;
 let sharedTextStyles;
@@ -9,21 +11,16 @@ beforeEach(() => {
     getSketchVersion: jest.fn(() => 51),
   }));
 
-  TextStyles = require('../../../src/sharedStyles/TextStyles');
+  TextStyles = require('../../../src/sharedStyles/TextStyles').TextStyles;
 
   sharedTextStyles = require('../../../src/utils/sharedTextStyles');
 
   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;
-  sharedTextStyles = sharedTextStyles.default;
+  TextStyles = TextStyles(() => bridge);
+  sharedTextStyles = sharedTextStyles.sharedTextStyles;
 
-  sharedTextStyles.setDocument = jest.fn(doc => {
+  sharedTextStyles.setDocument = jest.fn((doc) => {
     if (!doc) {
       throw new Error('Please provide a sketch document reference');
     }
@@ -144,11 +141,11 @@ describe('create', () => {
 
       const firstStoredStyle = res[Object.keys(res)[0]].cssStyle;
 
-      whitelist.forEach(key => {
+      whitelist.forEach((key) => {
         expect(firstStoredStyle).toHaveProperty(key, true);
       });
 
-      blacklist.forEach(key => {
+      blacklist.forEach((key) => {
         expect(firstStoredStyle).not.toHaveProperty(key);
       });
     });

__tests__/jest/utils/isDefined.ts

@@ -1,4 +1,4 @@
-import isDefined from '../../../src/utils/isDefined';
+import { isDefined } from '../../../src/utils/isDefined';
 
 describe('isNullOrUndefined', () => {
   it('correctly identify null', () => {

__tests__/jest/utils/sortObjectKeys.ts

@@ -1,4 +1,4 @@
-import sortObjectKeys from '../../../src/utils/sortObjectKeys';
+import { sortObjectKeys } from '../../../src/utils/sortObjectKeys';
 
 test('simple example', () => {
   const a = {

__tests__/jest/utils/zIndex.ts

@@ -1,4 +1,4 @@
-import zIndex from '../../../src/utils/zIndex';
+import { zIndex } from '../../../src/utils/zIndex';
 
 const noZIndexNode = {
   props: {

examples/basic-setup-typescript/src/my-command.tsx

@@ -8,14 +8,12 @@ const textColor = (hex: string) => {
   if (vsWhite > 4) {
     return '#FFF';
   }
-  return chroma(hex)
-    .darken(3)
-    .hex();
+  return chroma(hex).darken(3).hex();
 };
 
 interface SwatchProps {
-  name: string,
-  hex: string,
+  name: string;
+  hex: string;
 }
 
 const Swatch = ({ name, hex }: SwatchProps) => (
@@ -29,10 +27,7 @@ const Swatch = ({ name, hex }: SwatchProps) => (
       padding: 8,
     }}
   >
-    <Text
-      name="Swatch Name"
-      style={{ color: textColor(hex), fontWeight: 'bold' }}
-    >
+    <Text name="Swatch Name" style={{ color: textColor(hex), fontWeight: 'bold' }}>
       {name}
     </Text>
     <Text name="Swatch Hex" style={{ color: textColor(hex) }}>
@@ -42,7 +37,7 @@ const Swatch = ({ name, hex }: SwatchProps) => (
 );
 
 interface DocumentProps {
-  colors: { [key: string]: string }
+  colors: { [key: string]: string };
 }
 const Document = ({ colors }: DocumentProps) => (
   <Artboard
@@ -53,13 +48,12 @@ const Document = ({ colors }: DocumentProps) => (
       width: (96 + 8) * 4,
     }}
   >
-    {Object.keys(colors).map(color => (
+    {Object.keys(colors).map((color) => (
       <Swatch name={color} hex={colors[color]} key={color} />
     ))}
   </Artboard>
 );
 
-
 export default () => {
   const colorList = {
     Haus: '#F3F4F4',

examples/basic-setup/package.json

@@ -9,14 +9,14 @@
   "scripts": {
     "build": "skpm-build",
     "watch": "skpm-build --watch",
-    "render": "skpm-build --watch --run",
+    "render": "node ../../../skpm/packages/builder/lib/build.js --watch --run",
     "render:once": "skpm-build --run",
     "postinstall": "npm run build && skpm-link"
   },
   "author": "Jon Gold <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@skpm/builder": "^0.7.4"
+    "@skpm/builder": "^0.7.5"
   },
   "dependencies": {
     "chroma-js": "^1.2.2",

examples/basic-setup/src/my-command.js

@@ -4,14 +4,12 @@ import { render, Artboard, Text, View } from 'react-sketchapp';
 import chroma from 'chroma-js';
 
 // take a hex and give us a nice text color to put over it
-const textColor = hex => {
+const textColor = (hex) => {
   const vsWhite = chroma.contrast(hex, 'white');
   if (vsWhite > 4) {
     return '#FFF';
   }
-  return chroma(hex)
-    .darken(3)
-    .hex();
+  return chroma(hex).darken(3).hex();
 };
 
 const Swatch = ({ name, hex }) => (
@@ -50,7 +48,7 @@ const Document = ({ colors }) => (
       width: (96 + 8) * 4,
     }}
   >
-    {Object.keys(colors).map(color => (
+    {Object.keys(colors).map((color) => (
       <Swatch name={color} hex={colors[color]} key={color} />
     ))}
   </Artboard>

examples/colors/src/main.js

@@ -19,7 +19,7 @@ const Document = ({ colors, steps }) => {
 
   return (
     <View style={styles.container}>
-      {times(i => color(i / steps).hex(), steps).map((val, i) => (
+      {times((i) => color(i / steps).hex(), steps).map((val, i) => (
         <View
           name={val}
           key={val}

examples/emotion/src/my-command.js

@@ -8,7 +8,7 @@ const Container = emotion.View`
   align-items: center;
   margin: 50px;
   border: 5px solid red;
-  background-color: ${props => props.theme.backgroundColor}
+  background-color: ${(props) => props.theme.backgroundColor}
 `;
 
 const Description = emotion.Text`

examples/form-validation/src/components/StrengthMeter.js

@@ -49,7 +49,7 @@ const styles = {
   },
 };
 
-const passwordStrength = password => {
+const passwordStrength = (password) => {
   // Faux password checking
   if (password.length <= 6) {
     return 'short';

examples/form-validation/src/main.js

@@ -15,7 +15,7 @@ const Page = ({ sessions }) => (
         flexWrap: 'wrap',
       }}
     >
-      {sessions.map(session => (
+      {sessions.map((session) => (
         <Space key={session.password} h={spacing.Large} v={spacing.Large}>
           <Register session={session} />
         </Space>

examples/foursquare-maps/src/App.js

@@ -63,7 +63,7 @@ const Row = ({ name, location }) => (
 Row.propTypes = Venue;
 
 const App = ({ center, venues }) => {
-  const pins = venues.map(v => ({
+  const pins = venues.map((v) => ({
     latitude: v.location.lat,
     longitude: v.location.lng,
   }));
@@ -82,7 +82,7 @@ const App = ({ center, venues }) => {
         markers={pins}
       />
       <View name="ListView">
-        {venues.map(v => (
+        {venues.map((v) => (
           <Row key={v.id} {...v} />
         ))}
       </View>

examples/foursquare-maps/src/getVenues.js

@@ -16,8 +16,8 @@ export default () => {
   });
 
   return fetch(`https://api.foursquare.com/v2/venues/search?${params}`)
-    .then(res => res.json())
-    .then(data => ({
+    .then((res) => res.json())
+    .then((data) => ({
       venues: data.response.venues,
       latitude,
       longitude,