Wondering what’s next for npm?Check out our public roadmap! »

    chyk
    TypeScript icon, indicating that this package has built-in type declarations

    0.11.0 • Public • Published

    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

    Install

    npm i chyk

    DownloadsWeekly Downloads

    14

    Version

    0.11.0

    License

    MIT

    Unpacked Size

    35.5 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar