DEV Community: Sylvain Dethier

SolidJS use:validation directive

Sylvain Dethier — Sat, 27 Apr 2024 19:38:05 +0000

TL;DR: the code

SolidJS use:validation directive

Validator function

Both customValidity and validation directives must / can be used with custom validator(s).

A validator is a sync or async function that takes an HTMLElement that implements the Constraint Validation API and returns an (i18n) error validation message or an empty string when valid.

Refered here as HTMLElement_Validation, the element can be either a HTMLButtonElement, HTMLFieldSetElement, HTMLInputElement, HTMLOutputElement, HTMLSelectElement, or HTMLTextAreaElement.

/**
 * validator function
 * @param {HTMLElement_Validation} element The element to validate
 * @returns {string|Promise<string>} Empty string `""` when the element is valid, the i18n custom error `validationMessage` otherwise.
 */
type validator = (element: HTMLElement_Validation) => string | Promise<string>;

Example of a sync validator that constraint an input element to have a value with a non empty string:

function hasNonEmptyValue(element: HTMLElement_Validation): string {
  const value = (element as HTMLInputElement).value.trim();
  const errored = value === "";
  return errored ? "Text must not be empty" : "";
}

Usage of the `customValidity` directive

The reportValidity function is called upon the reportOn event type i.e change (default), blur, input.

In the example below, we use the directive on an input HTMLInputElement.

With validators only

<input use:customValidity={[validator, validator]}>

With validators and event options

<input use:customValidity={[validator, validator, {
  reportOn: "change" // default
}]}>

Usage of the `validationMessage` directive

This directive is useful to synchronize an element validationMessage with a Signal<string>.

A validationMessageSetter must be Type

Setter<string>

A validationMessageOptions must be Type

{
  resetOn?: keyof HTMLElementEventMap,
  setOn?: keyof HTMLElementEventMap,
}

With validationMessageSetter only

<input use:validationMessage={validationMessageSetter}>

With validationMessageSetter and options

<input use:validationMessage={[validationMessageSetter, {
  resetOn?: "change", // default
  setOn?: "invalid" // default
}]}>

Usage of the `validation` directive

This directive is the combination of the customValidty and validationMessage directive.

A validationOptions must be Type

{
  resetOn?: keyof HTMLElementEventMap,
  setOn?: keyof HTMLElementEventMap,
  reportOn?: keyof HTMLElementEventMap,
}

With validationMessageSetter only

<input use:validation={validationMessageSetter}>

With validationMessageSetter and options

<input use:validation={[validationMessageSetter, {
  resetOn?: "change", // default
  setOn?: "invalid", // default
}]}>

With validationMessageSetter, validators and options

<input use:validation={[validationMessageSetter, [validator, validator], {
  resetOn?: "change", // default
  setOn?: "invalid", // default
  reportOn?: "change", // default
}]}>

TypeScript utility Refine

Sylvain Dethier — Fri, 19 Apr 2024 20:59:13 +0000

TL;DR

See my Refine Gist.

export type Refine<T, P extends Partial<T>> = {
  [k in keyof T]: T[k] & P[k];
};

Why ?

For a project I have the need to be able to (kind of) extend a type but keep it's original type. Let me explain.
Say you have a type

type TheType = {
  aProp: string;
  someOtherProp: unknown;
};

But you whish the aProp to be a more specific type for example `${number}` (which is still a string type). The extends keyword is not restrictive enough (IMO) because it lets you completly override the original type, for example with boolean.
So I have to define a Refine<T,P> utility type.

Example and usage

type TheType = {
  aProp: string;
  someOtherProp: unknown;
};

type RefinedType = Refine<TheType, {
  aProp: `{$number}`;
}>;

The resulting RefinedType is:

type RefinedType = {
  aProp: `${number}`;
  someOtherProp: unknown;
};

Type safe SolidJS Router `useParam` utility Type

Sylvain Dethier — Fri, 19 Apr 2024 20:18:17 +0000

The Type definition

The SolidJS Router useParam<T>() is a generic function that returns the current route parameters. To be type safe we have to specify the type of this parameters. The path for the route already defines this type. To be DRY here is a utility Type that extracts this parameters types from the RouteDefinition.

The route parameters live in a RouteDefinition["matchFilters"] property. We have to extract and convert each of them to string type (parameters are always string type).

// The `matchFilters` of a RouteDefinition describes its Params
type RD$matchFilters<RD extends RouteDefinition> = NonNullable<
  RD["matchFilters"]
>;

// Convert a MatchFilter to string type
type MF$toString<MF extends MatchFilter | undefined> =
  MF extends readonly string[]
    ? MF[number]
    : MF extends RegExp
    ? `${string}`
    : MF extends (s: string) => boolean
    ? `${string}`
    : never;

// Params of a RouteDefinition {[keyof matchFilters]: `${any}`}: Extract and Convert each MatchFilter
type RD$Params<RD extends RouteDefinition> = {
  [k in NonNullable<keyof RD$matchFilters<RD>>]: MF$toString<
    RD$matchFilters<RD>[k]
  >;
};

Finally we want to be able to specify the type each route parameter using the my Refine utility type and Prettify them.

// Refine a defined RouteDefintion
type RD$RouteParams<
  RD extends RouteDefinition,
  tRD extends RouteDefinition = RouteDefinition<RD["path"]>
> = Refine<RD$Params<tRD>, RD$Params<RD>>;

// Refine with user Type and Prettify the result
export type RouteDefinitionParams<
  RD extends RouteDefinition,
  P extends Partial<RD$RouteParams<RD>> = NonNullable<unknown>
> = Prettify<Refine<RD$RouteParams<RD>, P>>;

Example of usage

const path = "/:aNumberParam";
type TRouteDefinition = RouteDefinition<typeof path>;

type TParams = RouteDefinitionParams<TRouteDefinition>;
// or with refined param Type
type TParams = RouteDefinitionParams<TRouteDefinition, {
  aNumberParam: `${number}`;
}>;

const params = useParams<TParams>();
//    ^? Type is { aNumberParam: `${string}` }
//    ^? Type is { aNumberParam: `${number}` } with refined types

TL;DR

You can find the whole TypeScript defintion for this utility type in my Gist solidjs-RouteDefintionParams.d.ts.

What do you think about this utility type ?
How would you improve it ?
Whould you use it or not and why ?

Thank you for reading.

DEV Community: Sylvain Dethier

SolidJS use:validation directive

TL;DR: the code

Validator function

Usage of the customValidity directive

Usage of the validationMessage directive

Usage of the validation directive

TypeScript utility Refine

TL;DR

Why ?

Example and usage

Type safe SolidJS Router `useParam` utility Type

The Type definition

Example of usage

TL;DR

Usage of the `customValidity` directive

Usage of the `validationMessage` directive

Usage of the `validation` directive