Code generation
The parser is the core component of xlayers.app which maintain style consistency across all the different components by using a service called "SketchStyleParser" whose job is to convert raw Sketch AST properties to CSS rules using an adaptive strategy to maintain compatibility across Sketch versions from 49 to current. Which will serve as a common language to separate the interpretation logic from the viewer and code generator.
For this purpose, the parser is designed in 3 levels. The first is the visitor who will go through all the layers recursively, move the style scope when we encounter a Rectangle object and then at every layer the visitor will extract information and inject them into the AST.
The Group is used to extract layer special property such as position and size; the AttributeString parser is mostly used for retro compatibility with text property and Object is used all other styles such as shadow.
And then these are transform methods which are called by parsers to translate Sketch object from the AST to CSS rules.
+---------+
| |
+------------+ +----v----+ |
| | | | |
| Sketch AST +----> Visitor +----+
| | | |
+------------+ +----+----+
|
+---v----+
| |
| Parser |
| |
+---+----+
|
+-----v-------+
| |
| Transformer |
| |
+-------------+
To provide user a preview of their component we provide a view that will consume injected information by the parser and re-build the AST with component.
.
+-- SketchContainer
| +-- TreeViwer
| ...
| +-- SketchPage
| +-- SketchLayer
| +-- SketchLayer
| ...
The Code generation (internally called CodeGen) consume the same way as the view but unlike the view. The CodeGen will produce code via adapter.
+------------+ +----------------+ +-----------------------+ +------+
| | | | | | | |
| Sketch AST +----> CodegenService +----> AngularCodegenService +-----> Code |
| | | | | | | |
+------------+ +----------------+ +----------^------------+ +------+
|
+----------+-----------+
| |
| SharedCodegenService |
| |
+----------------------+
The "SharedCodegenService" is a common service to every adapter that can generate basic HTML/JSX and CSS. And exposed different basic methods to generate XML balise.