Symbol support #53

lukewestby · 2017-04-28T16:58:30Z

For issue #28

Heya!

There are a few things still missing here but I wanted to get this in front of y'all before going down any paths you wouldn't want. I'll outline some things that are missing or weird still but the gist of the API so far can be explained by this example:

import { Widget } from 'my-lib';
import { makeSymbol, injectSymbols, Artboard, render } from 'react-sketchapp';

// Assume that there is a text string with content "Name" and an <Image> with name prop
// "someImage" within Widget
const WidgetSymbol = makeSymbol(Widget);

const Document = () =>
  <Artboard>
    <WidgetSymbol
      style={{width: 100, height: 100 }}
      overrides={{ 'Name': 'Hi', 'someImage': 'https://whatever.example/image.jpg' }}
    />
  </Artboard>;

export default (context) => {
  injectSymbols(context);
  render(<Document />, context.document.currentPage());
};

What will happen is a new page called "Symbols" will be created if it doesn't already exists and the symbol master generated by the call to makeSymbol will be dumped there. Then, each rendered WidgetSymbol will be a symbol instance pointing to the related master. Names of things are best guess based on the name of the class, and names are currently shared and global, so if you have two things called Widget one will be overwritten.

See also the example in /examples/symbols

How overrides work

I tried to keep the overrides API as similar to the actual experience in Sketch as possible. There are three overridable elements within a symbol: text, images, and other symbols.

Text

Text overrides currently work by mapping either the name from a <Text /> element or the actual text content onto the key in the overrides object. So, if a symbol master looks like:

...
<Text name="my_text">hello</Text>
...

Then the override is going to look like

<Instance overrides={{ my_text: 'whatever you want here' }} />

But, if you just use a string in your master like

...
Hello World
...

Then the override will look like

<Instance overrides={{ 'Hello World': 'Something else' }} />

Images

Image overrides work by mapping the name assigned to the image element onto another image url string. In the master:

... 
<Image name="my_image" source="https://hello.world/image.jpg" />
...

And to override:

<Instance overrides={{ my_image: 'https://hello.world/different.jpg' }} />

Nested Symbols

Nested symbols are overrided by mapping the name given to the symbol instance nested within the master onto the constructor for a different symbol instance. The constructor must ultimately point to a master with the exact same width and height as the original. For a master that contains:

...
<NestedSymbolA name="nested_symbol" />
...

The override is:

<Instance overrides={{ nested_symbol: NestedSymbolB, /* any other overrides in Instance _or_ NestedSymbolB */ }} />

You'll notice here we can provide overrides at the top level that apply to nested symbols within a master. This applies whether the nested symbol instance has been overrided or not. So if we didn't override NestedSymbolA with NestedSymbolB, we could include overrides for the contents of NestedSymbolA. This is how Sketch presents overrides for nested symbols in its UI, and internally we need to collect all overrides into one object as well so I chose to represent it as a flattened application in the API as well.

Things that are weird

css-layout wants to see some dimensions on the children of a flex container, so if you just render a symbol like <MyInstance /> you're going to end up with no width and no height. This is
counterintuitive -- Sketch seems to clone the layout of the master to each instance when you first create it.

Things to do

Automatic symbol master injection
Automatic symbol instance generation
Text overrides
Image overrides
Symbol instance overrides
Use real sketchapp-json-flow-types package again once this PR is merged and published.

ljharb · 2017-04-28T17:25:34Z

src/index.js

@@ -8,6 +8,7 @@ import RedBox from './components/RedBox';
 import View from './components/View';
 import Text from './components/Text';
 import TextStyles from './sharedStyles/TextStyles';
+import Symbol from './symbol';


Symbol isn't a great name because it shadows the JS primitive. Could we choose something else?

ahh shoot, yes. this was a silly thing to do. how about Symbols?

Sure, that's fine :-) it can conceptually overlap, as long as it doesn't literally overlap.

However, I'd also say that this doesn't tell me what a "symbol" is in this context, and it's not super clear to me from the OP either :-/

oh shoot! i forgot to reference the original issue that this proposes to resolve! it's for #28, adding automatic sketch symbol generation and references. 0 for 2 on clarity so far 😆 anyway i'll change it to Symbols. thanks!

ah ok, so based on the original issue i'd call it a "SketchSymbol", but any name other than "Symbol" is acceptable :-)

hmm, I'd love it if we could get away with not using SketchX as a prefix.

The exported API can be split into "things that fit into react-primitives" (View, Text, Image etc) and "Sketch-specific concepts" — TextStyles, Artboard etc.

I agree that Symbol is not the right name for it because of clashes, but what if we just exported the symbolize or makeSymbol or whatever HOC rather than Symbol.symbolize? I guess we also need Symbol.inject but there's probably a smart way around that 🤔

I renamed to makeSymbol and injectSymbols, both imported from the top namespace. The example in the PR description is updated to demonstrate. Happy to change these as many times as needed until it feels right.

@jongold fwiw, i think the difference here is that "Artboard" isn't a JavaScript-specific concept, but "Symbol" is - and I think that language-specific construct names are always automatically off limits. You shouldn't have a "Map" either - a "GoogleMap" or a "StreetMap" or something, but not a "Map" - that's taken by the language.

Concerns addressed.

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Handle string only errors in RedBox.js

* Support for opacity style * Add test for opacity * Remove TODO comment for opacity

…p into symbol_support

lukewestby · 2017-05-15T17:42:26Z

@jongold ready for your review! you can find example usage in examples/symbols

jemgold · 2017-05-15T19:28:29Z

@lukewestby !!!!!!!!!!!! woo, I'll take a look :)

michaelcarter-wf · 2017-05-18T13:58:04Z

@lukewestby awesome work!

I'm hitting an error when try to run the symbol example:

Module not found: Error: Can't resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/prop-types'
resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/prop-types'

Env:
node 6.x latest

Steps to reproduce:

Check out this branch.
git clean -xdf
npm install
npm run build
cd examples/symbol
npm install
npm run build
produces error + trace below:

Stack Trace, Click to Expand


➜  symbols git:(symbol_support) ✗ npm run build

symbols@1.0.0 build /Users/michaelcarter/git/react-sketchapp/examples/symbols

skpm build

[1/2] 🖨 Copied src/manifest.json in 7ms error Error while building ./my-command.js /Users/michaelcarter/git/react-sketchapp//prop-types/factoryWithTypeCheckers.js Module not found: Error: Can't resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/prop-types' resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/prop-types' Parsed request is a module using description file: /Users/michaelcarter/git/react-sketchapp/node_modules/prop-types/package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/node_modules/prop-types/package.json (relative path: .) resolve as module /Users/michaelcarter/git/node_modules doesn't exist or is not a directory /Users/node_modules doesn't exist or is not a directory /node_modules doesn't exist or is not a directory looking for modules in /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules) using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules/sketch-module-console-polyfill) no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill doesn't exist looking for modules in /Users/michaelcarter/git/react-sketchapp/node_modules using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules) using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules/sketch-module-console-polyfill) no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill doesn't exist looking for modules in /Users/michaelcarter/node_modules No description file found Field 'browser' doesn't contain a valid alias configuration No description file found no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/node_modules/sketch-module-console-polyfill doesn't exist /Users/michaelcarter/git/react-sketchapp/node_modules/prop-types/node_modules doesn't exist or is not a directory /Users/michaelcarter/git/react-sketchapp/node_modules/node_modules doesn't exist or is not a directory [/Users/michaelcarter/git/node_modules] [/Users/node_modules] [/node_modules] [/Users/michaelcarter/node_modules/package.json] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill/package.json] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/prop-types/node_modules] [/Users/michaelcarter/git/react-sketchapp/node_modules/node_modules] @ /Users/michaelcarter/git/react-sketchapp//prop-types/factoryWithTypeCheckers.js 1:0-41 @ /Users/michaelcarter/git/react-sketchapp//prop-types/index.js @ /Users/michaelcarter/git/react-sketchapp/lib/symbol.js @ /Users/michaelcarter/git/react-sketchapp/lib/index.js @ ./src/my-command.js /Users/michaelcarter/git/react-sketchapp//fbjs/lib/warning.js Module not found: Error: Can't resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/lib' resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/lib' Parsed request is a module using description file: /Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/package.json (relative path: ./lib) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/package.json (relative path: ./lib) resolve as module /Users/michaelcarter/git/react-sketchapp/node_modules/node_modules doesn't exist or is not a directory /Users/michaelcarter/git/node_modules doesn't exist or is not a directory /Users/node_modules doesn't exist or is not a directory /node_modules doesn't exist or is not a directory looking for modules in /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules) using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules/sketch-module-console-polyfill) no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill doesn't exist looking for modules in /Users/michaelcarter/git/react-sketchapp/node_modules using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules) using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules/sketch-module-console-polyfill) no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill doesn't exist looking for modules in /Users/michaelcarter/node_modules No description file found Field 'browser' doesn't contain a valid alias configuration No description file found no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/node_modules/sketch-module-console-polyfill doesn't exist /Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/lib/node_modules doesn't exist or is not a directory /Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/node_modules doesn't exist or is not a directory [/Users/michaelcarter/git/react-sketchapp/node_modules/node_modules] [/Users/michaelcarter/git/node_modules] [/Users/node_modules] [/node_modules] [/Users/michaelcarter/node_modules/package.json] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill/package.json] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/lib/node_modules] [/Users/michaelcarter/git/react-sketchapp/node_modules/fbjs/node_modules] @ /Users/michaelcarter/git/react-sketchapp//fbjs/lib/warning.js 1:0-41 @ /Users/michaelcarter/git/react-sketchapp//prop-types/factoryWithTypeCheckers.js @ /Users/michaelcarter/git/react-sketchapp//prop-types/index.js @ /Users/michaelcarter/git/react-sketchapp/lib/symbol.js @ /Users/michaelcarter/git/react-sketchapp/lib/index.js @ ./src/my-command.js /Users/michaelcarter/git/react-sketchapp//react-test-renderer/lib/ReactUpdates.js Module not found: Error: Can't resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/lib' resolve 'sketch-module-console-polyfill' in '/Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/lib' Parsed request is a module using description file: /Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/package.json (relative path: ./lib) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/package.json (relative path: ./lib) resolve as module /Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/lib/node_modules doesn't exist or is not a directory /Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/node_modules doesn't exist or is not a directory /Users/michaelcarter/git/react-sketchapp/node_modules/node_modules doesn't exist or is not a directory /Users/michaelcarter/git/node_modules doesn't exist or is not a directory /Users/node_modules doesn't exist or is not a directory /node_modules doesn't exist or is not a directory looking for modules in /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules) using description file: /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/package.json (relative path: ./node_modules/sketch-module-console-polyfill) no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill doesn't exist looking for modules in /Users/michaelcarter/git/react-sketchapp/node_modules using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules) using description file: /Users/michaelcarter/git/react-sketchapp/package.json (relative path: ./node_modules/sketch-module-console-polyfill) no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill doesn't exist looking for modules in /Users/michaelcarter/node_modules No description file found Field 'browser' doesn't contain a valid alias configuration No description file found no extension Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill doesn't exist .sketch.js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill.sketch.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/michaelcarter/node_modules/sketch-module-console-polyfill.js doesn't exist as directory /Users/michaelcarter/node_modules/sketch-module-console-polyfill doesn't exist [/Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/lib/node_modules] [/Users/michaelcarter/git/react-sketchapp/node_modules/react-test-renderer/node_modules] [/Users/michaelcarter/git/react-sketchapp/node_modules/node_modules] [/Users/michaelcarter/git/node_modules] [/Users/node_modules] [/node_modules] [/Users/michaelcarter/node_modules/package.json] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/git/react-sketchapp/examples/symbols/node_modules/skpm/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/git/react-sketchapp/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill/package.json] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill.sketch.js] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill.js] [/Users/michaelcarter/node_modules/sketch-module-console-polyfill] @ /Users/michaelcarter/git/react-sketchapp//react-test-renderer/lib/ReactUpdates.js 1:0-41 @ /Users/michaelcarter/git/react-sketchapp//react-test-renderer/lib/ReactTestRenderer.js @ /Users/michaelcarter/git/react-sketchapp/~/react-test-renderer/index.js @ /Users/michaelcarter/git/react-sketchapp/lib/buildTree.js @ /Users/michaelcarter/git/react-sketchapp/lib/render.js @ /Users/michaelcarter/git/react-sketchapp/lib/index.js @ ./src/my-command.js

Thanks!

jemgold · 2017-05-18T16:00:51Z

@michaelcarter-wf this is a bug with skpm's webpack config afaik — to fix it locally until we resolve it, npm install sketch-module-console-polyfill sketch-module-fetch-polyfill sketch-module-settimeout-polyfill sketch-module-setinterval-polyfill

jemgold · 2017-06-05T18:09:03Z

So sorry this took so long to merge in — this is really wonderful work.

I'm going to merge it ASAP and then we can do another PR to add docs

you: a+++++ 😍
my maintainer skillz: D- ☠️

opeologist · 2017-06-05T18:20:59Z

@lukewestby i pulled down this work and it looks awesome, but i noticed that any updates to the symbols essentially breaks their past use, since sketch thinks the update to the symbols makes them new symbols. any way to hydrate the symbols so any use of the symbols get updated to the latest version of the symbols from code? thanks!

jemgold · 2017-06-05T18:23:03Z

@tehOPEologist — I don't follow - any chance you could post a quick screencast of the behavior? (you can use kap if you don't have a screencasting thingy installed)

opeologist · 2017-06-05T18:31:02Z

i'm not near my dev environment to replicate/record right now, but essentially:

use this fork to generate a symbol
put the symbol that is now in sketch on a page
update the component in code
npm run render picks up the change and pushes the change to sketch
the symbol you put on the page in step 2 now is "missing"

i'm wondering if there's a way to stop the last thing from happening, and the symbol that's in use get updated to reflect the changes made. that would make this symbol implementation incredibly useful for iterative changes to symbols.

opeologist · 2017-06-05T19:08:01Z

it looks like injectSymbols just replaces the layers in the Symbols page, which is why the symbols are "missing" 😢 if there was a way to update symbols in place, i think this feature would become a lot more powerful.

jemgold · 2017-06-05T22:10:22Z

welp, for some reason flow is bailing on master but wasn't on the branch. I have no idea. will look into it this afternoon, can't publish a new version until that's fixed.

jemgold · 2017-06-05T22:10:41Z

@tehOPEologist — makes sense, let's circle back to it at a later point :)

* deals with `Module not found: Error: Can't resolve 'sketch-module-console-polyfill'` in setups where `skpm` is linked into the using project. * related: airbnb/react-sketchapp#53 (comment)

chrislloyd · 2017-06-08T05:59:08Z

👏 Thanks for everybody involved with this PR. So much awesome here.

@jongold now that this is merged, would it be possible to get a new release cut?

jemgold · 2017-06-08T18:09:18Z

@chrislloyd done — was waiting for #110 to merge, just published 0.11.0 🙏

jemgold · 2017-06-08T18:14:09Z

also if anyone gets comfortable with it, we'd appreciate a contribution to the API Documentation! #112

Luke Westby added 3 commits April 28, 2017 11:12

first draft

f7a00b9

reference latest changes in sketchapp-json-flow-types

465b757

proper type on page name method

2c7ca72

ljharb previously requested changes Apr 28, 2017

View reviewed changes

rename to makeSymbol and injectSymbols

8831d16

petetnt and others added 11 commits April 29, 2017 17:18

Handle string only errors in RedBox.js

bdd67a4

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Merge pull request airbnb#55 from petetnt/handle-string-only-errors

7a10dcd

Handle string only errors in RedBox.js

start text and symbol overrides

5b1f980

Support for opacity (airbnb#60)

65add31

* Support for opacity style * Add test for opacity * Remove TODO comment for opacity

Fix opacity couldn't be zero (airbnb#61)

1383931

Remove profiling of render functions (airbnb#62)

a1d6a49

update foursquare-maps example to use the last skpm version (airbnb#18)

acaec94

update all skpm imports to ^0.9.0 (airbnb#66)

bf82d78

0.10.3

5ff80ed

Set fixedRadius in makeRectShapeLayer (airbnb#69)

0b3a294

Update README.md

77b3231

jemgold assigned lukewestby May 5, 2017

Luke Westby added 12 commits May 8, 2017 15:13

first draft

28bcff1

reference latest changes in sketchapp-json-flow-types

362802f

proper type on page name method

6288e4b

rename to makeSymbol and injectSymbols

2e4e404

start text and symbol overrides

dc3e0b9

Merge branch 'symbol_support' of github.com:lukewestby/react-sketchap…

dbe5397

…p into symbol_support

nested symbol overrides

7c9c85c

nested symbol overrides

af9b0b4

just a bit of cleanup

81e0dc2

space masters apart in symbols page

f2d2253

load existing symbols from file

a223d2a

put basic-setup back how it was

a6ce0ac

Luke Westby added 4 commits May 15, 2017 11:32

symbol example

9ad7d46

update example readme

2c3e9e3

update example readme

ecd6852

named text element overrides

a844ba3

jemgold added the awaiting-review label May 15, 2017

jemgold approved these changes Jun 5, 2017

View reviewed changes

jemgold changed the title ~~[WIP] Symbol support~~ Symbol support Jun 5, 2017

jemgold merged commit 2500505 into airbnb:master Jun 5, 2017

This was referenced Jun 7, 2017

fix: resolve sketch-module-* packages via require.resolve marionebl/skpm#1

Closed

fix: resolve sketch-module-* packages via require.resolve skpm/skpm#43

Merged

jemgold mentioned this pull request Jun 8, 2017

Fix flow bugs in SymbolInstanceRenderer #110

Merged

jemgold mentioned this pull request Jun 8, 2017

Support for generating symbol masters and placing instances #28

Closed

arahansen mentioned this pull request Jun 24, 2017

Symbol Instances Go Missing When Rendering Plugin #128

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Symbol support #53

Symbol support #53

lukewestby commented Apr 28, 2017 •

edited

Loading

ljharb Apr 28, 2017

lukewestby Apr 28, 2017

ljharb Apr 28, 2017

lukewestby Apr 28, 2017 •

edited

Loading

ljharb Apr 28, 2017

jemgold Apr 28, 2017 •

edited

Loading

lukewestby Apr 28, 2017

ljharb May 9, 2017

lukewestby commented May 15, 2017

jemgold commented May 15, 2017

michaelcarter-wf commented May 18, 2017 •

edited

Loading

jemgold commented May 18, 2017

jemgold commented Jun 5, 2017

opeologist commented Jun 5, 2017

jemgold commented Jun 5, 2017

opeologist commented Jun 5, 2017

opeologist commented Jun 5, 2017 •

edited

Loading

jemgold commented Jun 5, 2017

jemgold commented Jun 5, 2017

chrislloyd commented Jun 8, 2017

jemgold commented Jun 8, 2017

jemgold commented Jun 8, 2017

Symbol support #53

Symbol support #53

Conversation

lukewestby commented Apr 28, 2017 • edited Loading

How overrides work

Text

Images

Nested Symbols

Things that are weird

Things to do

ljharb Apr 28, 2017

Choose a reason for hiding this comment

lukewestby Apr 28, 2017

Choose a reason for hiding this comment

ljharb Apr 28, 2017

Choose a reason for hiding this comment

lukewestby Apr 28, 2017 • edited Loading

Choose a reason for hiding this comment

ljharb Apr 28, 2017

Choose a reason for hiding this comment

jemgold Apr 28, 2017 • edited Loading

Choose a reason for hiding this comment

lukewestby Apr 28, 2017

Choose a reason for hiding this comment

ljharb May 9, 2017

Choose a reason for hiding this comment

lukewestby commented May 15, 2017

jemgold commented May 15, 2017

michaelcarter-wf commented May 18, 2017 • edited Loading

jemgold commented May 18, 2017

jemgold commented Jun 5, 2017

opeologist commented Jun 5, 2017

jemgold commented Jun 5, 2017

opeologist commented Jun 5, 2017

opeologist commented Jun 5, 2017 • edited Loading

jemgold commented Jun 5, 2017

jemgold commented Jun 5, 2017

chrislloyd commented Jun 8, 2017

jemgold commented Jun 8, 2017

jemgold commented Jun 8, 2017

lukewestby commented Apr 28, 2017 •

edited

Loading

lukewestby Apr 28, 2017 •

edited

Loading

jemgold Apr 28, 2017 •

edited

Loading

michaelcarter-wf commented May 18, 2017 •

edited

Loading

opeologist commented Jun 5, 2017 •

edited

Loading