Collection of usefull scripts to build instant app inside JSite Inspired by JSite

core.js

const html = (strings, ...values) => {
  const raw = String.raw({ raw: strings }, ...values);
  if (typeof document === "undefined") return raw;
  const el = document.createElement("div");
  el.innerHTML = raw;
  return el.firstElementChild || '';
};

const Fragment = ({ children }) => {
  if (typeof document === "undefined") {
    return Array.isArray(children) ? children.join("") : children;
  }

  const el = document.createDocumentFragment();

  if (Array.isArray(children)) {
    [].forEach.call(children, (item) => {
      if (children === null) return;
      render(el, item)
    });
  } else if (children != null) {
    render(el, children as Node | Element)
  }
  return el;
};


class Store extends Set {
  constructor(storeName) {
    super(JSON.parse(
      localStorage.getItem(storageName) || '[]')
    )
  }
  save() {
    localStorage.setItem(storageName, JSON.stringify([...this.entries()]));
  }
}

template.js

((d, ael) => {

// deps

// components

// logic

function main() {
    // TODO
}

ael('DOMContentLoaded', main)
})(document, addEventListener)
</script>
<pre><header><nav><input type="button" value=" ⋯ " /><h1>Title</h1><input type="button" value=" ? " /></nav><hr/></header><main><article><section>// Content //

- header
  - nav
- main
  - article
    - section
    - aside
- footer
</section><aside><input type="button" value=" C " />
<input type="button" value=" O " />
<input type="button" value=" N " />
<input type="button" value=" T " />
<input type="button" value=" R " />
<input type="button" value=" O " />
<input type="button" value=" L " />
<input type="button" value=" S " />
</aside></article></main><footer><hr/><nav><input type="button" value=" ⋯ " /><input type="button" value="  " /></nav>
</nav></footer></pre>
<style>
@import url("https://xn--artrs-nfb.jansons.id.lv/1990/styles.min.css");
hr {
  height: 0;
}
body > pre {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
header nav {
  height: auto;
  display: grid;
  grid-gap: 1ex;
  grid-template-columns: auto 1fr auto;
}
footer nav {
  height: auto;
  display: grid;
  grid-gap: 1ex;
  grid-template-columns: minmax(5ex, 50%);
  grid-auto-flow: column;
}
main article {
  display: grid;
  grid-template-columns: minmax(calc(5ex + 0.5ex), calc(5ex * 2 + 0.5ex)) 1fr;
  grid-auto-flow: column;
}
aside {
  order: -1;
}
/* styles */
</style>
<script>