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