Side-effect import of the tyrell-components npm package.
Requiring this namespace registers all Tyrell web custom elements (ty-button, ty-input, ty-icon, ty-select, ...) with the browser's CustomElementRegistry, so they can be used as HTML tags in any ClojureScript framework (Replicant, Reagent, Helix, UIx, ...).
Use once in your app's entry namespace:
(ns my.app (:require [tyrell.components] [tyrell.router :as router] [tyrell.lucide :as lucide]))
The npm package itself is declared as a dependency in this artifact's
deps.cljs, so shadow-cljs auto-installs it. No manual npm install
of tyrell-components is required for CLJS consumers.
Side-effect import of the tyrell-components npm package.
Requiring this namespace registers all Tyrell web custom elements
(ty-button, ty-input, ty-icon, ty-select, ...) with the browser's
CustomElementRegistry, so they can be used as HTML tags in any
ClojureScript framework (Replicant, Reagent, Helix, UIx, ...).
Use once in your app's entry namespace:
(ns my.app
(:require [tyrell.components]
[tyrell.router :as router]
[tyrell.lucide :as lucide]))
The npm package itself is declared as a dependency in this artifact's
deps.cljs, so shadow-cljs auto-installs it. No manual `npm install`
of tyrell-components is required for CLJS consumers.No vars found in this namespace.
Main i18n namespace providing translation protocols and core functionality. Based on toddler.i18n but adapted for standalone use.
Main i18n namespace providing translation protocols and core functionality. Based on toddler.i18n but adapted for standalone use.
Keyword-based translations with in-memory caching. Uses qualified keywords for storage like toddler.
Keyword-based translations with in-memory caching. Uses qualified keywords for storage like toddler.
Number and currency formatting using native Intl.NumberFormat. Extends the Translator protocol for numbers.
Number and currency formatting using native Intl.NumberFormat. Extends the Translator protocol for numbers.
String-based translations using the original text as the key. Extends the Translator protocol for String objects.
String-based translations using the original text as the key. Extends the Translator protocol for String objects.
Date and time formatting using native Intl.DateTimeFormat. Extends the Translator protocol for JS Date objects.
Date and time formatting using native Intl.DateTimeFormat. Extends the Translator protocol for JS Date objects.
ClojureScript utilities for registering icons with the ty icon system.
Usage: (ns my-app.icons (:require [tyrell.icons :as icons] [tyrell.lucide :as lucide]))
;; Register icons by name (icons/register! {:check lucide/check :heart lucide/heart :star lucide/star})
;; Or use string keys if you prefer (icons/register! {"check" lucide/check "heart" lucide/heart})
ClojureScript utilities for registering icons with the ty icon system.
Usage:
(ns my-app.icons
(:require [tyrell.icons :as icons]
[tyrell.lucide :as lucide]))
;; Register icons by name
(icons/register!
{:check lucide/check
:heart lucide/heart
:star lucide/star})
;; Or use string keys if you prefer
(icons/register!
{"check" lucide/check
"heart" lucide/heart})Dynamic layout context system using Clojure's dynamic vars. Provides thread-local container dimensions and responsive utilities.
Dynamic layout context system using Clojure's dynamic vars. Provides thread-local container dimensions and responsive utilities.
Core positioning engine for floating elements. Adapted from toddler.popup positioning logic.
Core positioning engine for floating elements. Adapted from toddler.popup positioning logic.
CLJS-namespaced re-exports of the React component wrappers from
the npm tyrell-react package.
For React-based CLJS frameworks (Reagent, re-frame, UIx, Helix), require this namespace instead of the npm package directly:
(ns my.app (:require [tyrell.components] ; registers <ty-*> elements [tyrell.react :as ty])) ; React component vars
[:> ty/Button {:flavor "primary"} "Save"] [:> ty/Input {:label "Email" :on-change handler}]
Each component is re-exported under TWO names:
TyButton, TyInput, ... (explicit, ty-prefixed)Button, Input, ... (short, React-idiomatic)Use whichever your team prefers.
Note: this namespace requires tyrell-react to be installed via npm.
It is NOT auto-pulled by dev.gersak/tyrell's deps.cljs — only Track A
(React-based CLJS) users need the wrapper package, so the npm install
stays opt-in:
npm install tyrell-react
CLJS-namespaced re-exports of the React component wrappers from
the npm `tyrell-react` package.
For React-based CLJS frameworks (Reagent, re-frame, UIx, Helix),
require this namespace instead of the npm package directly:
(ns my.app
(:require [tyrell.components] ; registers <ty-*> elements
[tyrell.react :as ty])) ; React component vars
[:> ty/Button {:flavor "primary"} "Save"]
[:> ty/Input {:label "Email" :on-change handler}]
Each component is re-exported under TWO names:
- `TyButton`, `TyInput`, ... (explicit, ty-prefixed)
- `Button`, `Input`, ... (short, React-idiomatic)
Use whichever your team prefers.
Note: this namespace requires `tyrell-react` to be installed via npm.
It is NOT auto-pulled by `dev.gersak/tyrell`'s `deps.cljs` — only Track A
(React-based CLJS) users need the wrapper package, so the npm install
stays opt-in:
npm install tyrell-reactSimple router for ty web components using zipper-based tree structure
Simple router for ty web components using zipper-based tree structure
Thin CLJS wrapper over wc-shim.js so you don't touch classes or js*. Provides helpers for attributes, props, shadow DOM, and hot reload support.
Thin CLJS wrapper over wc-shim.js so you don't touch classes or js*. Provides helpers for attributes, props, shadow DOM, and hot reload support.
Utility functions for the ty library
Utility functions for the ty library
Simplified value handling using multimethods. Each component registers its parse/normalize functions once.
The Pattern:
Simplified value handling using multimethods. Each component registers its parse/normalize functions once. The Pattern: 1. Parse any input format to internal value 2. Compare parsed values to detect changes 3. Sync to property, attribute, and state 4. Normalize for consistent attribute display
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |