web-utility
    TypeScript icon, indicating that this package has built-in type declarations

    2.9.6 • Public • Published

    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.app/api/polyfill?features=regenerator-runtime,url,scroll-behavior,intersection-observer"></script>
        <script src="https://cdn.jsdelivr.net/npm/fast-text-encoding@1.0.3/text.min.js"></script>
    </head>

    tsconfig.json

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

    Usage

    API document

    CSS Animation

    1. Watch Swipe

    2. Simple Hover

    3. Switch with await

    4. Toggle with Inline Styles

    5. Work with Existed Classes

    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);
    
    (async () => {
        console.log(await request('preset')); // { 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

    source/i18n/en-US.ts

    export enum en_US {
        title = 'Title',
        name = 'Name'
    }

    source/i18n/zh-CN.ts

    export enum zh_CN {
        title = '标题',
        name = '名称'
    }

    source/index.tsx

    import { documentReady, render, createCell } from 'web-cell';
    import { bootI18n, textJoin } from 'web-utility';
    
    import { en_US } from './i18n/en-US';
    import { zh_CN } from './i18n/zh-CN';
    
    console.log(
        navigator.languages.includes('zh-CN'),  // true
        document.documentElement.lang           // ''
    );
    const { language, words } = bootI18n({
        'en-US': en_US,
        'zh-CN': zh_CN
    });
    documentReady.then(() =>
        render(
            <h1>{textJoin(words.title, words.name, 'test', 'example')}</h1>
            // <h1>标题名称 test example</h1>
        );
    );

    Install

    npm i web-utility

    DownloadsWeekly Downloads

    49

    Version

    2.9.6

    License

    LGPL-3.0

    Unpacked Size

    242 kB

    Total Files

    20

    Last publish

    Collaborators

    • tech_query