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")
|
(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
|
(mount-root
|
||||||
(component
|
(component
|
||||||
(sxml
|
(sxml
|
||||||
(main
|
(main
|
||||||
(h1 "LIPS! PWA!")
|
(Heading (@ (text "LIPS! PWA!")))
|
||||||
(button (@ (onclick (lambda ()
|
(button (@ (onclick handle-click))
|
||||||
(set! click-count (+ 1 click-count))
|
~(format "~a clicks" click-count))
|
||||||
(print click-count))))
|
(div (@ (id "term")))
|
||||||
~(format "~a clicks" click-count))))))
|
(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"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>LIPS PWA</title>
|
<title>LIPS PWA</title>
|
||||||
<link rel="manifest" href="/manifest.json"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Load the scheme interpreter -->
|
<!-- Load the scheme interpreter -->
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,10 @@
|
||||||
document.body
|
document.body
|
||||||
component))
|
component))
|
||||||
|
|
||||||
(define-macro (component view)
|
(define-macro (component view . args)
|
||||||
|
(when (= (remainder (length args) 2) 1)
|
||||||
|
(error "Component expected even length args."))
|
||||||
`(object
|
`(object
|
||||||
:view
|
:view
|
||||||
(lambda () (,@view))))
|
(lambda (vnode) (,@view))
|
||||||
|
,@args))
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue