Merge branch 'canary' into jp-merl-1228-link-rewrites

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,43 +1,48 @@
 ---
 name: '🐛 Bug Report'
-about: Report a reproducible bug or regression.
+about:  Create a report to help us improve
 title: 'Bug: '
 labels: 'Status: Unconfirmed'
 ---
 
 <!--
-  Please provide a clear and concise description of what the bug is. Include
-  screenshots if needed. Please test using the latest version of the relevant
-  FaustJS packages to make sure your issue has not already been fixed.
+  Before you submit a bug report, please make sure you have searched for similar issues.
+  Provide as much detail as possible so we can replicate the bug. Screenshots and screencasts
+  are also helpful. We recommend testing with the latest versions of FaustJS packages.
 -->
 
-## Applicable Versions
-
-- `@faustjs/core` version:
-- `@faustjs/react` version:
-- `@faustjs/next` version:
+## Environment
+- `@faustwp/core` version: 
+- `@faustwp/cli` version: 
+- `@faustwp/blocks` version: 
+- `@faustwp/block-editor-utils` version: 
 - WordPress version:
+- Browser, OS, and other relevant software versions:
 
-## Steps To Reproduce
-
-1.
-2.
-
+## Description
 <!--
-  Your bug will get fixed much faster if we can run your code and it doesn't
-  have dependencies other than what FaustJS requires. Issues without reproduction steps or
-  code examples may be immediately closed as not actionable.
+  A clear and concise description of what the bug is. Include any error messages or stack traces.
+  If applicable, add screenshots to help explain your problem.
 -->
 
-Link to code example:
-
+## Steps to Reproduce
 <!--
-  Please provide a link to a repository on GitHub, or provide a
-  minimal code example that reproduces the problem. You may provide a screenshot
-  of the application if you think it is relevant to your bug report.
-  Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve.
+  Steps to reproduce the behavior:
+  1. Go to '...'
+  2. Click on '....'
+  3. Scroll down to '....'
+  4. See error
 -->
 
-## The current behavior
+## Expected vs. Actual Behavior
+<!--
+  What did you expect to happen, and what actually happened instead? 
+  The more detail, the better. Comparing your expectations to reality can help us pinpoint where the issue lies.
+-->
 
-## The expected behavior
+## Reproducible Demo
+<!--
+  Please provide a link to a live example, or an unambiguous set of steps to reproduce
+  this bug. Include code to reproduce, if relevant. Sample projects on GitHub work well.
+  Here's how to provide a Minimal, Complete, and Verifiable example: https://stackoverflow.com/help/mcve.
+-->

.github/workflows/e2e-next-example.yml

@@ -14,7 +14,7 @@ jobs:
       PR_BRANCH: ${{github.event.pull_request.head.ref}}
     strategy:
       matrix:
-        node: ['16', '18']
+        node: ['16', '18', '20']
     defaults:
       run:
         working-directory: ./

.github/workflows/e2e-next-faustwp-example.yml

@@ -14,7 +14,7 @@ jobs:
       PR_BRANCH: ${{github.event.pull_request.head.ref}}
     strategy:
       matrix:
-        node: ['16', '18']
+        node: ['16', '18', '20']
     defaults:
       run:
         working-directory: ./

.github/workflows/e2e-nightly-build.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['16', '18']
+        node: ['16', '18', '20']
     defaults:
       run:
         working-directory: ./

.github/workflows/experimental-app-router.yml

@@ -0,0 +1,36 @@
+name: Experimental App Router Build & Test
+
+on:
+  pull_request:
+
+jobs:
+  experimental_app_router_build_test:
+    name: "Build and Test Experimental App Router on Node.js ${{ matrix.node }} ${{ matrix.os }}"
+    strategy:
+      matrix:
+        os: ['ubuntu-latest']
+        node: ['18', '20']
+    permissions:
+      checks: write
+      pull-requests: write
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install
+        run: npm ci
+
+      - name: Build (Monorepo)
+        run: npm run build
+
+      - name: Build
+        run: npm run build
+        working-directory: packages/experimental-app-router
+
+      - name: Tests
+        run: npm run test
+        working-directory: packages/experimental-app-router

.github/workflows/nightly-releases.yml

@@ -14,7 +14,7 @@ name: Nightly Releases
 on:
   schedule:
     # Monday-Friday at 8:35pm UTC / 3:35pm CST
-    
+
     # Uses the 35th minute because GitHub Workflow load is significantly
     # increased at the start of the hour. By invoking the workflow in the
     # middle of the hour, there is less chance of delay.
@@ -30,7 +30,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Node.js 16.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@master
         with:
           node-version: 18.x

.github/workflows/release-packages.yml

@@ -16,10 +16,10 @@ jobs:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 16.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@master
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install Dependencies
         run: npm ci

.github/workflows/test-packages.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       matrix:
         os: ['ubuntu-latest']
-        node: ['16', '18' ]
+        node: ['16', '18', '20']
     permissions:
       checks: write
       pull-requests: write

.npmrc

@@ -1 +1 @@
-engine-strict=true
+engine-strict=false

examples/next/app-router/app/login/action.ts

@@ -0,0 +1,14 @@
+'use server';
+
+import { onLogin } from '@faustwp/experimental-app-router';
+import { redirect } from 'next/navigation';
+
+export async function loginAction(prevData: any, formData: FormData) {
+  const res = await onLogin(formData);
+
+  if (res.error) {
+    return res;
+  }
+
+  redirect('/my-account');
+}

examples/next/app-router/app/login/page.tsx

@@ -1,34 +1,25 @@
-import { onLogin } from '@faustwp/experimental-app-router';
-import { redirect } from 'next/navigation';
-
-export default async function Page() {
-  async function loginAction(formData: FormData) {
-    'use server';
-
-    const res = await onLogin(formData);
-
-    if (res.error) {
-      /**
-       * @TODO Next.js is still working on ways persisting error messages from
-       * server actions to the client.
-       *
-       * "Displaying loading or error states currently requires using
-       * Client Components. We are exploring options for server-side functions
-       * to retrieve these values as we move forward in stability for Server Actions."
-       *
-       * @link https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#error-handling
-       */
-      console.error(res.error);
-    } else {
-      redirect('/my-account');
-    }
-  }
+'use client';
+
+import { useFormState, useFormStatus } from 'react-dom';
+import { loginAction } from './action';
+
+function SubmitButton() {
+  const status = useFormStatus();
+  return (
+    <button disabled={status.pending}>
+      {status.pending ? 'Loading...' : 'Login'}
+    </button>
+  );
+}
+
+export default function Page() {
+  const [state, formAction] = useFormState(loginAction, {});
 
   return (
     <>
       <h2>Login</h2>
 
-      <form action={loginAction}>
+      <form action={formAction}>
         <fieldset>
           <label htmlFor="usernameEmail">Username or Email</label>
           <input type="name" name="usernameEmail" />
@@ -39,7 +30,11 @@ export default async function Page() {
           <input type="password" name="password" />
         </fieldset>
 
-        <button type="submit">Login</button>
+        <SubmitButton />
+
+        {state.error && (
+          <p dangerouslySetInnerHTML={{ __html: state.error }}></p>
+        )}
       </form>
     </>
   );

examples/next/app-router/next.config.js

@@ -1,8 +1,4 @@
 import { withFaust } from '@faustwp/core';
 
 /** @type {import('next').NextConfig} */
-export default withFaust({
-  experimental: {
-    serverActions: true,
-  },
-});
+export default withFaust();

examples/next/app-router/package.json

@@ -11,22 +11,23 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.0",
-    "@apollo/experimental-nextjs-app-support": "^0.4.1",
-    "@faustwp/cli": "1.2.0",
-    "@faustwp/core": "1.2.0",
-    "@faustwp/experimental-app-router": "^0.1.0",
+    "@apollo/experimental-nextjs-app-support": "^0.5.1",
+    "@faustwp/cli": "^1.2.0",
+    "@faustwp/core": "^1.2.0",
+    "@faustwp/experimental-app-router": "^0.2.0",
     "graphql": "^16.7.1",
-    "next": "^13.4.20-canary.18",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "^14.0.1",
+    "react": "^18.3.0-canary-ce2bc58a9-20231102",
+    "react-dom": "^18.3.0-canary-ce2bc58a9-20231102"
   },
   "engines": {
-    "node": ">=16",
+    "node": ">=18",
     "npm": ">=8"
   },
   "devDependencies": {
     "@types/node": "^20.6.3",
-    "@types/react": "^18.2.22",
+    "@types/react": "^18.2.36",
+    "@types/react-dom": "^18.2.14",
     "typescript": "^5.2.2"
   }
 }

examples/next/app-router/tsconfig.json

@@ -5,6 +5,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "types": ["react-dom/experimental"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,

examples/next/block-support/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@apollo/client": "^3.6.6",
     "@faustwp/blocks": "2.0.0",
-    "@faustwp/cli": "1.2.0",
-    "@faustwp/core": "1.2.0",
+    "@faustwp/cli": "^1.2.0",
+    "@faustwp/core": "^1.2.0",
     "@wordpress/base-styles": "^4.26.0",
     "@wordpress/block-library": "^7.19.0",
     "classnames": "^2.3.1",
@@ -25,7 +25,8 @@
     "sass": "^1.54.9"
   },
   "devDependencies": {
-    "@wordpress/scripts": "26.12.0"
+    "@wordpress/scripts": "26.12.0",
+    "@faustwp/block-editor-utils": "0.0.5"
   },
   "engines": {
     "node": ">=16",

examples/next/faustwp-getting-started/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.6",
-    "@faustwp/cli": "1.2.0",
-    "@faustwp/core": "1.2.0",
+    "@faustwp/cli": "^1.2.0",
+    "@faustwp/core": "^1.2.0",
     "@wordpress/base-styles": "^4.26.0",
     "@wordpress/block-library": "^7.19.0",
     "classnames": "^2.3.1",