feat(middleware): Add 'symbolLayerMiddleware' API (#39)

You can now provide a `symbolLayerMiddleware` function which allows you to modify each layer before it's added to a symbol. Most notably, this will allow you to set resizing constraints via html-sketchapp's new `setResizingConstraint` API.

README.md

@@ -132,6 +132,75 @@ For example:
 $ html-sketchapp --url http://localhost:3000 --out-dir dist --debug
 ```
 
+### Symbol Layer Middleware
+
+Symbol Layer Middleware allows you to call out to any APIs that may be exposed on the underlying html-sketchapp layer.
+
+The current usecase for this is the new `layer.setResizingConstraint` API which allows you to configure how a layer should behave when a symbol is resized.
+
+#### Requiring a file
+
+The below uses the string argument to `require` in a file that defines what resizing a layer should have applied to it. In the below case, fixing the layer to the top and left.
+
+```bash
+$ html-sketchapp --symbol-layer-middleware symbol.layer.middleware.js
+```
+
+```js
+module.exports = (args) => {
+  const { layer, RESIZING_CONSTRAINTS } = args;
+
+  layer.setResizingConstraint(RESIZING_CONSTRAINTS.LEFT, RESIZING_CONSTRAINTS.TOP);
+};
+```
+
+#### Inline function
+
+If you use the config file you can provide an inline function and avoid creating a separate file:
+
+```bash
+$ html-sketchapp --config config.js
+```
+
+```js
+module.exports = {
+  symbolLayerMiddleware: (args) => {
+    const { layer, RESIZING_CONSTRAINTS } = args;
+
+    layer.setResizingConstraint(RESIZING_CONSTRAINTS.LEFT, RESIZING_CONSTRAINTS.TOP);
+  }
+};
+```
+
+#### Symbol layer middleware arguments
+
+The function that is called has several arguments passed into it so you can provide different resizing options for different types of layers.
+
+The following things are passed into symbol
+- layer: the html-sketchapp layer instance
+- SVG: The SVG class for type checking of layer
+- Text: The Text class for type checking of layer
+- Rectangle: The Rectangle class for type checking of layer
+- ShapeGroup: The ShapeGroup class for type checking of layer
+- RESIZING_CONSTRAINTS: contains friendly names for `setResizingConstraint` API.
+
+Handling SVGs differently from other layers:
+
+```js
+module.exports = {
+  symbolLayerMiddleware: (args) => {
+    const { layer, SVG, RESIZING_CONSTRAINTS } = args;
+
+    layer.setResizingConstraint(RESIZING_CONSTRAINTS.LEFT, RESIZING_CONSTRAINTS.TOP);
+
+    if(layer instanceof SVG) {
+      layer.setResizingConstraint(RESIZING_CONSTRAINTS.TOP, RESIZING_CONSTRAINTS.LEFT, RESIZING_CONSTRAINTS.WIDTH, RESIZING_CONSTRAINTS.HEIGHT);
+    }
+  }
+};
+
+```
+
 ### Puppeteer args
 
 If you need to provide command line arguments to the browser instance via [Puppeteer](https://github.com/GoogleChrome/puppeteer), you can provide the `puppeteer-args` option.

bin/cli.js

@@ -50,6 +50,9 @@ require('yargs')
       alias: 'd',
       describe: 'Put into debug mode to see what the tool is doing'
     },
+    'symbol-middleware': {
+      describe: 'Path to symbol middleware to run when looping over sketch layers'
+    },
     'puppeteer-args': {
       type: 'string',
       describe: 'Set of command line arguments to be provided to the Chromium instance via Puppeteer, e.g. --puppeteer-args="--no-sandbox --disable-setuid-sandbox"'
@@ -83,6 +86,17 @@ require('yargs')
 
         const browser = await puppeteer.launch(launchArgs);
 
+        const { symbolLayerMiddleware: argSLM } = argv;
+        let symbolLayerMiddleware;
+
+        if (argSLM) {
+          if (typeof argSLM === 'string') {
+            symbolLayerMiddleware = require(path.resolve(process.cwd(), argSLM));
+          } else if (typeof argSLM === 'function') {
+            symbolLayerMiddleware = argSLM;
+          }
+        }
+
         try {
           const page = await browser.newPage();
 
@@ -122,7 +136,7 @@ require('yargs')
               const deviceScaleFactor = typeof scale === 'undefined' ? 1 : parseFloat(scale);
               await page.setViewport({ width, height, deviceScaleFactor });
               await page.evaluate(`generateAlmostSketch.snapshotTextStyles({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
-              await page.evaluate(`generateAlmostSketch.snapshotSymbols({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
+              await page.evaluate(`generateAlmostSketch.snapshotSymbols({ suffix: "${hasViewports ? `/${viewportName}` : ''}", symbolLayerMiddleware: ${symbolLayerMiddleware} })`);
             }
           }
 

script/generateAlmostSketch.js

@@ -1,11 +1,15 @@
 import htmlSketchapp from '@brainly/html-sketchapp'
+import { RESIZING_CONSTRAINTS } from '@brainly/html-sketchapp/html2asketch/helpers/utils';
 
 const {
   Page,
   Document,
   Text,
   nodeToSketchLayers,
-  SymbolMaster
+  SymbolMaster,
+  SVG,
+  Rectangle,
+  ShapeGroup
 } = htmlSketchapp;
 
 const getAllLayers = (item, symbolMastersByName = {}) => {
@@ -81,7 +85,7 @@ export function setupSymbols({ name }) {
   page.setName(name);
 }
 
-export function snapshotSymbols({ suffix = '' }) {
+export function snapshotSymbols({ suffix = '', symbolLayerMiddleware = () => {} }, ) {
   const nodes = Array.from(document.querySelectorAll('[data-sketch-symbol]'));
 
   const symbolMastersByName = nodes.reduce((obj, item) => {
@@ -104,7 +108,10 @@ export function snapshotSymbols({ suffix = '' }) {
 
     layers
       .filter(layer => layer !== null)
-      .forEach(layer => symbol.addLayer(layer));
+      .forEach(layer => {
+        symbolLayerMiddleware({layer, SVG, Text, ShapeGroup, Rectangle, RESIZING_CONSTRAINTS});
+        symbol.addLayer(layer);
+      });
 
     return symbol;
   });