@tschk/moonshine-next 0.3.1

package/README.md

@@ -0,0 +1,31 @@
+# `@tschk/moonshine-next`
+
+Next.js adapter for Moonshine. Re-exports real Next.js libraries on subpaths
+plus moonshine signal bridges.
+
+```ts
+import { createSignal, useSignal } from "@tschk/moonshine-next";
+import { useRouter, usePathnameSignal } from "@tschk/moonshine-next/navigation";
+import Link from "@tschk/moonshine-next/link";
+import Image from "@tschk/moonshine-next/image";
+import { headers } from "@tschk/moonshine-next/headers";
+import { useFragmentShader } from "@tschk/moonshine-next/shaders";
+import { moonshineRoute, moonshineJson } from "@tschk/moonshine-next/server";
+```
+
+| Subpath          | Host library                                       |
+| ---------------- | -------------------------------------------------- |
+| `.` / `./client` | moonshine signals + resources (`"use client"`)     |
+| `./navigation`   | `next/navigation` + pathname/search signals        |
+| `./link`         | `next/link`                                        |
+| `./image`        | `next/image`                                       |
+| `./headers`      | `next/headers` (server only)                       |
+| `./dynamic`      | `next/dynamic`                                     |
+| `./shaders`      | moonshine WebGL helpers                            |
+| `./server`       | `moonshineRoute` / `Json` / `Html` + pages helpers |
+
+Peer: `next` >= 15, `react` >= 18, `react-dom` >= 18.
+
+Does **not** export `MoonshineRouter` — use the Next.js App Router.
+
+See [Moonshine README](../../README.md).

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@tschk/moonshine-next",
+  "version": "0.3.1",
+  "description": "Next.js adapter — moonshine signals + next/navigation|link|image|headers|shaders",
+  "license": "ISC",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./client": "./src/client.ts",
+    "./server": "./src/server.ts",
+    "./navigation": "./src/navigation.ts",
+    "./link": "./src/link.ts",
+    "./image": "./src/image.ts",
+    "./headers": "./src/headers.ts",
+    "./dynamic": "./src/dynamic.ts",
+    "./shaders": "./src/shaders.ts"
+  },
+  "dependencies": {
+    "@tschk/moonshine": "^0.3.1",
+    "@tschk/moonshine-shaders": "^0.3.1"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "moonshine",
+    "next",
+    "adapter"
+  ],
+  "scripts": {
+    "format": "bunx prettier --check .",
+    "lint": "bunx oxlint .",
+    "typecheck": "exit 0",
+    "test": "bun test"
+  }
+}

package/src/client.ts

@@ -0,0 +1,13 @@
+"use client";
+
+/**
+ * Next Client Component surface: moonshine signals + resources.
+ * Stack libraries live on subpaths: `/navigation`, `/link`, `/image`, `/shaders`.
+ */
+export * from "@tschk/moonshine/host-react";
+
+export {
+  createIslandSignal,
+  createResource,
+  useResource,
+} from "@tschk/moonshine/host-react";

package/src/dynamic.ts

@@ -0,0 +1,6 @@
+"use client";
+
+/**
+ * next/dynamic re-export for lazy client islands.
+ */
+export { default } from "next/dynamic";

package/src/headers.ts

@@ -0,0 +1,8 @@
+/**
+ * next/headers re-export (Server Components / Route Handlers only).
+ *
+ * ```ts
+ * import { headers, cookies } from "@tschk/moonshine-next/headers";
+ * ```
+ */
+export { cookies, draftMode, headers } from "next/headers";

package/src/image.ts

@@ -0,0 +1,11 @@
+"use client";
+
+/**
+ * next/image re-export for moonshine apps.
+ *
+ * ```ts
+ * import Image from "@tschk/moonshine-next/image";
+ * ```
+ */
+export { default } from "next/image";
+export type { ImageProps } from "next/image";

package/src/index.ts

@@ -0,0 +1,11 @@
+"use client";
+
+/**
+ * @tschk/moonshine-next
+ *
+ * Default export = **client** surface. For Route Handlers:
+ *   import { moonshineRoute, moonshineJson } from "@tschk/moonshine-next/server"
+ *
+ * Does not export MoonshineRouter — use the App Router.
+ */
+export * from "./client";

package/src/link.ts

@@ -0,0 +1,11 @@
+"use client";
+
+/**
+ * next/link re-export for moonshine apps.
+ *
+ * ```ts
+ * import Link from "@tschk/moonshine-next/link";
+ * ```
+ */
+export { default } from "next/link";
+export type { LinkProps } from "next/link";

package/src/navigation.ts

@@ -0,0 +1,76 @@
+"use client";
+
+/**
+ * next/navigation + moonshine signal bridges.
+ *
+ * ```ts
+ * import { usePathname, usePathnameSignal, useRouter } from "@tschk/moonshine-next/navigation";
+ * ```
+ */
+import { useEffect, useMemo, useRef } from "react";
+import {
+  useParams as useNextParams,
+  usePathname as useNextPathname,
+  useRouter as useNextRouter,
+  useSearchParams as useNextSearchParams,
+  notFound,
+  permanentRedirect,
+  redirect,
+  useSelectedLayoutSegment,
+  useSelectedLayoutSegments,
+} from "next/navigation";
+import { createSignal, useSignal, type Signal } from "@tschk/moonshine/react";
+
+export {
+  useNextRouter as useRouter,
+  useNextPathname as usePathname,
+  useNextSearchParams as useSearchParams,
+  useNextParams as useParams,
+  redirect,
+  permanentRedirect,
+  notFound,
+  useSelectedLayoutSegment,
+  useSelectedLayoutSegments,
+};
+
+/** Pathname as a live moonshine signal (updates on App Router navigation). */
+export function usePathnameSignal(): Signal<string> {
+  const pathname = useNextPathname();
+  const signal = useMemo(() => createSignal(pathname), []);
+  const ref = useRef(signal);
+  ref.current = signal;
+  useEffect(() => {
+    ref.current.set(pathname);
+  }, [pathname]);
+  return signal;
+}
+
+/** Search string `?a=1` as signal. */
+export function useSearchSignal(): Signal<string> {
+  const sp = useNextSearchParams();
+  const value = sp?.toString() ? `?${sp.toString()}` : "";
+  const signal = useMemo(() => createSignal(value), []);
+  useEffect(() => {
+    signal.set(value);
+  }, [value, signal]);
+  return signal;
+}
+
+/** Read a single search param as signal. */
+export function useSearchParamSignal(
+  name: string,
+  fallback = "",
+): Signal<string> {
+  const sp = useNextSearchParams();
+  const value = sp?.get(name) ?? fallback;
+  const signal = useMemo(() => createSignal(value), []);
+  useEffect(() => {
+    signal.set(value);
+  }, [value, signal]);
+  return signal;
+}
+
+/** Convenience: useSignal(usePathnameSignal()). */
+export function useReactivePathname(): string {
+  return useSignal(usePathnameSignal());
+}

package/src/server.ts

@@ -0,0 +1,60 @@
+/**
+ * Next.js server surface — Route Handlers / Server Actions helpers.
+ * No client hooks.
+ */
+export {
+  createMoonshineServer,
+  definePage,
+  handleMoonshineRequest,
+  resolvePage,
+  resolveStaticPath,
+  toMoonshineRequest,
+  tryServeStatic,
+} from "@tschk/moonshine/server";
+export type {
+  MoonshinePageModule,
+  MoonshineRequest,
+  MoonshineServer,
+  MoonshineServerOptions,
+} from "@tschk/moonshine/server";
+
+/** JSON Response helper for Route Handlers. */
+export function moonshineJson(
+  data: unknown,
+  init: ResponseInit = {},
+): Response {
+  const headers = new Headers(init.headers);
+  if (!headers.has("content-type")) {
+    headers.set("content-type", "application/json; charset=utf-8");
+  }
+  return new Response(JSON.stringify(data), { ...init, headers });
+}
+
+/** HTML Response helper. */
+export function moonshineHtml(html: string, init: ResponseInit = {}): Response {
+  const headers = new Headers(init.headers);
+  if (!headers.has("content-type")) {
+    headers.set("content-type", "text/html; charset=utf-8");
+  }
+  return new Response(html, { ...init, headers });
+}
+
+/**
+ * Wrap an async handler for `app/api/.../route.ts`.
+ *
+ * ```ts
+ * export const GET = moonshineRoute(async (req) => moonshineJson({ ok: true }));
+ * ```
+ */
+export function moonshineRoute(
+  handler: (request: Request) => Response | Promise<Response>,
+): (request: Request) => Promise<Response> {
+  return async (request) => {
+    try {
+      return await handler(request);
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      return moonshineJson({ error: message }, { status: 500 });
+    }
+  };
+}

package/src/shaders.ts

@@ -0,0 +1,18 @@
+"use client";
+
+/**
+ * WebGL fragment helpers (moonshine shaders) under the Next adapter path.
+ *
+ * ```ts
+ * import { useFragmentShader } from "@tschk/moonshine-next/shaders";
+ * ```
+ */
+export {
+  createFullscreenFragment,
+  useFragmentShader,
+  wrapFragmentSource,
+} from "@tschk/moonshine-shaders";
+export type {
+  FragmentShaderHandle,
+  UseFragmentShaderOptions,
+} from "@tschk/moonshine-shaders";

package/src/shims.d.ts

@@ -0,0 +1,86 @@
+/** Ambient types so adapter builds without installing Next in every workspace. */
+declare module "next/navigation" {
+  export function useRouter(): {
+    push(href: string): void;
+    replace(href: string): void;
+    back(): void;
+    forward(): void;
+    refresh(): void;
+    prefetch(href: string): void;
+  };
+  export function usePathname(): string;
+  export function useSearchParams(): URLSearchParams;
+  export function useParams<
+    T extends Record<string, string | string[]> = Record<string, string>,
+  >(): T;
+  export function redirect(url: string): never;
+  export function notFound(): never;
+  export function permanentRedirect(url: string): never;
+  export function useSelectedLayoutSegment(): string | null;
+  export function useSelectedLayoutSegments(): string[];
+}
+
+declare module "next/link" {
+  import type {
+    ComponentType,
+    ReactNode,
+    CSSProperties,
+    MouseEventHandler,
+  } from "react";
+  export type LinkProps = {
+    href: string;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    replace?: boolean;
+    scroll?: boolean;
+    prefetch?: boolean;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    [key: string]: unknown;
+  };
+  const Link: ComponentType<LinkProps>;
+  export default Link;
+}
+
+declare module "next/image" {
+  import type { ComponentType, CSSProperties } from "react";
+  export type ImageProps = {
+    src: string | { src: string; height: number; width: number };
+    alt: string;
+    width?: number;
+    height?: number;
+    fill?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    priority?: boolean;
+    quality?: number;
+    sizes?: string;
+    [key: string]: unknown;
+  };
+  const Image: ComponentType<ImageProps>;
+  export default Image;
+}
+
+declare module "next/headers" {
+  export function headers(): Headers;
+  export function cookies(): {
+    get(name: string): { name: string; value: string } | undefined;
+    getAll(): Array<{ name: string; value: string }>;
+    has(name: string): boolean;
+    set(name: string, value: string): void;
+    delete(name: string): void;
+  };
+  export function draftMode(): {
+    isEnabled: boolean;
+    enable(): void;
+    disable(): void;
+  };
+}
+
+declare module "next/dynamic" {
+  import type { ComponentType } from "react";
+  export default function dynamic<P = object>(
+    loader: () => Promise<{ default: ComponentType<P> } | ComponentType<P>>,
+    options?: { ssr?: boolean; loading?: ComponentType },
+  ): ComponentType<P>;
+}