@overweb/client
v0.0.9
Published
function decorators
Readme
@verweb/client
- js-mixins: prototype extensions
- time-api: useful simple time api
- event-api: EventSouce fluent API facade
- fetch-swr: SWR extention of fetch api
- css-tagger: css-component pattern
- i18n-min: minimalist i18n
js-mixins
Some js mixins helpers.
| | |
|-|-|
| array | distinct(selector?), count(predicate) |
| object | valueOf(field, value?), Object.isEmpty(obj) |
| number | format(commas:boolean, digits) |
| JSON | JSON.scriptfy(object\|function) |
| string | capitalize(), toArray(), toObject(), toNumber(), toRegex() |
time-api
Time API with timeString support.
const 18630000ms = Time.parse('05:10:30')
const 26410000ms = Time.parse('7h20min10s')
await Time.wait(1000, function(){ })
await Time.delay("30s")event-api
Fluent API facade for EventSource.
const es = eventApi(url, { withCredentials: true })
.then('open' => console.log('Open connection...'))
.then('message', e => console.log('Message', e.text))
.then('status', e => console.log('Message', e.json.progress + '%'))
.catch(ex => console.error(ex))
.finally(() => console.log('close'))
es.close() fetch-swr
SWR pattern extension for fetch API with fetchApi.
fetchApi(url, { cache, ['todos'] }) // cache keys
fetchApi(url, { cache: "1min" }) // cache string timeout
fetchApi(url, { cache: 60000 }) // cache tm
fetchApi(url, { retry: 60000 }) // cache tm
fetchApi.clear('todos', 'ok') // remove cached keys
fetchApi.clear() // remove all caches
fetchApi.token // preserves last request.headers.Authorization
// request pooling interval (get only)
await fetchApi(url, { reget: 1000 })
// request retry after non 200 status
await fetchApi(url, { retry: { times:3, delay: 1000 }})synch-api
ORM for RESTful API that abstract the fetch implementation.
// object mapping of a RESTful API
const userApi = syncher<User>(true)
.fetch("http://api.com/users")
.catch(e => "not found...")
.match(x => x, "id")
useApi.value // current state
useApi.await // pending flag
useApi.sync() // get request (query)
useApi.sync(true) // post|put|delete request (diff mutation)i18n-min
Minimalist web standard approach globalization.
<body>
<script src='i18now.js'></script>
<p i18n>Welcome</p> <!-- content as key -->
<p i18n='hello'>Hello world!</p>
<script>
i18n.addLanguage('pt')
i18n.addLanguage('en')
i18n.load('./langs')
i18n.current = 'pt'
</script>
</body>Example of pt.json in ./langs folder.
{
"welcome": "Bem vindo",
"hello": "Olá mundo!"
}router-api
Unified router API for in-memory client-side routing.
router.now // current route
router.goto(url) // new route
router.match('/user/:id') // check if routed
router.params<T>(route) // dynamic route object
router.queries // query string objectmulti-spa
Minimalist microfrontend client-side slots and router-api with route attribute for conditional view and link for clickable router.
<body>
<slot src='http://app.vue.com'>loading...</slot>
<slot route='/' src='http://app.react.com'>loading...</slot>
<slot route='/user/:id' src='http://app.angular.com'>loading...</slot>
<button link='/user/1'>User 1</button>
</body>css-tagger
CSS component using web standar with CSS attribute suggar syntax.
grid { display: grid; grid-template-columns: var(--cols, '1fr'); }<grid style="--cols:1fr 1fr"><p>test 1</p><p>test 2</p></grid><grid --cols="1fr 1fr"><p>test 1</p><p>test 2</p></grid>