Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async rendering API and "pure" image fetching #472

Open
wants to merge 50 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
a69b850
Transpile to ES2017 to avoid regenerator-runtime for now
lordofthelake Jan 20, 2020
042fdae
Use weakRequire instead of ad-hoc evals
lordofthelake Jan 20, 2020
22b7f60
Make everything async
lordofthelake Jan 20, 2020
2968a64
Add getImageDataFromURL() implementation using fetch
lordofthelake Jan 20, 2020
1ad2d17
Split the bridges in their own objects
lordofthelake Jan 21, 2020
dfd88c9
Change the interface of getSketchVersion()
lordofthelake Jan 21, 2020
08d1a2e
Use strong imports in NodeMacOSBridge
lordofthelake Jan 21, 2020
f9c83a9
Add PlatformBridge injection everywhere
lordofthelake Jan 21, 2020
67fc4ce
Group together files by method instead than by implementation
lordofthelake Jan 21, 2020
6d6c801
Rename the *SJSON functions
lordofthelake Jan 21, 2020
5bae926
Don't use the console in prodution
lordofthelake Jan 21, 2020
d849c9b
Reorganize exports
lordofthelake Jan 22, 2020
b8bc142
Split entrypoints by platform
lordofthelake Jan 22, 2020
2d063e6
Change the bridge injection for TextStyles
lordofthelake Jan 22, 2020
0dbd5b0
Use a dynamic import instead of weakRequire
lordofthelake Jan 22, 2020
12dd68c
Fix compilation errors
lordofthelake Jan 22, 2020
435bce2
Move back StyleSheet -> stylesheet
lordofthelake Jan 22, 2020
65e011d
Fix the test suite
lordofthelake Jan 22, 2020
9c82687
Add multiple entrypoints in package.json
lordofthelake Jan 22, 2020
b267fcd
Add the node-fetch dependency
lordofthelake Jan 22, 2020
8e6b485
Revert targeting es5
lordofthelake Jan 22, 2020
7bacf27
Update @skpm/builder everywhere
lordofthelake Jan 22, 2020
48766e4
Add implementation to read from file: protocol
lordofthelake Jan 23, 2020
8d6d1ff
Add TODO about moving the bridge out
lordofthelake Jan 23, 2020
414c845
Merge branch 'master' of github.com:compositive/react-sketchapp into …
lordofthelake Jan 23, 2020
a0a9012
Fix types to work with strict
lordofthelake Jan 23, 2020
87b175a
Use static platform switching
lordofthelake Jan 23, 2020
13ee09d
Don't account for skpm-fetch peculiarities
lordofthelake Jan 23, 2020
f88bd56
Add npm build to Travis to check whether the types work
lordofthelake Jan 23, 2020
f143562
Add sideEffects flag to allow tree shaking
lordofthelake Jan 23, 2020
87ff628
Revert changes to getSketchVersion()
lordofthelake Jan 25, 2020
5adf6b5
Revert changes to logging
lordofthelake Jan 25, 2020
a6ddb65
Revert adding extra scripts to examples/profile-cards
lordofthelake Jan 25, 2020
7c41cf6
Revert renaming the *SJON functions
lordofthelake Jan 25, 2020
d5a3f26
Start documenting changes
lordofthelake Jul 11, 2020
215adec
Update TypeScript version
lordofthelake Jul 11, 2020
7c6c02f
Merge branch 'master' of github.com:airbnb/react-sketchapp into pure-…
lordofthelake Jan 6, 2021
cadae33
Fix the TypeScript errors
lordofthelake Jan 6, 2021
bc20d9d
Update API docs
lordofthelake Jan 6, 2021
c0b681d
Clean up left-overs of refactors already implemented
lordofthelake Jan 6, 2021
8708fc2
Correct the link to the `PlatformBridge` type
lordofthelake Jan 6, 2021
55b2c3d
Disable node_modules cache
lordofthelake Jan 6, 2021
9cbae7b
Forcibly clean the cached node_modules
lordofthelake Jan 6, 2021
8b02a46
Remove footnote in `API.md`
lordofthelake Jan 6, 2021
79fec51
Merge branch 'master' into pure-make-image-from-url-implementation
lordofthelake Mar 30, 2021
21e52ee
Update Travis config and npm
lordofthelake Apr 8, 2021
451cadb
Merge branch 'pure-make-image-from-url-implementation' of github.com:…
lordofthelake Apr 8, 2021
7c6da8e
Change the compile target to `es2017` in tsconfig.json
lordofthelake Apr 8, 2021
abffbba
Don't use the npm cache
lordofthelake Apr 8, 2021
2bc1bf6
Add libraries for retrocompatibility
lordofthelake Apr 8, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
os: osx
language: node_js
cache:
directories:
- node_modules
# - $HOME/Library/Caches/Homebrew
notifications:
email: false
cache:
npm: false
node_js:
- 'lts/*'
# before_install:
- 12
- 14
before_install:
- npm install -g npm
# - brew update
# - brew cask install sketch # install Sketch
# - mkdir -p "~/Library/Application Support/com.bohemiancoding.sketch3/Plugins" # create plugins folder
# - echo $SKETCH_LICENSE > "~/Library/Application Support/com.bohemiancoding.sketch3/.deployment" # add the Sketch license
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:
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@ Managing the assets of design systems in Sketch is complex, error-prone and time
import * as React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';

const App = props => (
const App = (props) => (
<Artboard>
<Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>{props.message}</Text>
</Artboard>
);

export default context => {
export default (context) => {
render(<App message="Hello world!" />, context.document.currentPage());
};
```
Expand Down
4 changes: 2 additions & 2 deletions __tests__/jest/components/nodeImpl/Svg.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -25,6 +25,6 @@ describe('node <Svg />', () => {
}
}

expect(ReactSketch.renderToJSON(<SVGElement />)).toMatchSnapshot();
expect(await ReactSketch.renderToJSON(<SVGElement />)).toMatchSnapshot();
});
});
49 changes: 20 additions & 29 deletions __tests__/jest/sharedStyles/TextStyles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -111,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]: '',
}),
{},
);
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, '');
Object.keys(whitelist).forEach((key) => {
expect(firstStoredStyle).toHaveProperty(key, whitelist[key]);
});

blacklist.forEach((key) => {
Object.keys(blacklist).forEach((key) => {
expect(firstStoredStyle).not.toHaveProperty(key);
});
});
Expand Down
21 changes: 15 additions & 6 deletions docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
- [`Symbols`](#symbols)
- [`makeSymbol`](#makesymbolnode-props-document)

### `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.

Expand Down Expand Up @@ -59,6 +59,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. 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.
Expand All @@ -69,18 +73,18 @@ The top-most rendered native Sketch layer.
import sketch from 'sketch';
import { View, Text, render } from 'react-sketchapp';

const Document = props => (
const Document = (props) => (
<View>
<Text>Hello world!</Text>
</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.

Expand All @@ -90,6 +94,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. 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.
Expand Down Expand Up @@ -684,7 +692,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.

Expand All @@ -699,6 +707,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. |

### `getSymbolComponentByName(name)`

Expand Down
7 changes: 3 additions & 4 deletions docs/guides/rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ const App = () => (

export default () => {
const documents = sketch.getDocuments();
const document =
sketch.getSelectedDocument() || new sketch.Document(); // get the current document // or create a new document
const document = sketch.getSelectedDocument() || new sketch.Document(); // get the current document // or create a new document
};
```

Expand Down Expand Up @@ -61,8 +60,8 @@ import { render } from 'react-sketchapp';

// const App = () => ... or import App from './App';

const getDocumentByName = name => {
return (sketch.getDocuments() || []).find(doc => {
const getDocumentByName = (name) => {
return (sketch.getDocuments() || []).find((doc) => {
return doc.path && path.basename(doc.path, '.sketch') === name;
});
};
Expand Down
22 changes: 11 additions & 11 deletions docs/guides/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ Components use CSS styles + FlexBox layout.

## Shadow Styles

| property | type | supported? |
| --- | --- | --- |
| `shadowColor` | `Color` | ✅ |
| `shadowOffset` | `{ width: number, height: number }` | ✅ |
| `shadowOpacity` | `number` | ✅ |
| `shadowRadius` | `number` &#124; `percentage` | ✅ |
| property | type | supported? |
| --------------- | ----------------------------------- | ---------- |
| `shadowColor` | `Color` | ✅ |
| `shadowOffset` | `{ width: number, height: number }` | ✅ |
| `shadowOpacity` | `number` | ✅ |
| `shadowRadius` | `number` &#124; `percentage` | ✅ |

## Type Styles

Expand All @@ -102,10 +102,10 @@ Components use CSS styles + FlexBox layout.

Some properties are Sketch specific and won't work cross-platform but give you a better control over your components.

| property | type | supported? |
| --- | --- | --- |
| `shadowSpread` | `number` | ✅ |
| `shadowInner` | `boolean` | ✅ |
| property | type | supported? |
| -------------- | --------- | ---------- |
| `shadowSpread` | `number` | ✅ |
| `shadowInner` | `boolean` | ✅ |

## Examples

Expand Down Expand Up @@ -154,7 +154,7 @@ const colors = {
};

<View>
{Object.keys(colors).map(name => (
{Object.keys(colors).map((name) => (
<View
key={name}
style={{
Expand Down
2 changes: 1 addition & 1 deletion examples/basic-setup-typescript/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"author": "Jon Gold <jon.gold@airbnb.com>",
"license": "MIT",
"devDependencies": {
"@skpm/builder": "^0.4.0",
"@skpm/builder": "^0.7.5",
"@types/chroma-js": "^1.3.3",
"typescript": "^3.7.2"
},
Expand Down
2 changes: 1 addition & 1 deletion examples/colors/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@
"webpack-shell-plugin": "^0.5.0"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
2 changes: 1 addition & 1 deletion examples/emotion/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"author": "Nitin Tulswani <tulswani19@gmail.com>",
"license": "MIT",
"devDependencies": {
"@skpm/builder": "^0.4.3"
"@skpm/builder": "^0.7.5"
},
"dependencies": {
"emotion-primitives": "^1.0.0-beta.6",
Expand Down
2 changes: 1 addition & 1 deletion examples/form-validation/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion examples/foursquare-maps/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@
"react-test-renderer": "^16.3.2"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
2 changes: 1 addition & 1 deletion examples/glamorous/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"author": "Nitin Tulswani <tulswani19@gmail.com>",
"license": "MIT",
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
},
"dependencies": {
"chroma-js": "^1.3.4",
Expand Down
2 changes: 1 addition & 1 deletion examples/profile-cards-graphql/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,6 @@
"react-test-renderer": "^16.3.2"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
2 changes: 1 addition & 1 deletion examples/profile-cards-primitives/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@
"react-test-renderer": "^16.3.2"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
2 changes: 1 addition & 1 deletion examples/profile-cards-react-with-styles/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@
"react-with-styles": "^1.4.0"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
2 changes: 1 addition & 1 deletion examples/profile-cards/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
"react-test-renderer": "^16.3.2"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
2 changes: 1 addition & 1 deletion examples/react-router-prototyping/src/routes/post.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import AppBar from '../components/AppBar';
import NavBar from '../components/NavBar';

const posts = {
'1': {
1: {
title: 'Title of a Blog Post',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
Expand Down
2 changes: 1 addition & 1 deletion examples/styled-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"author": "Mathieu Dutour <mathieu@dutour.me>",
"license": "MIT",
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
},
"dependencies": {
"chroma-js": "^1.2.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/styleguide/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@
"react-test-renderer": "^16.3.2"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
2 changes: 1 addition & 1 deletion examples/symbols/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"author": "Jon Gold <jon.gold@airbnb.com>",
"license": "MIT",
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
},
"dependencies": {
"react": "^16.3.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/timeline-airtable/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@
"react-test-renderer": "^16.3.2"
},
"devDependencies": {
"@skpm/builder": "^0.4.0"
"@skpm/builder": "^0.7.5"
}
}
Loading