hackable with a repl

app.scm

@@ -1,13 +1,63 @@
 (load "lib/mithril.scm")
 
-(define click-count 0)
+(define click-count
+  0
+  "Number of times the button has been clicked.")
+
+(define-macro (add-hook hook fn)
+  "(add-hook HOOK FN)
+
+Adds FN to HOOK."
+  `(set! ,hook (cons ,fn ,hook)))
+
+(define (run-hook hook)
+  "(run-hook HOOK)
+
+Runs all functions in HOOK."
+  (map
+   (lambda (fn) (fn))
+   hook))
+
+(define handle-click-hook
+  '()
+  "Hooks to run after the button is clicked.")
+
+(define (handle-click)
+  "(handle-click)
+
+The function that runs after the button is pressed.
+
+Increments `click-count', and runs `handle-click-hook'."
+  (set! click-count (+ 1 click-count))
+  (run-hook handle-click-hook))
+
+(define Heading
+  (component
+   (sxml
+    (h1 ~vnode.state.title))
+   :title "LIPS! PWA!")
+  "The page heading component.
+
+Attributes:
+* title: The title to display.
+
+__note__: Call (m.redraw) after attribute update.")
 
 (mount-root
  (component
   (sxml
    (main
-    (h1 "LIPS! PWA!")
-    (button (@ (onclick (lambda ()
-			  (set! click-count (+ 1 click-count))
-			  (print click-count))))
-	    ~(format "~a clicks" click-count))))))
+    (Heading (@ (text "LIPS! PWA!")))
+    (button (@ (onclick handle-click))
+	    ~(format "~a clicks" click-count))
+    (div (@ (id "term")))
+    (script
+     "
+const term = terminal({
+    selector: '#term', // you can use body for full screen terminal
+    dynamic: false, // dynamic scope, to have normal Scheme you should use false
+    name: 'demo', // name of the terminal if you want multiple REPL on same page
+    lips // LIPS namespace
+});
+")))))
+