test: various waku poc's

apps/waku/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.env*
+*.tsbuildinfo
+.cache
+.DS_Store
+*.pem

apps/waku/netlify.toml

@@ -0,0 +1,6 @@
+
+[build]
+  command = "npm run build -- --with-netlify"
+  publish = "dist/public"
+[functions]
+  included_files = ["private/**"]

apps/waku/netlify/functions/serve.js

@@ -0,0 +1,7 @@
+
+globalThis.__WAKU_NOT_FOUND_HTML__ = null;
+export { default } from '../../dist/serve.js';
+export const config = {
+  preferStatic: true,
+  path: ['/', '/*'],
+};

apps/waku/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "waku",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build --with-netlify-static",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "@custom/schema": "workspace:*",
+    "@custom/ui": "workspace:*",
+    "react": "19.0.0-canary-e3ebcd54b-20240405",
+    "react-dom": "19.0.0-canary-e3ebcd54b-20240405",
+    "react-server-dom-webpack": "19.0.0-canary-e3ebcd54b-20240405",
+    "vite": "^5.2.10",
+    "waku": "^0.20.1"
+  },
+  "devDependencies": {
+    "@amazeelabs/bridge": "^1.5.12",
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.24",
+    "autoprefixer": "10.4.19",
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.4"
+  }
+}

apps/waku/postcss.config.js

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/waku/src/bridge.tsx

@@ -0,0 +1,30 @@
+import type {
+  LinkType,
+  LocationProviderType,
+  useLocationType,
+} from '@amazeelabs/bridge';
+import React from 'react';
+import { Link as WakuLink, useRouter_UNSTABLE as useRouter } from 'waku';
+
+export const Link: LinkType = ({ href, ...props }) => {
+  return <WakuLink to={href || '/'} {...props} />;
+};
+
+export const useLocation: useLocationType = () => {
+  const router = useRouter();
+  console.log(router);
+  return [
+    {
+      pathname: router.path,
+      search: router.searchParams?.toString() || '',
+      searchParams: router.searchParams,
+      // TODO: handle the hash on client side, also using server/client implementations
+      hash: '',
+    },
+    router.push,
+  ];
+};
+
+export const LocationProvider: LocationProviderType = ({ children }) => {
+  return <>{children}</>;
+};

apps/waku/src/components/executor.tsx

@@ -0,0 +1,14 @@
+import { OperationExecutor } from '@custom/schema';
+import { PropsWithChildren } from 'react';
+
+import { drupalExecutor } from '../utils/drupal-executor';
+
+export function DrupalExecutor({ children }: PropsWithChildren) {
+  return (
+    <OperationExecutor
+      executor={drupalExecutor('http://localhost:8888/graphql', false)}
+    >
+      {children}
+    </OperationExecutor>
+  );
+}

apps/waku/src/pages/[...path].tsx

@@ -0,0 +1,29 @@
+import { ListPagesQuery } from '@custom/schema';
+
+import { runOperation } from '../utils/runOperation';
+
+export default async function Page({ path }: { path: string }) {
+  return (
+    <div>
+      <title>{path}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{path}</h1>
+    </div>
+  );
+}
+
+function isDefined<T>(value: T | undefined): value is T {
+  return !!value;
+}
+
+export async function getConfig() {
+  const pages = await runOperation(ListPagesQuery, {});
+  const paths =
+    pages.allPages
+      ?.filter(isDefined)
+      .map((page) => page.path.substring(1).split('/')) || [];
+
+  return {
+    render: 'static',
+    staticPaths: paths,
+  };
+}

apps/waku/src/pages/_layout.tsx

@@ -0,0 +1,20 @@
+import '@custom/ui/styles.css';
+
+import { Frame } from '@custom/ui/routes/Frame';
+import type { PropsWithChildren } from 'react';
+
+import { DrupalExecutor } from '../components/executor';
+
+export default async function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <DrupalExecutor>
+      <Frame>{children}</Frame>
+    </DrupalExecutor>
+  );
+}
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  };
+};

apps/waku/src/styles.css

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/waku/src/utils/drupal-executor.ts

@@ -0,0 +1,59 @@
+import { AnyOperationId, OperationVariables } from '@custom/schema';
+
+/**
+ * Create an executor that operates against a Drupal endpoint.
+ */
+export function drupalExecutor(endpoint: string, forward: boolean = true) {
+  return async function <OperationId extends AnyOperationId>(
+    id: OperationId,
+    variables?: OperationVariables<OperationId>,
+  ) {
+    const url = new URL(endpoint);
+    const isMutation = id.includes('Mutation:');
+    if (isMutation) {
+      const { data, errors } = await (
+        await fetch(url, {
+          method: 'POST',
+          credentials: 'include',
+          body: JSON.stringify({
+            queryId: id,
+            variables: variables || {},
+          }),
+          headers: forward
+            ? {
+                'SLB-Forwarded-Proto': window.location.protocol.slice(0, -1),
+                'SLB-Forwarded-Host': window.location.hostname,
+                'SLB-Forwarded-Port': window.location.port,
+                'Content-Type': 'application/json',
+              }
+            : {
+                'Content-Type': 'application/json',
+              },
+        })
+      ).json();
+      if (errors) {
+        throw errors;
+      }
+      return data;
+    } else {
+      url.searchParams.set('queryId', id);
+      url.searchParams.set('variables', JSON.stringify(variables || {}));
+      const { data, errors } = await (
+        await fetch(url, {
+          credentials: 'include',
+          headers: forward
+            ? {
+                'SLB-Forwarded-Proto': window.location.protocol.slice(0, -1),
+                'SLB-Forwarded-Host': window.location.hostname,
+                'SLB-Forwarded-Port': window.location.port,
+              }
+            : {},
+        })
+      ).json();
+      if (errors) {
+        throw errors;
+      }
+      return data;
+    }
+  };
+}

apps/waku/src/utils/runOperation.ts

@@ -0,0 +1,35 @@
+import {
+  AnyOperationId,
+  OperationResult,
+  OperationVariables,
+} from '@custom/schema';
+
+const internal = process.env.DRUPAL_INTERNAL_URL || 'http://localhost:8888';
+const external = process.env.DRUPAL_EXTERNAL_URL || 'http://localhost:8888';
+
+const getForwardedHeaders = (url: URL) => ({
+  'X-Forwarded-Proto': url.protocol === 'https:' ? 'https' : 'http',
+  'X-Forwarded-Host': url.hostname,
+  'X-Forwarded-Port': url.port,
+  'SLB-Forwarded-Proto': url.protocol === 'https:' ? 'https' : 'http',
+  'SLB-Forwarded-Host': url.hostname,
+  'SLB-Forwarded-Port': url.port,
+});
+
+export async function runOperation<TOperation extends AnyOperationId>(
+  id: TOperation,
+  variables: OperationVariables<TOperation>,
+): Promise<OperationResult<TOperation>> {
+  const result = await fetch(`${internal}/graphql`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...getForwardedHeaders(new URL(external)),
+    },
+    body: JSON.stringify({
+      id,
+      variables,
+    }),
+  });
+  return (await result.json()).data;
+}

apps/waku/tailwind.config.js

@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};

apps/waku/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx"
+  }
+}

apps/waku/vite.config.ts

@@ -0,0 +1,8 @@
+/** @type {import('vite').UserConfig} */
+export default {
+  resolve: {
+    alias: {
+      '@amazeelabs/bridge': './src/bridge.tsx',
+    },
+  },
+};

package.json

@@ -46,7 +46,9 @@
     "gatsby-plugin-sharp": "5.13.1",
     "sharp": "0.33.1",
     "eslint": "7",
-    "graphql": "16.8.1"
+    "graphql": "16.8.1",
+    "react": "19.0.0-canary-e3ebcd54b-20240405",
+    "react-dom": "19.0.0-canary-e3ebcd54b-20240405"
   },
   "pnpm": {
     "patchedDependencies": {}

packages/drupal/custom/src/Plugin/GraphQL/Directive/ListEntities.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Drupal\custom\Plugin\GraphQL\Directive;
+
+use Drupal\Core\Plugin\PluginBase;
+use Drupal\graphql\GraphQL\Resolver\ResolverInterface;
+use Drupal\graphql\GraphQL\ResolverBuilder;
+use Drupal\graphql_directives\DirectiveInterface;
+
+/**
+ * @Directive(
+ *   id = "listEntities",
+ *   description = "Access restrictions for the country selection overlay.",
+ *   arguments = {
+ *     "type" = "String!",
+ *     "bundle" = "String!",
+ *   }
+ * )
+ */
+class ListEntities extends PluginBase implements DirectiveInterface {
+
+  public function buildResolver(ResolverBuilder $builder, $arguments): ResolverInterface {
+    return $builder->produce('list_entities')
+      ->map('type', $builder->fromValue($arguments['type']))
+      ->map('bundle', $builder->fromValue($arguments['bundle']))
+      // TODO: Fix this.
+      ->map('access', $builder->fromValue(FALSE));
+  }
+
+}

packages/executors/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["@amazeelabs/eslint-config"],
+  "root": true
+}

packages/executors/.gitignore

@@ -0,0 +1 @@
+build

packages/executors/.npmignore

@@ -0,0 +1,4 @@
+**
+!build/*
+!CHANGELOG.md
+!README.md

packages/executors/.prettierrc

@@ -0,0 +1 @@
+"@amazeelabs/prettier-config"