directives
Pre-built custom directives for json-render — formatting, math, string manipulation, and i18n. Use when working with @json-render/directives, defining custom directives with defineDirective, or adding $format, $math, $concat, $count, $truncate, $pluralize, $join, or $t to specs.
By vercel-labs · 5,110 installs
npx skills add vercel-labs/json-render --skill directives
Source repository · Upstream listing
@json render/directives
Pre built custom directives for @json render/core . Drop them into your catalog and renderer to add formatting, math, string manipulation, and i18n.
Quick Start
To add factory directives like createI18nDirective , spread the array:
Defining Custom Directives
Use defineDirective from @json render/core :
Rules:
Name must start with $
Name must not conflict with built in keys ( $state , $cond , $computed , $template , $item , $index , $bindState , $bindItem )
Resolvers should call resolvePropValue on sub values to support composition
Built in Directives
$format — Locale aware value formatting
Formats values using Intl formatters. Supports date , currency , number , and percent .
Fields: $format (date currency number percent), value (any expression), locale? (string), currency? (string, default "USD"), notation? (string), style? ("relative" for relative dates), options? (extra Intl options).
$math — Arithmetic operations
Operations: add , subtract , multiply , divide , mod , min , max , round , floor , ceil , abs . Unary ops ( round , floor , ceil , abs ) only use a . Division by zero returns 0 .
Fields: $math (operation enum), a? (first operand, default 0), b? (second operand, default 0).
$concat — String concatenation
Fields: $concat (array of values to resolve and join into a string).
$count — Array/string length
Returns .length of arrays or strings, 0 for other types.
Fields: $count (value to count).
$truncate — Text truncation
Fields: $truncate (value to truncate), length? (max chars, default 100), suffix? (string, default "...").
$pluralize — Singular/plural forms
Output: "3 items" , "1 item" , or "no items" .
Fields: $pluralize (count value), one (singular label), other (plural label), zero? (zero label).
$join — Join array elements
Fields: $join (array to join), separator? (string, default ", ").
createI18nDirective — Internationalization factory
Usage in specs:
Fields: $t (translation key), params? (interpolation parameters, values accept expressions).
Config: locale (current locale), messages (Record<locale, Record<key, string ), fallbackLocale? (fallback when key missing).
Composition
Directives compose naturally — each resolver calls resolvePropValue on its inputs, so directives can wrap other directives or built in expressions:
Resolves inside out: $state reads from state, $math multiplies, $format formats as currency.
Wiring into Renderers
All four renderers (React, Vue, Svelte, Solid) accept directives on their provider and createRenderer output:
For prompt generation, pass the same array:
Key Exports
Export Purpose
formatDirective $format directive definition
mathDirective $math directive definition
concatDirective $concat directive definition
countDirective $count directive definition
truncateDirective $truncate directive definition
pluralizeDirective $pluralize directive definition
joinDirective $join directive definition
createI18nDirective Factory for $t i18n directive
standardDirectives Array of all 7 non factory directives
I18nConfig Type for i18n configuration