The idea is to provide some kind of elegant, modern TypeScript development environment for building prerendered React apps that leverages CSR when needed. Server-side rendering is a non-goal for this project as this would be designed to emit stateless, JAMstack-y web apps.
0.1: CRA-like environment, macOS compatible
0.2: Cross-browser compatible
Would be nice if we solve for:
Router (based on React Router DOM — alternative is page-based)
<Head> support for SSG
Maybe there’s a stateless way to do this: What if <Link>s write to a store and then the store is inspected before or after ReactDOM.renderToString?
Markdown (via esbuild plugin, would need to support frontmatter)
This doesn’t solve for custom components. Realistically we would want to parse markdown, return the data structure from the loader, and essentially polyfill missing components. I don’t think we can return a function from an esbuild loader so instead we can provide some kind of <Markdown components={...} options={...}>. Then we can warn if a custom component was used but it doesn’t match the data structure.
State management
Having idiomatic state management would be a big deal. const app = { /* ... */ } is very easy to reason about and is intuitive. Only thing this pattern doesn’t solve for is contexts / providers, etc.
CRA template: Maybe if we call it create-duomo-app then we can tightly couple opinions for modern Sass / Duomo or simply we only include support for Sass but document how to use libs like Duomo which take advantage of Sass. Or we could call it create-ts-react-sass-app?
May want to add first-class support for ts-node and ts-jest?
zaydek
commented
3 years ago
The idea is to provide some kind of elegant, modern TypeScript development environment for building prerendered React apps that leverages CSR when needed. Server-side rendering is a non-goal for this project as this would be designed to emit stateless, JAMstack-y web apps.
Would be nice if we solve for:
<Head>support for SSG<Link>s write to a store and then the store is inspected before or after ReactDOM.renderToString?<Markdown components={...} options={...}>. Then we can warn if a custom component was used but it doesn’t match the data structure.const app = { /* ... */ }is very easy to reason about and is intuitive. Only thing this pattern doesn’t solve for is contexts / providers, etc.create-duomo-appthen we can tightly couple opinions for modern Sass / Duomo or simply we only include support for Sass but document how to use libs like Duomo which take advantage of Sass. Or we could call itcreate-ts-react-sass-app?ts-nodeandts-jest?