Building with Parenscript and Preact: Difference between revisions

Jump to navigation Jump to search

Building with Parenscript and Preact (view source)

Revision as of 11:23, 18 May 2024

14 bytes added ,  18 May 2024
no edit summary
No edit summary
No edit summary
Line 17: Line 17:
Since I want to side-step the modern frontend stack a bit, I found Preact as an alternative implementation of React in 3kb, and it [https://dev.to/jovidecroock/prefresh-fast-refresh-for-preact-26kg has a blog post] describing how to hook into its hot updating system. I quickly whipped up a macro which implements a JSX-like syntax, and a <code>defcomponent</code> macro for creating React components, so I can write something like this:
Since I want to side-step the modern frontend stack a bit, I found Preact as an alternative implementation of React in 3kb, and it [https://dev.to/jovidecroock/prefresh-fast-refresh-for-preact-26kg has a blog post] describing how to hook into its hot updating system. I quickly whipped up a macro which implements a JSX-like syntax, and a <code>defcomponent</code> macro for creating React components, so I can write something like this:


<syntaxhighlight lang="lisp">(defcomponent -ui-button () (props)
<syntaxhighlight lang="lisp">
  (with-defaults (on-click (disabled false) children) props
(defcomponent -counter (((counter set-counter) (use-state 0))) ()
    (psx
  (psx
    (:div ((on-click on-click)
  (:div ()
            (class-name (class-names "ui-button" (when disabled "disabled")))
        "The button has been clicked "
            (style (create "color"
        (:span ((style (create "color" "red")))
                          (if disabled
                (chain counter (to-string)))
                            "grey"
        " times."
                            "black"))))
        (:button ((onclick (lambda () (set-counter (1+ counter)))))
          children))))</syntaxhighlight>
                  "Increment"))))
</syntaxhighlight>
 
[[File:Clicked.png]]


and have it compile into:
and have it compile into:
Line 32: Line 35:
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
var s = $RefreshSig$();
var s = $RefreshSig$();
function UiButton(props) {
function Counter() {
     s();
     s();
     var disabled304 = 'undefined' === typeof props.disabled ? false : props.disabled;
     var _db1107 = preactHooks.useState(0);
    var counter = _db1107[0];
    var setCounter = _db1107[1];
     __PS_MV_REG = [];
     __PS_MV_REG = [];
     return [preact.h('div', Object.assign({ onClick : props.onClick,
     return [preact.h('div', Object.assign({ }), ['The button has been clicked '], [preact.h('span', Object.assign({ style : { 'color' : 'red' } }), [counter.toString()])], [' times.'], [preact.h('button', Object.assign({ onclick : function () {
                                            className : classNames('ui-button', disabled304 ? 'disabled' : null),
        __PS_MV_REG = [];
                                            style : { 'color' : disabled304 ? 'grey' : 'black' }
        return setCounter(counter + 1);
                                          }), [props.children])];
    } }), ['Increment'])])];
};
};
s(UiButton, '', false, function () {
s(Counter, 'useState{[counter, setCounter](0)}', false, function () {
     return [];
     return [];
});
});
$RefreshReg$(UiButton, 'UiButton');
$RefreshReg$(Counter, 'Counter');
flushUpdates();
flushUpdates();
</syntaxhighlight>
</syntaxhighlight>
Retrieved from "https://nickfa.ro/wiki/Special:MobileDiff/444"

Navigation menu