Merge branch 'main' into plip6321-semanticui-free-cmsui

* main: Fixed types declaration extractor from Volto core, re-enable it on release (#6534) Release 18.3.0 Release @plone/slate 18.0.4 Release @plone/helpers 1.0.0 Make helpers release-able Release @plone/registry 2.2.0 Release @plone/components 3.0.0 Release @plone/types 1.1.0 [slots] @plone/slots first developments (#6409) improve link integrity popup (#6516) Add missing styleWrapper style builder information in container/Grid (#6527) update: skip scroll to top on inital SSR completion. (#6523) Release 18.2.3 Fixed circular import error in dev with HMR in core Views and Widgets shadow customizations (#6526) Release 18.2.2 Fixed circular import error in dev with HMR in core Blocks shadow customizations (#6525) Release 18.2.1 Release @plone/slate 18.0.3 Fixed circular import error in dev with HMR in `App` component when imported in the main default config (#6524) Update @plone/* packages info (#6521)
plone · Dec 12, 2024 · b80fd1b · b80fd1b
2 parents e465a2e + 4dff6bd
commit b80fd1b
Show file tree

Hide file tree

Showing 227 changed files with 7,371 additions and 4,081 deletions.
diff --git a/.github/workflows/deployment_tests.yml → .github/workflows/api-first.yml b/.github/workflows/deployment_tests.yml → .github/workflows/api-first.yml
@@ -1,12 +1,49 @@
-name: Deployment Tests
+name: API-first story Tests
 on: [push, pull_request]
 
 env:
   node-version: 22.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
+  config:
+    runs-on: ubuntu-latest
+    outputs:
+      ENVIRONMENT: ${{ steps.vars.outputs.ENVIRONMENT }}
+      STACK_NAME: ${{ steps.vars.outputs.STACK_NAME }}
+      nextjs: ${{ steps.filter.outputs.nextjs }}
+      remix: ${{ steps.filter.outputs.remix }}
+      rr7: ${{ steps.filter.outputs.rr7 }}
+      tss: ${{ steps.filter.outputs.tss }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set Env Vars
+        id: vars
+        run: |
+          ENVIRONMENT=${{ vars.LIVE_ENV }}
+          echo "ENVIRONMENT=${ENVIRONMENT}" >> $GITHUB_OUTPUT
+          echo "STACK_NAME=${ENVIRONMENT//./-}" >> $GITHUB_OUTPUT
+
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            nextjs:
+              - 'apps/nextjs/**'
+              - '.github/workflows/api-first.yml'
+            remix:
+              - 'apps/remix/**'
+              - '.github/workflows/api-first.yml'
+            rr7:
+              - 'apps/rr7/**'
+              - '.github/workflows/api-first.yml'
+            tss:
+              - 'apps/vite-ssr/**'
+              - '.github/workflows/api-first.yml'
+
+  tss:
+    if: ${{ needs.config.outputs.tss == 'true' }} && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name)
     runs-on: ubuntu-latest
     name: Vite SSR
     timeout-minutes: 5
@@ -68,7 +105,8 @@ jobs:
         run: make backend-docker-detached-stop
 
   nextjs:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    # if: ${{ needs.config.outputs.nextjs == 'true' }} && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name)
+    if: false
     runs-on: ubuntu-latest
     name: Next.JS
     timeout-minutes: 5
@@ -130,7 +168,7 @@ jobs:
         run: make backend-docker-detached-stop
 
   remix:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    if: ${{ needs.config.outputs.remix == 'true' }} && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name)
     runs-on: ubuntu-latest
     name: Remix
     timeout-minutes: 5
@@ -174,7 +212,63 @@ jobs:
         run: pnpm --filter plone-remix build
 
       - name: Start server
-        run: nohup pnpm --filter plone-remix start:prod &
+        run: PLONE_API_PATH=http://localhost:8080/Plone nohup pnpm --filter plone-remix start:prod &
+
+      - name: Wait
+        run: packages/scripts/node_modules/.bin/wait-on --httpTimeout 20000 http-get://127.0.0.1:8080/Plone
+
+      - name: Run tests
+        run: node packages/scripts/check_deployment.js
+
+      - name: Stop backend
+        run: make backend-docker-detached-stop
+
+  rr7:
+    if: ${{ needs.config.outputs.rr7 == 'true' }} && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name)
+    runs-on: ubuntu-latest
+    name: ReactRouter 7
+    timeout-minutes: 5
+    strategy:
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@v4
+
+      # node setup
+      - name: Use Node.js ${{ env.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node-version }}
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build dependencies
+        run: pnpm build:all
+
+      - name: Start backend
+        run: make backend-docker-detached-start
+
+      - name: Build
+        run: pnpm --filter plone-rr7 build
+
+      - name: Start server
+        run: PLONE_API_PATH=http://localhost:8080/Plone nohup pnpm --filter plone-rr7 start:prod &
 
       - name: Wait
         run: packages/scripts/node_modules/.bin/wait-on --httpTimeout 20000 http-get://127.0.0.1:8080/Plone

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Install towncrier
         run: pip install towncrier
 
-      - uses: dorny/paths-filter@v2
+      - uses: dorny/paths-filter@v3
         id: filter
         with:
           filters: |
@@ -42,6 +42,12 @@ jobs:
               - 'packages/scripts/**'
             voltoSlate:
               - 'packages/volto-slate/**'
+            blocks:
+              - 'packages/blocks/**'
+            slots:
+              - 'packages/slots/**'
+            theming:
+              - 'packages/theming/**'
             wrongNews:
               - added|modified: 'news/**'
 
@@ -120,6 +126,30 @@ jobs:
         env:
           BASE_BRANCH: ${{ github.base_ref }}
 
+      - name: Blocks changelog check
+        if: steps.filter.outputs.blocks == 'true'
+        run: |
+          git fetch --no-tags origin main
+          towncrier check --compare-with origin/main --dir packages/blocks
+        env:
+          BASE_BRANCH: ${{ github.base_ref }}
+
+      - name: Slots changelog check
+        if: steps.filter.outputs.slots == 'true'
+        run: |
+          git fetch --no-tags origin main
+          towncrier check --compare-with origin/main --dir packages/slots
+        env:
+          BASE_BRANCH: ${{ github.base_ref }}
+
+      - name: Theming changelog check
+        if: steps.filter.outputs.theming == 'true'
+        run: |
+          git fetch --no-tags origin main
+          towncrier check --compare-with origin/main --dir packages/theming
+        env:
+          BASE_BRANCH: ${{ github.base_ref }}
+
       - name: Wrong location of news changelog check
         if: steps.filter.outputs.wrongNews == 'true'
         run: echo "News items should be moved from the repository root to the appropriate package root in `packages/package-name`." && exit 1

diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,4 @@
 dist
+docs
+node_modules
+packages/registry/lib
diff --git a/PACKAGES.md b/PACKAGES.md
@@ -2,17 +2,37 @@
 
 This document describes the packages that come with Volto, the default frontend for Plone 6.
 
+These packages are part of Plone's API-first story.
+Most of them are experimental and are marked in their respective `README` files.
+Plone 6.1.x (Volto 18) depends on:
+- `@plone/registry`
+- `@plone/scripts`
+- `@plone/volto-slate`
+
+and as a development dependency:
+- `@plone/types`
+
+Plone 6.0.x (Volto 17 and below) does not use any of them.
+
+These packages are expected to be used and become part of Plone 7.
+Some of them might become part of Plone 6.1.x minor versions.
+
+The packages are divided into three categories or types:
+
+- core
+- utilities
+- add-ons
+
 
 ## `@plone/types`
 
 Plone types is a special development package.
 It contains the Plone typings for TypeScript.
-It's considered a core package, and it's the only package that the other core packages can rely on as
-a `devDependency` in your project configuration.
+It's considered a core package, and it's the only package that the other core packages can rely on as a `devDependency` in your project configuration.
 
 This package contains `.d.ts` typing definitions, curated by hand.
-Due to the nature of this package, it does not need bundling.
-It's published "as is", so you can import the type definitions from anywhere in your code.
+Due to the nature of this package, it does not need to be built nor bundled.
+It is published "as is", so you can import the type definitions from anywhere in your code.
 
 
 ## Core packages
@@ -29,12 +49,10 @@ They must be published and bundled in a traditional (transpiled) way.
 The bundle of these packages must work on both CommonJS and ECMAScript Module (ESM) environments.
 
 
-## Utility packages
+## Utilities packages
 
--   `@plone/drivers`
--   `@plone/helpers`
 -   `@plone/providers`
--   `@plone/rsc`
+-   `@plone/helpers`
 
 
 ### Rules
@@ -44,19 +62,22 @@ They must be published in the traditional way, as a bundle.
 This bundle must work on both CommonJS and ESM environments.
 
 
-## Feature packages
+## Add-on packages
 
 -   `@plone/blocks`
--   `@plone/contents`
 -   `@plone/slots`
+-   `@plone/theming`
+-   `@plone/contents`
 
 
 ### Rules
 
-Feature packages, or add-on packages, can depend on any other package.
+Add-on or feature packages, can depend on any other package.
 You must distribute them as source code, and not transpile them.
 They must provide a default configuration registry loader as the default main entry point export.
-They must be loadable as any other add-on.
+Unlike Volto add-ons, do *NOT* place the code in the `src` folder.
+If you do not transpile the package, the direct resolution must work out of the box, where both the bundler and TypeScript resolution are direct.
+They must be loadable as any other add-on, and contain an add-on registry compatible `install`-able default export.
 
 
 ## Development utility packages

diff --git a/apps/remix/.gitignore b/apps/remix/.gitignore
@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+.registry.loader.js
diff --git a/apps/remix/app/client.ts b/apps/remix/app/client.ts
@@ -2,7 +2,7 @@ import ploneClient from '@plone/client';
 import config from '@plone/registry';
 
 const cli = ploneClient.initialize({
-  apiPath: config.settings.apiPath,
+  apiPath: config.settings.internalApiPath || config.settings.apiPath,
 });
 
 export { cli as ploneClient };
diff --git a/apps/remix/app/config.ts b/apps/remix/app/config.ts
@@ -1,15 +1,15 @@
 import config from '@plone/registry';
-import { blocksConfig, slate } from '@plone/blocks';
-
-const settings = {
-  apiPath: 'http://localhost:8080/Plone',
-  slate,
-};
-
-// @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;
+import applyAddonConfiguration from '@plone/registry/addons-loader';
+
+export default function install() {
+  applyAddonConfiguration(config);
+  config.settings.apiPath =
+    process.env.PLONE_API_PATH || 'http://localhost:3000';
+  config.settings.internalApiPath = process.env.PLONE_INTERNAL_API_PATH || '';
+  console.log('API_PATH is:', config.settings.apiPath);
+  console.log(
+    'INTERNAL_API_PATH is:',
+    config.settings.internalApiPath || 'not set',
+  );
+  return config;
+}
diff --git a/apps/remix/app/routes/_index.tsx → apps/remix/app/content.tsx b/apps/remix/app/routes/_index.tsx → apps/remix/app/content.tsx
@@ -7,14 +7,16 @@ import {
   dehydrate,
   QueryClient,
   HydrationBoundary,
+  useQueryClient,
   useQuery,
 } from '@tanstack/react-query';
-import { flattenToAppURL } from '../utils';
+import { flattenToAppURL } from './utils';
 import { useLoaderData, useLocation } from '@remix-run/react';
 import { usePloneClient } from '@plone/providers';
-import { Breadcrumbs, RenderBlocks } from '@plone/components';
-import config from '@plone/registry';
-import { ploneClient } from '../client';
+// import { Breadcrumbs, RenderBlocks } from '@plone/components';
+// import config from '@plone/registry';
+import { ploneClient } from './client';
+import App from '@plone/slots/components/App';
 
 export const meta: MetaFunction = () => {
   return [
@@ -23,7 +25,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-const expand = ['breadcrumbs', 'navigation'];
+const expand = ['navroot', 'breadcrumbs', 'navigation'];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
@@ -40,39 +42,31 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   const { getContentQuery } = ploneClient;
 
   await queryClient.prefetchQuery(
-    getContentQuery({ path: flattenToAppURL(request.url), expand }),
+    getContentQuery({ path: flattenToAppURL(request.url || '/'), expand }),
   );
 
   return json({ dehydratedState: dehydrate(queryClient) });
 };
 
 function Page() {
   const { getContentQuery } = usePloneClient();
-  const pathname = useLocation().pathname;
-  const { data } = useQuery(getContentQuery({ path: pathname, expand }));
+  const { pathname } = useLocation();
+  const { data } = useQuery(getContentQuery({ path: pathname || '/', expand }));
 
   if (!data) return null;
   return (
     <>
-      <Breadcrumbs
-        items={data['@components'].breadcrumbs.items || []}
-        root={data['@components'].breadcrumbs.root}
-        includeRoot
-      />
-      <RenderBlocks
-        content={data}
-        blocksConfig={config.blocks.blocksConfig}
-        pathname="/"
-      />
+      <App content={data} location={{ pathname: '/' }} />
     </>
   );
 }
 
-export default function Index() {
+export default function Content() {
   const { dehydratedState } = useLoaderData<typeof loader>();
+  const queryClient = useQueryClient();
 
   return (
-    <HydrationBoundary state={dehydratedState}>
+    <HydrationBoundary state={dehydratedState} queryClient={queryClient}>
       <Page />
     </HydrationBoundary>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,4 @@ node_modules @@
     /build
     /public/build
     .env
+    .registry.loader.js