Options
All
  • Public
  • Public/Protected
  • All
Menu

GitHub Web Widget

Web utility

Web front-end toolkit based on TypeScript

NPM Dependency Build Status

NPM

Usage

API document

CSS Animation

  1. Simple hover

  2. Switch with await

  3. Toggle with Inline Styles

  4. 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(self.parent);

(async () => {
    console.log(await request('preset'));  // { test: 1 }
})();

Internationalization

tsconfig.json

{
    "compilerOptions": {
        "module": "ESNext"
    }
}

source/i18n/en-US.ts

export enum en_US {
    title = 'Test'
}

export type I18nMap = typeof en_US;

source/i18n/zh-CN.ts

export enum zh_CN {
    title = '测试'
}

source/index.tsx

import { documentReady, render, createCell } from 'web-cell';
import { createI18nScope } from 'web-utility';

import { I18nMap } from './i18n/en-US';

console.log(navigator.languages.includes('zh-CN')); // true

const { loaded, i18nTextOf } = createI18nScope<I18nMap>({
    'en-US': async () => (await import('./i18n/en-US')).en_US,
    'zh-CN': async () => (await import('./i18n/zh-CN')).zh_CN
}, 'en-US');

Promise.all([loaded, documentReady]).then(() =>
    render(<h1>{i18nTextOf('title')}</h1>); // <h1>测试</h1>
);

Generated using TypeDoc