Zod Codecs で ‘use client’ を介した Server-Client 間データ転送を強化する

(抜粋) src/app/rsc-date/date/page.tsx

import { LocaleAwareDate } from "./locale-aware-date";

export default async function Page({}: PageProps"/rsc-date/date">) {
  await connection();

  return (
    div className={styles.container}>
      {}
      section>
        h2>アクセスした時刻:h2>
        LocaleAwareDate value={new Date()} />
      section>
    div>
  );
};

(抜粋) src/app/rsc-date/date/locale-aware-date.tsx

"use client";



const formatter = new Intl.DateTimeFormat(undefined, {
  
});

type Props = {
  value: Date;
};

export function LocaleAwareDate({ value }: Props) {
  
  
  const localDate = useSyncExternalStore(
    () => () => {},
    () => formatter.format(value),
    () => undefined
  );
  return (
    div className={styles.root}>
      {}
      div>
        span className={styles.prefix}>ブラウザ側タイムゾーンでの時刻: span>
        span className={styles.time}>{localDate}span>
      div>
    div>
  );
}

import { encodeFromPlainDateTime } from "#/utils/react/codecs/plain-date-time";

import { decodeIntoPlainDateTime } from "#/utils/react/codecs/plain-date-time";


import {
  type PlainDateTime,
  type PlainDateTimeUnderlying, 
} from "#/utils/react/codecs/plain-date-time";

utils/react/codecs/_codec

export type Codecin out S, in out U> = {
  decode: (u: U) => S;
  encode: (s: S) => U;
};

export type ShapedTypeC> = C extends Codecinfer S, infer _> ? S : never;
export type UnderlyingTypeC> = C extends Codecinfer _, infer U>
  ? U
  : never;

utils/react/sharable/plain-date-time

import { Temporal } from "temporal-polyfill";
import type { Codec } from "./_codec";

export const SharablePlainDateTime: CodecTemporal.PlainDateTime, string> = {
  decode: (string) => Temporal.PlainDateTime.from(string),
  encode: (dateTime) => dateTime.toString(),
} 

import { type ShapedType, type UnderlyingType } "#/utils/react/sharable";
import { SharablePlainDateTime } from "#/utils/react/sharable/plain-date-time";


SharablePlainDateTime.encode(plainDateTime);

SharablePlainDateTime.decode(underlying);


type Props = {
  now: UnderlyingTypetypeof SharablePlainDateTime>,
};
type PlainDateTime = ShapedTypetypeof SharablePlainDateTime>;

src/app/rsc-date/temporal/
├── _utils/
│   └── share-value-by-codec.ts        # Codec ユーティリティ
├── _sharable-plain-date-time.ts       # Zod Codec の定義
├── page.tsx                           # ページコンポーネント（Server）
├── page.module.scss                   # 同コンポーネントのスタイル
├── show-plain-date-time.tsx           # 日付表示コンポーネント（`'use client'` あり）
└── show-plain-date-time.module.scss   # 同コンポーネントのスタイル

src/app/rsc-date/temporal/_utils/share-value-by-codec.ts

import * as z from "zod/mini";


export { codec } from "zod/mini";
export { encode, decode } from "zod/mini";

export type UnderlyingTypeT> = z.inputT>;
export type ShapedTypeT> = z.outputT>;

src/app/rsc-date/temporal/_sharable-plain-date-time.ts

import { z } from "zod/mini";
import { Temporal } from "temporal-polyfill";
import { codec } from "./_utils/share-value-by-codec";


export const SharablePlainDateTime = codec(
  z.string(),
  z.instanceof(Temporal.PlainDateTime),
  {
    decode: (string) => Temporal.PlainDateTime.from(string),
    encode: (dateTime) => dateTime.toString(),
  }
);

src/app/rsc-date/temporal/page.tsx

import { Temporal } from "temporal-polyfill";
import { type Metadata } from "next";
import { connection } from "next/server";
import Link from "next/link";

import { ShowPlainDateTime } from "./show-plain-date-time";
import { SharablePlainDateTime } from "./_sharable-plain-date-time";
import { encode } from "./_utils/share-value-by-codec";
import styles from "./page.module.scss";

export const metadata: Metadata = {
  title: "Temporal.PlainDateTime の振る舞いテスト",
};

export default async function Page({}: PageProps"/rsc-date/temporal">) {
  await connection();
  const nowPlain = Temporal.Now.plainDateTimeISO();

  return (
    div className={styles.container}>
      nav className={styles.nav}>
        Link href="/rsc-date" className={styles.navLink}>
          ← Back to RSC Date Examples
        Link>
      nav>
      h1>Temporal.PlainDateTime の振る舞いテストh1>
      h2>アクセス時のサーバー内部の現在時刻h2>
      div className={styles.cluster}>
        ShowPlainDateTime
          nowPlainDateTime={encode(SharablePlainDateTime, nowPlain)}
        />
      div>
    div>
  );
}

src/app/rsc-date/temporal/show-plain-date-time.tsx

"use client";

import { SharablePlainDateTime } from "./_sharable-plain-date-time";
import {
  decode,
  type ShapedType,
  type UnderlyingType,
} from "./_utils/share-value-by-codec";

import styles from "./show-plain-date-time.module.scss";

type Props = {
  nowPlainDateTime: UnderlyingTypetypeof SharablePlainDateTime>;
};

export function ShowPlainDateTime({
  nowPlainDateTime: _nowPlainDateTime,
}: Props) {
  const nowPlainDateTime = decode(SharablePlainDateTime, _nowPlainDateTime);

  return (
    div className={styles.card}>
      span>フォーマット済み: span>
      span>{formatDateTime(nowPlainDateTime)}span>
    div>
  );
}

const formatDateTime = (d: ShapedTypetypeof SharablePlainDateTime>) => {
  const year = d.year;
  const month = d.month;
  const day = d.day;
  const hour = d.hour.toString().padStart(2, "0");
  const minute = d.minute.toString().padStart(2, "0");
  const second = d.second.toString().padStart(2, "0");
  return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
};