Add Vite (client only, no SSR) build. Update Next.js 14.2.2 and Remix…

… to 2.8.0 (#5970)

Co-authored-by: Steve Piercy <[email protected]>

.prettierignore

@@ -7,3 +7,4 @@ node_modules
 packages/volto/types/*
 storybook-static
 apps/vite-ssr/src/routeTree.gen.ts
+apps/vite/src/routeTree.gen.ts

apps/nextjs/package.json

@@ -17,7 +17,7 @@
     "@plone/providers": "workspace: *",
     "@tanstack/react-query": "^5.24.6",
     "@tanstack/react-query-devtools": "^5.24.6",
-    "next": "14.1.1",
+    "next": "14.2.2",
     "react": "^18",
     "react-aria-components": "^1.1.1",
     "react-dom": "^18"
@@ -27,8 +27,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.1.1",
-    "mrs-developer": "^2.1.1",
-    "typescript": "5.2.2"
+    "eslint-config-next": "14.2.2",
+    "typescript": "^5.4.5"
   }
 }

apps/remix/app/entry.server.tsx

@@ -9,7 +9,7 @@ import { PassThrough } from 'node:stream';
 import type { AppLoadContext, EntryContext } from '@remix-run/node';
 import { createReadableStreamFromReadable } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
-import isbot from 'isbot';
+import { isbot } from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
 
 const ABORT_DELAY = 5_000;
@@ -24,7 +24,7 @@ export default function handleRequest(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   loadContext: AppLoadContext,
 ) {
-  return isbot(request.headers.get('user-agent'))
+  return isbot(request.headers.get('user-agent') || '')
     ? handleBotRequest(
         request,
         responseStatusCode,

apps/remix/app/routes/_index.tsx

@@ -34,6 +34,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
       },
     },
   });
+
   const cli = ploneClient.initialize({
     apiPath: 'http://localhost:8080/Plone',
   });

apps/remix/package.json

@@ -4,37 +4,32 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix build",
-    "dev": "remix dev --manual",
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-    "start:prod": "remix-serve ./build/index.js",
+    "start:prod": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
   "dependencies": {
     "@plone/client": "workspace: *",
     "@plone/providers": "workspace: *",
     "@remix-run/css-bundle": "^2.4.0",
-    "@remix-run/node": "^2.4.0",
-    "@remix-run/react": "^2.4.0",
-    "@remix-run/serve": "^2.4.0",
+    "@remix-run/node": "^2.8.1",
+    "@remix-run/react": "^2.8.1",
+    "@remix-run/serve": "^2.8.1",
     "@tanstack/react-query": "^5.24.6",
     "@tanstack/react-query-devtools": "^5.24.6",
-    "isbot": "^3.6.8",
+    "isbot": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.4.0",
+    "@remix-run/dev": "^2.8.1",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "eslint": "^8.38.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {
     "node": ">=18.0.0"

apps/remix/tsconfig.json

@@ -1,22 +1,32 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@remix-run/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
+    "module": "ESNext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "target": "ES2022",
     "strict": true,
     "allowJs": true,
+    "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },
 
-    // Remix takes care of building everything in `remix build`.
+    // Vite takes care of building everything, not tsc.
     "noEmit": true
   }
 }

apps/remix/vite.config.ts

@@ -0,0 +1,13 @@
+import { vitePlugin as remix } from '@remix-run/dev';
+import { installGlobals } from '@remix-run/node';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+installGlobals();
+
+export default defineConfig({
+  plugins: [remix(), tsconfigPaths()],
+  server: {
+    port: 3000,
+  },
+});

apps/vite/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

apps/vite/.prettierignore

@@ -0,0 +1 @@
+src/routeTree.gen.ts

apps/vite/README.md

@@ -0,0 +1,6 @@
+# Plone on Vite
+
+This is a proof of concept of a [Vite](https://vitejs.dev) build, using `@plone/client` and `@plone/components` libraries.
+This is intended to serve as both a playground for the development of both packages and as a demo of Plone using Vite.
+
+It also uses [TanStack Router](https://tanstack.com/router/latest/docs/framework/react/overview) for its routing library.

apps/vite/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Plone on Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/vite/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "plone-vite",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@plone/client": "workspace:*",
+    "@plone/components": "workspace:*",
+    "@plone/providers": "workspace:*",
+    "@plone/registry": "workspace:*",
+    "@plone/blocks": "workspace:*",
+    "@tanstack/react-query": "^5.29.2",
+    "@tanstack/react-query-devtools": "^5.17.8",
+    "@tanstack/react-router": "^1.29.2",
+    "@tanstack/router-devtools": "^1.29.2",
+    "axios": "^1.6.5",
+    "react": "^18.2.0",
+    "react-aria-components": "^1.1.1",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.13"
+  }
+}

apps/vite/src/config.ts

@@ -0,0 +1,14 @@
+import config from '@plone/registry';
+import { slate } from '@plone/blocks';
+import { blocksConfig } from '@plone/blocks';
+
+const settings = {
+  apiPath: 'http://localhost:8080/Plone',
+  slate,
+};
+
+config.set('settings', settings);
+
+config.set('blocks', { blocksConfig });
+
+export default config;

apps/vite/src/main.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import PloneClient from '@plone/client';
+import { PloneClientProvider } from '@plone/providers';
+import { FlattenToAppURLProvider } from '@plone/providers';
+import { flattenToAppURL } from './utils';
+
+import './config';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // With SSR, we usually want to set some default staleTime
+      // above 0 to avoid refetching immediately on the client
+      staleTime: 60 * 1000,
+    },
+  },
+});
+
+const ploneClient = PloneClient.initialize({
+  apiPath: 'http://localhost:8080/Plone',
+});
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  context: {
+    queryClient,
+    ploneClient,
+  },
+  defaultPreload: 'intent',
+  // Since we're using React Query, we don't want loader calls to ever be stale
+  // This will ensure that the loader is always called when the route is preloaded or visited
+  defaultPreloadStaleTime: 0,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <PloneClientProvider client={ploneClient}>
+      <QueryClientProvider client={queryClient}>
+        <FlattenToAppURLProvider flattenToAppURL={flattenToAppURL}>
+          <RouterProvider router={router} />
+        </FlattenToAppURLProvider>
+      </QueryClientProvider>
+    </PloneClientProvider>,
+  );
+}

apps/vite/src/routeTree.gen.ts

@@ -0,0 +1,48 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as SplatImport } from './routes/$'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const SplatRoute = SplatImport.update({
+  path: '/$',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/$': {
+      preLoaderRoute: typeof SplatImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([IndexRoute, SplatRoute])
+
+/* prettier-ignore-end */

apps/vite/src/routes/$.tsx

@@ -0,0 +1,42 @@
+import { createFileRoute } from '@tanstack/react-router';
+import * as React from 'react';
+import { flattenToAppURL } from '../utils';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { usePloneClient } from '@plone/providers';
+import { Breadcrumbs, RenderBlocks } from '@plone/components';
+import config from '@plone/registry';
+
+const expand = ['breadcrumbs', 'navigation'];
+
+export const Route = createFileRoute('/$')({
+  loader: ({ context: { queryClient, ploneClient }, location }) => {
+    const { getContentQuery } = ploneClient;
+    return queryClient.ensureQueryData(
+      getContentQuery({ path: flattenToAppURL(location.pathname), expand }),
+    );
+  },
+  component: SplatRouteComponent,
+});
+
+function SplatRouteComponent() {
+  const { _splat: path } = Route.useParams();
+  const { getContentQuery } = usePloneClient();
+  const { data } = useSuspenseQuery(
+    getContentQuery({ path: flattenToAppURL(`/${path}`), expand }),
+  );
+  return (
+    <>
+      <Breadcrumbs
+        items={data['@components'].breadcrumbs.items || []}
+        root={data['@components'].breadcrumbs.root}
+        includeRoot
+      />
+
+      <RenderBlocks
+        content={data}
+        blocksConfig={config.blocks.blocksConfig}
+        pathname="/"
+      />
+    </>
+  );
+}