<link rel="stylesheet" href="page/style.css"> <script type="module" src="page/codeblock.js"></script> <script type="module" src="page/scrollToTop.js"></script> <scroll-to-top> </scroll-to-top> <h1>DarkWiiPlayer/JS</h1> <section> <p style="text-align: center;"> A collection of <em>JavaScript modules</em> to make <em>front-end</em> easier. </p> </section> <section> <h2>Skooma.js</h2> <p> Skooma lets you <strong>generate DOM nodes in JavaScript</strong>. <a class="fancy" href="page/skooma.html">Read more</a> </p> <p> <h3 class="all-unset"><b>Code Sample</b>:</h3> <code-block> import {html} from 'skooma.js' let div = html.div([ html.h1('Hello, World!'), html.p('Here is some text', {class: ["class_a", "class_b"]}) html.button("Click Me!", { click: event => console.log(event) }) ]) </code-block> </p> </section> <section> <h2>Element</h2> <p> A helper function that adds many convenient features to classes for custom elements. <a class="fancy" href="page/element.html">Read More</a> </p> <p> <h3 class="all-unset"><b>Code Sample</b>:</h3> <code-block> import element from 'element.js' element(class MyElement extends HTMLElement { static attributes = { foo: true } fooChanged(oldFoo, newFoo) { console.log(`Foo changed from ${oldFoo} to ${newFoo}`) render() } $render() { /* ... */ } }) </code-block> </p> </section> <section> <h2>Listener</h2> <p> Like a normal object, except you can register callbacks for property changes. <a class="fancy" href="page/listener.html">Read More</a> </p> <p> <h3 class="all-unset"><b>Code Sample</b>:</h3> <code-block> import listener from 'listener.js' const user = listener({name: "John Doe"}) user.listen('name', value => console.warn(`User name has changed to ${value}`)) </code-block> </p> </section> <section> <h2>Debounce</h2> <p> Debounces data like user input or events that can occur in a burst. <a class="fancy" href="page/debounce.html">Read More</a> </p> <p> <h3 class="all-unset"><b>Code Sample</b>:</h3> <code-block> import debounce from 'debounce.js' input.addEventListener("change", debounce(event => update(input.value))) </code-block> </p> </section>