protein-tree

Protein Tree – JS implementation

Usage no npm install needed!

<script type="module">
  import proteinTree from 'https://cdn.skypack.dev/protein-tree';
</script>

README

/**
 * Default ProteinTree format
 *
 * Example of ProteinTree:
 * let proteinTree = {
 *     project: {
 *         project: 'test-project',
 *         viewport: { height, width }
 *     },
 *     screens: [
 *         {
 *             name: 'test',
 *             project: 'test-project',
 *             states: ['default'],
 *             styles: '.animals__cat { background: url(cat.png) }',
 *             scripts: 'alert(\'!!!\')',
 *             markup: '<a class="animals" href="#"><span class="animals__cat" style="background: url(cat.png)">Cat</span></a>',
 *             variants: [{name: 'default', val: false}],
 *             data: {},
 *             viewport: { height, width },
 *             variations: [
 *               {
 *                  name: 'test_default',
 *                  project: 'test-project',
 *                  state: ['default'],
 *                  states: ['default'],
 *                  styles: '.animals__cat { background: url(cat.png) }',
 *                  scripts: 'alert(\'!!!\')',
 *                  markup: '<a class="animals" href="#"><span class="animals__cat" style="background: url(cat.png)">Cat</span></a>',
 *                  postHTMLTree: [{
 *                      tag: 'a',
 *                      attrs: {
 *                          class: 'test',
 *                          href: '#'
 *                      },
 *                     content: [{
 *                     tag: 'span',
 *                     attrs: {
 *                         class: 'animals__cat',
 *                         style: 'background: url(cat.png)'
 *                     },
 *                     content: ['Cat']
 *                 }],
 *                 variant: [{name:'default', val: false}],
 *                 variants: [{name:'default', val: false}],
 *                 data: {},
 *                 viewport: { height, width }
 *              },
 *              ...
 *             ]
 *         },
 *         ...
 *     ]
 * };
 *
 * @type {{project: Object, screens: Array}}
 */
let proteinTree = {
    project: {},
    screens: []
};

export default proteinTree;