feat: Add Example / SSR Target selection based deployment target

examples/15_ssr_target/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

examples/15_ssr_target/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "waku-context-broken",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev --with-ssr",
+    "build": "waku build --with-ssr",
+    "start": "waku start --with-ssr"
+  },
+  "dependencies": {
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "react-textarea-autosize": "^8.5.3",
+    "waku": "0.19.2"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "typescript": "5.3.3",
+    "vite": "^5.0.12"
+  }
+}

examples/15_ssr_target/src/components/MyTextarea.tsx

@@ -0,0 +1,10 @@
+'use client';
+import TextareaAutosize from 'react-textarea-autosize';
+
+export const MyTextarea = () => {
+  return (
+    <div>
+      <TextareaAutosize />
+    </div>
+  );
+};

examples/15_ssr_target/src/components/error-boundary.tsx

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import type { ReactNode, FunctionComponent } from 'react';
+
+interface Props {
+  fallback: (error: unknown) => ReactNode;
+  children: ReactNode;
+}
+
+class ErrorBoundaryClass extends Component<Props, { error?: unknown }> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return { error };
+  }
+
+  render() {
+    if ('error' in this.state) {
+      return this.props.fallback(this.state.error);
+    }
+    return this.props.children;
+  }
+}
+
+export const ErrorBoundary =
+  ErrorBoundaryClass as unknown as FunctionComponent<Props>;

examples/15_ssr_target/src/entries.tsx

@@ -0,0 +1,18 @@
+import { createPages } from 'waku';
+
+import { RootLayout } from './templates/root-layout.js';
+import { HomePage } from './templates/home-page.js';
+
+export default createPages(async ({ createPage, createLayout }) => {
+  createLayout({
+    render: 'static',
+    path: '/',
+    component: RootLayout,
+  });
+
+  createPage({
+    render: 'static',
+    path: '/',
+    component: HomePage,
+  });
+});

examples/15_ssr_target/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Router } from 'waku/router/client';
+
+import { ErrorBoundary } from './components/error-boundary.js';
+
+const rootElement = (
+  <StrictMode>
+    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
+      <Router />
+    </ErrorBoundary>
+  </StrictMode>
+);
+
+if (import.meta.env.WAKU_HYDRATE) {
+  hydrateRoot(document.body, rootElement);
+} else {
+  createRoot(document.body).render(rootElement);
+}

examples/15_ssr_target/src/templates/home-page.tsx

@@ -0,0 +1,24 @@
+import { MyTextarea } from '../components/MyTextarea.js';
+
+export const HomePage = async () => {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <p>{data.body}</p>
+      <MyTextarea />
+    </div>
+  );
+};
+
+const getData = async () => {
+  const data = {
+    title: 'Waku',
+    headline: 'Waku',
+    body: 'Hello world!',
+  };
+
+  return data;
+};

examples/15_ssr_target/src/templates/root-layout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+type RootLayoutProps = { children: ReactNode };
+
+export const RootLayout = async ({ children }: RootLayoutProps) => {
+  const data = await getData();
+
+  return (
+    <div id="__waku" className="font-['Nunito']">
+      <meta property="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <main className="flex min-h-svh items-center justify-center *:min-h-64 *:min-w-64">
+        {children}
+      </main>
+    </div>
+  );
+};
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};

examples/15_ssr_target/tsconfig.json

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