Svelte

Announcing Formula - A Zero-Config Reactive Forms Library for Svelte

 Published: Feb 13, 2021  (last updated: Feb 13, 2021)~ 400 words~ 2 minutes reading time

Today I’m happy to announce the release of Svelte Formula - a new forms library for Svelte .

The Svelte Formula Logo is some science beakers and a molecule

Formula is a Zero-Config library - what this means is that you do not have to pass any settings to the library itself to handle form validation and submission - it uses the validation properties of HTML5 forms directly, meaning you can create progressive, accessible forms first.

The library is for use with the use directive and can be bound to any element, not just <form> ones and the library automatically handles subscription and unsubscription to any form element with a name attribute.

Here is the example from the demo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<script>
  import {onDestroy} from 'svelte';
  import {formula} from '[email protected]'

  const {form, formValues, validity, touched, formValid} = formula();

  const sub = formValues.subscribe(v => console.log(v));

  onDestroy(() => {
    sub();
  })
</script>

<form use:form>
  <div class='form-field'>
    <label for='username'>Username</label>
    <input type='text' id='username' name='username' required minlength="8" class:error={$touched?.username &&
           $validity?.username?.invalid}/>
    <div hidden={$validity?.username?.valid}>{$validity?.username?.message}</div>
  </div>
  <div class='form-field'>
    <label for='password'>Password</label>
    <input type='password' id='password' name='password' required minlength="8" class:error={$touched?.password &&
           $validity?.username?.invalid}/>
    <div hidden={$validity?.password?.valid}>{$validity?.password?.message}</div>
  </div>

  <button disabled={!$formValid}>Save</button>
</form>

<style>
  .form-field {
    margin-bottom: 10px;
    border-bottom: 1px solid lightgrey;
  }

  .error {
    border: 1px solid red;
  }
</style>

In this example the only validations are required and minlength applied directly to the HTML element itself - displaying errors and error states are via the validity object and the touched object allows us to only apply it when the form element is first focused on.

The release is considered an alpha version - the API may change and there are still tests and documentation to right - but you can try it our right now in your own project with npm install svelte-formula - any bugs, issues or suggestions please feel free to leave them here

WebSerial.app - Browser to USB Serial Communication With Svelte

 Published: Feb 5, 2021  (last updated: Feb 12, 2021)~ 200 words~ 1 minutes reading time

After my previous experiments with the Web Serial API, I started experimenting with Svelte .

Within a couple of days I have created https://webserial.app/ - the Web Serial Controller app.

The interface might seem familiar - it’s based on XP.css - a Windows XP CSS theme. It was inspired by some of the Serial hardware software used in the 00’s.

The interface of Web Serial Controller

The application is fully open source and features:

  • Fully connected state - use the screens or keyboard shortcuts to connect and disconnect from devices with shared state
  • Filter devices by vendor ID with a fully searchable list of all hardware vendors
  • A draggable interface XP-like interface
  • Options storage in localStorage
  • Send text messages to any connected device