Respo: A virtual DOM library in Calcit-js

Inspired by React and Reagent. Previously Respo/respo.cljs.

• Home http://respo-mvc.org
• Bundled example
• Guide

Project Info

• Version: 0.16.21
• Init Function: respo.main/main!
• Reload Function: respo.main/reload!
• Core Namespaces: 33 namespaces providing virtual DOM, rendering, components, and utilities
• Dependencies: memof, lilac, calcit-test modules

Usage

In package.cirru and run caps:

{}
  :dependencies $ {}
    |Respo/respo.calcit |main

DOM syntax

ns app.demo $ :require
  respo.core :refer $ div

defn comp-demo (dispatch!)
  div
    {}
      :class-name "|demo-container"
      :style $ {} (:color :red)
      :on-click $ fn (event d!)
        d! :clicked
    div $ {}

More examples adapted from compact.cirru:

ns app.demo $ :require
  respo.core :refer $ defcomp a <>

defcomp comp-link (href text)
  a
    {} $ :href href
    <> text

ns app.demo $ :require
  respo.core :refer $ list-> div

defn comp-list ()
  list-> ({})
    [] $ [] :a
      div $ {}

Text Node:

ns app.demo $ :require
  respo.core :refer $ <>

defn comp-text (content)
  <> content

  ; with styles
  <> content $ {}
    :color :red
    :font-size 14

Component definition:

ns app.demo $ :require
  respo.core :refer $ div <>

let
    comp-container $ fn (content)
      div
        {}
          :class-name |demo-container
          :style $ {} (:color :red)
        <> content

App initialization:

ns app.demo $ :require
  respo.core :refer $ render!

; initialize store and update store
let
    *store $ atom $ {} (:point 0) (:states {})
    updater $ fn (store op)
      tag-match op
        (:TODO a b) store
        _ store
    dispatch! $ fn (op)
      reset! *store $ updater @*store op
    mount-point nil
    comp-container $ fn (state) state
  dispatch! $ :: :TODO 1 2

  ; render to the DOM
  defn render-app! ()
    render! mount-point (comp-container @*store) dispatch!

Rerender on store changes:

let
    *store $ atom $ {} (:point 0)
    render-app! $ fn () nil
  add-watch *store :changes $ fn ()
    render-app!

Reset virtual DOM caching during hot code swapping, and rerender:

ns app.demo $ :require
  respo.core :refer $ clear-cache!

let
    *store $ atom $ {} (:point 0)
    render-app! $ fn () nil
  add-watch *store :changes $ fn ()
    render-app!
  remove-watch *store :changes
  add-watch *store :changes $ fn ()
    render-app!
  clear-cache!
  render-app!

Adding effects to component:

ns app.demo $ :require
  respo.core :refer $ div

let
    effect-a $ fn (text)
      fn (action parent-element at-place?)
        println action
        ; action could be :mount :update :amount
        when (= :mount action) nil
  defn comp-a (text)
    []
      effect-a text
      div {}

Define a hooks plugin based on Calcit Record, better use a pure function:

ns app.demo $ :require
  respo.core :refer $ div <>

let
    plugin-x $ fn (states options)
      %::
        %{} :PluginX
          :render $ fn (self) (nth self 1)
          :show $ fn (self d! ? text) nil
        , :plugin-name
        div {} (<> "|Demo")

License

MIT

---

Documentation Index (For LLM Tool Integration)

This index helps LLM tools automatically fetch and reference documentation using relative paths and the cr CLI.

Getting Started

• Beginner Guide - Introduction to Respo concepts and component definition
• Respo-Agent Guide - 🤖 Detailed guide for LLM agents developing Respo apps (debugging, patterns, CLI tools)
• API Documentation Overview - Quick reference for all APIs

Guides and Concepts (see docs/guide/)

Topic	Path	Overview
Why Respo	docs/guide/why-respo.md	Motivation and design philosophy
Virtual DOM	docs/guide/virtual-dom.md	Understanding virtual DOM concepts
Base Components	docs/guide/base-components.md	Core component patterns
DOM Elements	docs/guide/dom-elements.md	HTML element creation and usage
Component States	docs/guide/component-states.md	Managing component state
DOM Properties	docs/guide/dom-properties.md	DOM property binding
DOM Events	docs/guide/dom-events.md	Event handling in Respo
Styles	docs/guide/styles.md	CSS and styling approach
Render Lists	docs/guide/render-list.md	Efficient list rendering
Hot Swapping	docs/guide/hot-swapping.md	Hot code reloading setup
Server Rendering	docs/guide/server-rendering.md	SSR capabilities
Pros and Cons	docs/guide/pros-and-cons.md	Framework comparison

API Reference (see docs/apis/)

Core macros and functions for building applications:

API	Path	Purpose
defcomp	docs/apis/defcomp.md	Define components with macro
defeffect	docs/apis/defeffect.md	Define lifecycle effects
div	docs/apis/div.md	Create div elements
create-element	docs/apis/create-element.md	Dynamically create elements
render!	docs/apis/render!.md	Sync virtual DOM to real DOM
render-app	docs/apis/render-app.md	Application rendering
expand-tag	docs/apis/expand-tag.md	Expand tag shortcuts
comp-space	docs/apis/comp-space.md	Spacing component
comp-inspect	docs/apis/comp-inspect.md	Inspection/debugging component
clear-cache!	docs/apis/clear-cache!.md	Clear memoization cache
patch-instance!	docs/apis/patch-instance.md	Patch DOM instances
activate-instance	docs/apis/activate-instance.md	Activate DOM instances
pick-states	docs/apis/pick-states.md	Extract component states
purify-element	docs/apis/purify-element.md	Clean element markup
mute-element	docs/apis/mute-element.md	Silence element output
make-html	docs/apis/make-html.md	Generate HTML
make-string	docs/apis/make-string.md	Serialize to string
find-element-diffs	docs/apis/find-element-diffs.md	Find DOM differences
apply-dom-changes	docs/apis/apply-dom-changes.md	Apply DOM patches
realize-ssr!	docs/apis/realize-ssr_.md	Server-side rendering
list->	docs/apis/list->.md	Create list containers

Agent Workflows

Agent-oriented CLI workflows (query/check-md automation) are maintained in Agents.md.