Building with Parenscript and Preact: Difference between revisions

Building with Parenscript and Preact (view source)

Revision as of 11:23, 18 May 2024

14 bytes added , 18 May 2024

no edit summary

Nick

Bureaucrats, Interface administrators, Administrators

85

edits

@@ 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:
-<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:
@@ Line 32: / Line 35: @@
 <syntaxhighlight lang="javascript">
 var s = $RefreshSig$();
-function UiButton(props) {
+function Counter() {
      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 = [];
-     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 [];
 });
-$RefreshReg$(UiButton, 'UiButton');
+$RefreshReg$(Counter, 'Counter');
 flushUpdates();
 </syntaxhighlight>