Lazy Toolbox - Client

A NodeJS toolbox made for a lazy development anywhere you need on your webpage.

Made to create a webpage as fast as possible. Explore more, focus more on developing features.

The source code is available on GitHub.

Index

• Installation (NPM)
• Updates
• Documentation
  • Client
    • LazyAnimate
    • LazyCaret
    • LazyClient
    • LazyDoc
    • LazyFile
    • LazyHtNetwork
    • LazyReact
    • LazySchedule
    • LazyTabularTextArea
    • LazyTheme
    • LazyView

Installation (NPM)

The installation is pretty straight forward:

1npm i @lazy-toolbox/client

Updates

v0.0.19 - LazyReact

New content were added:

• Add LazyDOMDiffing, LazyReact and LazyView class.

New modification were introduced:

• Add getNodeContent, getNodeType and stringToHTML to LazyView.

v0.0.16 - LazyInteractivity

New content were added:

• Add LazyTristate, LazyDualstate, LazyHashRouter and LazyInteractivity class.

New modification were introduced:

• Fixed the order of overloads.

v0.0.10 - Lazier doc

New content were added:

• Add onEvent, onEventAll, removeEvent and removeEventAll in LazyDoc.

New patches were introduced:

• Fixed overloading of some functions for .ts ans .mts files.

v0.0.9 - Basic support

New content were added:

• Add LazyTabularTextArea class.
• Add LazyFile class.

v0.0.8 - Document handler

New content were added:

• Add innerHTML to HTMLTag interface.

New modification were introduced:

• Changed newTag function from LazyDoc to handle multi-type for the returned value.

v0.0.7 - Happy animate

New content were added:

• Add LazyAnimate class.
• Add LazySlideContent class.

v0.0.4 - Socket frenzy

New content were added:

• Add LazySchedule class.

New modification were introduced:

• LazyClient has been entirely be remade to have an even smoother handling for sockets.

v0.0.0 - Initial commit

Documentation

This part explain all tools with examples if it's needed.

Client

LazyAnimate

1class LazyAnimate {
2    static loadDefault(): void;
3    static details(...detailsElements: HTMLDetailsElement[]): void;
4}

A lazy way to animate some content.

Example:

main.js

1const { LazyAnimate } = require('@lazy-toolbox/client');
2LazyAnimate.loadDefault();

index.html

1<details animated shr_duration="300" shr_ease="ease-out" exp_duration="300" exp_ease="ease-out">
2    <summary>A dummy title.</summary>
3    <content>Some inner content that will have a smooth transition now.</content>
4</details>

LazyCaret

1class LazyCaret {
2    static getCaretPosition(txtArea: HTMLTextAreaElement): number;
3    static setCaretPosition(txtArea: HTMLTextAreaElement, position: number): void;
4    static hasSelection(txtArea: HTMLTextAreaElement): boolean;
5    static getSelectedText(txtArea: HTMLTextAreaElement): string;
6    static setSelection(txtArea: HTMLTextAreaElement, start: number, end: number): void;
7    static tabulation(txtArea: HTMLTextAreaElement, tabLength: number = 4, antiTab: boolean = false): void;
8}

A lazy way to handle caret and tabulation on textarea.

Example:

1const { LazyCaret } = require('@lazy-toolbox/client');
2const textArea = document.querySelector('textarea');
3
4// Set the caret to the second position of a textarea
5LazyCaret.setCaretPosition(textArea, 2);
6
7// Get the current caret position
8console.log(LazyCaret.getCaretPosition(textArea));
9
10// Check if the textarea has the selection.
11if(LazyCaret.hasSelection(textArea)) {
12    // Get the selected text on the textarea
13    console.log(LazyCaret.getSelectedText(textArea));
14}
15
16// Set a selection on the textarea.
17LazyCaret.setSelection(textArea, 0, 2);
18
19// Do a tabulation on the textarea
20LazyCaret.tabulation(textArea);
21
22// Do an anti-tabulation on the textarea
23LazyCaret.tabulation(textArea, true);
24
25// By default, there's 4 spaces made for one tabulation.
26// This can be changed for whatever you want
27LazyCaret.tabulation(textArea, false, 2);

LazyClient

1class LazyClient {
2    constructor(host: string, port: number);
3    send(packet: string, obj: any): void.
4    sender(f: { (f:(packet: string, obj: any) => any): void }): void;
5    senders(...fns: { (f:(packet: string, obj: any) => any): void }[]): void;
6    hook(packet: string, fn: (obj: any, websocket: WebSocket) => void): void;
7    hooks(...hooking: {packet: string, fn: (obj: any, websocket: WebSocket) => void}[]): void;
8    hookObject(fns: {[packet:string]: (obj: any, websocket: WebSocket) => void}): void;
9    start(): void;
10    disconnect(): void;
11}

A lazy socket client to setup a websocket communication. Note: You can't use _packet as property name.

Example:

1const { LazyClient } = require('@lazy-toolbox/client');
2// Create our client handler, listening to the host at a specific port.
3const socketClient = new LazyClient('localhost', 6060);
4// Register a sender functions.
5socketClient.sender((sender) => {
6    const someTextArea = document.querySelector('.someClass');
7    someDiv.addEventListener('keyup', (e) => {
8        e.preventDefault();
9        // Send a packet called newPacket and some value to the server.
10        // This method is given to us by the LazyClient itself
11        // when registering all our sender.
12        sender('newPacket', {
13            prop: "some value",
14            prop2: 1010
15        });
16    });
17});
18// Register a packet as key and a function as value.
19// Whenever the sever send a packet contained in the keys,
20// it will trigger the function associated with it.
21socketClient.hookObject({
22    // Create a receiver that will execute a function everytime
23    // the server send a packet called message.
24    'message': (data) => {
25        console.log(JSON.stringify(data)); // Show the data received
26    },
27    // Create a receiver that will execute a function everytime
28    // the server send a packet called uwu.
29    'uwu': () => { console.log("owo"); }
30});
31// Send a packet called newPacket to the server with a bunch of values.
32socketClient.send('newPacket', {
33    prop: "some value",
34    prop2: 1010
35});

LazyDoc

1interface HTMLTag {
2    id?: string;
3    class?: string[];
4    childs?: HTMLElement[];
5    innerHTML?: string;
6    attributes?: {[name: string]: string};
7    eventListeners?: {[name: string]: (e: Event)=>void};
8}
9class LazyDoc {
10    static newTag(tagName: string, element?: HTMLTag): HTMLElement;
11    static newTag<K extends keyof HTMLElementTagNameMap>(tagName: K, element?: HTMLTag): HTMLElementTagNameMap[K];
12    static newTag<K extends keyof HTMLElementDeprecatedTagNameMap>(tagName: K, element?: HTMLTag): HTMLElementDeprecatedTagNameMap[K];
13    static onEvent<K extends keyof HTMLElementEventMap>(query: string, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
14    static onEvent(query: string, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
15    static onEventAll<K extends keyof HTMLElementEventMap>(query: string, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
16    static onEventAll(query: string, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
17    static removeEvent(query: string, type: keyof ElementEventMap, listener: (this: Element, ev: Event) => any, options?: boolean | EventListenerOptions | undefined): void;
18    static removeEvent(query: string, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
19    static removeEventAll(query: string, type: keyof ElementEventMap, listener: (this: Element, ev: Event) => any, options?: boolean | EventListenerOptions | undefined): void;
20    static removeEventAll(query: string, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
21
22}

A lazy way to write document.something.

Example:

1const { LazyDoc } = require('@lazy-toolbox/client');
2// document.createElement makes dev cry a lot.
3// It's just an easy way to make it work.
4// It could look ugly, but useful for a lot of cases.
5const newDiv = LazyDoc.newTag({
6    // The HTML element tag name
7    tag: 'div',
8    // Set the id
9    id: 'uwu',
10    // Set some classes
11    class: [
12        'className',
13        'anotherClassName'
14    ],
15    // Add some childs if we want
16    childs: [
17        LazyDoc.newTag({tag: 'p'})
18    ],
19    // Set some attributes
20    attributes: {
21        'value': '0',
22        'owo': 'uwu'
23    },
24    // Add some event listener if needed
25    eventListeners: {
26        'click': (e) => {
27            console.log("Clicked on div!");
28        }
29    }
30});
31// Add an event listener by using a query
32LazyDoc.onEvent('div > p', 'click', (e) => console.log(e));
33/*
34Same as creating the element:
35<div id="uwu" class="className anotherClassName" value="0" owo="uwu">
36    <p></p>
37</div>
38*/

LazyFile

1class LazyFile {
2    static saveAs(fileName: string, content: string = ""): void;
3}

An easy way to manage file from a browser.

Example:

1const { LazyFile } = require('@lazy-toolbox/client');
2// Save a file with a specific content.
3LazyFile.saveAs('newFile.txt', 'This is some content for this file.');

LazyHashRouter

1interface getter {
2    page: string | undefined;
3    result: any;
4}
5class LazyHashRouter {
6    static getAllUrlParams(url?: string): getter;
7    static setAllUrlParams(page: string, object: {[name: string]: any}): string;
8}

A lazy way to handle url parameters on a page.

Example:

1const { LazyHashRouter } = require('@lazy-toolbox/client');
2const myObject = {
3    id: 123,
4    name: "Someone",
5    family: [
6        'sister', 'brother', 'son', 'mom', 'dad'
7    ]
8};
9const actualPage = LazyHashRouter.getAllUrlParams();
10if(actualPage.page !== "welcome") {
11    const urlParams = LazyHashRouter.setAllUrlParams("welcome", myObject);
12    window.location.href = `./${urlParams}`;
13}
14console.log(`Welcome ${actualPage.name}.`);

LazyHtNetwork

1class LazyHtNetwork {
2    // Last update at version: 1.1.0
3    static async post(path: string, datas: {[name: string]: any}, execute: (json: Promise<any>) => void = (e) => { }, error: (e: any) => void = (e: any) => console.error(e)): Promise<void>;
4    // Last update at version: 1.1.0
5    static async postJSON(path: string, datas: {[name: string]: any}, execute: (json: Promise<any>) => void = (e) => { }, error: (e: any) => void = (e: any) => console.error(e)): Promise<void>;
6    // Last update at version: 1.1.0
7    static async getJSON(path: string, execute: (json: Promise<any>) => void = (e) => { }, error = (e: any) => console.error(e)): Promise<void>;
8}

A lazy way to handle JS fetch API.

Example:

1// Everything in LazyHtNetwork is async, take that into account.
2const { LazyHtNetwork } = require('@lazy-toolbox/client');
3// Post form datas (for PHP as example)
4// Takes a callback from the server for anything.
5LazyHtNetwork.post('http://somewhere.com/somethingToPost/', {
6    'username': document.querySelector('.someInput').value
7}, (json) => { // Server gave us datas back
8    console.log(JSON.stringify(json));
9});
10
11// LazyHtNetwork.postJSON work the same but only post a .json file at the end, not an HTML form.
12// It can't send picture or whatever blob datas could be needed.
13
14// Get a JSON file somewhere.
15LazyHtNetwork.getJSON('http://somewhere.com/jsonFileToGet/', (json) => {
16    console.log(JSON.stringify(json)); // The json we got.
17});

LazyInteractivity

1class LazyInteractivity {
2    static loadDefault(): void;
3    static dualstate(...inputsElements: HTMLInputElement[]): void;
4    static tristate(...inputsElements: HTMLInputElement[]): void;
5}

A lazy way to make interactive elements.

Example:

main.js

1const { LazyInteractivity } = require('@lazy-toolbox/client');
2LazyInteractivity.loadDefault();
3const dualstate = document.querySelector('input[dualstate]');
4dualstate.addEventListener('change', (e) => {
5    console.log(e.target.value);
6});
7const tristate = document.querySelector('input[tristate]');
8tristate.addEventListener('change', (e) => {
9    console.log(e.target.value);
10});

index.html

1<!--Since it's a state, it will be triggering a onchange event if the state change-->
2<input dualstate type="text">
3<br>
4<!--Since it's a state, it will be triggering a onchange event if the state change-->
5<input tristate type="text">

LazyReact

1interface LazyReactOptions {
2    selector: string;
3    data: {[label: string]: any};
4    component: (data: {[label: string]: any}) => string;
5}
6class LazyReact {
7    component: (data: {[label: string]: any}) => string;
8    debounce: number | null;
9    data: {[label: string]: any};
10    constructor(options: LazyReactOptions);
11    render(): void;
12    static load(options: LazyReactOptions): {[label: string]: any};
13}

A lazy way to make reactive components.

Example:

Usual code:

1const { LazyReact } = require('@lazy-toolbox/client');
2const app = LazyReact.load({
3    selector: '#app',
4    data: {
5        head: 'Task to achieve',
6        todo: ['Task A', 'Task B', 'Task C', 'Task D']
7    },
8    component: function (props) {
9        return `
10            <h1>${props.head}</h1>
11            <ul>
12                ${props.todo.map(function (tdo) {
13                    return `<li>${tdo}</li>`;
14                }).join('')}
15            </ul>`;
16    }
17});
18
19// After 3 seconds, update the data and render a new UI
20setTimeout(function () {
21    app.todo.push('Task E');
22}, 3000);

Alternative code:

1const { LazyReact } = require('@lazy-toolbox/client');
2const app = new LazyReact({
3    selector: '#app',
4    data: {
5        head: 'Task to achieve',
6        todo: ['Task A', 'Task B', 'Task C', 'Task D']
7    },
8    component: function (props) {
9        return `
10            <h1>${props.head}</h1>
11            <ul>
12                ${props.todo.map(function (tdo) {
13                    return `<li>${tdo}</li>`;
14                }).join('')}
15            </ul>`;
16    }
17});
18// Render a UI from the component.
19app.render();
20// After 3 seconds, update the data and render a new UI.
21setTimeout(function () {
22    app.data.todo.push('Task E');
23}, 3000);

LazySchedule

1class LazySchedule {
2    constructor(callback: (tries?: number) => void, timerCalc: (tries: number) => number, maxTries: number = 1);
3    start(): void;
4    stop(): void;
5    reset(): void;
6}

A lazy way to create a smart setInterval that handle a number of tries and can be paused.

1const { LazySchedule } = require('@lazy-toolbox/client');
2// Create a schedule to execute
3const schedule = new LazySchedule(
4    () => {
5        console.log("Callback !");
6    },
7    (tries) => {
8        if(tries > 5) {
9            return 1000; // 1s wait
10        }
11        return 200; // 0.2s wait
12    },
13    25 // Max 25 tries
14);
15schedule.start(); // Start the schedule.

LazyTabularTextArea

1class LazyTabularTextArea {
2    constructor(el: HTMLTextAreaElement, tabLength: number = 4);
3}

Add support for tabulation in a text area.

Example:

1const { LazyTabularTextArea } = require('@lazy-toolbox/client');
2// Add support for tabulation on a text area.
3new LazyTabularTextArea(document.querySelector('.aTextArea'));

LazyTheme

1class LazyTheme {
2    constructor(themesClasses: string[], elementsQueries: string[]);
3    theme(): string;
4    setNextTheme(): void;
5    setPreviousTheme(): void;
6    setTheme(): void;
7    useTheme(newTheme: string): void;
8}

A lazy theme implementation. It takes a bunch of theme names that will be used as HTML class having the same name. It's useful to handle multiple theme with CSS without having the need to manually implement anything to handle theme other than specifying it's changes.

Example:

1const { LazyTheme } = require('@lazy-toolbox/client');
2const myThemes = new LazyTheme(
3    [ // Themes class name
4        'light',
5        'dark',
6        'azure'
7    ],
8    [ // Queries for elements to be modified
9        'body',
10        '.myDiv',
11        '.myUserTmp'
12    ]
13);
14myThemes.setTheme(); // Use the theme, the default theme is light here since it's the first element in the theme array.
15console.log(myThemes.theme());
16
17myThemes.setNextTheme(); // Set the next element in the array, dark, as default theme to be used.
18console.log(myThemes.theme());
19
20myThemes.setNextTheme(); // Set azure as next element
21console.log(myThemes.theme());
22
23myThemes.setNextTheme(); // Set light as next element since there's no element after aruze. The array is looped.
24console.log(myThemes.theme());
25
26// setPreviousTheme() has the same behaviour.
27
28myThemes.useTheme('dark'); // Set the current theme to dark
29console.log(myThemes.theme());
30
31myThemes.useTheme('omega'); // Set the current theme to light since omega isn't a valid theme
32console.log(myThemes.theme());

LazyView

1class LazyView {
2    static div: HTMLDivElement;
3    static replaceInsert(actualElement: HTMLElement, targetElement: string, newHTMLContent: string): void;
4    static getNodeContent(node: Node): string | null;
5    static getNodeType(node: any): string;
6    static inject(htmlDoc: string, toInject: {[name: string]: string}): string;
7    static toNode(content: string): ChildNode | null;
8    static toNodeList(content: string): NodeListOf<ChildNode>;
9    static toArray(content: string): ChildNode[];
10    static toText(content: ChildNode[]): string;
11    static stringToHTML(str: string): HTMLElement;
12}

A bunch of lazy ways to handle some HTML injection or extraction.

Example:

index.html:

1<div class="someDiv">
2    <h1>A title<h1>
3    <p>Some text
4    <insert data="replaceUseless">
5        Some HTML comments.
6        <h2>YES A COMMENT !!! ... kinda.</h2>
7    </insert>
8    </p> I guess.
9</div>

main.js:

1const { LazyView } = require('@lazy-toolbox/client');
2const testView = document.querySelector('.someDiv');
3LazyView.inject(testView, // Replace all insert[data='targetElement']
4'replaceUseless', // Data to replace
5'was replaced <span>!!</span>' // HTML to inject
6);
7/*
8Result:
9<div class="someDiv">
10    <h1>A title<h1>
11    <p>Some text
12    was replaced <span>!!</span>
13    </p> I guess.
14</div>
15*/
16const result = LazyView.inject(testView.innerHTML, {
17    'replaceUseless': 'was replaced <span>!!</span>'
18}); // Same as before, but instead of modifying the DOM, we just
19// get the HTML string back.
20
21// Create a single child node from an HTML string.
22const pTag = LazyView.toNode('<p>Hello world</p>');
23document.body.appendChild(pTag);
24
25// Create a bunch of child nodes from an HTML string.
26const multiTag = LazyView.toNodeList('<p>Hello world2</p><p>Hello world 3</p>');
27for(let tag of [...multiTag]) {
28    document.body.appendChild(tag);
29}
30
31// Create a bunch of child nodes in an array from an HTML string.
32// It's the equivalent of the previous [...multiTag].
33const multiTagArray = LazyView.toArray('<p>Hello world2</p><p>Hello world 3</p>');
34
35// Convert an array of child nodes back to an HTML string.
36const multiTagArrayHTMLBack = LazyView.toText(multiTagArray);