@reckona/mreact-dom 0.0.65 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-dom",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "React DOM-compatible entrypoints for mreact.",
   "keywords": [
     "dom",
@@ -24,7 +24,8 @@
     "dist/**/*.js",
     "dist/**/*.js.map",
     "dist/**/*.d.ts",
-    "dist/**/*.d.ts.map"
+    "dist/**/*.d.ts.map",
+    "src/**/*"
   ],
   "type": "module",
   "sideEffects": false,
@@ -47,6 +48,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@reckona/mreact-compat": "0.0.65"
+    "@reckona/mreact-compat": "0.0.67"
   }
 }

package/src/client.ts

@@ -0,0 +1,4 @@
+export { createRoot, hydrateRoot } from "@reckona/mreact-compat";
+export type { HydrateRootOptions, Root, RootOptions } from "@reckona/mreact-compat";
+
+export const version = "19.2.6";

package/src/index.ts

@@ -0,0 +1,240 @@
+export {
+  createPortal,
+  flushSync,
+  render,
+  unmountComponentAtNode,
+  useActionState as useFormState,
+} from "@reckona/mreact-compat";
+import { runWithEventPriority } from "@reckona/mreact-compat/event-priority";
+export { createRoot, hydrateRoot } from "./client.js";
+export type { HydrateRootOptions, Root, RootOptions } from "./client.js";
+
+export const version = "19.2.6";
+
+export interface FormStatusNotPending {
+  pending: false;
+  data: null;
+  method: null;
+  action: null;
+}
+
+export interface FormStatusPending {
+  pending: true;
+  data: FormData;
+  method: string;
+  action: string | ((formData: FormData) => void | Promise<void>);
+}
+
+export type FormStatus = FormStatusPending | FormStatusNotPending;
+
+export interface PreconnectOptions {
+  crossOrigin?: "anonymous" | "use-credentials" | "";
+}
+
+export type PreloadAs =
+  | "audio"
+  | "document"
+  | "embed"
+  | "fetch"
+  | "font"
+  | "image"
+  | "object"
+  | "track"
+  | "script"
+  | "style"
+  | "video"
+  | "worker";
+
+export interface PreloadOptions {
+  as: PreloadAs;
+  crossOrigin?: "anonymous" | "use-credentials" | "";
+  fetchPriority?: "high" | "low" | "auto";
+  imageSizes?: string;
+  imageSrcSet?: string;
+  integrity?: string;
+  type?: string;
+  nonce?: string;
+  referrerPolicy?: ReferrerPolicy;
+  media?: string;
+}
+
+export interface PreloadModuleOptions {
+  as?: RequestDestination;
+  crossOrigin?: "anonymous" | "use-credentials" | "";
+  integrity?: string;
+  nonce?: string;
+}
+
+export interface PreinitOptions {
+  as: "script" | "style";
+  crossOrigin?: "anonymous" | "use-credentials" | "";
+  fetchPriority?: "high" | "low" | "auto";
+  precedence?: string;
+  integrity?: string;
+  nonce?: string;
+}
+
+export interface PreinitModuleOptions {
+  as?: "script";
+  crossOrigin?: "anonymous" | "use-credentials" | "";
+  integrity?: string;
+  nonce?: string;
+}
+
+type LinkAttributes = Record<string, string | undefined>;
+
+const notPendingFormStatus: FormStatusNotPending = {
+  pending: false,
+  data: null,
+  method: null,
+  action: null,
+};
+
+export function useFormStatus(): FormStatus {
+  return notPendingFormStatus;
+}
+
+export function requestFormReset(form: HTMLFormElement): void {
+  form.reset();
+}
+
+export function unstable_batchedUpdates<T>(callback: () => T): T;
+export function unstable_batchedUpdates<TArgument, TResult>(
+  callback: (argument: TArgument) => TResult,
+  argument: TArgument,
+): TResult;
+export function unstable_batchedUpdates<TArgument, TResult>(
+  callback: ((argument: TArgument) => TResult) | (() => TResult),
+  argument?: TArgument,
+): TResult {
+  return runWithEventPriority("discrete", () =>
+    argument === undefined
+      ? (callback as () => TResult)()
+      : (callback as (argument: TArgument) => TResult)(argument)
+  );
+}
+
+export function prefetchDNS(href: string): void {
+  upsertHeadLink("dns-prefetch", href, {});
+}
+
+export function preconnect(href: string, options: PreconnectOptions = {}): void {
+  upsertHeadLink("preconnect", href, {
+    crossorigin: options.crossOrigin,
+  });
+}
+
+export function preload(href: string, options: PreloadOptions): void {
+  upsertHeadLink("preload", href, {
+    as: options.as,
+    crossorigin: options.crossOrigin,
+    fetchpriority: options.fetchPriority,
+    imagesrcset: options.imageSrcSet,
+    imagesizes: options.imageSizes,
+    integrity: options.integrity,
+    media: options.media,
+    nonce: options.nonce,
+    referrerpolicy: options.referrerPolicy,
+    type: options.type,
+  });
+}
+
+export function preloadModule(href: string, options: PreloadModuleOptions = {}): void {
+  upsertHeadLink("modulepreload", href, {
+    as: options.as,
+    crossorigin: options.crossOrigin,
+    integrity: options.integrity,
+    nonce: options.nonce,
+  });
+}
+
+export function preinit(href: string, options: PreinitOptions): void {
+  if (options.as === "style") {
+    upsertHeadLink("stylesheet", href, {
+      "data-precedence": options.precedence,
+      crossorigin: options.crossOrigin,
+      fetchpriority: options.fetchPriority,
+      integrity: options.integrity,
+      nonce: options.nonce,
+    });
+    return;
+  }
+
+  upsertHeadScript(href, {
+    async: "",
+    crossorigin: options.crossOrigin,
+    fetchpriority: options.fetchPriority,
+    integrity: options.integrity,
+    nonce: options.nonce,
+  });
+}
+
+export function preinitModule(href: string, options: PreinitModuleOptions = {}): void {
+  upsertHeadScript(href, {
+    type: "module",
+    async: "",
+    crossorigin: options.crossOrigin,
+    integrity: options.integrity,
+    nonce: options.nonce,
+  });
+}
+
+function upsertHeadLink(
+  rel: string,
+  href: string,
+  attributes: LinkAttributes,
+): void {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const selector = `link[rel="${escapeSelectorValue(rel)}"][href="${escapeSelectorValue(href)}"]`;
+  if (document.head.querySelector(selector) !== null) {
+    return;
+  }
+
+  const link = document.createElement("link");
+  link.setAttribute("rel", rel);
+  link.setAttribute("href", href);
+  applyAttributes(link, attributes);
+  document.head.append(link);
+}
+
+function upsertHeadScript(
+  src: string,
+  attributes: LinkAttributes,
+): void {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const selector = `script[src="${escapeSelectorValue(src)}"]`;
+  if (document.head.querySelector(selector) !== null) {
+    return;
+  }
+
+  const script = document.createElement("script");
+  if (attributes.type === "module") {
+    script.setAttribute("type", "module");
+    script.setAttribute("src", src);
+    applyAttributes(script, { ...attributes, type: undefined });
+  } else {
+    script.setAttribute("src", src);
+    applyAttributes(script, attributes);
+  }
+
+  document.head.append(script);
+}
+
+function applyAttributes(element: Element, attributes: LinkAttributes): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === undefined) {
+      continue;
+    }
+    element.setAttribute(name, value);
+  }
+}
+
+function escapeSelectorValue(value: string): string {
+  return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+}

package/src/server.ts

@@ -0,0 +1,259 @@
+import {
+  renderToString as renderCompatToString,
+  type ReactCompatNode,
+} from "@reckona/mreact-compat";
+
+export const version = "19.2.6";
+
+export interface PipeableStreamDestination {
+  write(chunk: string | Uint8Array): unknown;
+  end?(): unknown;
+  destroy?(error?: unknown): unknown;
+}
+
+export interface PipeableStream {
+  pipe<TDestination extends PipeableStreamDestination>(destination: TDestination): TDestination;
+  abort(reason?: unknown): void;
+}
+
+export interface BootstrapScriptDescriptor {
+  src: string;
+  integrity?: string;
+  crossOrigin?: string;
+}
+
+export interface ReactImportMap {
+  imports?: Record<string, string>;
+  integrity?: Record<string, string>;
+  scopes?: Record<string, Record<string, string>>;
+}
+
+export interface RenderBootstrapOptions {
+  nonce?: string;
+  importMap?: ReactImportMap;
+  bootstrapScriptContent?: string;
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>;
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>;
+}
+
+export interface ServerOptions {
+  identifierPrefix?: string;
+}
+
+export interface RenderToPipeableStreamOptions {
+  identifierPrefix?: string;
+  namespaceURI?: string;
+  nonce?: string;
+  importMap?: ReactImportMap;
+  bootstrapScriptContent?: string;
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>;
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>;
+  headersLengthHint?: number;
+  progressiveChunkSize?: number;
+  onHeaders?(headers: Headers): void;
+  onShellReady?(): void;
+  onAllReady?(): void;
+  onShellError?(error: unknown): void;
+  onError?(error: unknown, errorInfo?: { componentStack: string }): string | void;
+  formState?: unknown;
+}
+
+export interface RenderToReadableStreamOptions {
+  identifierPrefix?: string;
+  namespaceURI?: string;
+  nonce?: string;
+  importMap?: ReactImportMap;
+  bootstrapScriptContent?: string;
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>;
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>;
+  headersLengthHint?: number;
+  progressiveChunkSize?: number;
+  signal?: AbortSignal;
+  onHeaders?(headers: Headers): void;
+  onError?(error: unknown, errorInfo?: { componentStack: string }): string | void;
+  formState?: unknown;
+}
+
+export interface ReactDOMServerReadableStream extends ReadableStream<Uint8Array> {
+  allReady: Promise<void>;
+}
+
+export type ResumeOptions = RenderToReadableStreamOptions & RenderToPipeableStreamOptions;
+export type PostponedState = unknown;
+
+export function renderToString(element: ReactCompatNode, _options?: ServerOptions): string {
+  return renderCompatToString(() => element);
+}
+
+export function renderToStaticMarkup(element: ReactCompatNode, options?: ServerOptions): string {
+  void options;
+  return renderToString(element);
+}
+
+export async function renderToReadableStream(
+  element: ReactCompatNode,
+  options: RenderToReadableStreamOptions = {},
+): Promise<ReactDOMServerReadableStream> {
+  const encoder = new TextEncoder();
+  const html = renderServerHtml(element, options);
+  notifyHeaders(options);
+  let resolveAllReady: () => void;
+  let rejectAllReady: (error: unknown) => void;
+  const allReady = new Promise<void>((resolve, reject) => {
+    resolveAllReady = resolve;
+    rejectAllReady = reject;
+  });
+
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      if (options.signal?.aborted === true) {
+        const reason = options.signal.reason;
+        rejectAllReady(reason);
+        controller.error(reason);
+        return;
+      }
+
+      const abort = () => {
+        const reason = options.signal?.reason;
+        rejectAllReady(reason);
+        controller.error(reason);
+      };
+      options.signal?.addEventListener("abort", abort, { once: true });
+
+      try {
+        controller.enqueue(encoder.encode(html));
+        controller.close();
+        resolveAllReady();
+      } catch (error) {
+        options.onError?.(error, { componentStack: "" });
+        rejectAllReady(error);
+        controller.error(error);
+      } finally {
+        options.signal?.removeEventListener("abort", abort);
+      }
+    },
+  });
+
+  return Object.assign(stream, { allReady });
+}
+
+export function renderToPipeableStream(
+  element: ReactCompatNode,
+  options: RenderToPipeableStreamOptions = {},
+): PipeableStream {
+  let aborted = false;
+
+  return {
+    pipe(destination) {
+      queueMicrotask(() => {
+        if (aborted) {
+          return;
+        }
+
+        try {
+          notifyHeaders(options);
+          options.onShellReady?.();
+          const html = renderServerHtml(element, options);
+          options.onAllReady?.();
+          destination.write(html);
+          destination.end?.();
+        } catch (error) {
+          options.onError?.(error, { componentStack: "" });
+          options.onShellError?.(error);
+          destination.destroy?.(error);
+        }
+      });
+
+      return destination;
+    },
+    abort(reason) {
+      aborted = true;
+      options.onError?.(reason ?? new Error("renderToPipeableStream was aborted."), {
+        componentStack: "",
+      });
+    },
+  };
+}
+
+export async function resume(
+  element: ReactCompatNode,
+  _postponedState: PostponedState,
+  options: ResumeOptions = {},
+): Promise<ReactDOMServerReadableStream> {
+  return renderToReadableStream(element, options);
+}
+
+export async function resumeToPipeableStream(
+  element: ReactCompatNode,
+  _postponedState: PostponedState,
+  options: ResumeOptions = {},
+): Promise<PipeableStream> {
+  return renderToPipeableStream(element, options);
+}
+
+function renderServerHtml(element: ReactCompatNode, options: RenderBootstrapOptions): string {
+  return `${renderToString(element)}${renderBootstrapResources(options)}`;
+}
+
+function renderBootstrapResources(options: RenderBootstrapOptions): string {
+  const nonce = options.nonce === undefined ? "" : ` nonce="${escapeAttribute(options.nonce)}"`;
+  const importMap =
+    options.importMap === undefined
+      ? ""
+      : `<script type="importmap"${nonce}>${escapeScriptContent(JSON.stringify(options.importMap))}</script>`;
+  const inlineScript =
+    options.bootstrapScriptContent === undefined
+      ? ""
+      : `<script${nonce}>${escapeScriptContent(options.bootstrapScriptContent)}</script>`;
+  const scripts = (options.bootstrapScripts ?? [])
+    .map((script) => renderExternalScript(script, nonce, undefined))
+    .join("");
+  const modules = (options.bootstrapModules ?? [])
+    .map((script) => renderExternalScript(script, nonce, "module"))
+    .join("");
+
+  return `${importMap}${inlineScript}${scripts}${modules}`;
+}
+
+function renderExternalScript(
+  script: string | BootstrapScriptDescriptor,
+  nonce: string,
+  type: "module" | undefined,
+): string {
+  const descriptor = typeof script === "string" ? { src: script } : script;
+  const typeAttribute = type === undefined ? "" : ` type="${type}"`;
+  const src = ` src="${escapeAttribute(descriptor.src)}"`;
+  const integrity =
+    descriptor.integrity === undefined ? "" : ` integrity="${escapeAttribute(descriptor.integrity)}"`;
+  const crossOrigin =
+    descriptor.crossOrigin === undefined
+      ? ""
+      : ` crossorigin="${escapeAttribute(descriptor.crossOrigin)}"`;
+
+  return `<script${typeAttribute}${src}${nonce}${integrity}${crossOrigin}></script>`;
+}
+
+function escapeAttribute(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function escapeScriptContent(value: string): string {
+  return value
+    .replaceAll("<", "\\u003c")
+    .replaceAll("\u2028", "\\u2028")
+    .replaceAll("\u2029", "\\u2029");
+}
+
+function notifyHeaders(options: { onHeaders?(headers: Headers): void }): void {
+  if (options.onHeaders === undefined) {
+    return;
+  }
+
+  const headers = new Headers();
+  headers.set("content-type", "text/html; charset=utf-8");
+  options.onHeaders(headers);
+}