An small experimental library inspired by jQuery, Solidjs and @github/catalyst. It can't be used in production as it is not fully typesafe, tested and robust.
To install the core library enter the following command:
npm install @jsimple/core
To install the additional dom rendering library enter the following command:
npm install @jsimple/dom-render
To install the additional custom element library enter the following command:
npm install @jsimple/custom-element
If you need to fetch data and cache it the fetcher package is here for you:
npm install @jsimple/fetcher
The core library includes a reactive system that makes building dom interaction easier.
// Javascript file import $ from "@jsimple/core"; const btn = $.select("#btn"); const container = $.select("#container"); const [isOpen, setIsOpen] = $.signal(false); $.effect(() => { container?.html(` <div style='display: ${isOpen() ? "block" : "none"}'> Lorem ipsum </div> `); }); btn?.onClick(() => { setIsOpen(!isOpen()); });
<!-- HTML file--> <button id="btn" type="button">open</button> <div id="container"></div>
You can read more on this package here: @jsimple/core
Using the dom-render package you can simplify this markup like the following example. It is heavily inspired by Alpinejs.
<!-- HTML file--> <div data-define="app-component"> <button id="btn" type="button" $click="setIsOpen(!isOpen())">open</button> <div $display="isOpen()">lorem ipsum</div> </div>
// Javascript file import $ from "@jsimple/core"; import { DOMRender } from "@jsimple/dom-render"; function AppComponent() { const [isOpen, setIsOpen] = $.signal(false); return {isOpen, setIsOpen} } run([AppComponent])
or without the run function:
// Javascript file import $ from "@jsimple/core"; import { DOMRender } from "@jsimple/dom-render"; const [isOpen, setIsOpen] = $.signal(false); DOMRender({isOpen, setIsOpen}, $.select("[data-define='app']"))
You can read more on this package here: @jsimple/dom-render
If you'd like to use the dom-render APIs in custom elements we provide decorators wrappers to abstract some of the plumbing:
<!-- HTML file--> <fancy-button></fancy-button>
// Javascript file import { define, s } from "@jsimple/custom-element"; @define("fancy-button") export class FancyButton extends HTMLElement { @s(false) isOpenSignal: TSignal<boolean>; connectedCallback() { this.html(` <div> <button type="button" $click="setIsOpen(!isOpen())">open</button> <div $display="isOpen()">lorem ipsum</div> </div> `); } }
If you'd like to use it without decorators you can do as follow:
import $ from "@jsimple/core"; import { DOMRender } from "@jsimple/dom-render"; export class FancyButton extends HTMLElement { isOpen: TSignal<boolean>[0]; setIsOpen: TSignal<boolean>[1]; constructor() { super(); [this.isOpen, this.setIsOpen] = $.signal(true); } connectedCallback() { this.html(` <div> <button type="button" $click="setIsOpen(!isOpen())">open</button> <div $display="isOpen()">lorem ipsum</div> </div> `); DOMRender( { isOpen: this.isOpen, setIsOpen: this.setIsOpen, }, this ); } } customElements.define("fancy-button", FancyButton);
You can read more on this package here: @jsimple/custom-element
Using the fetcher package you can fetch and cache data easily.
<!-- HTML file--> <div data-define="component-with-data" class="component"> <img src="./spinner.svg" $display="isLoading()" class="spinner" width=24 height=24 alt='spinner'/> <div $display="!isLoading()" class="card"> <p class="font-bold uppercase text-14 text-slate-900">{data()?.name}</p> <span>{data()?.body}</span> </div> </div>
// Javascript file import { run } from "@jsimple/dom-render"; import { GET, load } from "@jsimple/fetcher"; const getTodos = GET<TodoData>("https://jsonplaceholder.typicode.com/comments/1"); function ComponentWithData() { const { data, isLoading } = load(getTodos, ["keyString"]); return { data, isLoading, }; } run([ComponentWithData]);
You can read more on this package here: @jsimple/fetcher