JUL-JS

"Le J c le S"

Tiny reactivity library for people alergic to vanilla.

Features

• Tiny (<1kB minified gzipped)
• No build, just serve as static script
• Most of the nicites expected of a "reactive library" (state, effect, close to zero manual dom manipulation)

Why ?

After tasting the sweetness frontend frameworks provide, it just feels really annoying to go back to vanilla js. However in some cases it is way overkill to introduce such frameworks, or simply not possible because they generally come with a build step.

Here's where jul-js comes in, the goal is to be able introduce dynamic behavior into no build websites/microfrontends, with React-ish ergonomics, basically "for free" (<1kB lib bundle size).

And I'm a huge fan of the Alpine.js library by Caleb Porzio. This is probably all a big excuse for building a minimal version of it myself.

Overview

The idea is to "sprinkle" js behaviour on top of the html directly rather than having to bother whith manual dom stuff. Here's a basic example of what you can do with jul-js:

<script defer src="//unpkg.com/jul-js@latest"></script>

<div
  jul-state="{counter: 1}"
  jul-effect="if(counter == 5) alert('counter reached 5!')"
>
    <p jul-text="counter"></p>
    <button jul-on:click="counter++">inc</button>
</div>

A few things are happening here:

• jul-state="{counter: 1}": initializes a node-scope reactive variable counter with a value of 1.
• jul-state="{counter: 1}": initializes a node-scope reactive variable counter with a value of 1.
• jul-effect="if(counter == 5) alert('counter reached 5!')": effect reran each time one of its dependencies (counter in that case) changes.
• jul-text="counter": assigns and syncs the textContent property of the p node to the value of counter.
• jul-on:click="counter++": attaches an "onclick" event to the button, whenever the button is clicked, the reactive counter is mutated, thus all dependent get updated.

API

jul-state

Jul state is one of the most important constructs in jul-js. It initializes a new reactive piece of state. To access the value of a state, just use the name of its property. The state scoped to the node it is defined in.

<!-- Ok, counter in scope -->
<div jul-state="{counter: 1}">
  <p jul-text="counter"></p> <!-- textContent is 0 -->
</div>

<!-- Not ok, counter not in scope -->
<div jul-state="{counter: 1}"></div>
<p jul-text="counter"></p>

jul-effect

Jul effect goes hand in hand with jul-state, and is the basis on which most other constructs are built, like jul-text we just saw above.

<div
  jul-state="{counterA: 1, counterB: 1}"
  jul-effect="console.log(counterA)"
>
  <button jul-on:click="counterA++">A++</button>
  <button jul-on:click="counterB++">B++</button>
</div>

For context, here jul-on:click attaches an onclick listener to the button, more one that later.

The reactivity system used is based on "signals", each effect is run once on init, during this init call we link the effect to its dependencies (here "counterA"), thus each time the "counterA" value changes, the effect is ran again, but not when "counterB" changes.

As you can now guess, jul-text internally is just a jul-effect that sets the textContent property of the node it's attached to.

jul-on:

Jul-on

<div
  jul-state="{counterA: 1, counterB: 1}"
  jul-effect="console.log(counterA)"
>
  <button jul-on:click="counterA++">A++</button>
  <button jul-on:click="counterB++">B++</button>
</div>

jul-bind:

jul-show

jul-model

jul-for