[client] Move provider to own package - Use parcel - `@plone/provider…

…s` (#5887)

.github/workflows/changelog.yml

@@ -34,6 +34,8 @@ jobs:
               - 'packages/components/**'
             types:
               - 'packages/types/**'
+            providers:
+              - 'packages/providers/**'
             generator:
               - 'packages/generator-volto/**'
             scripts:
@@ -86,6 +88,14 @@ jobs:
         env:
           BASE_BRANCH: ${{ github.base_ref }}
 
+      - name: Providers changelog check
+        if: steps.filter.outputs.types == 'true'
+        run: |
+          git fetch --no-tags origin main
+          towncrier check --compare-with origin/main --dir packages/providers
+        env:
+          BASE_BRANCH: ${{ github.base_ref }}
+
       - name: Generator changelog check
         if: steps.filter.outputs.generator == 'true'
         run: |

.github/workflows/deployment_tests.yml

@@ -1,5 +1,9 @@
 name: Deployment Tests
 on: [push, pull_request]
+
+env:
+  node-version: 20.x
+
 jobs:
   vitessr:
     if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
@@ -12,10 +16,10 @@ jobs:
       - uses: actions/checkout@v4
 
       # node setup
-      - name: Use Node.js 20.x
+      - name: Use Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: ${{ env.node-version }}
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -42,7 +46,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: pnpm build:deps && pnpm build:components
+        run: pnpm build:all
 
       - name: Start backend
         run: make start-backend-docker-detached
@@ -79,10 +83,10 @@ jobs:
       - uses: actions/checkout@v4
 
       # node setup
-      - name: Use Node.js 20.x
+      - name: Use Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: ${{ env.node-version }}
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -109,7 +113,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: pnpm build:deps && pnpm build:components
+        run: pnpm build:all
 
       - name: Start backend
         run: make start-backend-docker-detached
@@ -146,10 +150,10 @@ jobs:
       - uses: actions/checkout@v4
 
       # node setup
-      - name: Use Node.js 20.x
+      - name: Use Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: ${{ env.node-version }}
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -176,7 +180,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: pnpm build:deps && pnpm build:components
+        run: pnpm build:all
 
       - name: Start backend
         run: make start-backend-docker-detached

.github/workflows/readme-link-check.yml

@@ -20,4 +20,4 @@ jobs:
     - name: Check links in README.md with awesome_bot
       run: |
         gem install awesome_bot
-        awesome_bot --request-delay 1 --allow-dupe --white-list http://localhost:8080/Plone,http://localhost:3000,https://github.com/kitconcept/volto-blocks-grid.git,https://my-server-DNS-name.tld/api --files PACKAGES.md,README.md,packages/blocks/README.md,packages/client/README.md,packages/components/README.md,packages/generator-volto/README.md,packages/parcel-optimizer-react-client/README.md,packages/registry/README.md,packages/scripts/README.md,packages/tsconfig/README.md,packages/types/README.md,packages/volto-slate/README.md,apps/nextjs/README.md,apps/remix/README.md,apps/vite-ssr/README.md
+        awesome_bot --request-delay 1 --allow-dupe --white-list http://localhost:8080/Plone,http://localhost:3000,https://github.com/kitconcept/volto-blocks-grid.git,https://my-server-DNS-name.tld/api --files PACKAGES.md,README.md,packages/blocks/README.md,packages/client/README.md,packages/components/README.md,packages/generator-volto/README.md,packages/registry/README.md,packages/scripts/README.md,packages/tsconfig/README.md,packages/types/README.md,packages/volto-slate/README.md,apps/nextjs/README.md,apps/remix/README.md,apps/vite-ssr/README.md

.pnpmfilecjs

@@ -0,0 +1,14 @@
+function readPackage(pkg, context) {
+  if (pkg.peerDependencies['@plone/volto']) {
+    context.log(`${pkg.name}: Deleting peerDep on @plone/volto`);
+    delete pkg.peerDependencies['@plone/volto'];
+  }
+
+  return pkg;
+}
+
+module.exports = {
+  hooks: {
+    readPackage,
+  },
+};

.prettierignore

@@ -6,4 +6,4 @@ styles/rules/*
 node_modules
 packages/volto/types/*
 storybook-static
-app/vite-ssr/src/routeTree.gen.ts
+apps/vite-ssr/src/routeTree.gen.ts

PACKAGES.md

@@ -60,7 +60,6 @@ Some of them are released:
 Some of them are used by the build, and separated in packages for convenience.
 
 - `tsconfig`
-- `parcel-optimizer-react-client`
 
 
 ## Volto add-ons packages

apps/nextjs/package.json

@@ -10,8 +10,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@plone/blocks": "workspace: *",
     "@plone/client": "workspace: *",
     "@plone/components": "workspace: *",
+    "@plone/registry": "workspace: *",
+    "@plone/providers": "workspace: *",
     "@tanstack/react-query": "^5.24.6",
     "@tanstack/react-query-devtools": "^5.24.6",
     "next": "14.1.1",

apps/nextjs/src/app/Providers.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { useRouter } from 'next/navigation';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { PloneClientProvider } from '@plone/client/provider';
+import { PloneClientProvider } from '@plone/providers';
 import PloneClient from '@plone/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { RouterProvider } from 'react-aria-components';

apps/nextjs/src/app/content.tsx

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { flattenToAppURL } from './utils';
-import { usePloneClient } from '@plone/client/provider';
+import { usePloneClient } from '@plone/providers';
 import { Breadcrumbs } from '@plone/components';
 import '@plone/components/dist/basic.css';
 

apps/remix/app/root.tsx

@@ -10,7 +10,7 @@ import {
 } from '@remix-run/react';
 import { useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { PloneClientProvider } from '@plone/client/provider';
+import { PloneClientProvider } from '@plone/providers';
 import PloneClient from '@plone/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 

apps/remix/app/routes/_index.tsx

@@ -12,7 +12,7 @@ import {
 import ploneClient from '@plone/client';
 import { flattenToAppURL } from '../utils';
 import { useLoaderData, useLocation } from '@remix-run/react';
-import { usePloneClient } from '@plone/client/provider';
+import { usePloneClient } from '@plone/providers';
 
 export const meta: MetaFunction = () => {
   return [

apps/remix/package.json

@@ -12,6 +12,7 @@
   },
   "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",
@@ -33,7 +34,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.4.2"
   },
   "engines": {
     "node": ">=18.0.0"

apps/vite-ssr/package.json

@@ -14,13 +14,14 @@
   "dependencies": {
     "@plone/client": "workspace:*",
     "@plone/components": "workspace:*",
+    "@plone/providers": "workspace:*",
     "@plone/registry": "workspace:*",
     "@plone/blocks": "workspace:*",
-    "@tanstack/react-query": "5.24.1",
-    "@tanstack/react-router": "^1.16.0",
-    "@tanstack/react-router-server": "^1.16.0",
-    "@tanstack/router-devtools": "^1.16.0",
-    "@tanstack/router-vite-plugin": "^1.16.1",
+    "@tanstack/react-query": "^5.29.2",
+    "@tanstack/react-router": "^1.28.2",
+    "@tanstack/react-router-server": "^1.28.2",
+    "@tanstack/router-devtools": "^1.28.2",
+    "@tanstack/router-vite-plugin": "^1.28.2",
     "axios": "^1.6.5",
     "get-port": "^7.0.0",
     "react": "^18.2.0",
@@ -33,7 +34,7 @@
     "@babel/generator": "^7.23.6",
     "@plone/types": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
-    "@tanstack/react-query-devtools": "^5.24.1",
+    "@tanstack/react-query-devtools": "^5.29.2",
     "@types/express": "^4.17.21",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
@@ -43,8 +44,8 @@
     "isbot": "^4.3.0",
     "node-fetch": "^3.3.2",
     "serve-static": "^1.15.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.7",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.9",
     "vite-plugin-babel": "^1.2.0"
   }
 }

apps/vite-ssr/src/routeTree.gen.ts

@@ -10,44 +10,44 @@
 
 // Import Routes
 
-import { Route as rootRoute } from './routes/__root';
-import { Route as ErrorImport } from './routes/error';
-import { Route as SplatImport } from './routes/$';
-import { Route as IndexImport } from './routes/index';
+import { Route as rootRoute } from './routes/__root'
+import { Route as ErrorImport } from './routes/error'
+import { Route as SplatImport } from './routes/$'
+import { Route as IndexImport } from './routes/index'
 
 // Create/Update Routes
 
 const ErrorRoute = ErrorImport.update({
   path: '/error',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
 
 const SplatRoute = SplatImport.update({
   path: '/$',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
 
 const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
 
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
     '/': {
-      preLoaderRoute: typeof IndexImport;
-      parentRoute: typeof rootRoute;
-    };
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
     '/$': {
-      preLoaderRoute: typeof SplatImport;
-      parentRoute: typeof rootRoute;
-    };
+      preLoaderRoute: typeof SplatImport
+      parentRoute: typeof rootRoute
+    }
     '/error': {
-      preLoaderRoute: typeof ErrorImport;
-      parentRoute: typeof rootRoute;
-    };
+      preLoaderRoute: typeof ErrorImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -57,6 +57,6 @@ export const routeTree = rootRoute.addChildren([
   IndexRoute,
   SplatRoute,
   ErrorRoute,
-]);
+])
 
 /* prettier-ignore-end */

apps/vite-ssr/src/router.tsx

@@ -8,7 +8,7 @@ import PloneClient from '@plone/client';
 import { createRouter as createReactRouter } from '@tanstack/react-router';
 
 import { routeTree } from './routeTree.gen';
-import { PloneClientProvider } from '@plone/client/provider';
+import { PloneClientProvider } from '@plone/providers';
 import { FlattenToAppURLProvider } from '@plone/components';
 import { flattenToAppURL } from './utils';
 

apps/vite-ssr/src/routes/$.tsx

@@ -2,7 +2,7 @@ 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/client/provider';
+import { usePloneClient } from '@plone/providers';
 import { Breadcrumbs } from '@plone/components';
 
 const expand = ['breadcrumbs', 'navigation'];

apps/vite-ssr/src/routes/__root.tsx

@@ -4,6 +4,7 @@ import {
   Outlet,
   createRootRouteWithContext,
   useRouter,
+  useRouterState,
 } from '@tanstack/react-router';
 import { DehydrateRouter } from '@tanstack/react-router-server/client';
 import { RouterContext } from '../routerContext';

apps/vite-ssr/src/routes/index.tsx

@@ -2,7 +2,7 @@ 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/client/provider';
+import { usePloneClient } from '@plone/providers';
 import { Breadcrumbs, RenderBlocks } from '@plone/components';
 import config from '@plone/registry';
 

package.json

@@ -5,13 +5,14 @@
     "preinstall": "npx only-allow pnpm",
     "postinstall": "make setup",
     "watch": "pnpm --filter @plone/registry watch",
-    "build:deps": "pnpm --filter @plone/registry --filter @plone/client build",
+    "build:deps": "pnpm --parallel --filter @plone/registry build",
+    "build:all": "pnpm --parallel --filter @plone/registry --filter @plone/client --filter @plone/components --filter @plone/providers build",
     "build:registry": "pnpm --filter @plone/registry run build",
     "build:components": "pnpm --filter @plone/components run build",
     "build": "pnpm --filter @plone/volto build",
     "start": "pnpm build:deps && pnpm --filter @plone/volto start",
     "start:project": "pnpm --filter plone run start",
-    "lint": "pnpm build:deps && eslint --max-warnings=0 '{apps,packages}/**/*.{js,jsx,ts,tsx}'",
+    "lint": "pnpm build:all && eslint --max-warnings=0 '{apps,packages}/**/*.{js,jsx,ts,tsx}'",
     "lint:volto": "pnpm --filter @plone/volto run lint",
     "test": "pnpm --filter @plone/volto run test:ci",
     "i18n": "pnpm --filter @plone/volto run i18n",

packages/client/.parcelrc

@@ -0,0 +1,9 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

packages/client/news/5887.breaking

@@ -0,0 +1 @@
+Provider has been moved to `@plone/providers` @sneridagh