[slots] @plone/slots first developments

.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

.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

.stylelintignore

@@ -1 +1,4 @@
 dist
+docs
+node_modules
+packages/registry/lib

apps/remix/.gitignore

@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+.registry.loader.js

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 };

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;
+}

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>
   );

apps/remix/app/entry.client.tsx

@@ -3,11 +3,12 @@
  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
  * For more information, see https://remix.run/file-conventions/entry.client
  */
-
+import install from './config';
 import { RemixBrowser } from '@remix-run/react';
 import { startTransition, StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
-import './config';
+
+install();
 
 startTransition(() => {
   hydrateRoot(

apps/remix/app/entry.server.tsx

@@ -11,10 +11,12 @@ import { createReadableStreamFromReadable } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
 import { isbot } from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
-import './config';
+import install from './config';
 
 const ABORT_DELAY = 5_000;
 
+install();
+
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,

apps/remix/app/root.tsx

@@ -17,18 +17,16 @@ import PloneClient from '@plone/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import '@plone/components/dist/basic.css';
+import '@plone/slots/main.css';
 import { flattenToAppURL } from './utils';
 import { PloneProvider } from '@plone/providers';
+
 import config from '@plone/registry';
 
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ];
 
-function useHrefLocal(to: string) {
-  return useHref(flattenToAppURL(to));
-}
-
 export default function App() {
   const [queryClient] = useState(
     () =>
@@ -55,6 +53,10 @@ export default function App() {
     return RRNavigate(flattenToAppURL(to));
   };
 
+  function useHrefLocal(to: string) {
+    return useHref(flattenToAppURL(to));
+  }
+
   return (
     <html lang="en">
       <head>
@@ -71,6 +73,7 @@ export default function App() {
           useParams={useParams}
           useHref={useHrefLocal}
           navigate={navigate}
+          flattenToAppURL={flattenToAppURL}
         >
           <Outlet />
           <ScrollRestoration />