util

Utility functions for web components.

• install
• API
  • import
  • parseForm
  • attributesToString
  • setAttributes
  • attributesAsObject
  • objectToString
• pre-built JS
  • copy

install

npm i -S @substrate-system/util

API

import

import util from '@substrate-system/util'

// or individual functions
import { attributesToString } from '@substrate-system/util'

parseForm

Serialize a form and return a plain object. If a form control with the same name appears more than once, the property will be converted to an array.

function parseForm (form:HTMLFormElement):Record<string, unknown>

attributesToString

Take an array of attributes, and transform them into a string format. This can be useful for creating web components.

function attributesToString (attrs:Attr[]):string {

example

import { attributesToString } from '@substrate-system/util'

const el = document.getElementById('example')
const str = attributesToString(Array.from(el!.attributes))
console.log(str)
// => 'type="text" id="example" required'

setAttributes

Set the given attributes from an object. Will handle boolean attributes like required.

function setAttributes (el:HTMLElement, attrs:Record<string, string|boolean>)

import { attributesToString, setAttributes } from '@substrate-system/util'

const input = document.getElementById('test') as HTMLInputElement

setAttributes(input, {
    id: 'test',
    required: true,
    name: 'fooo',
    class: 'testing'
})

console.log(attributesToString(Array.from(input.attributes)))
// => 'id="test" class="testing" name="fooo" required',

attributesAsObject

Return an object of { key: value } from an array of attributes. If an attribute is a boolean value, then it will be { name: true }.

function attributesAsObject (attrs:Attr[]):Record<string, string|true>

import { attributesAsObject } from '@substrate-system/util'

const el = document.querySelector('input')
const attrs = Array.from(el!.attributes)
const obj = attributesAsObject(attrs)
console.log(obj)
// => {
//   "type": "text",
//   "required": true,
//   "name": "example",
//   "foo": "bar"
// }

objectToString

Take an object, as from attributesAsObject, and stringify it for use in HTML.

function objectToString (obj:Record<string, string|true>):string

const str = objectToString(obj)
console.log(str)
// => 'type="text" required name="example" foo="bar"'

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/util/dist/index.min.js ./public/util.min.js

HTML

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