feat(symbols): Add support for nested symbols (#28)

fixes #22

Author: mxmul

README.md

@@ -42,6 +42,20 @@ Annotate symbols with `data-sketch-symbol` attributes. Note that forward slashes
 </div>
 ```
 
+Annotate [nested symbols](https://www.sketchapp.com/docs/symbols/nested-symbols) with `data-sketch-symbol-instance` attributes, where the attribute values reference existing symbols defined elsewhere in the document.
+
+```html
+<div data-sketch-symbol="Icon/Reply">...</div>
+<div data-sketch-symbol="Icon/Retweet">...</div>
+<div data-sketch-symbol="Icon/Like">...</div>
+
+<div data-sketch-symbol="IconRow">
+  <div data-sketch-symbol-instance="Icon/Reply">...</div>
+  <div data-sketch-symbol-instance="Icon/Retweet">...</div>
+  <div data-sketch-symbol-instance="Icon/Like">...</div>
+</div>
+```
+
 Annotate all text styles with `data-sketch-text` attributes.
 
 ```html

package.json

@@ -35,7 +35,7 @@
   },
   "homepage": "https://github.com/seek-oss/html-sketchapp-cli#readme",
   "dependencies": {
-    "@brainly/html-sketchapp": "^1.0.0",
+    "@brainly/html-sketchapp": "^1.1.0",
     "es6-promisify": "^6.0.0",
     "find-up": "^2.1.0",
     "get-port": "^3.2.0",

script/src/generateAlmostSketch.js

@@ -1,14 +1,40 @@
 import Page from '@brainly/html-sketchapp/html2asketch/page.js';
 import Document from '@brainly/html-sketchapp/html2asketch/document.js';
 import Text from '@brainly/html-sketchapp/html2asketch/text.js';
-import SymbolMaster from '@brainly/html-sketchapp/html2asketch/symbolMaster.js';
 import nodeToSketchLayers from '@brainly/html-sketchapp/html2asketch/nodeToSketchLayers.js';
+import SymbolMaster from '@brainly/html-sketchapp/html2asketch/symbolMaster.js';
 
-const getAllLayers = async item => {
+const getAllLayers = async (item, symbolMastersByName = {}) => {
   const itemAndChildren = [item, ...item.querySelectorAll('*')];
 
-  const layerPromises = Array.from(itemAndChildren)
-    .map(node => nodeToSketchLayers(node));
+  const symbolInstanceChildren = new Set([
+    ...item.querySelectorAll('[data-sketch-symbol-instance] *')
+  ]);
+
+  const layerPromises = Array.from(itemAndChildren).map(node => {
+    if (node.dataset.sketchSymbolInstance) {
+      const symbolName = node.dataset.sketchSymbolInstance;
+
+      if (!(symbolName in symbolMastersByName)) {
+        throw new Error(`Unknown symbol master: ${symbolName}`);
+      }
+
+      const symbolMaster = symbolMastersByName[symbolName];
+
+      const { left: x, top: y, width, height } = node.getBoundingClientRect();
+      const symbolInstance = symbolMaster.getSymbolInstance({ x, y, width, height });
+
+      symbolInstance.setName(symbolName);
+
+      return [symbolInstance];
+    } else if (symbolInstanceChildren.has(node)) {
+      // Anything nested under data-sketch-symbol-instance shouldn't be rendered,
+      // otherwise it'll be included in the symbolInstance itself.
+      return [];
+    }
+
+    return nodeToSketchLayers(node);
+  });
 
   const layers = await Promise.all(layerPromises);
 
@@ -56,22 +82,32 @@ export function setupSymbols({ name }) {
 }
 
 export async function snapshotSymbols({ suffix = '' }) {
-  const symbolPromises = Array.from(document.querySelectorAll('[data-sketch-symbol]'))
-    .map(async item => {
-      const name = item.dataset.sketchSymbol;
-      const { left: x, top: y } = item.getBoundingClientRect();
-      const symbol = new SymbolMaster({ x, y });
+  const nodes = Array.from(document.querySelectorAll('[data-sketch-symbol]'));
 
-      symbol.setName(`${name}${suffix}`);
+  const symbolMastersByName = nodes.reduce((obj, item) => {
+    const name = item.dataset.sketchSymbol;
+    const { left: x, top: y } = item.getBoundingClientRect();
 
-      const layers = await getAllLayers(item);
+    const symbol = new SymbolMaster({ x, y });
+    symbol.setName(`${name}${suffix}`);
 
-      layers
-        .filter(layer => layer !== null)
-        .forEach(layer => symbol.addLayer(layer));
+    obj[name] = symbol;
 
-      return symbol;
-    });
+    return obj;
+  }, {});
+
+  const symbolPromises = nodes.map(async item => {
+    const name = item.dataset.sketchSymbol;
+    const symbol = symbolMastersByName[name];
+
+    const layers = await getAllLayers(item, symbolMastersByName);
+
+    layers
+      .filter(layer => layer !== null)
+      .forEach(layer => symbol.addLayer(layer));
+
+    return symbol;
+  });
 
   const symbols = await Promise.all(symbolPromises);