Improve symbol api (#446)

Improve symbol api

Author: mathieudutour

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This project adheres to [Semantic Versioning](http://semver.org/). Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/airbnb/react-sketchapp/releases) page.
 
+## Version 3.0.1
+
+- Allow passing a style object when making a symbol
+- Expose `getSymbolMasterByName`
+
 ## Version 3.0.0
 
 - Export Svg components in the Svg/index.js file (Thanks @saschazar21!)

docs/API.md

@@ -625,7 +625,7 @@ Reset the registered styles.
 
 An interface to Sketch's symbols. Create symbols and optionally inject them into the symbols page.
 
-### `makeSymbol(node, name, document)`
+### `makeSymbol(node, props, document)`
 
 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.
 
@@ -636,12 +636,18 @@ Returns a react component which is an can be used to render instances of the sym
 | Parameter | Type | Default | Note |
 | --- | --- | --- | --- |
 | `node` | `Node` |  | The node object that will be rendered as a symbol |
-| `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` | `Object` | The node name | Optional name for the symbol, string can include backslashes to organize these symbols with Sketch. For example `squares/blue` |
+| `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 |
 
 ### `getSymbolComponentByName(name)`
 
-Returns a react component which can be used to render the symbol that is associated with that name.
+Returns a react component which can be used to render the symbol instance that is associated with that name.
+
+### `getSymbolMasterByName(name)`
+
+Returns the JSON representation of the symbol master that is associated with that name.
 
 ### Symbol example
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sketchapp",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A React renderer for Sketch.app",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/index.ts

@@ -13,6 +13,7 @@ import _TextStyles from './sharedStyles/TextStyles';
 import {
   makeSymbol as _makeSymbol,
   getSymbolComponentByName as _getSymbolComponentByName,
+  getSymbolMasterByName as _getSymbolMasterByName,
   injectSymbols as _injectSymbols,
 } from './symbol';
 
@@ -31,6 +32,7 @@ export const View = _View;
 export const Platform = _Platform;
 export const makeSymbol = _makeSymbol;
 export const getSymbolComponentByName = _getSymbolComponentByName;
+export const getSymbolMasterByName = _getSymbolMasterByName;
 export const injectSymbols = _injectSymbols;
 
 export default {
@@ -49,5 +51,6 @@ export default {
   Platform,
   makeSymbol,
   getSymbolComponentByName,
+  getSymbolMasterByName,
   injectSymbols,
 };

src/renderers/SymbolMasterRenderer.ts

@@ -1,9 +1,10 @@
 import { makeSymbolMaster, makeRect } from '../jsonUtils/models';
 import SketchRenderer from './SketchRenderer';
 import { TreeNode } from '../types';
+import { SymbolMasterProps } from '../symbol';
 
 export default class SymbolMasterRenderer extends SketchRenderer {
-  renderGroupLayer({ layout, props }: TreeNode<{ symbolID: string; name: string }>) {
+  renderGroupLayer({ layout, props }: TreeNode<SymbolMasterProps & { symbolID: string }>) {
     return makeSymbolMaster(
       makeRect(layout.left, layout.top, layout.width, layout.height),
       props.symbolID,

src/symbol.tsx

@@ -143,24 +143,37 @@ export const createSymbolInstanceClass = (symbolMaster: FileFormat.SymbolMaster)
   };
 };
 
+const SymbolMasterPropTypes = {
+  style: PropTypes.shape(ViewStylePropTypes),
+  name: PropTypes.string,
+};
+
+export type SymbolMasterProps = PropTypes.InferProps<typeof SymbolMasterPropTypes>;
+
 export const makeSymbol = (
   Component: React.ComponentType<any>,
-  name: string,
+  symbolProps: string | SymbolMasterProps,
   document?: SketchDocumentData | SketchDocument | WrappedSketchDocument,
 ) => {
   if (!hasInitialized && getSketchVersion() !== 'NodeJS') {
     getExistingSymbols(getDocumentData(document));
   }
 
-  const masterName = name || displayName(Component);
+  const masterName =
+    (typeof symbolProps === 'string' ? symbolProps : (symbolProps || {}).name) ||
+    displayName(Component);
   const existingSymbol = existingSymbols.find(symbolMaster => symbolMaster.name === masterName);
   const symbolID = existingSymbol
     ? existingSymbol.symbolID
     : generateID(`symbolID:${masterName}`, !!name);
 
   const symbolMaster = flexToSketchJSON(
     buildTree(
-      <sketch_symbolmaster symbolID={symbolID} name={masterName}>
+      <sketch_symbolmaster
+        {...(typeof symbolProps !== 'string' ? symbolProps || {} : {})}
+        symbolID={symbolID}
+        name={masterName}
+      >
         <Component />
       </sketch_symbolmaster>,
     ),