xeact: 0.70.0 with useState

Signed-off-by: Xe Iaso <me@xeiaso.net>

5 files changed, 167 insertions, 3 deletions

diff --git a/blog/xeact-0.70.0-useState.markdown b/blog/xeact-0.70.0-useState.markdown
new file mode 100644
index 0000000..2910e11
--- /dev/null
+++ b/blog/xeact-0.70.0-useState.markdown
@@ -0,0 +1,159 @@
+---
+title: "Xeact 0.70.0: now with the useState hook"
+date: 2023-04-03
+tags:
+ - jsx
+ - react
+ - xeact
+ - frontend
+ - javascript
+---
+
+Xeact continues to dominate the front-end ecosystem. Every facet of
+the industry has been forever changed by Xeact, and we are all better
+for it. Today I have the momentous pleasure of introducing the newest
+version of Xeact: version 0.70.0. This allows you to track stateful
+values using the new `useState` hook.
+
+<xeblog-hero ai="Anything v3" file="solo-journey" prompt="1girl, green hair, hoodie, outdoors, breath of the wild, space needle, walking, long hair, highly detailed, futuristic"></xeblog-hero>
+
+To help illustrate the point, I have copied the entire source code of
+the useState function below:
+
+```javascript
+/**
+ * Allows a stateful value to be tracked by consumers.
+ *
+ * This is the Xeact version of the React useState hook.
+ *
+ * @type{function(any): [function(): any, function(any): void]}
+ */
+const useState = (value = undefined) => {
+  return [() => value, (x) => {
+    value = x;
+  }];
+};
+```
+
+Mimi, would you care to explain this?
+
+<xeblog-conv name="Mimi" mood="coffee">This code defines a function
+called `useState` that returns an array with two elements. The first
+element of the array is a function that takes no arguments and returns
+the initial value passed in as a parameter to the `useState` function
+or `undefined` if no value is given. This function acts as a getter
+for the current state value. The second element of the array is a
+function that takes a single argument and sets the value of `value`.
+This function acts as a setter for the state value. This code is
+implementing a simplified version of the `useState` hook in React, a
+commonly used library in JavaScript for building user
+interfaces.</xeblog-conv>
+<xeblog-conv name="Aoi" mood="wut">Why would I want to use this
+instead of normal variables?</xeblog-conv>
+
+The main reason you want to use a stateful hook like this is when you
+write more complicated components, like the [Mastodon share
+button](https://github.com/Xe/site/blob/7b691babb3312d9c2284416f03b50de34638bc58/src/frontend/components/MastodonShareButton.tsx)
+at the bottom of every post. At a high level, pulling values from HTML
+elements requires you to either declare each element in variables and
+then assemble the component [like this waifud admin panel
+component](https://github.com/Xe/waifud/blob/aa7d983fb5c703a623f4fadf24e17fd4f531a688/frontend/instance_create.tsx#L25):
+
+```javascript
+// SomeForm.jsx
+
+export default function SomeForm() {
+  const input = <input type="text" placeholder="words" />;
+  
+  return (
+    <div>
+      {input}
+      <button onClick={(e) => alert(input.value)}>Alert</button>
+    </div>
+  );
+}
+```
+
+This creates an input box and a button. When you click on the button,
+it turns whatever you put into the box into an alert.
+
+However, we can do better.
+
+The `useState` hook in React allows you to associate components with
+stateful values, so you can write out all the code like this:
+
+```javascript
+// SomeForm.jsx
+
+import { useState } from "react";
+
+export default function SomeForm() {
+  const [msg, setMsg] = useState("");
+  
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="words"
+        onInput={(e) => setMsg(e.target.value)}
+      />
+      <button onClick={(e) => alert(msg)}>Alert</button>
+    </div>
+  );
+}
+```
+
+As you can see, this lets you have the state be updated in the
+`oninput` handler of the `<input>` box and then used in the `onclick`
+handler of the button.
+
+The `useState` Xeact hook also lets you do this, but with one
+significant difference: updating the value in the state container
+_does not_ trigger a redraw of the relevant components that use those
+values. This does limit the usefulness of the Xeact `useState`
+container, but I bet that I'll figure out a way around this should
+this ever become relevant.
+
+<xeblog-conv name="Aoi" mood="coffee">Or you could just use
+[preact](https://preactjs.com) like a normal person...</xeblog-conv>
+<xeblog-conv name="Mara" mood="happy">Doing that would not only make
+sense, that would mean we need to be more inventive for the
+blog!</xeblog-conv>
+<xeblog-conv name="Aoi" mood="facepalm">You people astound
+me.</xeblog-conv>
+
+Oh, and the state reader is a function instead of a value:
+
+```javascript
+// SomeForm.jsx
+
+import { useState } from "xeact";
+
+export default function SomeForm() {
+  const [getMsg, setMsg] = useState("");
+  
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="words"
+        onInput={(e) => setMsg(e.target.value)}
+      />
+      <button onClick={(e) => alert(getMsg())}>Alert</button>
+    </div>
+  );
+}
+```
+
+Either way, I suspect that this will propel Xeact towards its goal of
+getting many GitHub stars. I've incorporated this state hook into my
+blog and will write more about it when I've gotten more practical
+experience with it.
+
+Thank you for following the development of Xeact! There's sure to be
+more in the future as I figure out what the hell I am supposed to be
+doing. I'm also starting to realize that I don't suck at frontend
+development, what I really suck at is design, which is what manifests
+as feeling like you suck at frontend development.
+
+I'm sure I'll figure it out. Gotta burn sticks to make fire.
diff --git a/src/frontend/deno.lock b/src/frontend/deno.lock
index fcd3847..d246c41 100644
--- a/src/frontend/deno.lock
+++ b/src/frontend/deno.lock
@@ -32,6 +32,7 @@
     "https://esm.sh/v113/xterm@5.1.0/es2022/xterm.mjs": "e0697e20cbe92d2177abe9fb744457df5c0f89f77a8e8ce7e9515b7d60f5cb57",
     "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/jsx-runtime.js": "a8e0e04c44bbc80bb0a8c59e1d3ee338dd799e25e89792cadb67f00bf4f6ceca",
     "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/xeact.js": "4b943b147cddd20b514b0cf85c68438e585712e809d8da4283ee5f0b8ac1ab8d",
-    "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/xeact.ts": "b6def4bebff19548539f4708cff028cd1fd7abdf6bfd7b3cd8dd5025b97d676e"
+    "https://xena.greedo.xeserv.us/pkg/xeact/v0.70.0/xeact.js": "9c422c796fdd745a9c2115e5b6b1c1f6d762e95421be4090b0f267d8c4311f74",
+    "https://xena.greedo.xeserv.us/pkg/xeact/v0.70.0/xeact.ts": "b6def4bebff19548539f4708cff028cd1fd7abdf6bfd7b3cd8dd5025b97d676e"
   }
 }
diff --git a/src/frontend/import_map.json b/src/frontend/import_map.json
index ece602c..931c7c4 100644
--- a/src/frontend/import_map.json
+++ b/src/frontend/import_map.json
@@ -8,7 +8,7 @@
         "@esbuild": "https://deno.land/x/esbuild@v0.17.13/mod.js",
         "@esbuild/deno": "https://deno.land/x/esbuild_deno_loader@0.6.0/mod.ts",
 
-        "xeact": "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/xeact.ts",
+        "xeact": "https://xena.greedo.xeserv.us/pkg/xeact/v0.70.0/xeact.ts",
         "xeact/jsx-runtime": "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/jsx-runtime.js",
         "@/": "./",
         "./": "./"
diff --git a/static/css/hack.css b/static/css/hack.css
index ce40f66..c3573e2 100644
--- a/static/css/hack.css
+++ b/static/css/hack.css
@@ -192,7 +192,7 @@ a:hover {
 .hack code,
 .hack em,
 .hack strong {
-  font-size: 0.8rem;
+  font-size: 1rem;
   line-height: 20px;
 }
 .hack blockquote,
diff --git a/static/css/shim.css b/static/css/shim.css
index 3642efd..21ba3ad 100644
--- a/static/css/shim.css
+++ b/static/css/shim.css
@@ -143,6 +143,10 @@ h1, h2, h3, h4, h5, h6 {
   display: none;
 }
 
+.hack pre {
+  line-height: 1.125rem;
+}
+
 @media (prefers-color-scheme: light) {
     .warning {
         background-color: #fbf1c7;