docs(demo): Github app uses SSR

Author: ntucker

examples/github-app/package-lock.json

@@ -6,9 +6,11 @@
     "lint": "yarn g:lint src --ext .ts,.tsx",
     "format": "run lint --fix",
     "test:type": "run tsc",
-    "start": "webpack serve --mode=development",
-    "start:prod": "yarn dlx serve dist",
-    "build:browser": "webpack --mode=production",
+    "start": "anansi serve --dev ./src/index.tsx",
+    "start:prod": "NODE_ENV=production WEBPACK_PUBLIC_PATH='/assets/' anansi serve ./dist-server/App.js",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "WEBPACK_PUBLIC_PATH='/assets/' webpack --mode=production",
+    "build:server": "WEBPACK_PUBLIC_PATH='/assets/' webpack --mode=production --target=node --env entrypath=index.server.tsx",
     "build:analyze": "webpack --mode=production --env analyze",
     "build:profile": "webpack --mode=production --env profile",
     "test:pkg": "webpack --env check=nobuild"
@@ -28,6 +30,7 @@
   "private": true,
   "license": "Apache-2.0",
   "devDependencies": {
+    "@anansi/cli": "3.1.88",
     "@anansi/babel-preset": "6.2.19",
     "@anansi/browserslist-config": "1.7.3",
     "@anansi/webpack-config": "21.1.3",
@@ -48,14 +51,16 @@
     "webpack-dev-server": "5.2.2"
   },
   "dependencies": {
+    "@anansi/core": "0.21.0",
     "@anansi/router": "0.10.19",
-    "@ant-design/icons": "^6.0.0",
+    "@ant-design/cssinjs": "2.0.1",
+    "@ant-design/icons": "6.1.0",
     "@babel/runtime-corejs3": "^7.26.7",
     "@data-client/graphql": "0.15.1-beta-20251110013913-ef632c49a03da67187b6097fe8154893cd930d30",
     "@data-client/img": "0.15.0-beta-20251022142546-a457d1596871fb28f1a91f2531cc259db4d55a9c",
     "@data-client/react": "0.15.0-beta-20251022142546-a457d1596871fb28f1a91f2531cc259db4d55a9c",
     "@data-client/rest": "0.15.1-beta-20251116224907-3174fe59b114d2037762a6458f5576d23e483ba4",
-    "@js-temporal/polyfill": "^0.5.0",
+    "@js-temporal/polyfill": "^0.5.1",
     "antd": "6.0.0",
     "core-js": "^3.40.0",
     "history": "^5.3.0",
@@ -64,8 +69,8 @@
     "react-dom": "19.2.0",
     "react-markdown": "10.1.0",
     "rehype-highlight": "7.0.2",
-    "remark-gfm": "^4.0.0",
-    "remark-remove-comments": "^1.0.1",
+    "remark-gfm": "4.0.1",
+    "remark-remove-comments": "1.1.1",
     "uuid": "^13.0.0"
   }
 }

examples/github-app/package.json

@@ -0,0 +1,53 @@
+import {
+  Controller,
+  LogoutManager,
+  getDefaultManagers,
+  type Manager,
+} from '@data-client/react';
+import { ErrorBoundary } from '@data-client/react';
+import type { ReactNode } from 'react';
+
+import Boundary from '@/Boundary';
+import { AuthdProvider } from '@/navigation/authdContext';
+import { unAuth } from '@/resources/Auth';
+
+export const getManagers: () => Manager[] = () => {
+  return [
+    new LogoutManager({
+      handleLogout(controller: Controller) {
+        unAuth();
+        controller.resetEntireStore();
+      },
+    }),
+    ...getDefaultManagers(),
+  ];
+};
+
+export default function RootProvider({ children }: { children: ReactNode }) {
+  return (
+    <ErrorBoundary fallbackComponent={ErrorFallback}>
+      <AuthdProvider>
+        <ErrorBoundary fallbackComponent={ErrorFallback}>
+          <Boundary>{children}</Boundary>
+        </ErrorBoundary>
+      </AuthdProvider>
+    </ErrorBoundary>
+  );
+}
+
+function ErrorFallback({
+  error,
+  resetErrorBoundary,
+}: {
+  error: Error;
+  resetErrorBoundary: () => void;
+  className?: string;
+}) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error?.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+}

examples/github-app/src/RootProvider.tsx

@@ -0,0 +1,11 @@
+import App from './App';
+import RootProvider, { getManagers } from './RootProvider';
+
+export const app = (
+  <RootProvider>
+    <App />
+  </RootProvider>
+);
+
+export default app;
+export { RootProvider, App, getManagers };

examples/github-app/src/App.tsx renamed to examples/github-app/src/app/App.tsx

@@ -1,12 +1,11 @@
 import { Temporal } from '@js-temporal/polyfill';
 
-const REL = new Intl.RelativeTimeFormat(navigator.language || 'en-US', {
-  localeMatcher: 'best fit',
-  numeric: 'auto',
-  style: 'long',
-});
-
-export function humanTime(date: Temporal.Instant) {
+export function humanTime(date: Temporal.Instant, language: string) {
+  const REL = new Intl.RelativeTimeFormat(language, {
+    localeMatcher: 'best fit',
+    numeric: 'auto',
+    style: 'long',
+  });
   const duration = date.until(Temporal.Now.instant(), {
     largestUnit: 'second',
   });

examples/github-app/src/app/RootProvider.tsx

@@ -0,0 +1,42 @@
+import {
+  laySpouts,
+  documentSpout,
+  dataClientSpout,
+  prefetchSpout,
+  routerSpout,
+  JSONSpout,
+  appSpout,
+  antdSpout,
+  navigatorSpout,
+} from '@anansi/core/server';
+import { useController } from '@data-client/react';
+
+import app from '@/app';
+import { getManagers } from '@/app/RootProvider';
+
+import { createRouter } from './routing';
+
+const csPolicy = {
+  'base-uri': "'self'",
+  'object-src': "'none'",
+  'script-src': ["'self'", "'unsafe-inline'"],
+  'style-src': ["'unsafe-inline'", "'self'"],
+};
+
+const spouts = prefetchSpout('controller')(
+  documentSpout({ title: 'Github App', lang: 'en', csPolicy })(
+    antdSpout()(
+      JSONSpout()(
+        navigatorSpout()(
+          dataClientSpout({ getManagers })(
+            routerSpout({ useResolveWith: useController, createRouter })(
+              appSpout(app),
+            ),
+          ),
+        ),
+      ),
+    ),
+  ),
+);
+
+export default laySpouts(spouts);

examples/github-app/src/app/index.tsx

@@ -1,14 +1,32 @@
-import ReactDOM from 'react-dom/client';
+import {
+  floodSpouts,
+  documentSpout,
+  dataClientSpout,
+  routerSpout,
+  JSONSpout,
+  appSpout,
+  antdSpout,
+  navigatorSpout,
+} from '@anansi/core';
+import { useController } from '@data-client/react';
 
-import App from './App';
-import RootProvider from './RootProvider';
+import app from '@/app';
+import { getManagers } from '@/app/RootProvider';
 
-const content = (
-  <RootProvider>
-    <App />
-  </RootProvider>
-);
+import { createRouter } from './routing';
 
-ReactDOM.createRoot(document.getElementById('react') || document.body).render(
-  content,
+const spouts = documentSpout({ title: 'Github App' })(
+  antdSpout()(
+    JSONSpout()(
+      navigatorSpout()(
+        dataClientSpout({ getManagers })(
+          routerSpout({ useResolveWith: useController, createRouter })(
+            appSpout(app),
+          ),
+        ),
+      ),
+    ),
+  ),
 );
+
+export default floodSpouts(spouts);

examples/github-app/src/components/human.ts

@@ -1,3 +1,4 @@
+import { useNavigator } from '@anansi/core';
 import { Link, useRoutes } from '@anansi/router';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { useCache, useController } from '@data-client/react';
@@ -19,6 +20,7 @@ import CommentForm from './CommentForm';
 const { Meta } = Card;
 
 function CommentInline({ comment }: { comment: Comment }) {
+  const { language } = useNavigator();
   const [editing, setEditing] = useState(false);
   return (
     <Card style={{ marginTop: 16 }} className={commentList}>
@@ -35,9 +37,7 @@ function CommentInline({ comment }: { comment: Comment }) {
                 {comment.user.login}
               </Link>{' '}
               commented on{' '}
-              {new Intl.DateTimeFormat(navigator.language).format(
-                comment.createdAt,
-              )}
+              {new Intl.DateTimeFormat(language).format(comment.createdAt)}
             </span>
             <CommentControls comment={comment} setEditing={setEditing} />
           </FlexRow>