index.html

<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>

<a class="ribbon" href="https://github.com/darkwiiplayer/js">
	View on Github
</a>

<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>
	<p>
	</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>State</h2>
	<p>
		Utility class to monitor state changes on an object using a Proxy and events.
		Changes are batched and processed in a microtask.
		<a class="fancy" href="page/state.html">Read More</a>

		<code-block>
			const state = new State()
			speaker.meepChanged = value => console.log(`meep ${value}`)
			state.proxy.meep = "Heat from fire"
			state.proxy.meep = "Fire from heat"
			state.proxy.meep = "moop"
			// outputs: "meep moop"
		</code-block>

		No, this still has nothing to do with playing audio.
	</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 =&gt; update(input.value)))
		</code-block>
	</p>
</section>