lazui

The lazy UI framework. Get lazui ... do less ... deliver more.

lazui is pronounced "lazy", as in "Lazy loading ... ".

introduction

lazui is a JavaScript library that allows you to create interactive websites and single page apps with less work.

lazui extends the attribute space of typical HTML to provide a rich set of functionality. It provides the JavaScript, so you don't have to.

lazui gives you access to the best ideas from htmx, lighterHTML, Knockout, Turbo and Stimulus and Vue

lazui has a small core (less than 8K) and incremental loading of just the parts you use. Or, you can create a custom bundle for one time loading.

motivation

There are great features in the above libraries, you should not have to choose just one approach.

features

Here is a short list of features, visit lazui.org for a graph of features and benefits.

without writing JavaScript

• attributes for state management
• attributes for event management
• attributes for content loading and targeting
• JavaScript ${templates in HTML}
• server sent events
• web sockets
• form processing
• client side routing
• charts and gauges
• remote data synchronization

with writing JavaScript

• html template function'
• render function
• custom attributes and controllers
• web components (custom elements)
• an exensible basic web server with support for MArkdown processing, server sent events, web sockets, and remote data synchronization

quick start

for HTML

<template id="goodbye">
    Goodbye ${userName}
</template>
<div data-lz:src="#goodbye" data-lz:state='{userName:"John"}' data-lz:trigger="click dispatch:load" data-lz:target="outer">
    Hello, ${userName}. The date and time is ${new Date().toLocaleTimeString()}. Click to leave.
</div>

<template data-lz:state="person">
{
    name: "Mary",
    age: 21,
    married: false
}
</template>
<form data-lz:usestate="person" data-lz:controller="/controllers/lz/form.js">
    <input data-lz:bind="name" type="text" placeholder="name">
    <input data-lz:bind="age" type="number" placeholder="age">
    <input data-lz:bind="married" type="checkbox"> Married
</form>
<div data-lz:usestate="person">${name}'s age is ${age}${married ? " and married" :""}.</div>

for JavaScript

<script>
const {render,html} = lazui;
let count = 0;
const clicked = (event) => {
    count++;
    event.target.innerText = `Click count: ${count}`;
};
render(document.currentScript,
    html`<div onclick=${clicked}>Click count: ${count}</div>`,
    {where:"afterEnd"});
</script>

Ok, now it's time to dive in!

Change History (Reverse Chronological Order)

2023-12-14 v0.0.67-a fixed issue with boolean attributes

2023-12-14 v0.0.66-a enabled support for variables in directive resolution so that they do not require serializing

2023-12-14 v0.0.65-a added lz:render attribute directive

2023-12-11 v0.0.64-a added specialized flexroute and flexrouter back for client side use

2023-12-09 v0.0.63-a fixed issue with delete property on state proxy not returning true

2023-12-09 v0.0.62-a fixed issue with setState not having default 3rd argument, fixed issue with state updating on nested objects when oldValue was undefined

2023-12-07 v0.0.61-a completed upgrade to separate flexrouter package

2023-11-16 v0.0.60a corrected flexrouter path in defaults.

2023-11-16 v0.0.59a final changes to support ws in place of websockets.

2023-11-16 v0.0.52-58a production router port and host management.

2023-11-16 v0.0.51a switched to using flexrouter. documentation forthcoming.

2023-11-04 v0.0.50a final attempt to fix websocket CSP issue before CSPs are removed

2023-11-04 v0.0.49a another attempt to fix websocket CSP issue

2023-11-04 v0.0.48a attempt to fix websocket CSP issue

2023-11-04 v0.0.47a added search capability to TOC

2023-11-02 v0.0.46a removed lz:showsource in favor of examplify, added reltive pathing to embedded routes, enhanced docs

2023-11-01 v0.0.45a added lz:usedefaults option, optimized initial load, enhanced docs

2023-11-01 v0.0.44a fixed issue with setting state properties that use dot notation, enhanced docs

2023-10-31 v0.0.43a removed remote data sync for now, changed remote state to use router, added state lifecycle events, enhanced docs

2023-10-31 v0.0.42a enhanced docs, fixed issue related to styles not being applied for documents loaded via lz:src

2023-10-31 v0.0.41a updated version of examplify, changed lz:on to `lz:trigger, fixed issues with multi-target updates, enhanced docs

2023-10-30 v0.0.40a updated version of examplify

2023-10-30 v0.0.39a fixed router issue dependency on examplify when deployed

2023-10-30 v0.0.38a fixed issue backtick substitution and highlightjs, documented examplify

2023-10-29 v0.0.37a fixed issue with handler loading for routes

2023-10-29 v0.0.36a added use of examplify

2023-10-29 v0.0.35a trying out lazui protocol idea

2023-10-29 v0.0.34a added client side markdown support

2023-10-29 v0.0.32a-33a performance optimizations

2023-10-28 v0.0.31a another index.md bug fix post speed improvements

2023-10-28 v0.0.30a fixed example bug on index.md

2023-10-28 v0.0.29a page load speed improvements

2023-10-28 v0.0.28a documentation updates, fixed issues that appeared when minification was turned on

2023-10-28 v0.0.27a documentation updates, fixed issue with sourcing state remotely, fixed issue with template hooks

2023-10-28 v0.0.26a documentation updates, client side routing refinements, fixed toc nesting issue, added custom element git-issue-ref.

2023-10-27 v0.0.25a documentation updates, client side routing refinements, form binding refinements

2023-10-26 v0.0.23a documentation updates, client side routing refinements, form binding refinements

2023-10-26 v0.0.22a documentation updates, form handling refinements, client side routing refinements

2023-10-25 v0.0.21a documentation updates, form handling refinements, rendering refinements

2023-10-25 v0.0.20a documentation updates, refinement to TOC handling

2023-10-25 v0.0.19a documentation updates, refinement to data sync

2023-10-24 v0.0.18a documentation updates, refinement to WordChart processing

2023-10-23 v0.0.17-a server data sync, content updates

2023-10-22 v0.0.16-a size optimizations

2023-10-21 v0.0.11-a thru v0.0.15-a Getting sse, pubsub, ws working with CDN load

2023-10-21 v0.0.10-a Added lz:usehighlighter directive.

2023-10-21 v0.0.5-9-a Enabling CDN loading

2023-10-21 v0.0.4-a Path correction for CDN loading

2023-10-21 v0.0.3-a Adding ability to load/run from CDN

2023-10-21 v0.0.2-a Documentation updates, optimizations, server bug fixes

2023-10-19 v0.0.1-a Initial Release.