Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign 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

latest
Source
npmnpm
Version
4.6.4
Version published
Weekly downloads
333
-37.87%
Maintainers
1
Weekly downloads
 
Created
Source

Web utility

Web & JavaScript runtimes 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 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();
}

Keywords

web
front-end
utility
toolkit
typescript

FAQs

Package last updated on 31 Oct 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

minimatch Patches 3 High-Severity ReDoS Vulnerabilities

Security News

minimatch Patches 3 High-Severity ReDoS Vulnerabilities

minimatch patched three high-severity ReDoS vulnerabilities that can stall the Node.js event loop, and Socket has released free certified patches.

By Sarah Gooding  -  Feb 28, 2026