Html Sketchapp Versions Save

Fixes

• support for Sketch 50 - fix text color issue ( https://github.com/brainly/html-sketchapp/issues/97 ) and shared text styles issue
• scale SVG instead of resizing it (correctly calculates border radius)

• fix issue where text inside of symbols was not editable sometimes
• fix shadow obj spread miscalculation by @yakunins 👏
• fix support for data: images by @simon360 👏
• fix ability to set constraints on text layers by @burakukula 👏

Improvements

• ID setter for SymbolMaster (public setId(id: string);)
• ability to add additional custom data to every symbol, layer, etc.

public setUserInfo(key: string, value: any, scope?: string): void;
public getUserInfo(key: string, scope?: string): any;

this info can then be pulled by other Sketch plugin and used e.g. to prepare more useful handoff for developers (e.g. including names/code of symbols used by designer).

• allow to explicitly set size of Symbol instead of always automatically calculating it based on its children

new SymbolMaster({x: 10, y: 10, width: 100, height: 200}); //symbol size explicitly set
new SymbolMaster({x: 10, y: 10}); //symbol size will be automatically calculated based on its children sizes

• do not include some of the optional, or deprecated, fields in the .asketch output

• [plugin] use build-in Sketch 'ui' module to show dialogs - https://developer.sketchapp.com/reference/api/#ui

• [plugin] new success message

New

• ability to set resizing constraints by @ryanseddon

layer.setResizingConstraint(RESIZING_CONSTRAINTS.LEFT, RESIZING_CONSTRAINTS.TOP);

Fix

• avoid empty groups by not traversing SVG nodes in nodeTreeToSketchGroup by @TheReincarnator
• clean up tests by @kdzwinel

• Artboard no longer fails if options object is not provided
• Plugin now better supports nested structures (e.g. created by nodeTreeToSketchPage) - import doesn't fail if one of the layers fail.
• zoomToFit no longer fails if there is nothing to zoom to

Somehow npm package was published w/o package.json and README.md. I have no idea how this is even possible 😵

This release is 90% handmade by @TheReincarnator 👏Thank you!

Breaking

If you were importing models (e.g. Page, Document, Text, SymbolMaster etc.) like so:

import Document from '@brainly/html-sketchapp/html2asketch/document';
import SymbolMaster from '@brainly/html-sketchapp/html2asketch/symbolMaster';

please update to:

import {Document, SymbolMaster} from '@brainly/html-sketchapp';

That's it ✨

New

• two new top level methods 🔥
  • nodeTreeToSketchGroup - that walks given DOM subtree recursively and creates a tree of Sketch groups and layers
  • nodeTreeToSketchPage - that wraps nodeTreeToSketchGroup and crates a page with an (optional) Artboard where all groups and layers are placed

• Artboard object
• index.js file that lets you import html-sketchapp in a convenient way

import {Document, Page, Text, nodeToSketchLayers} from '@brainly/html-sketchapp';

• TypeScript files with type definitions
• skipSystemFonts option

some websites or component libraries use font-family lists starting with OS-specific fonts, if the option 'skipSystemFonts' is enabled, we skip those fonts to choose a font Sketch is capable of.

• getRectangleName option that gives you full control over layer names

Improved

• Fixed bug in the Page object where width and height were mixed up
• ES5 transpilation for better compat
• Electron compat improvements (BCR)

• <svg style='background:red'><circle></svg> - circle will now be rendered in the front of red background (fix by @markdalgleish )

Support for styling SVG containers by @markdalgleish

Breaking

• nodeToSketchLayers is no longer async
• built Sketch plugin is no longer part of the repo. Instead, it will be included with each release (and you can always build it yourself from sources)

Features

• support for white-space CSS property by @KimDal-hyeong
• support for external SVG (<img src='pizza.svg' />)
• support for srcset (<img srcset=)
• sketch plugin improvements:
  • show error dialog when some of the layers can't be imported
  • after import reset zoom and position to show whole page

Fixes

• improved hidden node recognition
• improved stability of nodeToSketchLayers (it was crashing for some svg nodes, now the error is being caught)
• better bounding rect calculation on text by @KimDal-hyeong
• update @skpm/build to avoid security vuln in one of its deps

Other

• e2e test for nodeToSketchLayers
• mention related projects/articles in the docs

• support SVG child layers
• treat detached DOM nodes as invisible

Symbol Instances - #63 by @mxmul Inline SVG support - #47 by @KimDal-hyeong, @jeroenransijn and @kdzwinel