open-index/open-npm huggingface dataset:
npm package: @st-lib/parallel
Description: Parallel execution of callbacks for each element of the iterable
Author: padreramnt
Latest version: 1.0.0

# Parallel execution of callbacks for each element of the iterable

``` tsx
import { runDependently, runIndependently, config } from '@st-lib/parallel'


function* getALotOfItems(count = 20e20) {
	for (let i =0; i < count; i++) {
		yield i
	}
}

// globally set the default number of threads
config.defaultThreads = 40

function doSomeHeavyCalculations(inp: number) {
	return new Promise<number>((res, rej) => {
		if (Math.random() < 0.0001) {
			setTimeout(rej, 100 + Math.random() * 4000, new Error(`something very bad happened to the ${inp}`))
		} else {
			setTimeout(res, 100 + Math.random() * 4000, inp * 2)
		}
	})
}

async function exampleRunDependently() {
	try {
		const results = await runDependently(getALotOfItems(), doSomeHeavyCalculations)
		console.log(results)
	} catch (error) {
		console.error(error)
		// catch the error
	}
}

async function exampleRunIndependently() {
	const { results, ok, errors, values } = await runIndependently(getALotOfItems(), doSomeHeavyCalculations)
	// variant 1: switch via `ok`
	if (ok) {
		// all ok, values contain returned values of each callback, similar to runDependently
		console.log(values)
	} else {
		// something failed, need process errors
		console.log(errors)
	}
	// variant 2: process each result separately
	for (const result of results) {
		if (result.ok) {
			console.log(result.data)
		} else {
			console.log(result.error)
		}
	}
	// variant 3: combine as u need
}
```
npm package: @st-lib/private
Description: Utility for creating private properties and methods.
Author: padreramnt
Latest version: 1.0.0

# Utility for creating private properties and methods.

```ts
import { createProperty, createMethod } from '@st-lib/private'

const [getProperty, setProperty] = createProperty<string>()
const [method, defineMethod] = createMethod<[string], string>()

class Class {
	constructor() {
		setProperty(this, 'init property value')
		defineMethod(this, (value) => value.toUpperCase())
	}

	publicMethod() {
		const value = getProperty(this) // thows ReferenceError if property not defined
		const preparedValue = method(this, value) // thows ReferenceError if method not defined
		return preparedValue
	}
}
```
npm package: @st-lib/render-events
Description: @st-lib/render @st-lib/events bindings
Latest version: 1.0.2

# [@st-lib/render](https://www.npmjs.com/package/@st-lib/render) [@st-lib/events](https://www.npmjs.com/package/@st-lib/events) bindings.

```ts
import { render, text } from '@st-lib/render'
import { button } from '@st-lib/render-html'
import { onClick } from '@st-lib/render-events'

window.onload = () => {
	render(document.body, () => {
		button(null, () => {
			onClick(() => {
				console.log('click')
			})
			text(null, 'click me?')
		})
	})
}
```

```ts
import { render, text } from '@st-lib/render'
import { onDocumentScroll, onWindowResize } from '@st-lib/render-events'

window.onload = () => {
	render(document.body, () => {
		onDocumentScroll(() => {
			console.log(document.scrollTop)
		}, true)

		onWindowResize(() => {
			console.log(window.innerWidth, window.innerHeight)
		}, true)


		text(null, 'lorem ipsum' /* ... */)
	})
}
```
npm package: @st-lib/render-html
Description: @st-lib/render HTML element shortcuts.
Latest version: 1.0.1

# [@st-lib/render](https://www.npmjs.com/package/@st-lib/render) HTML element shortcuts.

Exports all well known HTML tags.

Some elements renamed:
* `<a>` - anchor
* `<b>` - bold
* `<i>` - italic
* `<p>` - paragraph
* `<q>` - quote
* `
` - strike
* `<u>` - underline
* `<var>` - htmlVar (coz of `var` is javascript keyword =) )
npm package: @st-lib/render-svg
Description: @st-lib/render SVG element shortcuts.
Latest version: 1.0.0

# [@st-lib/render](https://www.npmjs.com/package/@st-lib/render) SVG element shortcuts.

Exports all well known SVG tags.

Some elements renamed:
* `<a>` - svgAnchor (because [st-lib/render-html](https://www.npmjs.com/package/@st-lib/render-html) exports `anchor`)
* `<g>` - group
* `<switch>` - svgSwitch (because of `switch` is the javascript keyword =) )
* `<text>` - svgText (because [@st-lib/render](https://www.npmjs.com/package/@st-lib/render) exports `text`)
npm package: @st-lib/render-with-state
Description: @st-lib/render element node state management helper
Author: padreramnt
Latest version: 1.0.1

# [@st-lib/render](https://www.npmjs.com/package/@st-lib/render) element node state management helper

declarative style

```ts
import { render, text } from '@st-lib/render'
import { button } from '@st-lib/render-html'
import { onClick } from '@st-lib/render-events'
import { useState } from '@st-lib/render-with-state'

window.onload = () => {
	render(document.body, () => {
		const [state, setState] = useState(0, (newVal, oldVal) => /* increment only */newVal > oldVal)
		button(null, () => {
			onClick(e => {
				e.preventDefault()
				setState(state + 1)
			})
			text(null, 'increment')
		})
		button(null, () => {
			onClick(e => {
				e.preventDefault()
				// will not work because of state guard does not allow new value to be less than old value
				setState(state - 1)
			})
			text(null, 'decrement')
		})
		text(null, ` clicks: ${state}`)
	})
}
```

functional style

```ts
import { render, text } from '@st-lib/render'
import { button } from '@st-lib/render-html'
import { onClick } from '@st-lib/render-events'
import withState from '@st-lib/render-with-state'

window.onload = () => {
	render(document.body, withState(0, (state, setState) => {
		button(null, () => {
			onClick(e => {
				e.preventDefault()
				setState(state + 1)
			})
			text(null, 'click me')
		})
		text(null, ` clicks: ${state}`)
	}))
}
```
npm package: @st-lib/ui-date-element
Description: Custom element for declarative formatting of dates.
Author: padreramnt
Latest version: 1.0.1

# Custom element for declarative formatting of dates.

See [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).

> `UIDateElement#innerHTML` is used as a fallback if the value cannot be formatted.

```ts
// client.js
import UIDateElement from '@st-lib/ui-date-element'

window.customElements.define('ui-date', UIDateElement)
```

CDN links:
* `https://unpkg.com/@st-lib/ui-date-element/dist/index.js`
	```html
	<script crossorigin src="https://unpkg.com/@st-lib/ui-date-element/dist/index.js"></script>
	```
* `https://unpkg.com/@st-lib/ui-date-element/dist/index.min.js`
	```html
	<script crossorigin src="https://unpkg.com/@st-lib/ui-date-element/dist/index.min.js"></script>
	```

```html
<!-- iso date format -->
<ui-date value="2020-06-25T14:51:46.428Z" dateStyle="full" timeStyle='medium'>
	Friday, June 26, 2020 at 12:51:46 AM
</ui-date>
<!-- utc date format -->
<ui-date value="Thu, 25 Jun 2020 14:51:46 GMT" dateStyle="full" timeStyle='medium'>
	Friday, June 26, 2020 at 12:51:46 AM
</ui-date>
<!-- Date#getTime() -->
<ui-date value="1593096706428" dateStyle="full" timeStyle='medium'>
	Friday, June 26, 2020 at 12:51:46 AM
</ui-date>
<!-- specify another language -->
<ui-date value="2020-06-25T14:51:46.428Z" dateStyle="full" timeStyle='medium' lang='ru'>
	пятница, 26 июня 2020 г., 00:51:46
</ui-date>
<!-- invalid value is ignored -->
<ui-date value="the_****_is_lie">
	cake
</ui-date>
```
npm package: @st-lib/ui-number-element
Description: Custom element for declarative formatting of numbers.
Author: padreramnt
Latest version: 1.0.1

# Custom element for declarative formatting of numbers.

See [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat).

> `Intl.NumberFormatOptions#style` renamed as `type` attribute

> `UINumberElement#innerHTML` is used as a fallback if the value cannot be formatted.


```ts
// client.js
import UINumberElement from '@st-lib/ui-number-element'

window.customElements.define('ui-number', UINumberElement)
```

CDN links:
* `https://unpkg.com/@st-lib/ui-number-element/dist/index.js`
	```html
	<script crossorigin src="https://unpkg.com/@st-lib/ui-number-element/dist/index.js"></script>
	```
* `https://unpkg.com/@st-lib/ui-number-element/dist/index.min.js`
	```html
	<script crossorigin src="https://unpkg.com/@st-lib/ui-number-element/dist/index.min.js"></script>
	```

```html
<!-- default formatting -->
<ui-number value="123123.123456" maximumFractionDigits="6">
	123 123,123456
</ui-number>
<!-- currency support -->
<ui-number value="3449.64" type="currency" currency="usd">
	3 449,64 $
</ui-number>
<!-- percent support -->
<ui-number value=".27" type="percent">
	27%
</ui-number>
<!-- unit support, see browser compatibility -->
<ui-number value="367" type="unit" unit="day">
	367 days
</ui-number>
<!-- specify another language -->
<ui-number value="367" type="unit" unit="day" unitDisplay="long" lang="ru">
	367 дней
</ui-number>
<!-- invalid value is ignored -->
<ui-number value="the_****_is_lie">
	cake
</ui-number>
```
npm package: @st-lib/use-async-memo
Description: React useMemo for async functions
Author: padreramnt
Latest version: 1.0.0

# React useMemo for async functions

``` tsx
import * as React from 'react'
import useAsyncMemo from '@st-lib/use-async-memo'

export default function Component() {
	const task = useAsyncMemo(async () => {
		/* do some work */
	})

	if (null != task.result) {
		return (
			<span>
				{/* use result here */}
			</span>
		)
	} else if (null != task.error) {
		return (
			<span className='error'>
				{task.error.message}
			</span>
		)
	} else {
		return (
			<span>
				{'Loading'}
			</span>
		)
	}
}
```
npm package: @st-lib/use-fetch
Description: React fetch hook
Author: padreramnt
Latest version: 1.0.0

# React fetch hook

```tsx
import * as React from 'react'
import TodoItem from './TodoItem'
import useFetch from '@st-lib/use-fetch'

const DEFAULT_FIRST = 50
const DEFAULT_OFFSET = 0

function useTodos({ first = DEFAULT_FIRST, offset = DEFAULT_OFFSET }: { first?: number, offset?: number }, deps?: React.DependencyList) {
	return useFetch(res => ({
		ok: res.ok,
		status: res.status,
		statusText: res.statusText,
		data: res.json()
	}), `/todos?first=${first}&offset=${offset})`, null, deps)
}

const DEFAULT_RETRY_DELAY = 10
const DEFAULT_RETRY_COUNT = 5

export default function TodoList() {
	const [offset, setOffset] = React.useState(DEFAULT_OFFSET)

	const [reload, setReload] = React.useState(Symbol())
	const [retryCount, setRetryCount] = React.useState(DEFAULT_RETRY_COUNT)
	const [retryDelay, setRetryDelay] = React.useState(DEFAULT_RETRY_DELAY)

	const retry = React.useCallback(() => {
		setReload(Symbol())
		setRetryCount(DEFAULT_RETRY_COUNT)
	}, [DEFAULT_RETRY_COUNT])
	const todos = useTodos({ offset }, [reload, retryCount])

	const next = React.useCallback(() => {
		setOffset(offset + DEFAULT_FIRST)
	}, [DEFAULT_FIRST])
	const prev = React.useCallback(() => {
		setOffset(offset - DEFAULT_FIRST)
	}, [DEFAULT_FIRST])

	React.useEffect(() => {
		if (todos.loading || !todos.error || !retryCount) return
		setRetryDelay(DEFAULT_RETRY_DELAY)
		const id = setInterval(() => {
			if (retryDelay) {
				setRetryDelay(retryDelay - 1)
			} else {
				setRetryCount(retryCount - 1)
			}
		}, 1000)
		return () => clearInterval(id)
	}, [todos.error, todos.loading])

	if (todos.error) {
		return (
			<span className='error'>
				{`Network error, `}
				<button onClick={retry} disabled={todos.loading}>
					{`retry in ${retryDelay}s`}
				</button>
			</span>
		)
	} else if (todos.result && todos.result.ok) {
		return (
			<div className='todolist'>
				{todos.result.data.map(item => <TodoItem key={item.id} item={item} />)}
				<button onClick={prev} disabled={todos.loading}>
					{'prev'}
				</button>
				<button onClick={next} disabled={todos.loading}>
					{'next'}
				</button>
			</div>
		)
	} else if (todos.result && !todos.result.ok) {
		return (
			<span className='error'>
				{`${todos.result.status < 500 ? 'Client' : 'Service'} error ${todos.result.data.code ?? todos.result.status}: ${todos.result.data.message ?? todos.result.statusText} `}
				<button onClick={retry} disabled={todos.loading} hidden={todos.result.status < 500}>
					{'retry'}
				</button>
			</span>
		)
	} else {
		return (
			<span>
				{'Loading'}
			</span>
		)
	}
}
```