0.11.0 • Published 4 years ago
chyk v0.11.0
chyk
Chyk is a microframework to build universal SPAs with React.
Features
- preload route data
- code splitting via async components
- passing SSR data to the browser for the immediate hydration
- aborting data load using AbortController if switched to another route
- 404 and other status pages
Bonus
- Written in TypeScript
- Zero dependencies
- Only peer dependencies: react, react-dom, react-router, react-router-dom, react-router-config, history
- 2.4kB gzipped
Install
yarn add chyk
Usage
Server
createServer(async (request, response) => {
try {
const pathname = request.url || ""
const chyk = new Chyk({ routes, deps: { apiSdk: new DbClient() } })
await chyk.loadData(pathname)
const html = renderToString(createElement(ChykStaticComponent, { chyk }))
const { data, statusCode } = chyk.locationState
response.statusCode = statusCode
response.end(template({ html, data, statusCode }))
} catch (e) {
logger(e)
response.end(e)
}
})
Browser
new Chyk({
routes,
deps: { apiSdk: new DbClient() },
data: window.ssr_data,
statusCode: window.ssr_statusCode,
el: document.getElementById("app"),
})
Routes
export const routes = [
{
component: Layout,
dataKey: "layout",
loadData: layoutLoader,
routes: [
{
path: "/",
exact: true,
component: Home,
dataKey: "home",
loadData: homeLoader,
},
{
path: "/:slug",
component: Article,
exact: true,
dataKey: "article",
loadData: articleLoader,
},
{
component: NotFound,
loadData: async ({ chyk }) => chyk.set404(),
},
],
},
]
Loaders
const layoutLoader = async ({ abortController }, { apiClient }) => {
const [year, articles] = await Promise.all([
apiClient.getYear(abortController.signal),
apiClient.getArticles(abortController.signal),
])
return { year, articles }
}
Example
yarn example:server
yarn example:wds
0.11.0
4 years ago
0.11.0-alpha.2
4 years ago
0.11.0-alpha.1
4 years ago
0.11.0-beta.1
4 years ago
0.10.0-alpha.1
4 years ago
0.9.1
4 years ago
0.9.0
4 years ago
0.8.18
5 years ago
0.8.17
5 years ago
0.8.16
5 years ago
0.8.15
5 years ago
0.8.14
5 years ago
0.8.13
5 years ago
0.8.12
5 years ago
0.8.11
5 years ago
0.8.10
5 years ago
0.8.9
5 years ago
0.8.8
5 years ago
0.8.7
5 years ago
0.8.6
5 years ago
0.8.5
5 years ago
0.8.4
5 years ago
0.8.3
5 years ago
0.8.2
5 years ago
0.8.1
5 years ago
0.8.0
5 years ago
0.7.0
5 years ago
0.6.1
5 years ago
0.6.0
5 years ago
0.5.5
5 years ago
0.5.4
5 years ago
0.5.3
5 years ago
0.5.1
5 years ago
0.5.0
5 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago