@me1531 fructure has a high-enough level of meaningful editing actions that logging them (and replaying as animation) as-is could already be close to a worthwhile ~semantic history. Maybe it’s already part of fructure, will look later, but http://tomasp.net/histogram/#s3 reminded me.
Working on using React from Urlang. (urlang
(urmodule react ; saved in react.js
(import $ setTimeout req React ReactDOM this)
;;; A Counter component
(var [Counter
(React.createClass
(object
[getInitialState (λ() (object [count 0]))]
[handleClick (λ() (this.setState (object [count (+ this.state.count 1)])))]
[render (λ() @jsx{@button[onClick: @ur[this.handleClick]]{
@ur[(+ "Click me! Number of clicks: "
this.state.count)]}})]))])
(define ($0 selector) (ref ($ selector) 0))
(ReactDOM.render (React.createElement Counter) ($0 "#example"))))
Running the racket program generates a react.js which find the div (DOM element) with the name example. It then uses that element to render a Counter.
The Counter is a React component with an initial state where count is 0.
The method render is called by the React system when the state changes. Based on the current state it renders a new dom element to display.
The jsx macro allows me to mix html tags (such as button) with javascript.
Same example with “React Hooks”: (urlang
(urmodule example ; saved in example.js
(import $ React ReactDOM)
(define (Counter)
(use-state count set-count 0)
@jsx{@div[@p{You clicked @ur[count] times}
@button[onClick: @ur[(λ() (set-count (+ count 1)))]]{
Click me}]})
(define ($0 selector) (ref ($ selector) 0))
(ReactDOM.render (React.createElement Counter) ($0 "#example"))))
awesome :)
@soegaard2 I hope that you create something for Om (or something like it written in urlang)
Om?
yes
What’s the elevator pitch?
it’s like react, but if you had real functional programming instead of JS
@soegaard2 I really wish to see https://github.com/vadimdemedes/ink ported to Racket. The ported version doesn’t necessarily need to use React (which brings all JS madness)—we really only need a reconciliator engine.
Well, Urlang is JS with S-expressions and macros. I can make it feel more Racket-like, but it will still be JS.
That being said, you can get surprisingly far with macros. The space invaders example looks a lot like HtDP programs: https://github.com/soegaard/urlang/blob/master/urlang-examples/space-invaders/space-invaders.rkt#L135