silux

A Sibilisp based frontend framework and implementation of the Flux architecture, uses Snabbdom as virtual DOM library.

TL;DR

Silux is...

• ...a state management framework for frontend applications
• ...modular & extendable through a plugin architecture
• ...build with a small API surface
• ...lightweight (5 KB when gzipped)
• ...equipped with special macros for virtual DOM creation and routing.
• ...completely written in Sibilisp
• ...usable in Sibilisp, Sibilant and JavaScript

---

Documentation

Have a look into the 📖 API docs!

If you haven't used Sibilisp or Sibilant before, check them out, both are fun to use 😎

---

Example

Showcases a basic counter implementation.

(use "silux"
  silux-store
  silux-connect
  h)

(include "silux/vdom") ; Include the silux macros for an JSX like
(import-namespace silux) ; experience (see view function below)

(defsum signal ((:init new-state) ; Singals communicate a state change
                (:modify by-n)))                            

(defun update (state sign) ; A function to modify the current state
  (if (.is signal sign)
      (match-sum sign ((:init (new-state) ; Pattern match incoming signals
                        new-state)
                       (:modify (by-n)
                        (+ state by-n))))
      state))

(defun view ({state} emit) ; A function from state to VDOM
  ($div (:class "counter") ; Macro time! 😁
    ($h1 (:class "counter_count")
      (if (number? state) 
          state
          "-"))
    ($div (:class "counter_buttons")
      ($button (:class "counter_buttons_decr"
                :type "button"
                :onclick (#> (emit (signal.modify -1))))
        "- 1")
      ($button (:class "counter_buttons_incr"
                :type "button"
                :onclick (#> (emit (signal.modify +1))))
        "+ 1"))))

(defvar *run-app* ; *run-app* becomes the startup function
        (silux-connect ; Connects...
          (silux-store (nil) update) ; ...a store with no initial state...
          (hash :el (.query-selector document "#counter") ; ...to a DOM element...
                :view view))) ; ...and a VDOM creating function

(call *run-app* (signal.init 0)) ; Starts the app with an initial state of 0