Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

chyk


Chyk is a microframework to build universal SPAs with React. Introduction

Features

  • preload route data
  • code splitting via async components
  • data diff
  • scroll restoration
  • 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.3kB gzipped

Install

yarn add chyk

Usage

Example

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

About

Chyk is a framework to build universal SPAs on TypeScript, React.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages