state

Helpful pieces for application state.

Contents

• Install
• Example
  • RequestFor
  • With Signals
• Modules
  • ESM
  • Common JS
  • pre-built JS

Install

npm i -S @substrate-system/package

Example

RequestFor

Model an HTTP request.

import { type HTTPError } from 'ky'
import {
    type RequestFor,
    RequestState
} from '@substrate-system/state'

const { start, set, error } = RequestState

const myRequest = ReqestState<string, HTTPError>(null)
// { data: null, error: null, pending: false }

start(myRequest)
// { data: null, error: null, pending: true }

set(myRequest, 'abc')
// { data: 'abc', error: null, pending: false }

error(myRequest, new Error('ok'))
// { data: 'abc', error: Error, pending: false }

With Signals

A good combination is @preact/signals plus this module.

import { type HTTPError, ky } from 'ky'
import { type Signal, signal } from '@preact/signals'
import {
    type RequestFor,
    RequestState
} from '@substrate-system/state'
const { start, set, error } = RequestState

const myRequestSignal:Signal<RequestFor<{
    hello:string
}>> = signal(RequestState(null))

try {
    myRequestSignal.value = start(myRequestSignal)
    const res = await ky.get('http://example.com')
    myRequestSignal.value = set(myRequestSignal, { hello: 'world' })
} catch (_err) {
    const err = _err as HTTPError
    myRequestSignal.value = error(myRequestSignal, err)
}

Modules

This exposes ESM and common JS via package.json exports field.

ESM

import {
    type RequestFor,
    RequestState
} '@substrate-system/state'

Common JS

require('@substrate-system/package/module')

pre-built JS

This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/state/dist/index.min.js ./public/state.min.js

HTML

<script type="module" src="./state.min.js"></script>