From 7255080d315e4af11a1aef58d3774598908237fc Mon Sep 17 00:00:00 2001 From: sophie Date: Thu, 1 Aug 2024 22:55:12 +0300 Subject: [PATCH] move from nano-jsx to Preact, benefits: 1. Smaller bundle size, 2. Quicker rendering, 3. Full vDom with proper states, 4. Proper pure functions --- bun.lockb | Bin 14678 -> 14676 bytes package.json | 2 +- src/plugins/ts-compiler.ts | 4 +- tsconfig.json | 2 +- website/scripts/blog.tsx | 118 +++++++++++++++------------------- website/scripts/blog_page.tsx | 48 -------------- website/scripts/blog_post.tsx | 36 +++++++++++ 7 files changed, 91 insertions(+), 119 deletions(-) delete mode 100644 website/scripts/blog_page.tsx create mode 100644 website/scripts/blog_post.tsx diff --git a/bun.lockb b/bun.lockb index a18a950afefd9c1da6219354dd8fd515167c0b28..674491d5a3dd24441340e5c07270c7712413c3b3 100755 GIT binary patch delta 1270 zcmYLJ3rJH@7(Qp4w#}Jkk9B=uMp@h1)y*_@)iOgXEK$nnT`Q|qnwf!^nFK{IVfL#; z^k8D-sIXcYmA&juMcR`ftn8su+Jm&xlK$=9)8)ededm1N|DVe}|9_w7Jlwcbra%H#4Cs%-w9FQFY4PwJx5&6Mbx4%QQYSdJ$XT*u0+Ih z6H0zi;ecjD&jI%lJ;pl3A&6C?zE{)>#Pv$B(=hI|nh+Jb`VjpPlQ3uyyTD1c%IS|f znjEK6-ng&PbyO9L`)DItFv$%tT&|=!V3%9zad2V$0__+hL8q|#B;!Yz3Py#+XE(BB zFKa|L&C7-~V+Zb-YMWxbm+>ICfCg#An;d2Yvl_ z_4-lidqy_>t_bWIFlBUGf+>Bb^QEOWud@Ehf~6_H+}QzFHA7nPGW_vUuoXzwM%yO) zx)o%kJ29kGlg3(<-JpyvHbwE~Xx@}<&(1Qgu#p?Ls=xiceKbc#O?-@*k0N9xc7~^w zo13p5I&Qukub|!xR0<$e#|5(v%9zw>2nii{Owy|$UB}TnSc@*!e^FBoEIIERAd_6p za74$&uzqbIohcFRvdNMzwseX8!i1V}zS$ooB?vmOG8=&^SMi!o<*3J!o(SQ3j?M*( zo(pCJqz@buP4~QWO0I3NUeCp_fwK+$qY4Nc+%4&BBwH)T)YDrShes7D?OOoHNTywMs4Nic+EdFcK|iO-=2hne9h((G2xO zKa2`vT}C9-x|x<{B^60!Arzs8VvWj}KU_pc=iB$aecL$C^S;k>&inDb=j?sOU`3N5 zX88C4dtn9?a$aY+}FG*MOnI|v`k-8d9b-D`p9BA zA;E;$<|EEV3_zTNI4u+QU5Nbp9bzbA4F&2IsFNlfi9vV{Lhw&L5=8vHX5dE z80&@ComM|*58XqR$-ECgFd~bCXt|P>gGFwpH^70>4K9ocpi!88vhW>bfL@X2a|+pN zFB?FX|H^&-m6X`6Ec#0n6DO@;CqTp@CEv^y;>r~miVN|up}Ovt!^Y^}H6S7gGuMtny?0jEZ-kgr%*e=>3KR{Ln=tZL7(n0}o@`}SOK@y93eRq5kPl4FJ@61Kvk5i@9p3u+ zK~90ByTFa-PlHOwg|qp8K4pulwQm8*H6P46E{XkLEMEWWZd=Rk8cAoPct{SR*oK&}7) diff --git a/package.json b/package.json index 304be8c..4d18e44 100644 --- a/package.json +++ b/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" } } \ No newline at end of file diff --git a/src/plugins/ts-compiler.ts b/src/plugins/ts-compiler.ts index 8e9de85..5066e8a 100644 --- a/src/plugins/ts-compiler.ts +++ b/src/plugins/ts-compiler.ts @@ -29,8 +29,8 @@ export default class TSCompiler extends Plugin { | "jsx", }, jsxFragment: "Fragment", - jsxFactory: "Nano.h", - jsxImportSource: "nano-jsx", + jsxFactory: "h", + jsxImportSource: "preact", jsx: "transform", write: false, bundle: true, diff --git a/tsconfig.json b/tsconfig.json index 52fca22..ec4c966 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,7 @@ "module": "ESNext", "moduleDetection": "force", "jsx": "react-jsx", - "jsxImportSource": "nano-jsx/esm", + "jsxImportSource": "preact", "allowJs": true, // Bundler mode diff --git a/website/scripts/blog.tsx b/website/scripts/blog.tsx index 9927f06..0b66168 100644 --- a/website/scripts/blog.tsx +++ b/website/scripts/blog.tsx @@ -1,7 +1,7 @@ -import Nano, { Component, Fragment } from "nano-jsx" -import { BlogPage } from "./blog_page"; -import { Giscus } from "./giscus"; -import { useState } from "nano-jsx/esm/hooks/useState.js"; +import { h, Component, Fragment, render } from 'preact'; +import { useEffect, useState } from 'preact/hooks'; +import { Giscus } from './giscus'; +import { BlogPost } from './blog_post'; export interface Metadata { title: string; @@ -12,74 +12,58 @@ export interface Metadata { const blog_posts = __BLOG_POSTS__ as string[]; -const fetchBlogPosts = async () => { - const metadatas: Metadata[] = []; +const Blog = () => { + const pageOpen = useState() + const blogPosts = useState(undefined) + const md = new URLSearchParams(location.search).get("md"); - for await (const blog of blog_posts) { - const req = await fetch("/blogs/" + blog + ".json"); - const json = await req.json() - json.filename = blog; - metadatas.push(json); - } + useEffect(() => { + (async () => { + const metadatas: Metadata[] = []; - return metadatas -} - -class Main extends Component { - async didMount() { - const blogPosts = await fetchBlogPosts() - this.update(blogPosts) - } - - list(metadatas: Metadata[]) { - const pageOpen = useState(undefined, "pageOpen"); - - return - } - - async handleSelfUpdate() { - const blogPosts = await fetchBlogPosts() - this.update(blogPosts) - } - - render(blogPosts: Metadata[]) { - - const pageOpen = useState(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; + for await (const blog of blog_posts) { + const req = await fetch("/blogs/" + blog + ".json"); + const json = await req.json() + json.filename = blog; + metadatas.push(json); } - } + + blogPosts[1](metadatas); + })(); + }, []) - if (pageOpenValueRender) { - return
+ if (blogPosts[0]) { + const found = blogPosts[0].find(z => z.filename == md); + if (found) { + pageOpen[1](found); } - - return <> -

blog & comments

- {() => { - if (blogPosts) return this.list(blogPosts) - else return

Loading...

- }} - - } + + if (pageOpen[0]) { + return + } + + return <> +

blog & comments

+ {(() => { + if (blogPosts[0]) { + return ; + } + else { return

Loading...

} + })()} + + ; } -Nano.render(
, document.getElementById("root")) + +render(, document.getElementById("root")!); \ No newline at end of file diff --git a/website/scripts/blog_page.tsx b/website/scripts/blog_page.tsx deleted file mode 100644 index bc826fa..0000000 --- a/website/scripts/blog_page.tsx +++ /dev/null @@ -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(undefined, "pageOpen"); - history.replaceState({}, "", location.pathname + "?md=" + this.metadata.filename); - - return <> -

blog & comments

- { - pageOpen[1](undefined); - history.replaceState({}, "", location.pathname + "?md="); - - this.updateParent(); - }}>return back? -
Scroll to bottom for comments ↓
- - { - () => { - if (!blogPost) return

Loading...

- else return
- } - } - - - } -} \ No newline at end of file diff --git a/website/scripts/blog_post.tsx b/website/scripts/blog_post.tsx new file mode 100644 index 0000000..f304b46 --- /dev/null +++ b/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

How did you get to here..?

; + + const blogPost = useState(); + + 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 <> +

blog & comments

+ { + history.replaceState({}, "", location.pathname + "?md="); + pageOpen[1](undefined); + }}>return back? +
Scroll to bottom for comments ↓
+ + { + (() => { + if (!blogPost[0]) return

Loading...

+ else return
+ })() + } + + +} \ No newline at end of file