Options
All
  • Public
  • Public/Protected
  • All
Menu

Web utility

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/[email protected]/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>
);
);

Generated using TypeDoc