Sync canary -> main

.github/workflows/nextjs-bundle-analysis.yml

@@ -21,7 +21,10 @@ jobs:
   analyze:
     strategy:
       matrix:
-        next-dir: ['examples/next/faustwp-getting-started']
+        next-dir: [
+          'examples/next/faustwp-getting-started',
+          'examples/next/block-support'
+        ]
 
     runs-on: ubuntu-latest
     steps:

examples/next/app-router/app/[slug]/hasPreviewProps.ts

@@ -0,0 +1,3 @@
+export function hasPreviewProps(props: any) {
+  return props?.searchParams?.preview === 'true' && !!props?.searchParams?.p;
+}

examples/next/app-router/app/[slug]/page.tsx

@@ -0,0 +1,53 @@
+import { getAuthClient, getClient } from '@faustwp/experimental-app-router';
+import { gql } from '@apollo/client';
+import { hasPreviewProps } from './hasPreviewProps';
+import { PleaseLogin } from '@/components/please-login';
+
+export default async function Page(props) {
+  const slug = props.params.slug;
+  const isPreview = hasPreviewProps(props);
+
+  let client = isPreview ? await getAuthClient() : await getClient();
+
+  if (!client) {
+    return <PleaseLogin />;
+  }
+
+  /**
+   * There is currently a bug in WPGraphQL where you can not query for previews
+   * using the contentNode type. This bug will need to be resolved for preview
+   * functionality in the below query to work properly. For now, it returns
+   * the production ready data for the given contentNode regardless if
+   * asPreview is true or false.
+   *
+   * @see https://github.com/wp-graphql/wp-graphql/issues/1673
+   */
+  const { data } = await client.query({
+    query: gql`
+      query GetContentNode($uri: ID!, $asPreview: Boolean!) {
+        contentNode(id: $uri, idType: URI, asPreview: $asPreview) {
+          ... on NodeWithTitle {
+            title
+          }
+          ... on NodeWithContentEditor {
+            content
+          }
+          date
+        }
+      }
+    `,
+    variables: {
+      uri: slug,
+      asPreview: isPreview,
+    },
+  });
+
+  return (
+    <main>
+      <h2>{data?.contentNode?.title}</h2>
+      <div
+        dangerouslySetInnerHTML={{ __html: data?.contentNode?.content ?? '' }}
+      />
+    </main>
+  );
+}

examples/next/app-router/app/api/faust/[route]/route.ts

@@ -1,4 +1,5 @@
 import { faustRouteHandler } from '@faustwp/experimental-app-router';
+import '@/faust.config.js';
 
 const { GET, POST } = faustRouteHandler;
 

examples/next/app-router/app/layout.tsx

@@ -1,18 +1,7 @@
 import { gql } from '@apollo/client';
 import { getClient } from '@faustwp/experimental-app-router';
 import Link from 'next/link';
-/**
- * For now, we will manually call the Faust config as we have not yet determined
- * how we want to set the config (Currently in Faust we call it in the [wordPressNode] file).
- *
- * @todo
- */
-import '../faust.config.js';
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-};
+import '@/faust.config.js';
 
 export default async function RootLayout({ children }) {
   const client = await getClient();

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

@@ -20,15 +20,14 @@ export default async function Page() {
        */
       console.error(res.error);
     } else {
-      redirect('/gated-content');
+      redirect('/my-account');
     }
   }
 
   return (
     <>
       <h2>Login</h2>
 
-      {/* @ts-ignore */}
       <form action={loginAction}>
         <fieldset>
           <label htmlFor="usernameEmail">Username or Email</label>

examples/next/app-router/app/gated-content/page.tsx → examples/next/app-router/app/my-account/page.tsx

@@ -1,11 +1,12 @@
+import { PleaseLogin } from '@/components/please-login';
 import { gql } from '@apollo/client';
-import { getAuthClient } from '@faustwp/experimental-app-router';
+import { getAuthClient, onLogout } from '@faustwp/experimental-app-router';
 
 export default async function Page() {
   const client = await getAuthClient();
 
   if (!client) {
-    return <>You must be authenticated</>;
+    return <PleaseLogin />;
   }
 
   const { data } = await client.query({
@@ -28,11 +29,16 @@ export default async function Page() {
     <>
       <h2>Welcome {data.viewer.name}</h2>
 
+      <h3>My Posts</h3>
       <ul>
         {data.viewer.posts.nodes.map((post) => (
           <li key={post.id}>{post.title}</li>
         ))}
       </ul>
+
+      <form action={onLogout}>
+        <button type="submit">Logout</button>
+      </form>
     </>
   );
 }

examples/next/app-router/components/please-login.tsx

@@ -0,0 +1,10 @@
+import Link from 'next/link';
+
+export function PleaseLogin() {
+  return (
+    <>
+      You must be authenticated! Please <Link href={`/login`}>log in</Link>{' '}
+      first.
+    </>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { setConfig } from '@faustwp/core/dist/cjs/config/index.js';
+import { setConfig } from '@faustwp/core/dist/mjs/config/index.js';
 import possibleTypes from './possibleTypes.json';
 
 /** @type {import('@faustwp/core').FaustConfig} */

examples/next/app-router/package.json

@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.0",
-    "@faustwp/cli": "1.1.1",
-    "@faustwp/core": "1.1.2",
-    "@faustwp/experimental-app-router": "^0.0.3",
     "@apollo/experimental-nextjs-app-support": "^0.4.1",
+    "@faustwp/cli": "1.1.4",
+    "@faustwp/core": "1.1.2",
+    "@faustwp/experimental-app-router": "^0.1.0",
     "graphql": "^16.7.1",
     "next": "^13.4.20-canary.18",
     "react": "^18.2.0",
@@ -23,5 +23,10 @@
   "engines": {
     "node": ">=16",
     "npm": ">=8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.6.3",
+    "@types/react": "^18.2.22",
+    "typescript": "^5.2.2"
   }
 }

examples/next/app-router/tsconfig.json

@@ -17,6 +17,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "paths": {
+      "@/*": ["./*"]
+    },
     "plugins": [
       {
         "name": "next"

examples/next/block-support/.env.local.sample

@@ -0,0 +1,5 @@
+# Your WordPress site URL
+NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com
+
+# Plugin secret found in WordPress Settings->Faust
+# FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET

examples/next/block-support/.gitignore

@@ -0,0 +1,2 @@
+possibleTypes.json
+globalStylesheet.css

examples/next/block-support/README.md

@@ -0,0 +1,3 @@
+# @faustwp/block-support-example
+
+Example showcasing Faust.js block editor support.

examples/next/block-support/faust.config.js

@@ -0,0 +1,12 @@
+import { setConfig } from '@faustwp/core';
+import templates from './wp-templates';
+import possibleTypes from './possibleTypes.json';
+
+/**
+ * @type {import('@faustwp/core').FaustConfig}
+ **/
+export default setConfig({
+  templates,
+  experimentalPlugins: [],
+  possibleTypes,
+});

examples/next/block-support/next.config.js

@@ -0,0 +1,18 @@
+const { withFaust, getWpHostname } = require('@faustwp/core');
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+module.exports = withFaust({
+  reactStrictMode: true,
+  sassOptions: {
+    includePaths: ['node_modules'],
+  },
+  images: {
+    domains: [getWpHostname()],
+  },
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
+});

examples/next/block-support/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@faustwp/block-support-example",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "predev": "faust generatePossibleTypes && faust generateGlobalStylesheet",
+    "prebuild": "faust generatePossibleTypes && faust generateGlobalStylesheet",
+    "dev": "faust dev",
+    "build": "faust build",
+    "start": "faust start"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.6.6",
+    "@faustwp/blocks": "2.0.0",
+    "@faustwp/cli": "1.0.1",
+    "@faustwp/core": "1.1.0",
+    "@wordpress/base-styles": "^4.26.0",
+    "@wordpress/block-library": "^7.19.0",
+    "classnames": "^2.3.1",
+    "graphql": "^16.6.0",
+    "next": "^12.1.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sass": "^1.54.9"
+  },
+  "engines": {
+    "node": ">=16",
+    "npm": ">=8"
+  }
+}

examples/next/block-support/pages/[...wordpressNode].js

@@ -0,0 +1,16 @@
+import { getWordPressProps, WordPressTemplate } from '@faustwp/core';
+
+export default function Page(props) {
+  return <WordPressTemplate {...props} />;
+}
+
+export function getStaticProps(ctx) {
+  return getWordPressProps({ ctx });
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+}