This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.
Basically used https://github.com/brainly/html-sketchapp and https://github.com/seek-oss/html-sketchapp-cli
Install the dependencies
npm install
cd sketch
npm installcd ..
npm run webpack
npm run startOpen a new tab in the terminal, the previous tab should be open and listen to the plugin changes
cd sketch
npm run serveVue app url http://localhost:8080/ setting in server/inject.js
To set group names in a sketch: group1, app-container etc.. you need to install data attr to node.
data-gname="child-block" - group name in sketch
data-rname="color rect" - rectangle name
Example
<div id="app" data-gname="app">
<div data-gname="parent-block" class="test">
<Block color="red" name="rect red"/>
<Block color="black" name="rect black"/>
<Block color="green" name="rect green"/>
</div>
<div data-gname="parent-block2" class="test">
<Block color="red" name="rect red"/>
<Block color="black" name="rect black"/>
<Block color="green" name="rect green"/>
</div>
</div>
.....Block.vue component
<div :data-rname="name" data-gname="child-block" :class="color" class="block">
Class {{color}}
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent