You're Invited:Meet the Socket Team at RSAC and BSidesSF 2026, March 23–26.RSVP →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

web-utility

Package Overview
Dependencies
Maintainers
1
Versions
97
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

web-utility

Web front-end toolkit based on TypeScript

Source
npmnpm
Version
4.6.1
Version published
Weekly downloads
323
-38%
Maintainers
1
Weekly downloads
 
Created
Source

Web utility

Web front-end toolkit based on TypeScript

NPM Dependency CI & CD

Open in Visual Studio Code

NPM

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 ts-node:

npx ts-node 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();
}

Keywords

web
front-end
utility
toolkit
typescript

FAQs

Package last updated on 16 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

TC39 Advances Temporal to Stage 4 Alongside Several ECMAScript Proposals

Security News

TC39 Advances Temporal to Stage 4 Alongside Several ECMAScript Proposals

TC39’s March 2026 meeting advanced eight ECMAScript proposals, including Temporal reaching Stage 4 and securing its place in the ECMAScript 2026 specification.

By Sarah Gooding  -  Mar 16, 2026