nene-lang 0.1.1 → 0.1.2

package/build/prerender.js

@@ -0,0 +1,62 @@
+// 静的生成。ビルドのあとで、アプリを Node の中で動かして、ページごとの HTML を作る
+//
+// "/" から始めて、描いた画面の中のリンク（<a href="/...">）をたどり、たどれたページをすべて作る。
+// /about は dist/about/index.html になる。データから作られるページ（/photos/123 など）のように、
+// リンクでたどれない URL は、これまでどおりブラウザで組み立てる（404.html は中身の空の枠）。
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { runInNewContext } from "node:vm";
+import { bundle, compileProgram } from "./compiler.js";
+const MAX_PAGES = 1000;
+// 作ったページの URL（アプリの中のパス）を返す
+export function prerenderSite(options) {
+    const { outDir, base } = options;
+    const mount = options.mount ?? "app";
+    const shell = readFileSync(join(outDir, "index.html"), "utf8");
+    const placeholder = `<div id="${mount}"></div>`;
+    if (!shell.includes(placeholder))
+        return [];
+    const code = bundle(compileProgram(options.entry), {
+        mount,
+        base: JSON.stringify(base),
+        env: JSON.stringify(options.env),
+        prerender: true,
+    });
+    const { rt, program } = runInNewContext(code, { URL, console });
+    const pages = [];
+    const queue = ["/"];
+    const seen = new Set(queue);
+    while (queue.length > 0 && pages.length < MAX_PAGES) {
+        const path = queue.shift();
+        const { html, css } = rt.prerender(program, path);
+        const page = shell
+            .replace(placeholder, `<div id="${mount}">${html}</div>`)
+            .replace("</head>", `  <style data-nene-prerender>${css}</style>\n  </head>`);
+        const file = join(outDir, ...path.split("/").filter(Boolean).map(decodeURIComponent), "index.html");
+        mkdirSync(dirname(file), { recursive: true });
+        writeFileSync(file, page);
+        pages.push(path);
+        // URL で画面を切り替えないアプリは、どのリンクも同じ画面なので "/" だけを作る
+        if (!program.onUrlChange)
+            break;
+        for (const next of links(html, base)) {
+            if (seen.has(next))
+                continue;
+            seen.add(next);
+            queue.push(next);
+        }
+    }
+    return pages;
+}
+// HTML の中の、アプリの中へのリンクのパス（置き場所を除き、? と # の後ろも除く）
+function links(html, base) {
+    const out = [];
+    for (const [, raw] of html.matchAll(/<a\s[^>]*href="([^"]*)"/g)) {
+        const href = raw.replace(/&amp;/g, "&").replace(/&quot;/g, '"');
+        if (!href.startsWith(base) || href.startsWith("//"))
+            continue;
+        const path = "/" + href.slice(base.length).split(/[?#]/)[0];
+        out.push(path.length > 1 ? path.replace(/\/+$/, "") : path);
+    }
+    return out;
+}

package/build/references.d.ts

@@ -0,0 +1,13 @@
+import type { HoverInfo, Location } from "./checker.ts";
+import type { CompiledModule } from "./compiler.ts";
+import type { Pos } from "./syntax.ts";
+export interface Occurrence {
+    file: string;
+    pos: Pos;
+    length: number;
+    text: string;
+}
+export declare function definitionOf(h: HoverInfo): Location | undefined;
+export declare function referencesOf(target: Location, modules: CompiledModule[]): Occurrence[];
+export declare function renameProblem(oldName: string, newName: string): string | null;
+export declare function replacementFor(written: string, newName: string): string;

package/build/references.js

@@ -0,0 +1,48 @@
+// 参照一覧と名前の一括変更。型検査で記録した「名前を使った場所 → 定義の場所」から、
+// 同じ定義を指す場所を、プロジェクトのすべてのモジュールから集める
+export function definitionOf(h) {
+    return typeof h.def === "function" ? h.def() : h.def;
+}
+const sameLocation = (a, b) => a.file === b.file && a.pos.line === b.pos.line && a.pos.col === b.pos.col;
+// target を定義とする場所すべて（定義そのものも含む）。同じ場所は 1 つにまとめる
+export function referencesOf(target, modules) {
+    const out = new Map();
+    const add = (o) => out.set(`${o.file}:${o.pos.line}:${o.pos.col}`, o);
+    for (const m of modules) {
+        for (const h of m.hovers) {
+            const def = definitionOf(h);
+            if (!def || !sameLocation(def, target))
+                continue;
+            // 修飾名（List.map、Icon.close）は、最後の名前だけを指す
+            const text = h.name.slice(h.name.lastIndexOf(".") + 1);
+            const col = h.pos.col + (h.name.length - text.length);
+            add({ file: m.file, pos: { line: h.pos.line, col }, length: text.length, text });
+        }
+    }
+    const head = out.size > 0 ? [...out.values()][0] : null;
+    if (head && !out.has(`${target.file}:${target.pos.line}:${target.pos.col}`)) {
+        // 定義の場所が使われた場所として記録されていなければ、足す（data のコンストラクタなど）
+        add({ file: target.file, pos: target.pos, length: head.text.length, text: head.text });
+    }
+    return [...out.values()].sort((a, b) => a.file.localeCompare(b.file) || a.pos.line - b.pos.line || a.pos.col - b.pos.col);
+}
+const RESERVED = new Set([
+    "module", "where", "import", "qualified", "as", "data", "type", "foreign", "style",
+    "if", "then", "else", "case", "of", "let", "in", "do", "class", "instance", "css",
+]);
+// 新しい名前が、元の名前の種類（小文字始まりの値か、大文字始まりの型・コンストラクタか）として正しいか
+export function renameProblem(oldName, newName) {
+    const upper = /^[A-Z]/.test(oldName);
+    const ok = upper ? /^[A-Z][\w']*$/.test(newName) : /^[a-z_][\w']*$/.test(newName);
+    if (!ok)
+        return upper ? "大文字で始まる名前にしてください" : "小文字で始まる名前にしてください";
+    if (RESERVED.has(newName))
+        return `${newName} は予約された名前なので使えません`;
+    return null;
+}
+// 書いてある名前に合わせた新しい名前。部品の関数 button を submitButton にすると、タグ <Button> は <SubmitButton> になる
+export function replacementFor(written, newName) {
+    if (/^[A-Z]/.test(written) && /^[a-z]/.test(newName))
+        return newName[0].toUpperCase() + newName.slice(1);
+    return newName;
+}

package/docs/design.md

@@ -96,6 +96,12 @@ Elm でいちばん手間だったのは、JSON のデコーダーを型とは
 
 Nene では、JSON との変換を型から決める。メッセージに `GotTodos (Result Http.Error [Todo])` と書けば、`Http.get` はそのとおりに JSON を読む。合わなければ、どこが違ったかを添えて `Err` で返すので、実行時エラーにはならない。変換の規則は 1 つだけにして、フィールド名を付け替えるような設定は持たない。
 
+## 部品ごとの状態を持たない
+
+React の `useState` のような、部品ごとの状態は入れなかった。入れると、同じ値を Model にも部品にも置けるようになり、「どちらに置くか」で迷う。アプリの状態が Model を見れば全部分かる、という性質もなくなる。
+
+Elm で部品の状態がつらいのは、ドロップダウンの開け閉めのような、アプリにとってはどうでもいい状態まで Model に配線することだと思う。そういう見た目だけの状態は、今のブラウザが持てる。`popover` 属性を付けた要素は押せば開き、外を押せば閉じる。`<details>` は開け閉めを覚えている。そこで、アプリが知る必要のある状態は Model に、見た目だけの状態はブラウザに、と分けた。`nene-lang-ui` の Menu・Popover・Accordion・Tooltip は、この形で作ってある。
+
 ## 何を言語に入れ、何を外に出すか
 
 ルーティング、HTTP、JSON は標準ライブラリに入れ、差し替えられないようにした。React ではルーターも状態管理もスタイルの当て方も選べるが、そのぶん、プロジェクトごとに書き方が違う。Nene では、こうした土台は一通りだけにする。標準ライブラリに入れても、使っていないモジュールは出力に入らないので、アプリは重くならない。
@@ -104,11 +110,10 @@ Nene では、JSON との変換を型から決める。メッセージに `GotTo
 
 ## 道具
 
-`nene` コマンド 1 つで、作成・開発・ビルド・公開前の確認・型検査・エディタ連携まで済む。公開先がサブディレクトリでも、`--base` を付けるだけでコードは書き換えない。エラーは該当する行に印を付けて見せる。設定ファイルは必要なく、入口は `index.html` に書いた `.nn`、画像などは `public/` に置く。特別なことをしたいときだけ、普通の Vite の設定を書ける。
+`nene` コマンド 1 つで、作成・開発・ビルド・公開前の確認・型検査・整形・エディタ連携まで済む。言語サーバーは、定義への移動や補完のほか、参照一覧・名前の一括変更・アウトライン・折りたたみ・コードアクションまで持つ。公開先がサブディレクトリでも、`--base` を付けるだけでコードは書き換えない。エラーは該当する行に印を付けて見せる。`view` は model から画面を作るだけの関数なので、ビルドのときにページを HTML にしておける（静的生成）。設定はいらず、リンクをたどってページを見つける。設定ファイルは必要なく、入口は `index.html` に書いた `.nn`、画像などは `public/` に置く。特別なことをしたいときだけ、普通の Vite の設定を書ける。
 
 コマンド・Vite プラグイン・言語サーバーは同じコンパイラを使うので、エディタで出るエラーとビルドで出るエラーは必ず一致する。
 
 ## これから
 
-- 部品の中だけで完結する状態（ドロップダウンの開閉など）を、Model に配線せずに持てるようにしたい。純粋さを保ったまま、どう書けるかを考えている。
 - `style` ブロックの CSS も、エディタで補完や検査ができるようにしたい。

package/docs/guide.md

@@ -291,6 +291,13 @@ import Ui.Theme (Tone(..))
 
 部品の一覧と、色の変え方は `node_modules/nene-lang-ui/README.md` にある。
 
+メニューやアコーディオンの開け閉めのような、見た目だけの状態は Model に入れなくてよい。ブラウザが覚えておいてくれる。
+
+```haskell
+<Menu id="sort" label="並び替え" items={sortItems} />      -- 項目を押すと、そのメッセージが届いて閉じる
+<Accordion title="よくある質問">…</Accordion>
+```
+
 ### ファイルと部品
 
 - 1 つのファイルに部品はいくつ書いてもよい。
@@ -400,7 +407,11 @@ main = App.app { init, update, view, onUrlChange = UrlChanged }
 
 ### 公開する
 
-`npm run build` で `dist/` に出力したものを、静的ホスティングに置く。URL を直接開いても表示されるように、`404.html` と `_redirects` も一緒に出力される。
+`npm run build` で `dist/` に出力したものを、静的ホスティングに置く。
+
+ビルドでは、`/` から始めて画面の中のリンク（`<a href="/...">`）をたどり、たどれたページを HTML にしておく（静的生成）。開いた瞬間に中身が表示され、検索エンジンにも内容が見える。そのあとは今までどおり、ブラウザでアプリとして動く。各ページは、`init` にその URL の `onUrlChange` を当てた画面になる（通信などの `effect` はビルドでは実行しない）。
+
+リンクでたどれない URL（データから作られる `/photos/123` など）は、ブラウザで組み立てる。直接開いても表示されるように、`404.html` と `_redirects` も一緒に出力される。
 
 `https://<user>.github.io/<repo>/` のようなサブディレクトリに置くときは、`npx nene build --base /<repo>/` でビルドする。コードの中のパス（`<a href="/todos">`、`<img src="/logo.png">`、`Nav.pushUrl "/todos"`）にはその分が自動で付き、`Url.path` からは取り除かれる。コードを書き換える必要はない。
 

package/docs/spec.md

@@ -438,6 +438,28 @@ URL を変えるときは `Nav.pushUrl` を `effect` から返す。
 
 テーマ専用の仕組みはない。色は CSS 変数で決め、入口のファイルの `style` ブロックに書く（9.3）。ダークモードも CSS のメディアクエリで書く。
 
+### 7.5 状態の置き場所
+
+部品ごとの状態（React の `useState` にあたるもの）はない。状態は次の 2 つに分けて置く。
+
+| 状態 | 置き場所 |
+| --- | --- |
+| アプリが知る必要のある状態（入力した値、選んだタブ、ダイアログを開いているか） | Model |
+| 見た目だけの一時的な状態（メニュー・吹き出しの開け閉め、アコーディオン、ツールチップ） | HTML とブラウザ（`popover` 属性、`<details>`、`:hover` など） |
+
+- `popover` を付けた要素は、`popovertarget` にその id を書いたボタンで開け閉めでき、外を押すか Esc で閉じる。
+- `open`（`<details>`・`<dialog>`）と `popover` は、ユーザーが開け閉めした状態を、Model から渡す値が変わらない限り保つ。`value` や `checked` は、描くたびに Model の値に合わせる。
+- 見た目だけの状態は、アプリから読めない。読む必要が出てきたら Model に移す。
+
+### 7.6 静的生成
+
+`nene build` は、`/` から始めて、描いた画面の中のアプリへのリンク（`<a href>`）をたどり、たどれたページの HTML を出力する（`/about` は `about/index.html`）。
+
+- 各ページの model は、`init` にその URL の `onUrlChange` のメッセージを `update` で当てたもの。`effect`・`onStart`・`subscriptions` は実行しない。
+- `onUrlChange` のないアプリは `/` だけを作る。
+- ブラウザでは、読み込んだときに同じ画面を描き直してから動き出す。
+- リンクでたどれない URL は、中身の空の `404.html` から、ブラウザで組み立てる。
+
 ## 8. レイアウトタグ
 
 並び方はレイアウトタグで書く。HTML 要素は並び方を持たない（ブロック要素として縦に積まれるだけ）。
@@ -595,10 +617,10 @@ HTML 要素は **意味のため** に使う（見出し、リスト、ボタン
 | `class` | `Class`（9 章） |
 | `vars` | フィールドがすべて `String` のレコード（9.4） |
 | `key` | `String`（リストの要素を見分ける） |
-| `id` `title` `role` `lang` `dir` `src` `srcset` `sizes` `alt` `href` `target` `rel` `type` `value` `name` `placeholder` `for` `form` `list` `min` `max` `step` `pattern` `accept` `autocomplete` `width` `height` `loading` `poster` `datetime` `headers` `scope` | `String` |
+| `id` `title` `role` `lang` `dir` `src` `srcset` `sizes` `alt` `href` `target` `rel` `type` `value` `name` `placeholder` `for` `form` `list` `min` `max` `step` `pattern` `accept` `autocomplete` `width` `height` `loading` `poster` `datetime` `headers` `scope` `popovertarget` `popovertargetaction` | `String` |
 | `aria-*` `data-*`（小文字とハイフン） | `String` |
 | `tabindex` `rows` `cols` `colspan` `rowspan` `maxlength` `minlength` `span` `start` | `Int` |
-| `disabled` `checked` `selected` `readonly` `required` `multiple` `hidden` `autofocus` `open` `controls` `autoplay` `loop` `muted` `playsinline` `reversed` `novalidate` | `Bool`（値を書かずに `hidden` とだけ書くと `True`） |
+| `disabled` `checked` `selected` `readonly` `required` `multiple` `hidden` `autofocus` `open` `controls` `autoplay` `loop` `muted` `playsinline` `reversed` `novalidate` `popover` | `Bool`（値を書かずに `hidden` とだけ書くと `True`） |
 | `onClick` `onDoubleClick` `onSubmit` `onFocus` `onBlur` `onMouseEnter` `onMouseLeave` | `msg` |
 | `onInput` `onChange` | `String -> msg`（入力された値、`select` で選ばれた値） |
 | `onCheck` | `Bool -> msg` |

package/editors/nvim/lua/nene.lua

@@ -3,16 +3,23 @@
 --   vim.opt.rtp:append("/path/to/Nene/editors/nvim")
 --   require("nene").setup()
 --
--- 有効になるもの:
+-- 有効になるもの（キーは nvim の標準のもの）:
 --   - ハイライト（syntax/nene.vim。言語サーバーが動いているときは、その解析結果で色を上書きする）
---   - 言語サーバー: エラー表示、K で型の表示、gd で定義へ移動、補完
+--   - エラー表示、K で型、gd で定義へ、grr で参照一覧、grn で名前の一括変更、gra でコードアクション、
+--     gO でアウトライン、挿入モードの <C-s> で引数のヒント、gq で整形、補完
+--   - 言語サーバーによる折りたたみ（宣言・where・JSX の要素など）
+--
+-- setup の設定:
+--   format_on_save = true   保存するときに整形する（nene fmt と同じ）
+--   folding = false         折りたたみを言語サーバーに任せない
+--   completion = false      nvim 標準の補完を使わない（nvim-cmp や blink.cmp があれば、はじめから使わない）
+--   cmd = { ... }           言語サーバーの起動コマンド
 --
--- 補完は、nvim-cmp や blink.cmp が入っていればそちらに任せ、なければ nvim 標準の補完を使う。
 -- nvim 0.11 以降が必要。
 --
--- lazy.nvim なら（GitHub に置いた場合）:
+-- lazy.nvim なら:
 --   {
---     "<ユーザー名>/Nene",
+--     "kimuracoki/nene",
 --     config = function(plugin)
 --       vim.opt.rtp:append(plugin.dir .. "/editors/nvim")
 --       require("nene").setup()
@@ -77,16 +84,33 @@ function M.setup(opts)
   if builtin == nil then
     builtin = not external
   end
-  if builtin then
-    vim.api.nvim_create_autocmd("LspAttach", {
-      callback = function(args)
-        local client = vim.lsp.get_client_by_id(args.data.client_id)
-        if client and client.name == "nene" then
-          vim.lsp.completion.enable(true, client.id, args.buf, { autotrigger = true })
+
+  vim.api.nvim_create_autocmd("LspAttach", {
+    callback = function(args)
+      local client = vim.lsp.get_client_by_id(args.data.client_id)
+      if not client or client.name ~= "nene" then
+        return
+      end
+      if builtin then
+        vim.lsp.completion.enable(true, client.id, args.buf, { autotrigger = true })
+      end
+      if opts.folding ~= false then
+        for _, win in ipairs(vim.fn.win_findbuf(args.buf)) do
+          vim.wo[win][0].foldmethod = "expr"
+          vim.wo[win][0].foldexpr = "v:lua.vim.lsp.foldexpr()"
+          vim.wo[win][0].foldlevel = 99 -- 開いた時点では畳まない
         end
-      end,
-    })
-  end
+      end
+      if opts.format_on_save then
+        vim.api.nvim_create_autocmd("BufWritePre", {
+          buffer = args.buf,
+          callback = function()
+            vim.lsp.buf.format({ bufnr = args.buf, name = "nene" })
+          end,
+        })
+      end
+    end,
+  })
 end
 
 return M

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "nene-lang",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "bin": {
     "nene": "bin/nene.js"
   },
   "scripts": {
     "dev": "cd examples && node ../src/cli.ts dev",
-    "build": "cd examples && node ../src/cli.ts build -o ../dist/examples",
+    "build": "cd examples && node ../src/cli.ts build --out ../dist/examples",
     "test": "node --test test/*.test.ts",
     "typecheck": "tsc",
     "build:package": "rm -rf build && tsc -p tsconfig.build.json && cp -R src/lib build/lib",

package/runtime/runtime.js

@@ -91,13 +91,17 @@ const $rt = (() => {
   const layoutStyle = styleElement("layout");
   const userStyle = styleElement("components");
   const classes = new Map();
+  // ページに入れた CSS の写し。静的生成（prerender）で HTML に埋め込む
+  const sheets = { layout: [], components: [] };
 
   const addRule = (rule) => {
+    sheets.layout.push(rule);
     if (layoutStyle) layoutStyle.sheet.insertRule(rule, layoutStyle.sheet.cssRules.length);
   };
 
   // style ブロックの CSS（コンパイラがクラス名を部品ごとに書き換えたもの）
   const css = (text) => {
+    sheets.components.push(text);
     if (userStyle) userStyle.textContent += text + "\n";
   };
 
@@ -110,7 +114,6 @@ const $rt = (() => {
     if (cls) return cls;
     cls = `nene${classes.size}`;
     classes.set(key, cls);
-    if (!hasDocument) return cls;
     if (base) addRule(`.${cls}{${base}}`);
     if (hover) addRule(`.${cls}:hover{${hover}}`);
     if (narrow) addRule(`@media (max-width: ${narrow[0] - 0.02}px){.${cls}{${narrow[1]}}}`);
@@ -179,8 +182,10 @@ const $rt = (() => {
     onCheck: "change",
   };
   // DOM のプロパティとして持つ属性（属性を書き換えるだけでは、画面上の状態が変わらないもの）
-  const PROPS = { value: "value", checked: "checked", selected: "selected", disabled: "disabled", readonly: "readOnly", open: "open", muted: "muted" };
-  const BOOLS = new Set(["required", "multiple", "hidden", "autofocus", "controls", "autoplay", "loop", "playsinline", "reversed", "novalidate"]);
+  // PROPS は描くたびに model の値へ合わせる。BOOLS は値が変わったときだけ変える。
+  // open（details・dialog）と popover は、ユーザーが開け閉めした状態を、model が変わらない限り保つ
+  const PROPS = { value: "value", checked: "checked", selected: "selected", disabled: "disabled", readonly: "readOnly", muted: "muted" };
+  const BOOLS = new Set(["required", "multiple", "hidden", "autofocus", "controls", "autoplay", "loop", "playsinline", "reversed", "novalidate", "open", "popover"]);
 
   // vars={{ barWidth = "40%" }} → --bar-width: 40%
   const varName = (field) => `--${field.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
@@ -189,6 +194,9 @@ const $rt = (() => {
     for (const [k, v] of Object.entries(newVars ?? {})) if (!oldVars || oldVars[k] !== v) el.style.setProperty(varName(k), v);
   };
 
+  // /about や /photo.jpg のような、アプリの一番上から書いたパスには、置き場所（base）を付け足す
+  const URL_ATTRS = new Set(["href", "src", "poster"]);
+
   const createRenderer = (dispatch) => {
     const listen = (el, name) => {
       el.$nene ??= {};
@@ -204,9 +212,6 @@ const $rt = (() => {
       });
     };
 
-    // /about や /photo.jpg のような、アプリの一番上から書いたパスには、置き場所（base）を付け足す
-    const URL_ATTRS = new Set(["href", "src", "poster"]);
-
     const setAttr = (el, name, value, old) => {
       if (name === "class" || name === "key") return;
       if (name === "vars") {
@@ -337,8 +342,10 @@ button { cursor: pointer; }
   const withBase = (url) => (url.startsWith("/") && !url.startsWith("//") ? base + url.slice(1) : url);
   const inApp = (pathname) => pathname.startsWith(base) || pathname === base.slice(0, -1);
 
-  const currentUrl = () => {
-    const u = new URL(location.href);
+  const currentUrl = () => urlOf(location.href);
+
+  const urlOf = (href) => {
+    const u = new URL(href, "http://localhost");
     return {
       path: u.pathname.slice(base.length - 1).split("/").filter(Boolean).map(decodeURIComponent),
       query: [...u.searchParams.entries()],
@@ -374,9 +381,46 @@ button { cursor: pointer; }
   // Nav.pushUrl などから。url はアプリの中のパス
   const navigate = (url, replace) => go(withBase(url), replace);
 
+  // ---- 静的生成 ----
+  // ビルドのとき（nene build）に Node で呼ばれ、path の画面の HTML と CSS を返す。
+  // model は init に、その URL の onUrlChange を当てたもの。effect などの副作用は実行しない
+
+  const prerender = (config, path) => {
+    let model = config.init;
+    if (config.onUrlChange) model = config.update(config.onUrlChange(urlOf(path)))(model);
+    const html = norm([config.view(model)]).map(toHtml).join("");
+    const css = [BASE_CSS, ...sheets.layout, ...sheets.components].join("\n");
+    return { html, css };
+  };
+
+  const VOID = new Set(["img", "input", "br", "hr", "source", "col", "wbr"]);
+  const escape = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+  const toHtml = (v) => {
+    if (v.t === "text") return escape(v.text);
+    const attrs = [];
+    if (v.cls) attrs.push(`class="${escape(v.cls)}"`);
+    for (const [k, val] of Object.entries(v.attrs)) {
+      if (k === "class" || k === "key" || k in EVENTS) continue;
+      if (k === "vars") {
+        const decls = Object.entries(val).map(([f, x]) => `${varName(f)}: ${x}`).join("; ");
+        attrs.push(`style="${escape(decls)}"`);
+      } else if (typeof val === "boolean") {
+        if (val) attrs.push(k);
+      } else {
+        attrs.push(`${k}="${escape(URL_ATTRS.has(k) ? withBase(val) : val)}"`);
+      }
+    }
+    const open = `<${v.tag}${attrs.length ? " " + attrs.join(" ") : ""}>`;
+    if (VOID.has(v.tag)) return open;
+    return `${open}${v.children.map(toHtml).join("")}</${v.tag}>`;
+  };
+
   // ---- アプリの実行 ----
 
   const run = (config, root) => {
+    // 静的生成で埋め込んだ CSS は、ランタイムが同じものを入れたので外す（描き直すのと同じ流れで、見た目は変わらない）
+    for (const el of document.querySelectorAll("style[data-nene-prerender]")) el.remove();
 
     let model = config.init;
     let pending = false;
@@ -457,7 +501,7 @@ button { cursor: pointer; }
 
   return {
     lazy, eq, append, compose, idiv, show, fail, Just, Nothing, Ok, Err, defaults,
-    h, frag, layout, spacer, run, sub, navigate, css, scope, configure, envValue,
+    h, frag, layout, spacer, run, prerender, sub, navigate, css, scope, configure, envValue,
     // テスト用
     norm,
   };

package/template/CLAUDE.md

@@ -5,6 +5,7 @@
 ## コマンド
 
 - `npm run check` … 型検査。`.nn` を編集すると自動で実行され、エラーがあれば伝えられる（`.claude/hooks/check.mjs`）
+- `npm run fmt` … 整形（`=` の位置などをそろえる）。書き終えたらかける
 - `npm run dev` … 開発サーバー
 - `npm run build` … `dist/` に出力
 
@@ -44,6 +45,7 @@ import Ui.Theme (Tone(..))
 
 - 色の種類 `tone` はどの部品も `Primary` `Neutral` `Success` `Warning` `Danger`、大きさ `size` は `S` `M` `L`。
 - 部品の見た目は外から `class` で変えられない。色は入口の `style` ブロックで `:root { --primary: …; }` のように CSS 変数を変える。
+- 状態の置き場所: アプリが知る必要のある状態は Model。メニュー・吹き出し・アコーディオンの開け閉めのような見た目だけの状態は Model に入れず、`Menu` `Popover` `Accordion` `Tooltip`（ブラウザが開け閉めを持つ）を使う。部品ごとの状態（useState）は Nene にはない。
 - where の名前がタグとぶつかると、その名前が部品として使われる（`select = …` と書くと `<Select>` が使えない）。
 
 ## アプリの形

package/template/README.md

@@ -6,6 +6,7 @@
 npm install
 npm run dev       # 開発サーバー（保存すると自動で再読み込み）
 npm run check     # 型検査だけ
+npm run fmt       # 整形
 npm run build     # dist/ に公開用のファイルを出力
 npm run preview   # dist/ を手元で動かして確かめる
 ```
@@ -22,12 +23,12 @@ npm run preview   # dist/ を手元で動かして確かめる
 
 ## 公開する
 
-`npm run build` の出力（`dist/`）を、静的ホスティングにそのまま置く。URL を直接開いたときやリロードしたときも表示されるように、`404.html` と `_redirects` も一緒に出力される。
+`npm run build` の出力（`dist/`）を、静的ホスティングにそのまま置く。リンクでたどれるページは HTML にしてある（開いた瞬間に表示され、検索エンジンにも見える）。たどれない URL を直接開いたときやリロードしたときも表示されるように、`404.html` と `_redirects` も一緒に出力される。
 
 | 置き場所 | やること |
 | --- | --- |
 | Netlify・Cloudflare Pages | ビルドコマンドに `npm run build`、出力先に `dist` を指定する |
-| Vercel | 上と同じ。加えて `vercel.json` に `{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] }` を書く |
+| Vercel | 上と同じ。加えて `vercel.json` に `{ "rewrites": [{ "source": "/(.*)", "destination": "/404.html" }] }` を書く |
 | GitHub Pages（`https://<user>.github.io/<repo>/`） | `npx nene build --base /<repo>/` でビルドして、`dist/` を公開する |
 
 `--base` を付けると、コードの中で `/about` や `/logo.png` と書いたパスに置き場所が自動で付く。コードを書き換える必要はない。

package/template/package.json

@@ -6,7 +6,8 @@
     "dev": "nene dev",
     "build": "nene build",
     "preview": "nene preview",
-    "check": "nene check"
+    "check": "nene check",
+    "fmt": "nene fmt src"
   },
   "dependencies": {
     "nene-lang-ui": "{{uiDependency}}"