@anywhichway/lazui
Version:
Single page apps and lazy loading sites with minimal JavaScript or client build processes.
204 lines (125 loc) • 7.27 kB
Markdown
# 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](https://htmx.org/), [lighterHTML](https://github.com/WebReflection/lighterhtml), [Knockout](https://knockoutjs.com/), [Turbo](https://turbo.hotwired.dev/) and [Stimulus](https://stimulus.hotwired.dev/) and [Vue](https://vuejs.org/)
`lazui` has a small core (less than 8K) and incremental loading of just the parts you use. Or, you can [create a custom bundle](./lazui.md/#creating-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](https://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
```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>
```
```html
<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
```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](https://lazui.org/docs/lazui.md)!
## 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.