JS Proof of Concept

[TheJaredWilcurt]

Need to set up a vanilla JS and Vue.js example using red-perfume to show how it can also be used for JS-based DOM updates.

Likely will need to produce a JSON file and save it to a specified output location. Then have the JS DOM code reference the JSON via a class key to get the atomized responses.

// rp.json
{
  ".cow": [
    "rp__a4",
    "rp__3wx",
    "rp__d7h"
  ]
}

// Vanilla JS
import rp from './rp.json';
const cow = document.getElementById('cow');
cow.classList.add(...rp.cow.split(' '));
// changes <div id="cow" class="moo"></div>
// to <div id="cow" class="moo rp__a4 rp__3wx rp__d7h"></div>

<div class="cow">Instead of this</div>
<div :class="rp.cow">In Vue you'd get the atomized classes this way</div>
<div class="rp__a4 rp__3wx rp__d7h">Which renders as this in the DOM</div>

<!-- More Vue examples -->
<ul>
  <li :class="[ rp.user, rp['user-acount'], rp['p-sm'] ]"></li>
  <li :class="{ isActive: rp.active }">
  <li :class="isOnline ? rp.online : rp.offline">
</ul>

import rp from './rp.json';
// ...
computed: {
  rp: function () {
    const output = {};
    Object.keys(rp).map(function (semanticClassName) {
      output[semanticClassName] = rp[semanticClassName].join(' ');
    });
    return output;
  }
}