move from nano-jsx to Preact, benefits: 1. Smaller bundle size, 2. Quicker rendering, 3. Full vDom with proper states, 4. Proper pure functions

package.json

@@ -18,6 +18,6 @@
     "esbuild": "^0.23.0",
     "marked": "^13.0.2",
     "mime-types": "^2.1.35",
-    "nano-jsx": "^0.1.0"
+    "preact": "^10.23.1"
   }
 }

src/plugins/ts-compiler.ts

@@ -29,8 +29,8 @@ export default class TSCompiler extends Plugin {
             | "jsx",
         },
         jsxFragment: "Fragment",
-        jsxFactory: "Nano.h",
+        jsxFactory: "h",
-        jsxImportSource: "nano-jsx",
+        jsxImportSource: "preact",
         jsx: "transform",
         write: false,
         bundle: true,

tsconfig.json

@@ -6,7 +6,7 @@
     "module": "ESNext",
     "moduleDetection": "force",
     "jsx": "react-jsx",
-    "jsxImportSource": "nano-jsx/esm",
+    "jsxImportSource": "preact",
     "allowJs": true,
 
     // Bundler mode

website/scripts/blog.tsx

@@ -1,7 +1,7 @@
-import Nano, { Component, Fragment } from "nano-jsx"
+import { h, Component, Fragment, render } from 'preact';
-import { BlogPage } from "./blog_page";
+import { useEffect, useState } from 'preact/hooks';
-import { Giscus } from "./giscus";
+import { Giscus } from './giscus';
-import { useState } from "nano-jsx/esm/hooks/useState.js";
+import { BlogPost } from './blog_post';
 
 export interface Metadata {
   title: string;
@@ -12,7 +12,13 @@ export interface Metadata {
 
 const blog_posts = __BLOG_POSTS__ as string[];
 
-const fetchBlogPosts = async () => {
+const Blog = () => {
+  const pageOpen = useState<Metadata | undefined>()
+  const blogPosts = useState<Metadata[] | undefined>(undefined)
+  const md = new URLSearchParams(location.search).get("md");
+
+  useEffect(() => {
+    (async () => {
       const metadatas: Metadata[] = [];
 
       for await (const blog of blog_posts) {
@@ -22,64 +28,42 @@ const fetchBlogPosts = async () => {
         metadatas.push(json);
       }
     
-  return metadatas
+      blogPosts[1](metadatas);
-}
+    })();
+  }, [])
 
-class Main extends Component {
+  if (blogPosts[0]) {
-  async didMount() {
+    const found = blogPosts[0].find(z => z.filename == md);
-    const blogPosts = await fetchBlogPosts()
-    this.update(blogPosts)
-  }
-
-  list(metadatas: Metadata[]) {
-    const pageOpen = useState<Metadata | undefined>(undefined, "pageOpen");
-
-    return <ul>
-      {metadatas.map((n) => {
-        return <li>
-          <a onClick={
-            () => {
-              pageOpen[1](n);
-              this.update();
-            }
-          }>{n.title} (created {new Date(n.time * 1000).toLocaleString()})</a>
-        </li>
-      })}
-    </ul>
-  }
-
-  async handleSelfUpdate() {
-    const blogPosts = await fetchBlogPosts()
-    this.update(blogPosts)
-  }
-
-  render(blogPosts: Metadata[]) {
-
-    const pageOpen = useState<Metadata | undefined>(undefined, "pageOpen");
-    const md = new URLSearchParams(location.search).get("md");
-    let pageOpenValueRender = pageOpen[0];
-
-    if (blogPosts) {
-      const found = blogPosts.find(z => z.filename == md);
     if (found) {
       pageOpen[1](found);
-        pageOpenValueRender = found;
     }
   }
 
-    if (pageOpenValueRender) {
+  if (pageOpen[0]) {
-      return <div><BlogPage metadata={pageOpenValueRender} updateParent={this.handleSelfUpdate.bind(this)}></BlogPage></div>
+    return <BlogPost pageOpen={pageOpen}></BlogPost>
   }
 
   return <>
     <h1>blog & comments</h1>
-      {() => {
+    {(() => {
-        if (blogPosts) return this.list(blogPosts)
+      if (blogPosts[0]) {
-        else return <h3>Loading...</h3>
+        return <ul>
-      }}
+          {blogPosts[0].map((n) => {
-      <Giscus searchTerm="main"></Giscus>
+            return <li>
-    </>
+              <a onClick={
+                () => {
+                  pageOpen[1](n);
                 }
+              }>{n.title} (created {new Date(n.time * 1000).toLocaleString()})</a>
+            </li>
+          })}
+        </ul>;
+      }
+      else { return <h3>Loading...</h3> }
+    })()}
+    <Giscus searchTerm='main'></Giscus>
+  </>;
 }
 
-Nano.render(<Main></Main>, document.getElementById("root"))
+
+render(<Blog></Blog>, document.getElementById("root")!);

website/scripts/blog_page.tsx

@@ -1,48 +0,0 @@
-import { Component } from "nano-jsx"
-import { Giscus } from "./giscus";
-import { useState } from "nano-jsx/esm/hooks/useState.js";
-import type { Metadata } from "./blog";
-
-const fetchBlogPost = async (metadata: Metadata) => {
-  return (await fetch("/blogs/" + metadata.filename + ".html")).text();
-}
-
-export class BlogPage extends Component {
-  metadata: Metadata;
-  updateParent: () => void;
-
-  constructor(props: { metadata: Metadata, updateParent: () => void }) {
-    super(props);
-    this.metadata = props.metadata;
-    this.updateParent = props.updateParent;
-  }
-
-  async didMount() {
-    const blogPost = await fetchBlogPost(this.metadata)
-    this.update(blogPost)
-  }
-
-  render(blogPost: string) {
-    const pageOpen = useState<string | undefined>(undefined, "pageOpen");
-    history.replaceState({}, "", location.pathname + "?md=" + this.metadata.filename);
-
-    return <>
-      <h1>blog & comments</h1>
-      <a style="font-size:xx-large;" onClick={() => {
-        pageOpen[1](undefined);
-        history.replaceState({}, "", location.pathname + "?md=");
-
-        this.updateParent();
-      }}>return back?</a>
-      <div>Scroll to bottom for comments ↓</div>
-
-      {
-        () => {
-          if (!blogPost) return <h1>Loading...</h1>
-          else return <div dangerouslySetInnerHTML={{ __html: blogPost }}></div>
-        }
-      }
-      <Giscus searchTerm={this.metadata.filename}></Giscus>
-    </>
-  }
-}

website/scripts/blog_post.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "preact/hooks";
+import type { Metadata } from "./blog";
+import { Giscus } from "./giscus";
+
+
+export function BlogPost({ pageOpen }: { pageOpen: [Metadata | undefined, (z: Metadata | undefined) => void] }) {
+    if(!pageOpen[0]) return <h1>How did you get to here..?</h1>;
+
+    const blogPost = useState<string | undefined>();
+
+    history.replaceState({}, "", location.pathname + "?md=" + pageOpen[0].filename);
+
+    useEffect(() => {
+        (async () => {
+            const blogpost = await (await fetch("/blogs/" + pageOpen[0]!.filename + ".html")).text();;
+            blogPost[1](blogpost);
+        })();
+    }, [])
+
+    return <>
+        <h1>blog & comments</h1>
+        <a style="font-size:xx-large;" onClick={() => {
+            history.replaceState({}, "", location.pathname + "?md=");
+            pageOpen[1](undefined);
+        }}>return back?</a>
+        <div>Scroll to bottom for comments ↓</div>
+
+        {
+            (() => {
+                if (!blogPost[0]) return <h1>Loading...</h1>
+                else return <div dangerouslySetInnerHTML={{ __html: blogPost[0] }}></div>
+            })()
+        }
+        <Giscus searchTerm={pageOpen[0].filename}></Giscus>
+    </>
+}