ページ単位のスクリプト#

すべてを 1 つのグローバルバンドルに乗せず、ページ（や上位レイアウト）が自分用の外部スクリプトを宣言できます。

関数スタイル#

return function (PageContext $ctx): Closure {
    $ctx->js('/assets/chart.js', defer: true);

    return fn (): Element => <canvas id="chart"></canvas>;
};

クラススタイル#

final class Dashboard extends LayoutComponent
{
    public function render(): Element
    {
        $this->addJs('/assets/dashboard.js', module: true);

        return <div>{...$this->getChildren()}</div>;
    }
}

ページクラスなら PageComponent::addJs()、レイアウトなら LayoutComponent::addJs() も同様に使えます。

挙動#

<body> の末尾、メインの usePHP バンドルの後に、宣言順で出力。

レイアウトのスクリプトがページより先、外側（ルート）レイアウトが内側より先。

src 指定専用。フラグは defer / async / module（type="module"）。

インライン JS は $document->addHeadHtml() を使う（アイランドのローダーと同じフック）。

重複排除なし。レイアウトとページが同じ src を宣言すれば 2 つ出力される

（metadata() と同じく「宣言するだけ・調整しない」方針）。

このサイトでの実例#

コードハイライト用の highlight.js は、<pre><code> を持つ ドキュメントページだけで読み込みます。

// src/Pages/docs/[slug]/page.psx
$ctx->js('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js', defer: true);

ホーム・検索・404 はコードブロックが無いので highlight.js を読み込みません。初期化やテーマ CSS などのインライン/<link> は $document->addHeadHtml() 側（public/index.php）に置き、ライブラリ本体だけをページ単位で宣言する、という分担です。Tailwind/ダークモードの注入も同じ仕組みです。