@fastify/react 0.1.0 → 0.2.0-rc.1

package/README.md

@@ -1,90 +1,5 @@
-# fastify-dx-react [![NPM version](https://img.shields.io/npm/v/fastify-dx-react.svg?style=flat)](https://www.npmjs.com/package/fastify-dx-react) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://standardjs.com/)
+<br>
 
-- [**Introduction**](https://github.com/fastify/fastify-dx/blob/main/packages/fastify-dx-react/README.md#introduction)
-- [**Quick Start**](https://github.com/fastify/fastify-dx/blob/main/packages/fastify-dx-react/README.md#quick-start)
-- [**Package Scripts**](https://github.com/fastify/fastify-dx/blob/main/packages/fastify-dx-react/README.md#package-scripts)
-- [**Basic Setup**](https://github.com/fastify/fastify-dx/blob/main/docs/react/basic-setup.md)
-- [**Project Structure**](https://github.com/fastify/fastify-dx/blob/main/docs/react/project-structure.md)
-- [**Rendering Modes**](https://github.com/fastify/fastify-dx/blob/main/docs/react/rendering-modes.md)
-- [**Routing Configuration**](https://github.com/fastify/fastify-dx/blob/main/docs/react/routing-config.md)
-- [**Data Prefetching**](https://github.com/fastify/fastify-dx/blob/main/docs/react/data-prefetching.md)
-- [**Route Layouts**](https://github.com/fastify/fastify-dx/blob/main/docs/react/route-layouts.md)
-- [**Route Context**](https://github.com/fastify/fastify-dx/blob/main/docs/react/route-context.md)
-- [**Route Enter Event**](https://github.com/fastify/fastify-dx/blob/main/docs/react/route-enter.md)
-- [**Virtual Modules**](https://github.com/fastify/fastify-dx/blob/main/docs/react/virtual-modules.md)
+**`@fastify/react`** is the official [**`@fastify/vite`**](https://fastify-vite.dev) renderer for React.
 
-## Introduction
-
-**Fastify DX for React** is a renderer adapter for [**fastify-vite**](https://github.com/fastify/fastify-vite).
-
-It is a **fast**, **lightweight** alternative to Next.js and Remix packed with **Developer Experience** features.
-
-It has an extremely small core (~1k LOC total) and is built on top of [Fastify](https://github.com/fastify/fastify), [Vite](https://vitejs.dev/), [React Router](https://reactrouter.com/docs/en/v6) and [Valtio](https://github.com/pmndrs/valtio).
-
-[**See the release notes for the 0.0.1 alpha release**](https://github.com/fastify/fastify-dx/releases/tag/v0.0.1).
-
-> At this stage this project is mostly a [**one-man show**](https://github.com/sponsors/galvez), who's devoting all his free time to its completion. Contributions are extremely welcome, as well as bug reports for any issues you may find. 
-
-In this first alpha release it's still missing a test suite. The same is true for [**fastify-vite**](). 
-
-It'll move into **beta** status when test suites are added to both packages.
-
-## Quick Start
-
-Ensure you have **Node v16+**.
-
-Make a copy of [**starters/react**](https://github.com/fastify/fastify-dx/tree/dev/starters/react). If you have [`degit`](https://github.com/Rich-Harris/degit), run the following from a new directory:
-
-```bash
-degit fastify/fastify-dx/starters/react
-```
-
-> **If you're starting a project from scratch**, you'll need these packages installed.
->
-> ```bash
-> npm i fastify fastify-vite fastify-dx-react -P
-> npm i @vitejs/plugin-react -D
-> ```
-
-
-Run `npm install`. 
-  
-Run `npm run dev`. 
-
-Visit `http://localhost:3000/`.
-
-## What's Included
-
-That will get you a **starter template** with:
-  
-- A minimal [Fastify](https://github.com/fastify/fastify) server.
-- Some dummy API routes.
-- A `pages/` folder with some [demo routes](https://github.com/fastify/fastify-dx/tree/dev/starters/react/client/pages).
-- All configuration files.
-
-It also includes some _**opinionated**_ essentials:
-
-- [**PostCSS Preset Env**](https://www.npmjs.com/package/postcss-preset-env) by [**Jonathan Neal**](https://github.com/jonathantneal), which enables [several modern CSS features](https://preset-env.cssdb.org/), such as [**CSS Nesting**](https://www.w3.org/TR/css-nesting-1/).
-
-- [**UnoCSS**](https://github.com/unocss/unocss) by [**Anthony Fu**](https://antfu.me/), which supports all [Tailwind utilities](https://uno.antfu.me/) and many other goodies through its [default preset](https://github.com/unocss/unocss/tree/main/packages/preset-uno). 
-
-- [**Valtio**](https://github.com/pmndrs/valtio) by [**Daishi Kato**](https://blog.axlight.com/), with a global and SSR-ready store which you can use anywhere.
-
-
-## Package Scripts
-
-`npm run dev` boots the development server.
-  
-`npm run build` creates the production bundle.
-  
-`npm run serve` serves the production bundle.
-
-## Meta
-
-Created by [Jonas Galvez](https://github.com/sponsors/galvez), **Engineering Manager** and **Open Sourcerer** at [NearForm](https://nearform.com).
-
-## Sponsors
-
-<a href="https://nearform.com"><img width="200px" src="https://user-images.githubusercontent.com/12291/172310344-594669fd-da4c-466b-a250-a898569dfea3.svg"></a>
-
-Also [**Duc-Thien Bui**](https://github.com/aecea) and [**Tom Preston-Werner**](https://github.com/mojombo) [via GitHub Sponsors](https://github.com/sponsors/galvez). _Thank you!_
+See the [documentation suite](https://fastify-vite.dev) to learn more.

package/index.js

@@ -4,11 +4,11 @@ import { Readable } from 'stream'
 // fastify-vite's minimal HTML templating function,
 // which extracts interpolation variables from comments
 // and returns a function with the generated code
-import { createHtmlTemplateFunction } from '@fastify/vite'
+import { createHtmlTemplateFunction } from '@fastify/vite/utils'
 
 // Used to safely serialize JavaScript into
 // <script> tags, preventing a few types of attack
-import devalue from 'devalue'
+import * as devalue from 'devalue'
 
 // Small SSR-ready library used to generate
 // <title>, <meta> and <link> elements
@@ -75,10 +75,10 @@ export function createHtmlFunction (source, scope, config) {
         ...!context.serverOnly && {
           hydration: (
             '<script>\n' +
-            `window.route = ${devalue(context.toJSON())}\n` +
-            `window.routes = ${devalue(routes.toJSON())}\n` +
+            `window.route = ${devalue.uneval(context.toJSON())}\n` +
+            `window.routes = ${devalue.uneval(routes.toJSON())}\n` +
             '</script>'
-          )
+          ),
         },
       }),
     }))

package/package.json

@@ -1,11 +1,9 @@
 {
-  "scripts": {
-    "lint": "eslint . --ext .js,.jsx --fix"
-  },
   "type": "module",
   "main": "index.js",
   "name": "@fastify/react",
-  "version": "0.1.0",
+  "description": "The official @fastify/vite renderer for React",
+  "version": "0.2.0-rc.1",
   "files": [
     "virtual/create.jsx",
     "virtual/create.tsx",
@@ -31,27 +29,32 @@
     "./plugin": "./plugin.cjs"
   },
   "dependencies": {
-    "devalue": "^2.0.1",
-    "history": "^5.3.0",
-    "minipass": "^3.3.4",
+    "devalue": "latest",
+    "history": "latest",
+    "minipass": "latest",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.3",
-    "unihead": "^0.0.6",
-    "valtio": "^1.7.2"
+    "react-dom": "latest",
+    "react-router-dom": "latest",
+    "unihead": "latest",
+    "valtio": "latest"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
-    "@vitejs/plugin-react": "^2.2.0",
-    "eslint": "^7.32.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-react": "^7.29.4"
+    "@babel/eslint-parser": "latest",
+    "@babel/preset-react": "latest",
+    "eslint": "latest",
+    "eslint-config-standard": "latest",
+    "eslint-plugin-import": "latest",
+    "eslint-plugin-node": "latest",
+    "eslint-plugin-promise": "latest",
+    "eslint-plugin-react": "latest"
+  },
+  "peerDependencies": {
+    "@fastify/vite": "^5.0.2"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint . --ext .js,.jsx --fix"
   }
-}
+}

package/plugin.cjs

@@ -3,7 +3,7 @@ const { dirname, join, resolve } = require('path')
 const { fileURLToPath } = require('url')
 
 function viteReactFastifyDX (config = {}) {  
-  const prefix = /^\/?dx:/
+  const prefix = /^\/:/
   const routing = Object.assign({
     globPattern: '/pages/**/*.(jsx|tsx)',
     paramPattern: /\[(\w+)\]/,
@@ -11,18 +11,13 @@ function viteReactFastifyDX (config = {}) {
   const virtualRoot = resolve(__dirname, 'virtual')
   const virtualModules = [ 
     'mount.js', 
-    'mount.ts', 
     'resource.js',
-    'resource.ts',
     'routes.js',
     'layouts.js',
     'create.jsx',
-    'create.tsx',
     'root.jsx',
-    'root.tsx',
     'layouts/',
     'context.js',
-    'context.ts',
     'core.jsx'
   ]
   virtualModules.includes = function (virtual) {
@@ -79,7 +74,7 @@ function viteReactFastifyDX (config = {}) {
   }
 
   return {
-    name: 'vite-plugin-react-fastify-dx',
+    name: 'vite-plugin-fastify-react',
     config (config, { command }) {
       if (command === 'build' && config.build?.ssr) {
         config.build.rollupOptions = {

package/server/context.js

@@ -1,4 +1,3 @@
-
 const routeContextInspect = Symbol.for('nodejs.util.inspect.custom')
 
 export default class RouteContext {

package/server/stream.js

@@ -1,7 +1,6 @@
-
 // Helper to make the stream returned renderToPipeableStream()
 // behave like an event emitter and facilitate error handling in Fastify
-import Minipass from 'minipass'
+import { Minipass } from 'minipass'
 
 // React 18's preferred server-side rendering function,
 // which enables the combination of React.lazy() and Suspense

package/virtual/core.jsx

@@ -1,10 +1,10 @@
 import { createContext, useContext, useEffect } from 'react'
-import { useLocation, BrowserRouter, Routes, Route } from 'react-router-dom'
+import { useLocation, BrowserRouter } from 'react-router-dom'
 import { StaticRouter } from 'react-router-dom/server.mjs'
 import { createPath } from 'history'
 import { proxy, useSnapshot } from 'valtio'
-import { waitResource, waitFetch } from '/dx:resource.js'
-import layouts from '/dx:layouts.js'
+import { waitResource, waitFetch } from '/:resource.js'
+import layouts from '/:layouts.js'
 
 export const isServer = import.meta.env.SSR
 export const Router = isServer ? StaticRouter : BrowserRouter
@@ -14,41 +14,13 @@ export function useRouteContext () {
   const routeContext = useContext(RouteContext)
   if (routeContext.state) {
     routeContext.snapshot = isServer
-      ? routeContext.state
-      : useSnapshot(routeContext.state)
+      ? routeContext.state ?? {}
+      : useSnapshot(routeContext.state ?? {})
   }
   return routeContext
 }
 
-export function DXApp ({
-  url,
-  routes,
-  head,
-  routeMap,
-  ctxHydration,
-}) {
-  return (
-    <Router location={url}>
-      <Routes>{
-        routes.map(({ path, component: Component }) =>
-          <Route
-            key={path}
-            path={path}
-            element={
-              <DXRoute
-                head={head}
-                ctxHydration={ctxHydration}
-                ctx={routeMap[path]}>
-                <Component />
-              </DXRoute>
-            } />,
-        )
-      }</Routes>
-    </Router>
-  )
-}
-
-export function DXRoute ({ head, ctxHydration, ctx, children }) {
+export function AppRoute ({ head, ctxHydration, ctx, children }) {
   // If running on the server, assume all data
   // functions have already ran through the preHandler hook
   if (isServer) {
@@ -58,8 +30,8 @@ export function DXRoute ({ head, ctxHydration, ctx, children }) {
         ...ctx,
         ...ctxHydration,
         state: isServer
-          ? ctxHydration.state
-          : proxy(ctxHydration.state),
+          ? ctxHydration.state ?? {}
+          : proxy(ctxHydration.state ?? {}),
       }}>
         <Layout>
           {children}
@@ -134,8 +106,8 @@ export function DXRoute ({ head, ctxHydration, ctx, children }) {
       ...ctxHydration,
       ...ctx,
       state: isServer
-        ? ctxHydration.state
-        : proxy(ctxHydration.state),
+        ? ctxHydration.state ?? {}
+        : proxy(ctxHydration.state ?? {}),
     }}>
       <Layout>
         {children}

package/virtual/create.jsx

@@ -1,4 +1,4 @@
-import Root from '/dx:root.jsx'
+import Root from '/:root.jsx'
 
 export default function create ({ url, ...serverInit }) {
   return (

package/virtual/layouts.js

@@ -1,6 +1,6 @@
 import { lazy } from 'react'
 
-const DefaultLayout = () => import('/dx:layouts/default.jsx')
+const DefaultLayout = () => import('/:layouts/default.jsx')
 
 const appLayouts = import.meta.glob('/layouts/*.jsx')
 

package/virtual/mount.js

@@ -1,8 +1,8 @@
 import Head from 'unihead/client'
 import { createRoot, hydrateRoot } from 'react-dom/client'
 
-import create from '/dx:create.jsx'
-import routesPromise from '/dx:routes.js'
+import create from '/:create.jsx'
+import routesPromise from '/:routes.js'
 
 mount('main')
 
@@ -10,7 +10,7 @@ async function mount (target) {
   if (typeof target === 'string') {
     target = document.querySelector(target)
   }
-  const context = await import('/dx:context.js')
+  const context = await import('/:context.js')
   const ctxHydration = await extendContext(window.route, context)
   const head = new Head(window.route.head, window.document)
   const resolvedRoutes = await routesPromise

package/virtual/resource.js

@@ -1,4 +1,3 @@
-
 const fetchMap = new Map()
 const resourceMap = new Map()
 

package/virtual/root.jsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { Routes, Route } from 'react-router-dom'
-import { Router, DXRoute } from '/dx:core.jsx'
+import { Router, AppRoute } from '/:core.jsx'
 
 export default function Root ({ url, routes, head, ctxHydration, routeMap }) {
   return (
@@ -12,16 +12,16 @@ export default function Root ({ url, routes, head, ctxHydration, routeMap }) {
               key={path}
               path={path}
               element={
-                <DXRoute
+                <AppRoute
                   head={head}
                   ctxHydration={ctxHydration}
                   ctx={routeMap[path]}>
                   <Component />
-                </DXRoute>
+                </AppRoute>
               } />,
           )
         }</Routes>
       </Router>
     </Suspense>
   )
-}
+}

package/virtual/context.ts

@@ -1,4 +0,0 @@
-// This file serves as a placeholder
-// if no context.js file is provided
-
-export default () => {}

package/virtual/create.tsx

@@ -1,7 +0,0 @@
-import Root from '/dx:root.tsx'
-
-export default function create ({ url, ...serverInit }) {
-  return (
-    <Root url={url} {...serverInit} />
-  )
-}

package/virtual/mount.ts

@@ -1,47 +0,0 @@
-import Head from 'unihead/client'
-import { createRoot, hydrateRoot } from 'react-dom/client'
-
-import create from '/dx:create.tsx'
-import routesPromise from '/dx:routes.js'
-
-mount('main')
-
-async function mount (target) {
-  if (typeof target === 'string') {
-    target = document.querySelector(target)
-  }
-  const context = await import('/dx:context.ts')
-  const ctxHydration = await extendContext(window.route, context)
-  const head = new Head(window.route.head, window.document)
-  const resolvedRoutes = await routesPromise
-  const routeMap = Object.fromEntries(
-    resolvedRoutes.map((route) => [route.path, route]),
-  )
-
-  const app = create({
-    head,
-    ctxHydration,
-    routes: window.routes,
-    routeMap,
-  })
-  if (ctxHydration.clientOnly) {
-    createRoot(target).render(app)
-  } else {
-    hydrateRoot(target, app)
-  }
-}
-
-async function extendContext (ctx, {
-  // The route context initialization function
-  default: setter,
-  // We destructure state here just to discard it from extra
-  state,
-  // Other named exports from context.js
-  ...extra
-}) {
-  Object.assign(ctx, extra)
-  if (setter) {
-    await setter(ctx)
-  }
-  return ctx
-}

package/virtual/root.tsx

@@ -1,27 +0,0 @@
-import { Suspense } from 'react'
-import { Routes, Route } from 'react-router-dom'
-import { Router, DXRoute } from '/dx:core.jsx'
-
-export default function Root ({ url, routes, head, ctxHydration, routeMap }) {
-  return (
-    <Suspense>
-      <Router location={url}>
-        <Routes>{
-          routes.map(({ path, component: Component }) =>
-            <Route
-              key={path}
-              path={path}
-              element={
-                <DXRoute
-                  head={head}
-                  ctxHydration={ctxHydration}
-                  ctx={routeMap[path]}>
-                  <Component />
-                </DXRoute>
-              } />,
-          )
-        }</Routes>
-      </Router>
-    </Suspense>
-  )
-}