@anywhichway/lazui/index.html

Single page apps and lazy loading sites with minimal JavaScript or client build processes.

<!-- script src="https://www.unpkg.com/@anywhichway/lazui" data-lz:usedefaults -->
<script src="https://www.unpkg.com/@anywhichway/lazui" data-lz:usedefaults></script>
<title>lazui: Web UI's with less work</title>
<div style="min-height:2em;width:500px;margin:auto" data-lz:src="./docs/header.html"></div>
<p style="width:100%;text-align:center;font-size:20px">The lazy UI framework. Get lazui ... do less ... deliver more.</p>
<p style="width:100%;text-align:center;font-size:20px">Currently in early development.</p>
<p style="width:100%;text-align:center"><a href="#quick-start">Quick Start</a> or <a href="./docs/lazui.md">Dive In</a></p>
<div style="margin:auto;width:70%">
<h2 id="introduction" tabindex="-1">introduction</h2>
<ul>
<li>A JavaScript library that allows you to create interactive websites and single page apps with less work.</li>
<li>Extends the attribute space of typical HTML to provide a rich set of functionality.</li>
<li>Provides the JavaScript, so you don't have to.</li>
</ul>
<h2 id="all-the-things" tabindex="-1">all the things</h2>
<template data-lz:state="lazuiwords">
{
    type: 'WordTree',
    options:{
        maxFontSize: 20,
        wordtree: {
            format: 'implicit',
            word: 'lazui'
        }
    },
    data: [
        ['Phrases'],
        ['lazui as in pronounced lazy'],
        ['lazui as in lazy loading'],
        ['lazui as in do less and deliver more'],
        ['lazui has benefit less client side JavaScript to write'],
        ['lazui has benefit small core(7k minimized and compressed)'],
        ['lazui has benefit incremental loading'],
        ['lazui has benefit no virtual DOM'],
        ['lazui has benefit no build process'],
        ['lazui has benefit no custom server required'],
        ['lazui has benefit choice of multiple development paradigms'],
        ['lazui has benefit Markdown friendly'],
        ['lazui features attributes for styling and accessibility'],
        ['lazui features attributes for state management'],
        ['lazui features attributes for event management'],
        ['lazui features attributes for content loading and targeting'],
        ['lazui features attributes for content control'],
        ['lazui features without writing JavaScript $&lcub;templates in HTML}'],
        ['lazui features without writing JavaScript server sent events'],
        ['lazui features without writing JavaScript web sockets'],
        ['lazui features without writing JavaScript form processing'],
        ['lazui features without writing JavaScript client side routing'],
        ['lazui features without writing JavaScript Markdown transformation'],
        ['lazui features without writing JavaScript charts and gauges'],
        ['lazui features without writing JavaScript document table of contents'],
        ['lazui features without writing JavaScript remote data synchronization'],
        ['lazui features with writing JavaScript html template function'],
        ['lazui features with writing JavaScript render function'],
        ['lazui features with writing JavaScript custom attributes and controllers'],
        ['lazui features with writing JavaScript web components (custom elements)'],
        ['lazui features with writing JavaScript advanced configuration'],
        ['lazui features with writing JavaScript configurable bundling'],
        ['lazui features with writing JavaScript pre-built server'],
        ['lazui draws from htmx'],
        ['lazui draws from lighterHTML'],
        ['lazui draws from Turbo and Stimulus'],
        ['lazui draws from Vue'],
        ['lazui draws from Lit-Element'],
        ['lazui draws from Riot']
    ]
}
</template>
<div id="lazuiwordtree" data-lz:controller="/controllers/lz/chart.js" data-lz:usestate="lazuiwords" data-lz:options='{controller:{redirectEvents:true,packages:["wordtree"]}}'></div>
<style>
    .wordtree-leaf {
        font-style: italic;
        cursor: pointer;
    }
</style>
<script>
(() => {
    const slugs = {
        "lazy loading": "lazy-loading",
        "small core": "introduction",
        "reduced or no JavaScript": "introduction",
        "virtual DOM": "dependency-tracking",
        "choice of multiple development paradigms": "choosing-a-development-paradigm",
        "Markdown friendly": "working-with-markdown",
        "styling and accessibility": "styling-and-accessibility",
        "control": "content-control",
        "state management": "using-state",
        "event management": "handling-events",
        "loading and targeting": "loading-content",
        "${templates in HTML}":"how-to-be-lazui",
        "server sent events":"server-sent-events",
        "web sockets":"web-sockets",
        "form processing":"with-forms",
        "client side routing":"client-side-routing",
        "Markdown transformation":"client-side-routing",
        "charts and gauges":"charts",
        "document table of contents":"document-table-of-contents",
        "remote data synchronization":"remote-data-synchronization",
        "html template function":"html",
        "render function":"render",
        "custom attributes and controllers":"creating-custom-attribute-directives",
        "web components (custom elements)":"creating-custom-elements",
        "advanced configuration":"advanced-configuration",
        "configurable bundling":"creating-a-custom-bundle",
        "pre-built server":"basic-server",
        "htmx":"htmx",
        "lighterHTML":"lighterhtml",
        "Knockout":"knockout",
        "Turbo and Stimulus":"turbo-and-stumulus",
        "Vue":"vue",
        "Lit-Element":"lit-element",
        "Riot":"riot"
    };
    const el = document.getElementById("lazuiwordtree");
    let __LABEL__ = "";
    el.addEventListener("click",(event) => {
        const {label,targets} = el.getLabel(event.target);
        if(slugs[__LABEL__]) {
            window.location.href = `/docs/lazui.md#${slugs[__LABEL__]}`;
        }
    });
    el.addEventListener("mouseenter",(event) => {
        if(event.target.classList.contains("wordtree-leaf")) {
            const {label,targets} = el.getLabel(event.target);
            __LABEL__ = label;
        } 
    });
    el.addEventListener("mouseleave",(event) => {
        if(event.target.classList.contains("wordtree-leaf")) {
            __LABEL__ = "";
        } 
    });
    el.addEventListener("ready",() => {
        for(const txt of el.querySelectorAll('[wordtreeleaf="true"]')) {
            const {label,targets} = el.getLabel(txt);
            if(slugs[label]) {
                txt.setAttribute("class","wordtree-leaf");
            }
        }
    });
})();
</script>
<h2 id="quick-start" tabindex="-1">quick start</h2>
<p>Load <code>lazui</code> from a CDN</p>
<pre><code class="language-html">&lt;script src=&quot;https://www.unpkg.com/@anywhichway/lazui&quot;&gt;&lt;/script&gt;
</code></pre>
<h3 id="for-html" tabindex="-1">for HTML</h3>
<pre><code class="language-!html">&lt;div data-lz:state=&quot;{clickCount:0}&quot; onclick=&quot;this.getState().clickCount++&quot;&gt;
    Click Count: ${clickCount}
&lt;/div&gt;
</code></pre>
<pre><code class="language-html">&lt;template id=&quot;goodbye&quot;&gt;
    Goodbye ${userName}
&lt;/template&gt;
&lt;div data-lz:src=&quot;#goodbye&quot; data-lz:state='{userName:&quot;John&quot;}' data-lz:trigger=&quot;click dispatch:load&quot; data-lz:target=&quot;outer&quot;&gt;
    Hello, ${userName}. The date and time is ${new Date().toLocaleTimeString()}. Click to leave.
&lt;/div&gt;
</code></pre>
<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>
<pre><code class="language-html">&lt;template data-lz:state=&quot;person&quot;&gt;
{
    name: &quot;Mary&quot;,
    age: 21,
    married: false
}
&lt;/template&gt;
&lt;form data-lz:usestate=&quot;person&quot; data-lz:controller=&quot;/controllers/lz/form.js&quot;&gt;
    &lt;input data-lz:bind=&quot;name&quot; type=&quot;text&quot; placeholder=&quot;name&quot;&gt;
    &lt;input data-lz:bind=&quot;age&quot; type=&quot;number&quot; placeholder=&quot;age&quot;&gt;
    &lt;input data-lz:bind=&quot;married&quot; type=&quot;checkbox&quot;&gt; Married
&lt;/form&gt;
&lt;div data-lz:usestate=&quot;person&quot;&gt;${name}'s age is ${age}${married ? &quot; and married&quot; :&quot;&quot;}.&lt;/div&gt;
</code></pre>
<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>
<h3 id="for-javascript" tabindex="-1">for JavaScript</h3>
<pre><code class="language-!html">&lt;script&gt;
const {render,html} = lazui;
let count = 0;
const clicked = (event) =&gt; {
    count++;
    event.target.innerText = `Click count: ${count}`;
};
render(document.currentScript,
    html`&lt;div onclick=${clicked}&gt;Click count: ${count}&lt;/div&gt;`,
    {where:&quot;afterEnd&quot;});
&lt;/script&gt;
</code></pre>
<script>
(() => {
    const script = document.currentScript;
    document.addEventListener("lz:loaded",() => {
        const {render,html} = lazui;
        let count = 0;
        const clicked = (event) => {
            count++;
            event.target.innerText = `Click count: ${count}`;
        };
        render(script, html.nodes`<div onclick=${clicked}>Click count: ${count}</div>`,{where:"afterEnd"});
    });
});
</script>
<p>Ok, now it's time to <a href="/docs/lazui.md">dive in</a>!</p>
<div style="width:100%;text-align:center" data-lz:src="./docs/footer.html"></div>
</div>