hackable with a repl
This commit is contained in:
parent
2ffabddba4
commit
f9970858d4
3 changed files with 70 additions and 8 deletions
62
app.scm
62
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
|
||||
});
|
||||
")))))
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>LIPS PWA</title>
|
||||
<link rel="manifest" href="/manifest.json"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.46.1/js/jquery.terminal.min.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.46.1/css/jquery.terminal.min.css" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/lips@beta/lib/css/terminal.css"
|
||||
rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/lips@beta/lib/js/terminal.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/terminal-prism/css/prism-coy.css"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Load the scheme interpreter -->
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
document.body
|
||||
component))
|
||||
|
||||
(define-macro (component view)
|
||||
(define-macro (component view . args)
|
||||
(when (= (remainder (length args) 2) 1)
|
||||
(error "Component expected even length args."))
|
||||
`(object
|
||||
:view
|
||||
(lambda () (,@view))))
|
||||
(lambda (vnode) (,@view))
|
||||
,@args))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue