React bindings and editor IA prototype

[davazp]

Sharing here to not polute the issues.

I asked Claude to write react bindings and write a extensible (update the code inside itself) in common lisp with a REPL, a source editor and an inspector...

I think it's very impressive. With a custom FFI for JSCL, and CL that there isn't as much code as JS out there. With all the subtle clstring/jsstring and full of edge cases to workaround in JSCL.

With bindings for codemirror for free.

jscl-react.mov

Sure I would improve the implementation in some areas. but see the attached example. I think it's more than acceptable and super easy to change/refactor.

CL with macros plays so nice with react.

(defcomponent repl-input (&key current-package on-submit)
  (:state (input-text ""))
  (:ref textarea-ref)

  (:effect ()
    ;; Focus the textarea on mount
    (let ((el (oget textarea-ref "current")))
      (when (not (eq el #j:null))
        ((oget el "focus")))))

  (let ((prompt (concatenate 'string (package-name (find-package current-package)) "> ")))
    (jsx :div :style (ide-style :repl-input-row)
      (:span :style (ide-style :repl-prompt) prompt)
      (:textarea
        :ref textarea-ref
        :style (ide-style :repl-textarea)
        :rows 1
        :value input-text
        :on-change (lambda (e)
                     (set-input-text (clstring (oget e "target" "value"))))
        :on-key-down (lambda (e)
                       (let ((key (clstring (oget e "key")))
                             (shift (oget e "shiftKey")))
                         (when (and (string= key "Enter") (not (eq shift #j:true)))
                           ((oget e "preventDefault"))
                           (let ((text (string-trim '(#\space #\newline) input-text)))
                             (when (and (not (string= text ""))
                                        (not (%sexpr-incomplete text)))
                               (funcall on-submit text)
                               (set-input-text ""))))))))))

[davazp]

The react bindings: https://gist.github.com/davazp/aeb89f35e1a221eecdde49ea20162c2f

[kchanqvq]

The JSX macro is much nicer than the one I saw before (in an earlier React binding). I always thought this should be the way to do it. This is mostly Spinneret!

[kchanqvq]

The code in the gist is quite acceptable as well!

[davazp]

If anyone has any cool ideas of quick prototypes that I can spin up let me know. It's fun to see some quick screenshots to get inspiration.

[vlad-km]

Great work!
And nice prospects :)