TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: A new way to create universal/ssr TypeScript apps with JSX

1 点作者 sbjs超过 1 年前
Hi everyone. This is a project I&#x27;ve been evolving slowly for almost 4 years now. I&#x27;m finally happy with the technical solutions. It hasn&#x27;t been extracted into a lib yet bc there was no demand for it. There&#x27;s no readme because it&#x27;s been changing so drastically, so here&#x27;s a few notable points:<p>1. The core is a node app under src&#x2F; that&#x27;s 290 lines of typescript, which uses chokidar for hot-reloading, loads files under site&#x2F; 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<p>2. All JSX on the ssg side compiles to a string, and all JSX in the browser compiles directly to html&#x2F;svg elements or document fragments, allowing you to set properties like onclick directly in the jsx. See src&#x2F;file.ts and the two site&#x2F;core&#x2F;jsx*.ts files it references<p>3. My site&#x2F; has 1300+ markdown files (36k lines), 75 ts&#x2F;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.<p>4. I&#x27;ve been experimenting with react-like DOM manipulation in components, the biggest example is in site&#x2F;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&#x27;ve yet to need to solve the pattern of dynamically adding&#x2F;removing things cleanly.

暂无评论

暂无评论