Package Exports

web-utility

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (web-utility) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Web utility

Web & JavaScript runtimes toolkit based on TypeScript

Installation

npm install web-utility

`index.html`

<head>
    <script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
    <script src="https://polyfill.web-cell.dev/feature/Regenerator.js"></script>
    <script src="https://polyfill.web-cell.dev/feature/TextEncoder.js"></script>
    <script src="https://polyfill.web-cell.dev/feature/URL.js"></script>
    <script src="https://polyfill.web-cell.dev/feature/ScrollBehavior.js"></script>
    <script src="https://polyfill.web-cell.dev/feature/IntersectionObserver.js"></script>
</head>

`tsconfig.json`

{
    "compilerOptions": {
        "module": "ES2021",
        "moduleResolution": "Node",
        "downlevelIteration": true,
        "lib": ["ES2021", "DOM", "DOM.Iterable"]
    }
}

Usage

API document

CSS Animation

Function Cache

import { cache } from 'web-utility';

const getToken = cache(async (cleaner, code) => {
    const { access_token, expires_in } = await (
        await fetch(`https://example.com/access_token?code=${code}`)
    ).json();

    setTimeout(cleaner, expires_in * 1000);

    return access_token;
}, 'Get Token');

Promise.all([getToken('xxx'), getToken('yyy')]).then(([first, second]) =>
    console.assert(
        first === second,
        'Getting token for many times should return the same before deadline'
    )
);

DOM operation

import { parseDOM, walkDOM, stringifyDOM } from 'web-utility';

const [root] = parseDOM('<a>Hello, <b>Web</b>!</a>');

var count = 0;

for (const { nodeName, nodeType, dataset } of walkDOM(root)) {
    console.log(nodeName);

    if (nodeType === Node.ELEMENT_NODE) dataset.id = ++count;
}

console.log(stringifyDOM(root)); // '<a data-id="1">Hello, <b data-id="2">Web</b>!</a>'

jQuery-like DOM event delegation

import { delegate } from 'web-utility';

document.addEventListener(
    'click',
    delegate('a[href]', (event, link) => {
        event.preventDefault();

        console.log(link.href);
    })
);

Message Channel

`index.ts`

import { createMessageServer } from 'web-utility';

createMessageServer({
    preset: () => ({ test: 1 })
});

`iframe.ts`

import { createMessageClient } from 'web-utility';

const request = createMessageClient(globalThis.parent);

request('preset').then(console.log); // { test: 1 }

Service Worker updating

import { serviceWorkerUpdate } from 'web-utility';

const { serviceWorker } = window.navigator;

serviceWorker
    ?.register('/sw.js')
    .then(serviceWorkerUpdate)
    .then(worker => {
        if (window.confirm('New version of this Web App detected, update now?'))
            // Trigger the message callback listened in the Service Worker
            // generated by Workbox CLI
            worker.postMessage({ type: 'SKIP_WAITING' });
    });

serviceWorker?.addEventListener('controllerchange', () =>
    window.location.reload()
);

Internationalization

Migrate to MobX i18n since v4.

Test scripts

If you are looking for a simple alternative of Mocha or Jest, just use these Test Utility methods with tsx:

npx tsx index.spec.ts

`index.spec.ts`

import { describe, it } from 'web-utility';

class App {
    name = 'test';

    static create() {
        return new App();
    }
}

describe('My module', async () => {
    const app = await it('should create an App object', async expect => {
        const app = App.create();

        expect(app instanceof App);

        return app;
    });

    await it('should init an App name', expect => {
        expect(app.name === 'test');
    });
});

CSV/TSV Parser

import { FileHandle, open } from 'fs/promises';
import { readTextTable } from 'web-utility';

interface Article {
    id: number;
    title: string;
}
let fileHandle: FileHandle | undefined;

try {
    fileHandle = await open('path/to/your-article.csv');

    for await (const row of readTextTable<Article>(
        fileHandle.createReadStream()
    ))
        console.table(row);
} finally {
    await fileHandle?.close();
}