SBsbjs·Nov 8, 2023Submission
Show HN: A new way to create universal/ssr TypeScript apps with JSX
Hi everyone. This is a project I've been evolving slowly for almost 4 years now. I'm finally happy with the technical solutions. It hasn't been extracted into a lib yet bc there was no demand for it. There's no readme because it's been changing so drastically, so here's a few notable points:
1. The core is a node app under src/ that's 290 lines of typescript, which uses chokidar for hot-reloading, loads files under site/ to build, compiles tsx to js via sucrase, loads it via vm.compileFunction, and has a custom module system that only reloads the bare minimal needed
2. All JSX on the ssg side compiles to a string, and all JSX in the browser compiles directly to html/svg elements or document fragments, allowing you to set properties like onclick directly in the jsx. See src/file.ts and the two site/core/jsx*.ts files it references
3. My si
Read the rest
te/ has 1300+ markdown files (36k lines), 75 ts/tsx files (2.7k loc), and code changes within it take anywhere from 5ms to reload for .html.tsx files, to ~950ms for files that have to reload everything, e.g. model files or site-wide components, etc.
4. I've been experimenting with react-like DOM manipulation in components, the biggest example is in site/searchlist.tsx which is used on the Books and Book Snippets page of the website, as well as each individual book page that has snippets. So far it just builds up components and then toggles attributes on them in reaction to state changes. I've yet to need to solve the pattern of dynamically adding/removing things cleanly.