Skip to content
Chyk is a framework to build universal SPAs on TypeScript, React.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 589e952 Jan 20, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example use pathname instead of keys, fix cleanLocationState Nov 24, 2019
src fix history bug Jan 20, 2020
.editorconfig first commit Jul 9, 2019
.gitignore
LICENSE first commit Jul 9, 2019
README.md added video Dec 1, 2019
package.json v0.9.1 Jan 20, 2020
prettier.config.js first commit Jul 9, 2019
tsconfig.json adjustments Jul 9, 2019
yarn.lock upgrade deps Dec 24, 2019

README.md

chyk


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

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

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
You can’t perform that action at this time.