@gluonjs/quarks / packages/quarks/src / unsafeQuarkProps

Function: unsafeQuarkProps()

unsafeQuarkProps<ElementType>(props): UnsafeQuarkProps<ElementType>

Explicitly opts out of native key checking for a reviewed platform or vendor extension. Values still use the ordinary spread runtime without validation.

Type Parameters

ElementType

ElementType extends Element = HTMLElement

Parameters

props

Readonly<Record<string, unknown>>

Returns

UnsafeQuarkProps<ElementType>

Example

Opt a reviewed vendor or not-yet-typed platform key out of compile-time key checking without adding runtime validation:

import { html } from '@gluonjs/core';
import {
  fragment,
  htmlTagNames,
  q,
  quark,
  unsafeQuarkProps,
  type AriaAttributeName,
  type QuarkAriaProps,
  type QuarkAttributeValue,
  type QuarkCommonProps,
  type QuarkDataProps,
  type QuarkMap,
  type QuarkProps,
  type UnsafeQuarkProps,
} from '@gluonjs/quarks';

const ariaName: AriaAttributeName = 'label';
const attributeValue: QuarkAttributeValue = 'Add to bag';
const aria = { [ariaName]: attributeValue } satisfies QuarkAriaProps;
const data = { analyticsAction: 'purchase' } satisfies QuarkDataProps;
const common = { id: 'add-to-bag', class: 'primary' } satisfies QuarkCommonProps<HTMLButtonElement>;
const props = { ...common, type: 'button', aria, data, children: 'Add to bag' } satisfies QuarkProps<HTMLButtonElement>;
const future = unsafeQuarkProps<HTMLButtonElement>({ 'vendor-future-key': true });
const unsafe: UnsafeQuarkProps<HTMLButtonElement> = future;
const Button = quark('button');
const tags: QuarkMap = q;
const actions = fragment([Button(props), Button(unsafe), tags.a({ href: '/bag', children: html`View bag` })]);
console.log(Button.tagName, htmlTagNames.includes('button'), actions);