akanjs 2.3.0 → 2.3.1-rc.1

package/server/metadata.tsx

@@ -1,5 +1,5 @@
 import type { AkanMetadata, Head, ResolvedHead, ResolveHeadResult } from "akanjs/client";
-import type { ReactNode } from "react";
+import { AKAN_RSC_HEAD_SNAPSHOT_VERSION, type AkanHeadSnapshotNode, type AkanHeadSnapshotV1 } from "./routeState";
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return Boolean(value && typeof value === "object" && !Array.isArray(value));
@@ -10,44 +10,70 @@ function normalizeStringArray(value: string | string[] | undefined): string[] {
   return Array.isArray(value) ? value : [value];
 }
 
-function renderOpenGraph(metadata: AkanMetadata): ReactNode[] {
+function createMetaNode(attrs: Record<string, string | undefined>): AkanHeadSnapshotNode | null {
+  if (attrs.content === undefined || attrs.content === "") return null;
+  const normalizedAttrs = Object.fromEntries(
+    Object.entries(attrs).filter((entry): entry is [string, string] => typeof entry[1] === "string" && entry[1] !== ""),
+  );
+  return Object.keys(normalizedAttrs).length > 0 ? { tag: "meta", attrs: normalizedAttrs } : null;
+}
+
+function createLinkNode(attrs: Record<string, string | undefined>): AkanHeadSnapshotNode | null {
+  if (attrs.href === undefined || attrs.href === "") return null;
+  const normalizedAttrs = Object.fromEntries(
+    Object.entries(attrs).filter((entry): entry is [string, string] => typeof entry[1] === "string" && entry[1] !== ""),
+  );
+  return Object.keys(normalizedAttrs).length > 0 ? { tag: "link", attrs: normalizedAttrs } : null;
+}
+
+function createOpenGraphHeadSnapshotNodes(metadata: AkanMetadata): AkanHeadSnapshotNode[] {
   const openGraph = metadata.openGraph;
   if (!openGraph) return [];
-  const nodes: ReactNode[] = [];
-  if (openGraph.title) nodes.push(<meta key="og:title" property="og:title" content={openGraph.title} />);
-  if (openGraph.description)
-    nodes.push(<meta key="og:description" property="og:description" content={openGraph.description} />);
-  if (openGraph.type) nodes.push(<meta key="og:type" property="og:type" content={openGraph.type} />);
-  if (openGraph.url) nodes.push(<meta key="og:url" property="og:url" content={openGraph.url} />);
-  if (openGraph.siteName) nodes.push(<meta key="og:site_name" property="og:site_name" content={openGraph.siteName} />);
-  for (const [index, image] of normalizeStringArray(openGraph.images).entries()) {
-    nodes.push(<meta key={`og:image:${index}`} property="og:image" content={image} />);
+  const nodes: AkanHeadSnapshotNode[] = [];
+  const pushMeta = (property: string, content: string | undefined) => {
+    const node = createMetaNode({ property, content });
+    if (node) nodes.push(node);
+  };
+  pushMeta("og:title", openGraph.title);
+  pushMeta("og:description", openGraph.description);
+  pushMeta("og:type", openGraph.type);
+  pushMeta("og:url", openGraph.url);
+  pushMeta("og:site_name", openGraph.siteName);
+  for (const image of normalizeStringArray(openGraph.images)) {
+    const node = createMetaNode({ property: "og:image", content: image });
+    if (node) nodes.push(node);
   }
   return nodes;
 }
 
-function renderTwitter(metadata: AkanMetadata): ReactNode[] {
+function createTwitterHeadSnapshotNodes(metadata: AkanMetadata): AkanHeadSnapshotNode[] {
   const twitter = metadata.twitter;
   if (!twitter) return [];
-  const nodes: ReactNode[] = [];
-  if (twitter.card) nodes.push(<meta key="twitter:card" name="twitter:card" content={twitter.card} />);
-  if (twitter.title) nodes.push(<meta key="twitter:title" name="twitter:title" content={twitter.title} />);
-  if (twitter.description)
-    nodes.push(<meta key="twitter:description" name="twitter:description" content={twitter.description} />);
-  for (const [index, image] of normalizeStringArray(twitter.images).entries()) {
-    nodes.push(<meta key={`twitter:image:${index}`} name="twitter:image" content={image} />);
+  const nodes: AkanHeadSnapshotNode[] = [];
+  const pushMeta = (name: string, content: string | undefined) => {
+    const node = createMetaNode({ name, content });
+    if (node) nodes.push(node);
+  };
+  pushMeta("twitter:card", twitter.card);
+  pushMeta("twitter:title", twitter.title);
+  pushMeta("twitter:description", twitter.description);
+  for (const image of normalizeStringArray(twitter.images)) {
+    const node = createMetaNode({ name: "twitter:image", content: image });
+    if (node) nodes.push(node);
   }
   return nodes;
 }
 
-function renderAlternates(metadata: AkanMetadata): ReactNode[] {
+function createAlternateHeadSnapshotNodes(metadata: AkanMetadata): AkanHeadSnapshotNode[] {
   const alternates = metadata.alternates;
   if (!alternates) return [];
-  const nodes: ReactNode[] = [];
-  if (alternates.canonical) nodes.push(<link key="canonical" rel="canonical" href={alternates.canonical} />);
+  const nodes: AkanHeadSnapshotNode[] = [];
+  const canonical = createLinkNode({ rel: "canonical", href: alternates.canonical });
+  if (canonical) nodes.push(canonical);
   if (alternates.languages) {
     for (const [lang, href] of Object.entries(alternates.languages)) {
-      nodes.push(<link key={`metadata:alternate:${lang}`} rel="alternate" hrefLang={lang} href={href} />);
+      const alternate = createLinkNode({ rel: "alternate", hrefLang: lang, href });
+      if (alternate) nodes.push(alternate);
     }
   }
   return nodes;
@@ -65,19 +91,67 @@ export function isAkanMetadata(value: unknown): value is AkanMetadata {
   );
 }
 
-export function renderMetadata(metadata: AkanMetadata): Head {
+export function createAkanMetadataHeadSnapshot(metadata: AkanMetadata): AkanHeadSnapshotV1 {
+  const nodes: AkanHeadSnapshotNode[] = [];
+  if (metadata.title) nodes.push({ tag: "title", text: metadata.title });
+  const description = createMetaNode({ name: "description", content: metadata.description });
+  if (description) nodes.push(description);
+  const robots = createMetaNode({ name: "robots", content: metadata.robots });
+  if (robots) nodes.push(robots);
+  nodes.push(...createOpenGraphHeadSnapshotNodes(metadata));
+  nodes.push(...createTwitterHeadSnapshotNodes(metadata));
+  nodes.push(...createAlternateHeadSnapshotNodes(metadata));
+  return { version: AKAN_RSC_HEAD_SNAPSHOT_VERSION, nodes };
+}
+
+export function createAkanLocaleAlternateHeadSnapshot(languages: Record<string, string>): AkanHeadSnapshotV1 {
+  return {
+    version: AKAN_RSC_HEAD_SNAPSHOT_VERSION,
+    nodes: Object.entries(languages).map(([lang, href]) => ({
+      tag: "link",
+      attrs: { rel: "alternate", hrefLang: lang, href },
+    })),
+  };
+}
+
+export function mergeAkanHeadSnapshots(
+  ...snapshots: Array<AkanHeadSnapshotV1 | null | undefined>
+): AkanHeadSnapshotV1 | undefined {
+  const nodes = snapshots.flatMap((snapshot) => snapshot?.nodes ?? []);
+  return snapshots.some(Boolean) ? { version: AKAN_RSC_HEAD_SNAPSHOT_VERSION, nodes } : undefined;
+}
+
+export function renderAkanHeadSnapshot(snapshot: AkanHeadSnapshotV1, options: { markRouteOwned?: boolean } = {}): Head {
+  const markRouteOwned = options.markRouteOwned ?? true;
   return (
     <>
-      {metadata.title ? <title>{metadata.title}</title> : null}
-      {metadata.description ? <meta name="description" content={metadata.description} /> : null}
-      {metadata.robots ? <meta name="robots" content={metadata.robots} /> : null}
-      {renderOpenGraph(metadata)}
-      {renderTwitter(metadata)}
-      {renderAlternates(metadata)}
+      {snapshot.nodes.map((node, index) => {
+        const marker = markRouteOwned
+          ? {
+              "data-akan-head": "route",
+              "data-akan-head-key": `${node.tag}:${index}`,
+            }
+          : {};
+        if (node.tag === "title") {
+          return (
+            <title key={`${node.tag}:${index}`} {...marker}>
+              {node.text ?? ""}
+            </title>
+          );
+        }
+        if (node.tag === "meta") {
+          return <meta key={`${node.tag}:${index}`} {...node.attrs} {...marker} />;
+        }
+        return <link key={`${node.tag}:${index}`} {...node.attrs} {...marker} />;
+      })}
     </>
   );
 }
 
+export function renderMetadata(metadata: AkanMetadata): Head {
+  return renderAkanHeadSnapshot(createAkanMetadataHeadSnapshot(metadata));
+}
+
 export function hasExplicitLanguageAlternates(metadata: AkanMetadata | null | undefined): boolean {
   return Boolean(metadata?.alternates?.languages && Object.keys(metadata.alternates.languages).length > 0);
 }
@@ -94,14 +168,24 @@ export function isResolvedHead(value: unknown): value is ResolvedHead {
 }
 
 export function resolveMetadataHead(metadata: AkanMetadata): ResolvedHead {
+  const headSnapshot = createAkanMetadataHeadSnapshot(metadata);
   return {
-    node: renderMetadata(metadata),
+    node: renderAkanHeadSnapshot(headSnapshot),
     hasExplicitLanguageAlternates: hasExplicitLanguageAlternates(metadata),
+    headSnapshot,
   };
 }
 
-export function resolveHeadExport(value: Head | AkanMetadata | null | undefined): ResolvedHead {
-  return isAkanMetadata(value) ? resolveMetadataHead(value) : { node: value, hasExplicitLanguageAlternates: false };
+export function resolveHeadExport(
+  value: Head | AkanMetadata | null | undefined,
+  options: { includeHeadSnapshot?: boolean } = {},
+): ResolvedHead {
+  if (!isAkanMetadata(value)) return { node: value, hasExplicitLanguageAlternates: false };
+  if (options.includeHeadSnapshot !== false) return resolveMetadataHead(value);
+  return {
+    node: renderAkanHeadSnapshot(createAkanMetadataHeadSnapshot(value), { markRouteOwned: false }),
+    hasExplicitLanguageAlternates: hasExplicitLanguageAlternates(value),
+  };
 }
 
 export function resolveHeadResult(value: ResolveHeadResult): ResolvedHead {

package/server/resolver/database.resolver.ts

@@ -246,16 +246,16 @@ export class DatabaseResolver {
         return await timedQuery(() => this.__store.findIds(find, { sort, skip, limit, sample }));
       }
       async __find(query?: QueryOf<any>, queryOption?: FindQueryOption): Promise<any | null> {
-        const { find, sort, skip, sample } = getFindQuery(query, queryOption);
-        return await timedQuery(() => this.__store.findOne(find, { sort, skip, sample }));
+        const { find, sort, skip, sample, select } = getFindQuery(query, queryOption);
+        return await timedQuery(() => this.__store.findOne(find, { sort, skip, sample, select }));
       }
       async __findId(query?: QueryOf<any>, queryOption?: FindQueryOption): Promise<string | null> {
         const { find, sort, skip, sample } = getFindQuery(query, queryOption);
         return await timedQuery(() => this.__store.findId(find, { sort, skip, sample }));
       }
       async __pick(query?: QueryOf<any>, queryOption?: FindQueryOption): Promise<any> {
-        const { find, sort, skip, sample } = getFindQuery(query, queryOption);
-        return await this.__store.pickOne(find, { sort, skip, sample });
+        const { find, sort, skip, sample, select } = getFindQuery(query, queryOption);
+        return await this.__store.pickOne(find, { sort, skip, sample, select });
       }
       async __pickId(query?: QueryOf<any>, queryOption?: FindQueryOption): Promise<string> {
         const { find, sort, skip, sample } = getFindQuery(query, queryOption);

package/server/routeElementComposer.tsx

@@ -9,6 +9,9 @@ import type {
 } from "akanjs/client";
 import { Children, cloneElement, isValidElement, type ReactElement, type ReactNode, Suspense } from "react";
 import { resolveHeadResult } from "./metadata";
+import { type AkanRouteSegmentState, createAkanRouteSegments, createAkanSegmentOutletKey } from "./routeState";
+import { isAkanRscPartialCommitEnabled } from "./rscPartialCommit";
+import { AkanSegmentOutletReference } from "./rscSegmentOutletReference";
 
 export class RouteElementComposer {
   static compose({
@@ -20,20 +23,32 @@ export class RouteElementComposer {
     params: Record<string, string>;
     searchParams: Record<string, string | string[]>;
   }): ReactNode {
-    const renders = [...pathRoute.renderRootLayouts, ...pathRoute.renderLayouts, pathRoute.renderPage];
-    let element: ReactNode = null;
-    for (let i = renders.length - 1; i >= 0; i--) {
-      const routeRender = renders[i];
-      if (!routeRender) continue;
-      element = (
-        <Suspense fallback={RouteElementComposer.#composeLoadingFallback(renders.slice(i), params)}>
-          <RouteElementComposer.AsyncRender routeRender={routeRender} params={params} searchParams={searchParams}>
-            {element}
-          </RouteElementComposer.AsyncRender>
-        </Suspense>
-      );
-    }
-    return element;
+    return RouteElementComposer.composeRenders({
+      renders: RouteElementComposer.#getRenderStack(pathRoute),
+      segments: isAkanRscPartialCommitEnabled() ? createAkanRouteSegments(pathRoute) : undefined,
+      params,
+      searchParams,
+    });
+  }
+
+  static composeSuffix({
+    pathRoute,
+    params,
+    searchParams,
+    patchStartIndex,
+  }: {
+    pathRoute: PathRoute;
+    params: Record<string, string>;
+    searchParams: Record<string, string | string[]>;
+    patchStartIndex: number;
+  }): ReactNode | null {
+    const renders = RouteElementComposer.#getRenderStack(pathRoute);
+    if (!Number.isInteger(patchStartIndex) || patchStartIndex < 0 || patchStartIndex >= renders.length) return null;
+    return RouteElementComposer.composeRenders({
+      renders: renders.slice(patchStartIndex),
+      params,
+      searchParams,
+    });
   }
 
   static async resolveHead({
@@ -109,10 +124,12 @@ export class RouteElementComposer {
 
   static composeRenders({
     renders,
+    segments,
     params,
     searchParams,
   }: {
     renders: RouteRender[];
+    segments?: AkanRouteSegmentState[];
     params: Record<string, string>;
     searchParams: Record<string, string | string[]>;
   }): ReactNode {
@@ -127,6 +144,17 @@ export class RouteElementComposer {
           </RouteElementComposer.AsyncRender>
         </Suspense>
       );
+      const segment = segments?.[i];
+      if (segment?.kind === "page") {
+        const routeSegments = segments;
+        if (!routeSegments) continue;
+        const outletKey =
+          createAkanSegmentOutletKey(
+            routeSegments.slice(0, i + 1).map((item) => item.key),
+            i,
+          ) ?? segment.key;
+        element = <AkanSegmentOutletReference segmentKey={outletKey}>{element}</AkanSegmentOutletReference>;
+      }
     }
     return element;
   }
@@ -199,6 +227,10 @@ export class RouteElementComposer {
     return RouteElementComposer.#normalizeReactNode(children);
   }
 
+  static #getRenderStack(pathRoute: PathRoute): RouteRender[] {
+    return [...pathRoute.renderRootLayouts, ...pathRoute.renderLayouts, pathRoute.renderPage];
+  }
+
   static #composeLoadingFallback(renders: RouteRender[], params: Record<string, string>): ReactNode {
     let element: ReactNode = null;
     for (let i = renders.length - 1; i >= 0; i--) {