akanjs 0.0.1 → 2.0.0-beta.0

package/server/ssrFromRscRenderer.tsx

@@ -0,0 +1,285 @@
+import { Readable } from "node:stream";
+import { type AkanTheme, pushRequestFallback, requestStorage } from "akanjs/fetch";
+import { type ReactNode, use } from "react";
+import { renderToReadableStream } from "react-dom/server.browser";
+import { createFromNodeStream } from "react-server-dom-webpack/client.node";
+import type { SsrChunkRegistryStats, SsrFromRscInput } from "./ssrTypes";
+
+export class SsrFromRscRenderer {
+  static readonly #chunkRegistryStats: SsrChunkRegistryStats = {
+    ssrChunkRegistrySize: 0,
+    ssrChunkLoadCount: 0,
+    ssrChunkCacheHitCount: 0,
+  };
+
+  static readonly #clientBootstrap = `(function(){
+  var registry = new Map();
+  function load(id) {
+    var cached = registry.get(id);
+    if (cached) return cached;
+    var p = import(id);
+    registry.set(id, p);
+    return p;
+  }
+  self.__webpack_chunk_load__ = load;
+  self.__webpack_require__ = function(id) {
+    var p = registry.get(id);
+    if (!p) throw new Error("[rscClient] module not loaded: " + id);
+    return p;
+  };
+  self.__webpack_require__.u = function(chunkId) { return chunkId; };
+  self.__webpack_get_script_filename__ = function(chunkId) { return chunkId; };
+  self.__RSC_CHUNKS__ = [];
+  self.__RSC_CLOSED__ = false;
+  self.__RSC_PUSH__ = function(b64){ self.__RSC_CHUNKS__.push(b64); };
+  self.__RSC_CLOSE__ = function(){ self.__RSC_CLOSED__ = true; };
+})();`;
+
+  static readonly #themeInitScript = `<script>(function(){
+  try {
+    var m = document.cookie.match(/(?:^|;\\s*)theme=([^;]+)/);
+    if (m) return;
+    var dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+  } catch (e) {}
+})();</script>`;
+
+  static {
+    SsrFromRscRenderer.#installWebpackShims();
+  }
+
+  static getChunkRegistryStats(): SsrChunkRegistryStats {
+    return { ...SsrFromRscRenderer.#chunkRegistryStats };
+  }
+
+  async render(input: SsrFromRscInput): Promise<ReadableStream<Uint8Array>> {
+
+    const [rscForSsr, rscForClient] = input.rscStream.tee();
+
+    const ssrNodeStream = Readable.fromWeb(rscForSsr as never);
+    const thenable = createFromNodeStream(ssrNodeStream, input.ssrManifest) as Promise<ReactNode>;
+
+    function Root(): ReactNode {
+      return use(thenable);
+    }
+
+    const bootstrap = input.extraBootstrapInline
+      ? `${SsrFromRscRenderer.#clientBootstrap}\n${input.extraBootstrapInline}`
+      : SsrFromRscRenderer.#clientBootstrap;
+
+    const renderHtml = () =>
+      renderToReadableStream(<Root />, {
+        bootstrapModules: input.bootstrapModules,
+        bootstrapScriptContent: bootstrap,
+      });
+    const htmlStream =
+      input.request && requestStorage ? await requestStorage.run(input.request, renderHtml) : await renderHtml();
+
+    const withHeadScripts = SsrFromRscRenderer.#injectHeadScriptsIntoHead(htmlStream, {
+      importmap: input.importmap,
+      theme: input.theme,
+      injectThemeInitScript: input.injectThemeInitScript,
+    });
+
+    return SsrFromRscRenderer.#appendRscScriptsAfterHtml(
+      withHeadScripts,
+      SsrFromRscRenderer.#sanitizeFlightForClient(rscForClient),
+      input.request,
+    );
+  }
+
+  static #installWebpackShims(): void {
+    const g = globalThis as unknown as {
+      __rsc_ssr_shims_installed__?: boolean;
+      __webpack_chunk_load__?: (id: string) => Promise<void>;
+      __webpack_require__?: (id: string) => Record<string, unknown>;
+    };
+    if (g.__rsc_ssr_shims_installed__) return;
+    g.__rsc_ssr_shims_installed__ = true;
+
+    const registry = new Map<string, Record<string, unknown>>();
+    g.__webpack_chunk_load__ = async (chunkId: string) => {
+      if (registry.has(chunkId)) {
+        SsrFromRscRenderer.#chunkRegistryStats.ssrChunkCacheHitCount += 1;
+        return;
+      }
+      const mod = (await import(chunkId)) as Record<string, unknown>;
+      registry.set(chunkId, mod);
+      const canonical = chunkId.replace(/\?v=\d+$/, "");
+      registry.set(canonical, mod);
+      SsrFromRscRenderer.#chunkRegistryStats.ssrChunkLoadCount += 1;
+      SsrFromRscRenderer.#chunkRegistryStats.ssrChunkRegistrySize = registry.size;
+    };
+    g.__webpack_require__ = (id: string) => {
+      const mod = registry.get(id);
+      if (!mod) {
+        throw new Error(`[ssrFromRsc] module not loaded yet: ${id}`);
+      }
+      return mod;
+    };
+  }
+
+  /**
+   * Splice bootstrap-only head scripts immediately after the `<head>` opening
+   * tag in the outgoing HTML stream.
+   *
+   * We do this as a stream transform (rather than as a React child inside
+   * `<head>`) because React 19's Float pipeline hoists
+   * `<link rel="modulepreload">` for every entry in `bootstrapModules` to the
+   * top of `<head>`. An importmap rendered via JSX ends up *after* those
+   * hoisted preloads, which — per the HTML spec — is too late: once the
+   * browser starts a module script fetch for a preload, the document's
+   * "allow-import-maps" bit flips to false and no further importmap can be
+   * acquired. By writing the importmap before any of React's own `<head>`
+   * output reaches the wire, we guarantee the browser sees it first.
+   *
+   * The transform operates on UTF-8 bytes until it has spliced the tag, then
+   * becomes a pure passthrough to avoid any further per-chunk overhead.
+   */
+  static #injectHeadScriptsIntoHead(
+    stream: ReadableStream<Uint8Array>,
+    options: { importmap?: Record<string, string>; theme?: AkanTheme; injectThemeInitScript?: boolean },
+  ): ReadableStream<Uint8Array> {
+    const encoder = new TextEncoder();
+    const decoder = new TextDecoder();
+    const { importmap, theme, injectThemeInitScript } = options;
+    const htmlTheme = theme && theme !== "css" && theme !== "system" ? theme : undefined;
+    const importmapTag =
+      importmap && Object.keys(importmap).length > 0
+        ? `<script type="importmap">${JSON.stringify({ imports: importmap })}</script>`
+        : "";
+    const shouldInjectThemeScript = theme === "system" || (theme === undefined && injectThemeInitScript);
+    const tags = `${shouldInjectThemeScript ? SsrFromRscRenderer.#themeInitScript : ""}${importmapTag}`;
+    if (!tags && !htmlTheme) return stream;
+    const htmlOpenRe = /<html(\s[^>]*)?>/i;
+    const headOpenRe = /<head(\s[^>]*)?>/i;
+    let buffered = "";
+    let injected = false;
+
+    const withHtmlTheme = (html: string): string => {
+      if (!htmlTheme) return html;
+      return html.replace(htmlOpenRe, (tag) => {
+        if (/\sdata-theme\s*=/.test(tag)) return tag;
+        return tag.replace(/>$/, ` data-theme="${SsrFromRscRenderer.#escapeHtmlAttr(htmlTheme)}">`);
+      });
+    };
+
+    return stream.pipeThrough(
+      new TransformStream<Uint8Array, Uint8Array>({
+        transform(chunk, controller) {
+          if (injected) {
+            controller.enqueue(chunk);
+            return;
+          }
+          buffered += decoder.decode(chunk, { stream: true });
+          const m = headOpenRe.exec(buffered);
+          if (!m) return;
+          const end = m.index + m[0].length;
+          const before = withHtmlTheme(buffered.slice(0, end));
+          const after = buffered.slice(end);
+          controller.enqueue(encoder.encode(before + tags + after));
+          buffered = "";
+          injected = true;
+        },
+        flush(controller) {
+          if (injected) {
+            const tail = decoder.decode();
+            if (tail) controller.enqueue(encoder.encode(tail));
+            return;
+          }
+
+          const tail = decoder.decode();
+          const rest = withHtmlTheme(buffered + tail);
+          if (rest) controller.enqueue(encoder.encode(rest));
+        },
+      }),
+    );
+  }
+
+  static #escapeHtmlAttr(value: string): string {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+
+  static #sanitizeFlightForClient(stream: ReadableStream<Uint8Array>): ReadableStream<Uint8Array> {
+    const decoder = new TextDecoder();
+    const encoder = new TextEncoder();
+
+    const hlStylesheetRe = /(:HL\["[^"\\]*(?:\\.[^"\\]*)*",)"stylesheet"(\])/g;
+
+    return stream.pipeThrough(
+      new TransformStream<Uint8Array, Uint8Array>({
+        transform(chunk, controller) {
+          const text = decoder.decode(chunk, { stream: true });
+          if (!text.includes(`"stylesheet"`)) {
+            controller.enqueue(chunk);
+            return;
+          }
+          controller.enqueue(encoder.encode(text.replace(hlStylesheetRe, `$1"style"$2`)));
+        },
+        flush(controller) {
+          const tail = decoder.decode();
+          if (tail) controller.enqueue(encoder.encode(tail));
+        },
+      }),
+    );
+  }
+
+  static #appendRscScriptsAfterHtml(
+    htmlStream: ReadableStream<Uint8Array>,
+    rscClientStream: ReadableStream<Uint8Array>,
+    request?: Request,
+  ): ReadableStream<Uint8Array> {
+    const encoder = new TextEncoder();
+
+    return new ReadableStream<Uint8Array>({
+      start(controller) {
+        let errored = false;
+        const fail = (err: unknown) => {
+          if (errored) return;
+          errored = true;
+          controller.error(err);
+        };
+
+        const pump = async () => {
+          const reader = htmlStream.getReader();
+          try {
+            while (true) {
+              const { value, done } = await reader.read();
+              if (done) break;
+              if (errored) return;
+              controller.enqueue(value);
+            }
+          } finally {
+            reader.releaseLock();
+          }
+
+          const rscReader = rscClientStream.getReader();
+          try {
+            while (true) {
+              const { value, done } = await rscReader.read();
+              if (done) break;
+              if (errored) return;
+              const b64 = Buffer.from(value).toString("base64");
+              controller.enqueue(encoder.encode(`<script>self.__RSC_PUSH__(${JSON.stringify(b64)})</script>`));
+            }
+          } finally {
+            rscReader.releaseLock();
+          }
+          if (!errored) {
+            controller.enqueue(encoder.encode(`<script>self.__RSC_CLOSE__()</script>`));
+            controller.close();
+          }
+        };
+
+        const runPump = () => {
+          const cleanup = request ? pushRequestFallback(request) : undefined;
+          return pump()
+            .catch(fail)
+            .finally(() => cleanup?.());
+        };
+        if (request && requestStorage) void requestStorage.run(request, runPump);
+        else void runPump();
+      },
+    });
+  }
+}

package/server/ssrTypes.ts

@@ -0,0 +1,48 @@
+import type { AkanTheme } from "akanjs/fetch";
+
+export interface SsrManifestEntry {
+  id: string;
+  chunks: string[];
+  name: string;
+  async?: boolean;
+}
+
+export interface SsrManifest {
+  moduleLoading: { prefix: string; crossOrigin?: string } | null;
+  moduleMap: Record<string, Record<string, SsrManifestEntry>>;
+}
+
+export interface SsrChunkRegistryStats {
+  ssrChunkRegistrySize: number;
+  ssrChunkLoadCount: number;
+  ssrChunkCacheHitCount: number;
+}
+
+export interface SsrFromRscInput {
+  request?: Request;
+  rscStream: ReadableStream<Uint8Array>;
+  ssrManifest: SsrManifest;
+  bootstrapModules?: string[];
+  /** Extra inline JS appended to the framework's bootstrap script. The HMR
+   * dev client lives here so the browser wires up its reload channel before
+   * any application module evaluates. */
+  extraBootstrapInline?: string;
+  /**
+   * Bare specifier -> served URL mapping for the `<script type="importmap">`
+   * the HTML stream should prepend to `<head>`. Used so per-route client
+   * chunks (which externalize `react`, `react-dom/client`, ...) resolve
+   * those specifiers to the base build's vendor entries at load time,
+   * guaranteeing one React instance across rscClient and every route
+   * chunk.
+   *
+   * Injection happens via a stream transform, not React children, because
+   * React Fizz hoists `<link rel="modulepreload">` (generated from
+   * `bootstrapModules`) to the top of `<head>`, which would otherwise sit
+   * before any importmap rendered via JSX. The spec is strict: import maps
+   * must be acquired before any module script fetch starts, including
+   * modulepreload.
+   */
+  importmap?: Record<string, string>;
+  theme?: AkanTheme;
+  injectThemeInitScript?: boolean;
+}

package/server/types/react-server-dom-webpack.d.ts

@@ -0,0 +1,91 @@
+
+
+declare module "react-server-dom-webpack/server.node" {
+  export interface ClientReferenceManifestEntry {
+    id: string;
+    chunks: string[];
+    name: string;
+    async?: boolean;
+  }
+
+  export type ClientManifest = Record<string, ClientReferenceManifestEntry>;
+
+  export function renderToReadableStream(
+    model: unknown,
+    clientManifest?: ClientManifest,
+    options?: {
+      environmentName?: string;
+      filterStackFrame?: (url: string, functionName: string) => boolean;
+      onError?: (error: unknown) => string | undefined;
+      onPostpone?: (reason: string) => void;
+      identifierPrefix?: string;
+      temporaryReferences?: unknown;
+      signal?: AbortSignal;
+    },
+  ): Promise<ReadableStream<Uint8Array>>;
+
+  export function registerClientReference<T>(proxyImplementation: T, id: string, exportName: string): T;
+
+  export function registerServerReference<T>(reference: T, id: string, exportName: string | null): T;
+
+  export function decodeReply<T = unknown>(
+    body: string | FormData,
+    webpackMap?: unknown,
+    options?: { temporaryReferences?: unknown },
+  ): Promise<T>;
+}
+
+declare module "react-server-dom-webpack/client.node" {
+  import type { ReactNode } from "react";
+
+  export interface SSRManifestEntry {
+    id: string;
+    chunks: string[];
+    name: string;
+    async?: boolean;
+  }
+
+  export interface SSRManifest {
+    moduleLoading: { prefix: string; crossOrigin?: string } | null;
+    moduleMap: Record<string, Record<string, SSRManifestEntry>>;
+  }
+
+  export function createFromNodeStream<T = ReactNode>(
+    stream: NodeJS.ReadableStream,
+    ssrManifest: SSRManifest,
+    options?: {
+      nonce?: string;
+      encodeFormAction?: unknown;
+      temporaryReferences?: unknown;
+      findSourceMapURL?: (fileName: string) => string | null;
+      replayConsoleLogs?: boolean;
+      environmentName?: string;
+    },
+  ): PromiseLike<T>;
+}
+
+declare module "react-server-dom-webpack/client.browser" {
+  import type { ReactNode } from "react";
+
+  interface ClientOptions {
+    serverConsumerManifest?: unknown;
+    nonce?: string;
+    encodeFormAction?: unknown;
+    temporaryReferences?: unknown;
+    findSourceMapURL?: (fileName: string) => string | null;
+    replayConsoleLogs?: boolean;
+    environmentName?: string;
+  }
+
+  export function createFromReadableStream<T = ReactNode>(
+    stream: ReadableStream<Uint8Array>,
+    options?: ClientOptions,
+  ): PromiseLike<T>;
+
+  export function createFromFetch<T = ReactNode>(response: Promise<Response>, options?: ClientOptions): PromiseLike<T>;
+
+  export function encodeReply(
+    value: unknown,
+    options?: { temporaryReferences?: unknown; signal?: AbortSignal },
+  ): Promise<string | FormData>;
+}

package/server/types.tsx

@@ -0,0 +1,109 @@
+import type { PromiseOrObject } from "akanjs/base";
+import type { AkanI18nConfig } from "akanjs/common";
+
+export type WebsocketRoute = (
+  ws: Bun.ServerWebSocket<unknown>,
+  data: unknown[],
+  event?: "message" | "subscribe" | "unsubscribe",
+) => PromiseOrObject<unknown>;
+
+export type WebsocketRoutes = Record<string, WebsocketRoute>;
+
+export type HttpRoutes = Bun.Serve.Options<unknown>["routes"];
+
+export interface SignalRouteOptions {
+  globalPrefix?: false;
+}
+
+export type SignalRoutes = {
+  routes: HttpRoutes;
+  wsRoutes: WebsocketRoutes;
+  routeOptions?: Record<string, SignalRouteOptions>;
+};
+
+export interface LocalFile {
+  filename: string;
+  mimetype: string;
+  encoding: string;
+  localPath: string;
+}
+
+export type AkanImageFormat = "image/avif" | "image/webp";
+
+export interface AkanImagePattern {
+  protocol?: "http" | "https";
+  hostname?: string;
+  port?: string;
+  pathname?: string;
+  search?: string;
+}
+
+export interface AkanImageConfig {
+  deviceSizes: number[];
+  imageSizes: number[];
+  formats: AkanImageFormat[];
+  qualities: number[];
+  minimumCacheTTL: number;
+  remotePatterns: AkanImagePattern[];
+  localPatterns: Pick<AkanImagePattern, "pathname" | "search">[];
+  dangerouslyAllowSVG: boolean;
+  maximumRedirects: number;
+  fetchTimeoutMs: number;
+  maxRemoteBytes: number;
+}
+
+export const defaultAkanImageConfig: AkanImageConfig = {
+  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  imageSizes: [32, 48, 64, 96, 128, 256, 384],
+  formats: ["image/webp"],
+  qualities: [75],
+  minimumCacheTTL: 14400,
+  remotePatterns: [],
+  localPatterns: [{ pathname: "/**" }],
+  dangerouslyAllowSVG: false,
+  maximumRedirects: 3,
+  fetchTimeoutMs: 7000,
+  maxRemoteBytes: 25 * 1024 * 1024,
+};
+
+export function mergeAkanImageConfig(config: Partial<AkanImageConfig> = {}): AkanImageConfig {
+  return {
+    ...defaultAkanImageConfig,
+    ...config,
+    deviceSizes: config.deviceSizes ?? defaultAkanImageConfig.deviceSizes,
+    imageSizes: config.imageSizes ?? defaultAkanImageConfig.imageSizes,
+    formats: config.formats ?? defaultAkanImageConfig.formats,
+    qualities: config.qualities ?? defaultAkanImageConfig.qualities,
+    remotePatterns: config.remotePatterns ?? defaultAkanImageConfig.remotePatterns,
+    localPatterns: config.localPatterns ?? defaultAkanImageConfig.localPatterns,
+  };
+}
+
+export function getAkanImageWidths(config: Pick<AkanImageConfig, "deviceSizes" | "imageSizes">) {
+  return [...new Set([...config.deviceSizes, ...config.imageSizes])].sort((a, b) => a - b);
+}
+
+export type BaseBuildArtifact = {
+  rscClientUrl: string;
+  vendorMap: Record<string, string>;
+  pagesBundlePath: string;
+  pagesBundleBuildId: number;
+  cssAssets: Record<string, CssAsset>;
+  domains: string[];
+  subRoutes: { [key: string]: string[] };
+  basePaths: string[];
+  branches: string[];
+  i18n: AkanI18nConfig;
+  imageConfig: AkanImageConfig;
+};
+
+export interface CssAsset {
+  cssUrl: string;
+  cssRelPath: string;
+}
+
+export interface RenderState {
+  buildId: number;
+  cssAssets: Record<string, CssAsset>;
+  cssBytesByUrl: Record<string, Uint8Array>;
+}

package/server/vendor/akanjs-base.ts

@@ -0,0 +1 @@
+export * from "akanjs/base";

package/server/vendor/akanjs-common.ts

@@ -0,0 +1 @@
+export * from "akanjs/common";

package/server/vendor/akanjs-constant.ts

@@ -0,0 +1 @@
+export * from "akanjs/constant";

package/server/vendor/akanjs-store.ts

@@ -0,0 +1 @@
+export * from "akanjs/store";

package/server/vendor/react-dom-client.ts

@@ -0,0 +1,5 @@
+
+import * as m from "react-dom/client";
+
+export default m;
+export const { createRoot, hydrateRoot, version } = m;

package/server/vendor/react-dom.ts

@@ -0,0 +1,21 @@
+
+
+import * as m from "react-dom";
+
+export default m;
+export const {
+  __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  createPortal,
+  flushSync,
+  preconnect,
+  prefetchDNS,
+  preinit,
+  preinitModule,
+  preload,
+  preloadModule,
+  requestFormReset,
+  unstable_batchedUpdates,
+  useFormState,
+  useFormStatus,
+  version,
+} = m;

package/server/vendor/react-jsx-dev-runtime.ts

@@ -0,0 +1,5 @@
+
+import * as m from "react/jsx-dev-runtime";
+
+export default m;
+export const { Fragment, jsxDEV } = m;

package/server/vendor/react-jsx-runtime.ts

@@ -0,0 +1,5 @@
+
+import * as m from "react/jsx-runtime";
+
+export default m;
+export const { Fragment, jsx, jsxs } = m;

package/server/vendor/react-refresh-runtime.ts

@@ -0,0 +1,6 @@
+
+
+import * as m from "react-refresh/runtime";
+
+export default m;
+export const { injectIntoGlobalHook, performReactRefresh, register, createSignatureFunctionForTransform } = m;

package/server/vendor/react-server-dom-webpack-client-browser.ts

@@ -0,0 +1,12 @@
+
+import * as m from "react-server-dom-webpack/client.browser";
+
+export default m;
+export const {
+  createFromFetch,
+  createFromReadableStream,
+  createServerReference,
+  createTemporaryReferenceSet,
+  encodeReply,
+  registerServerReference,
+} = m;

package/server/vendor/react.ts

@@ -0,0 +1,51 @@
+
+
+import * as m from "react";
+
+export default m;
+export const {
+  Activity,
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  act,
+  cache,
+  cacheSignal,
+  captureOwnerStack,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  startTransition,
+  unstable_useCacheRefresh,
+  use,
+  useActionState,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  version,
+} = m;

package/server/vendor/scheduler.ts

@@ -0,0 +1,23 @@
+
+
+import * as m from "scheduler";
+
+export default m;
+export const {
+  unstable_IdlePriority,
+  unstable_ImmediatePriority,
+  unstable_LowPriority,
+  unstable_NormalPriority,
+  unstable_Profiling,
+  unstable_UserBlockingPriority,
+  unstable_cancelCallback,
+  unstable_forceFrameRate,
+  unstable_getCurrentPriorityLevel,
+  unstable_next,
+  unstable_now,
+  unstable_requestPaint,
+  unstable_runWithPriority,
+  unstable_scheduleCallback,
+  unstable_shouldYield,
+  unstable_wrapCallback,
+} = m;