Merge branch 'main' into registryesmandts

* main: Release generate-volto 9.0.0-alpha.19 Release @plone/providers 1.0.0-alpha.3 Release @plone/components 2.0.0-alpha.16 Release @plone/client 1.0.0-alpha.19 Release @plone/types 1.0.0-alpha.21 Some types improvements/fixes (#6412) [providers] Improve and group providers (#6069) Adjust the path to perform a proper `git diff` between the cached and… (#6410) Test whether commenting out the `ignore` command has any affect on the Netlify build. support depth in getNavigationQuery (#6400) Update caniuse Oct24 (#6408) Upgraded nextjs deps and configuration (#6388) Update `typescript` and `vitest` everywhere (#6407) Remove all traces of Jest 24 in core (#6406) Release @plone/components 2.0.0-alpha.15 [components] Fix Select component logic to support `items` use case (#6405) Fix clean make command (#6403)
plone · Oct 18, 2024 · c409647 · c409647
2 parents 3646e35 + 3371c84
commit c409647
Show file tree

Hide file tree

Showing 91 changed files with 3,340 additions and 6,480 deletions.
diff --git a/Makefile b/Makefile
@@ -67,7 +67,7 @@ test: ## Run unit tests
 .PHONY: clean
 clean: ## Clean development environment
  rm -rf node_modules
- find ./packages -name node_modules -exec rm -rf {} \;
+ find ./packages -name node_modules -not -path "./packages/volto/__tests__/*" -exec rm -rf {} \;
 
 .PHONY: install
 install: ## Set up development environment

diff --git a/apps/nextjs/.eslintrc.js b/apps/nextjs/.eslintrc.js
diff --git a/apps/nextjs/.eslintrc.json b/apps/nextjs/.eslintrc.json
@@ -0,0 +1,9 @@
+{
+ "extends": ["next/core-web-vitals", "next/typescript"],
+ "ignorePatterns": [".next/**", "dist/**", "node_modules/**"],
+ "settings": {
+ "next": {
+ "rootDir": "apps/nextjs/"
+ }
+ }
+}
diff --git a/apps/nextjs/.gitignore b/apps/nextjs/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

diff --git a/apps/nextjs/LICENSE b/apps/nextjs/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Plone Foundation
+Copyright (c) 2024 Plone Foundation
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/apps/nextjs/README.md b/apps/nextjs/README.md
@@ -2,6 +2,11 @@
 
 This is a proof of concept of a [Next.js](https://nextjs.org) app, using the app router and the `@plone/client` and `@plone/components` library. This is intended to serve as both a playground for the development of both packages and as demo of Plone using Next.js.
 
+> [!WARNING]
+> This package or app is experimental.
+> The community offers no support whatsoever for it.
+> Breaking changes may occur without notice.
+
 ## Development
 
 To start, from the root of the monorepo:

diff --git a/apps/nextjs/next.config.js → apps/nextjs/next.config.mjs b/apps/nextjs/next.config.js → apps/nextjs/next.config.mjs
@@ -1,7 +1,10 @@
-const path = require('path');
+import path from 'path';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+ typescript: {
+ ignoreBuildErrors: true,
+ },
  // sassOptions: {
  // includePaths: [path.join(__dirname, 'src/lib/components/src/styles')],
  // },
@@ -46,4 +49,4 @@ const nextConfig = {
  },
 };
 
-module.exports = nextConfig;
+export default nextConfig;
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -13,21 +13,22 @@
  "@plone/blocks": "workspace: *",
  "@plone/client": "workspace: *",
  "@plone/components": "workspace: *",
- "@plone/registry": "workspace: *",
  "@plone/providers": "workspace: *",
- "@tanstack/react-query": "^5.37.1",
- "next": "14.2.2",
+ "@plone/registry": "workspace: *",
+ "@tanstack/react-query": "^5.59.0",
+ "next": "14.2.14",
  "react": "^18",
- "react-aria-components": "^1.1.1",
+ "react-aria-components": "^1.4.0",
  "react-dom": "^18"
  },
  "devDependencies": {
- "@tanstack/react-query-devtools": "^5.37.1",
+ "@plone/types": "workspace: *",
+ "@tanstack/react-query-devtools": "^5.59.0",
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "eslint": "^8",
- "eslint-config-next": "14.2.2",
- "typescript": "^5.4.5"
+ "eslint-config-next": "14.2.14",
+ "typescript": "^5.6.3"
  }
 }
diff --git a/apps/nextjs/src/app/Providers.tsx b/apps/nextjs/src/app/Providers.tsx
@@ -1,15 +1,32 @@
 'use client';
 import React from 'react';
-import { useRouter } from 'next/navigation';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { PloneClientProvider } from '@plone/providers';
+import {
+ useRouter,
+ usePathname,
+ useSearchParams,
+ useParams,
+} from 'next/navigation';
+import { QueryClient } from '@tanstack/react-query';
+import { PloneProvider } from '@plone/providers';
 import PloneClient from '@plone/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { RouterProvider } from 'react-aria-components';
-import { FlattenToAppURLProvider } from '@plone/components';
 import { flattenToAppURL } from './utils';
 import config from './config';
 
+// Custom hook to unify the location object between NextJS and Plone
+function useLocation() {
+ const pathname = usePathname();
+ const search = useSearchParams();
+
+ return {
+ pathname,
+ search,
+ searchStr: '',
+ hash: (typeof window !== 'undefined' && window.location.hash) || '',
+ href: (typeof window !== 'undefined' && window.location.href) || '',
+ };
+}
+
 const Providers: React.FC<{
  children?: React.ReactNode;
 }> = ({ children }) => {
@@ -36,19 +53,25 @@ const Providers: React.FC<{
  }),
  );
 
- let router = useRouter();
+ const router = useRouter();
 
  return (
- <RouterProvider navigate={router.push}>
- <PloneClientProvider client={ploneClient}>
- <QueryClientProvider client={queryClient}>
- <FlattenToAppURLProvider flattenToAppURL={flattenToAppURL}>
- {children}
- <ReactQueryDevtools initialIsOpen={false} />
- </FlattenToAppURLProvider>
- </QueryClientProvider>
- </PloneClientProvider>
- </RouterProvider>
+ <PloneProvider
+ ploneClient={ploneClient}
+ queryClient={queryClient}
+ // NextJS doesn't have a useLocation hook, so we need to unify this
+ // in a custom hook
+ useLocation={useLocation}
+ navigate={(to) => {
+ router.push(to);
+ }}
+ useParams={useParams}
+ useHref={(to) => flattenToAppURL(to)}
+ flattenToAppURL={flattenToAppURL}
+ >
+ {children}
+ <ReactQueryDevtools initialIsOpen={false} />
+ </PloneProvider>
  );
 };
 

diff --git a/apps/nextjs/src/app/config.ts b/apps/nextjs/src/app/config.ts
@@ -1,12 +1,19 @@
+import config from '@plone/registry';
+import { slate } from '@plone/blocks';
+import { blocksConfig } from '@plone/blocks';
+
 const settings = {
  apiPath: process.env.NEXT_PUBLIC_VERCEL_URL
  ? // Vercel does not prepend the schema to the NEXT_PUBLIC_VERCEL_URL automatic env var
  `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
  : 'http://localhost:3000',
+ slate,
 };
 
-const config = {
- settings,
-};
+// @ts-expect-error Improve typings
+config.set('settings', settings);
+
+// @ts-expect-error Improve typings
+config.set('blocks', { blocksConfig });
 
 export default config;
diff --git a/apps/nextjs/src/app/content.tsx b/apps/nextjs/src/app/content.tsx
@@ -1,46 +1,30 @@
 'use client';
-
 import { useQuery } from '@tanstack/react-query';
 import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import { flattenToAppURL } from './utils';
 import { usePloneClient } from '@plone/providers';
-import { Breadcrumbs } from '@plone/components';
+import { Breadcrumbs, RenderBlocks } from '@plone/components';
+import config from '@plone/registry';
+
 import '@plone/components/dist/basic.css';
 
 export default function Content() {
  const { getContentQuery } = usePloneClient();
  const pathname = usePathname();
- const { data, isLoading } = useQuery(getContentQuery({ path: pathname }));
+ const { data } = useQuery(getContentQuery({ path: pathname }));
 
  if (data) {
  return (
  <div style={{ fontSize: '20px' }}>
- <h1>{data.title}</h1>
- {/* <Input
- name="field1"
- title="field 1 title"
- placeholder="Type something…"
- description="Optional help text"
- isRequired
- /> */}
  <Breadcrumbs
  items={data['@components'].breadcrumbs.items || []}
  root={data['@components'].breadcrumbs.root}
  includeRoot
  />
- <ul>
- {data?.['@components']?.navigation?.items?.map((item) => (
- <li key={item['@id']}>
- <Link href={flattenToAppURL(item['@id'])}>
- {flattenToAppURL(item['@id'])}
- </Link>
- </li>
- ))}
- </ul>
- <div>
- <pre>{JSON.stringify(data, null, 2)}</pre>
- </div>
+ <RenderBlocks
+ content={data}
+ blocksConfig={config.blocks.blocksConfig}
+ pathname={pathname}
+ />
  </div>
  );
  }

diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -5,7 +5,7 @@ import Providers from './Providers';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
- title: 'NextJS-powered Plone',
+ title: 'Next.js app powered by Plone',
  description: '',
 };
 

diff --git a/apps/nextjs/src/middleware.ts b/apps/nextjs/src/middleware.ts
@@ -2,10 +2,7 @@ import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
 export function middleware(request: NextRequest) {
- // Clone the request headers and set a new header `x-hello-from-middleware1`
  const requestHeaders = new Headers(request.headers);
- // console.log(request.nextUrl.pathname);
- // requestHeaders.set('x-hello-from-middleware1', 'hello');
 
  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({

diff --git a/apps/nextjs/tsconfig.json b/apps/nextjs/tsconfig.json
@@ -1,38 +1,34 @@
 {
- "compilerOptions": {
- "target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "noEmit": true,
- "esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "bundler",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "preserve",
- "incremental": true,
- "plugins": [
- {
- "name": "next"
- }
- ]
- },
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- "**/*.js",
- "**/*.jx",
- ".next/types/**/*.ts"
+ "compilerOptions": {
+ "forceConsistentCasingInFileNames": true,
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
  ],
- "exclude": [
- "node_modules",
- ]
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ "**/*.js",
+ "**/*.jsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": ["node_modules"]
 }
diff --git a/apps/plone/package.json b/apps/plone/package.json
@@ -348,7 +348,7 @@
  "ts-jest": "^26.4.2",
  "ts-loader": "9.4.4",
  "tsconfig": "*",
- "typescript": "^5.4.2",
+ "typescript": "^5.6.3",
  "use-trace-update": "1.3.2",
  "wait-on": "6.0.0",
  "webpack": "5.90.1",

diff --git a/apps/remix/README.md b/apps/remix/README.md
@@ -3,6 +3,10 @@
 This is a proof of concept of a [Remix](https://remix.run) app, using the `@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 Remix.
 
+> [!WARNING]
+> This package or app is experimental.
+> The community offers no support whatsoever for it.
+> Breaking changes may occur without notice.
 
 ## Development
 

diff --git a/apps/remix/app/client.ts b/apps/remix/app/client.ts
@@ -0,0 +1,8 @@
+import ploneClient from '@plone/client';
+import config from '@plone/registry';
+
+const cli = ploneClient.initialize({
+ apiPath: config.settings.apiPath,
+});
+
+export { cli as ploneClient };
diff --git a/apps/remix/app/config.ts b/apps/remix/app/config.ts
@@ -1,9 +1,15 @@
+import config from '@plone/registry';
+import { blocksConfig, slate } from '@plone/blocks';
+
 const settings = {
  apiPath: 'http://localhost:8080/Plone',
+ slate,
 };
 
-const config = {
- settings,
-};
+// @ts-expect-error We need to fix typing
+config.set('settings', settings);
+
+// @ts-expect-error We need to fix typing
+config.set('blocks', { blocksConfig });
 
 export default config;