Building with Parenscript and Preact: Difference between revisions

I have a thing for tools that are off the beaten path but are super powerful. I call them "secret weapons" since everyone sees "Lisp" or "Pascal" or whatever and immediately turns their brain off while you're doubling your productivity. I figured it might be fun to put something together with Parenscript to see what the fuss is all about. I saw an article from Holger Sindbaek about how he's making 10k a month off a Solitaire game, so I figured I might try to get in on some of that action; plus I have fond memories as a kid of opening FreeCell and watching the king's head turn left and right to follow the mouse.

<syntaxhighlight lang="lisp">(defcomponent -ui-button () (props)

  (with-defaults (on-click (disabled false) children) props

    (psx

    (:div ((on-click on-click)

            (class-name (class-names "ui-button" (when disabled "disabled")))

            (style (create "color"

                          (if disabled

                            "grey"

                            "black"))))

          children))))</syntaxhighlight>

function UiButton(props) {

     var disabled304 = 'undefined' === typeof props.disabled ? false : props.disabled;

     return [preact.h('div', Object.assign({ onClick : props.onClick,

                                            className : classNames('ui-button', disabled304 ? 'disabled' : null),

                                            style : { 'color' : disabled304 ? 'grey' : 'black' }

                                          }), [props.children])];

s(UiButton, '', false, function () {

$RefreshReg$(UiButton, 'UiButton');

And it's true, it only took about 50 lines of macro code to implement. Combine that with trident-mode to push the snippets to the frontend for evaluation, and you have a full fledged interactive hot reloading environment! I don't want to get all Reddit about it, but:

Parenscript is fundamentally flawed. It's a super-lightweight papering-over of JavaScript, and you become aware of that harsh reality immediately. It makes an attempt to look like the surface syntax of Common Lisp while maintaining none of its semantics, so you kind of have to juggle in your mind the JavaScript you want to get, the Parenscript you have to write, and the Common Lisp that would do something else if executed as CL. It's especially odd since JS has no cons cells, and Parenscript doesn't try to provide them-- <code>(cons 1 nil)</code> just becomes <code>cons(1, null);</code>. So it looks superficially a lot like CL, but isn't like it semantically at all. On top of that, Parenscript has a few bugs: it will just miscompile things sometimes, specifically its <code>loop</code> construct, and it has a bad habit of not declaring variables when you use <code>let</code>, which doesn't work in <code>use strict"</code> mode.