hara.runtime.js-playground.client
Browser-side playground client.
Written as a proper l/script :js namespace so it can be compiled with js.react, xt.lang.common-lib/return-eval and the rest of the xt/js ecosystem. It is emitted by hara.runtime.js-playground and served to the browser as an ES module.
Vectors such as [:div ...] are transpiled to React.createElement calls because the playground emits scripts with :lang/jsx false.
ActiveTabPanel
added in 4.0
(ActiveTabPanel {:# [activeTab tabs stage tabContent]})renders the content area for the active tab
App
added in 4.0
(App #{[config]})top-level playground UI with a menu bar, tabs and collapsible message sidebar
DomNode
added in 4.1
(DomNode {:# [node]})mounts a raw DOM node inside a React-managed div
eval-body
added in 4.0
(eval-body body)evaluates a JS string using xt.lang.common-lib/return-eval and decodes the result. Returns a vector of status value.
find-tab-index
added in 4.1
(find-tab-index tabs id)finds the index of a tab by id
format-body
added in 4.0
(format-body body)returns a string representation of a message body for display
get-config
added in 4.0
(get-config)reads playground config from window.PLAYGROUND_CONFIG
has-tab?
added in 4.1
(has-tab? tabs id)checks whether a tab exists
make-add-message
added in 4.0
(make-add-message messagesRef setMessages)creates the add-message callback that prepairs pairs so the latest pair is first
make-tab-id
added in 4.1
(make-tab-id label)returns a unique tab id
make-websocket
added in 4.0
(make-websocket ws-url setStatus* add-message messagesRef setMessages)creates a websocket and wires up playground event handlers
MessageItem
added in 4.0
(MessageItem {:# [m]})renders a sent/reply pair with expand/collapse and print button
MessageList
added in 4.0
(MessageList {:# [messages]})renders the list of sent/received messages
mount!
added in 4.0
(mount!)mounts the playground app into #root and exposes global React and PLAYGROUND
run-eval
added in 4.0
(run-eval ws add-message messagesRef setMessages msg)handles an incoming eval message as a sent/reply pair
send-response
added in 4.0
(send-response ws id status body)sends a response frame back over the websocket
TabBar
added in 4.0
(TabBar {:# [tabs activeTab setActiveTab createTab closeTab]})renders the configurable tab bar
TopMenu
added in 4.0
(TopMenu {:# [title status url messages showMessages setShowMessages]})top menu bar with a compact connection status dropdown