Merge branch 'canary' into MERL-1256

wpengine · Nov 14, 2023 · 13cea51 · 13cea51
2 parents bf7f6e3 + abfb60c
commit 13cea51
Show file tree

Hide file tree

Showing 11 changed files with 540 additions and 148 deletions.
diff --git a/examples/next/app-router/app/login/action.ts b/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');
+}
diff --git a/examples/next/app-router/app/login/page.tsx b/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>
     </>
   );

diff --git a/examples/next/app-router/next.config.js b/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();
diff --git a/examples/next/app-router/package.json b/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"
   }
 }
diff --git a/examples/next/app-router/tsconfig.json b/examples/next/app-router/tsconfig.json
@@ -5,6 +5,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "types": ["react-dom/experimental"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,

diff --git a/examples/next/block-support/package.json b/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",

diff --git a/examples/next/faustwp-getting-started/package.json b/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",