@cardenelabs/dragon 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/dragon",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Dragon — Mermaid 感覚で animated SVG を生成する Text DSL。 cdl engine を内部利用。",
   "license": "MIT",
   "author": "cardene777",
@@ -46,15 +46,6 @@
     "node": ">=18"
   },
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "cd ../.. && vitest run packages/dragon",
-    "test:watch": "cd ../.. && vitest packages/dragon",
-    "lint": "tsc --noEmit",
-    "prepublishOnly": "pnpm run typecheck && pnpm run test && pnpm run build"
-  },
   "dependencies": {
     "@cardenelabs/cdl": "^0.14.0"
   },
@@ -75,5 +66,14 @@
     "react": "^19.1.0",
     "tsup": "^8.5.1",
     "typescript": "^5.8.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "typecheck:test": "tsc --noEmit -p tsconfig.test.json",
+    "test": "cd ../.. && vitest run packages/dragon",
+    "test:watch": "cd ../.. && vitest packages/dragon",
+    "lint": "tsc --noEmit"
   }
-}
+}

package/src/compile.ts

@@ -25,6 +25,7 @@ import type {
   ErRelationCardinality,
   FormulaAst,
   LaidDiagram,
+  NodeKind,
 } from "@cardenelabs/cdl";
 import {
   sequence,
@@ -45,7 +46,7 @@ import {
   inputDefaultValue,
 } from "@cardenelabs/cdl";
 import { parseFocusEntry } from "./focus";
-import { DRAW_TARGETS } from "./v05/parser";
+import { DRAW_TARGETS, DSL_ONLY_KINDS } from "./v05/parser";
 import { isColorValue, pointsOutside, stripExternalPaint } from "./color";
 import {
   MAX_INPUT_ELEMENTS,
@@ -60,6 +61,56 @@ import {
   type RelativeDirection,
 } from "./relative-pos";
 
+/**
+ * 記法だけが持つ種類を、描画できる種類へ読み替える (#1420)。
+ *
+ * 記法は `contract` / `eoa` のような **描画側に無い種類** を受け付ける
+ * (`v05/parser.ts` の `DSL_ONLY_KINDS`)。 図種ごとの役割分け (`solidity` の縦列の並べ替え
+ * など) に使うためで、記法としては正しい。
+ *
+ * **そのまま描画側へ渡すと図の組み立てが落ちる**。 描画側は知らない種類の大きさを引けず、
+ * `Cannot read properties of undefined (reading 'h')` で止まる (実測)。
+ *
+ * `solidity` と `er` は組み立ての中で別の種類に置き換えていたが、`flow` / `swimlane` /
+ * `state` / `topology` は `a.kind` をそのまま渡していた。 記法が受ける値で図が出ない状態
+ * だったので、渡す手前で必ず通す。
+ *
+ * ## 読み替え先
+ *
+ * | 種類 | 読み替え先 | なぜ |
+ * |---|---|---|
+ * | `entity` | `storage` | 表を持つ = ER 図の実体 |
+ * | `state` | `card` | 状態は札で表す |
+ * | `contract` / `proxy` / `library` / `interface` | `card` | 契約は札で表す (`solidity` の置き換え先に合わせた) |
+ * | `eoa` | `person` | 人が持つ財布 |
+ * | `multisig` | `signer` | 複数人で署名する (`solidity` の置き換え先に合わせた) |
+ *
+ * **表は `DSL_ONLY_KINDS` を鍵にして書く**。 種類を足した時に読み替え先が無いと
+ * 型検査が落ちるので、足し忘れが残らない。
+ */
+const 記法だけの種類の読み替え: Readonly<
+  Record<(typeof DSL_ONLY_KINDS)[number], NodeKind>
+> = {
+  entity: "storage",
+  state: "card",
+  contract: "card",
+  proxy: "card",
+  library: "card",
+  interface: "card",
+  eoa: "person",
+  multisig: "signer",
+};
+
+/** 描画側へ渡せる種類にする。 記法だけの種類はここで読み替わる (#1420) */
+function 描ける種別(kind: string | undefined): NodeKind {
+  if (kind === undefined) return "actor";
+  const 読み替え先 = (
+    記法だけの種類の読み替え as Record<string, NodeKind | undefined>
+  )[kind];
+  return 読み替え先 ?? (kind as NodeKind);
+}
+
+
 export interface CompileToCdlOpts {
   /**
    * CAR-1657 = parts identifier lookup catalog、 caller (CdlEditor / test) が inject。
@@ -5330,7 +5381,7 @@ function compileC4(doc: DslDocument): CdlDiagram {
     b.node(x.id, {
       lane: lid,
       stack,
-      kind: x.actor.kind,
+      kind: 描ける種別(x.actor.kind),
       title: x.actor.name,
     });
   }
@@ -6384,7 +6435,7 @@ function compileFlow(doc: DslDocument): CdlDiagram {
     flowBuilder.step(
       {
         id: slugify(a.name) || `n${i}`,
-        kind: a.kind,
+        kind: 描ける種別(a.kind),
         title: 箱の題(a),
       },
       edgeLabel,
@@ -6423,7 +6474,7 @@ function compileSwimlane(doc: DslDocument): CdlDiagram {
       swim.node(nodeId, {
         lane: laneId,
         stack,
-        kind: actor?.kind ?? "actor",
+        kind: 描ける種別(actor?.kind),
         title: actorName,
       });
       laneStackCount.set(laneId, stack + 1);
@@ -6454,7 +6505,7 @@ function compileSwimlane(doc: DslDocument): CdlDiagram {
       swim.node(slugify(a.name) || `n${i}`, {
         lane: swim.laneId(a.name),
         stack: 0,
-        kind: a.kind ?? "actor",
+        kind: 描ける種別(a.kind),
         title: 箱の題(a),
       });
     });
@@ -6577,7 +6628,7 @@ function compileTopology(doc: DslDocument): CdlDiagram {
   for (const a of doc.actors) {
     groupBuilder.add({
       id: slugify(a.name) || a.name,
-      kind: a.kind,
+      kind: 描ける種別(a.kind),
       title: 箱の題(a),
     });
   }
@@ -6717,7 +6768,12 @@ function compileGenericWithAnimate(doc: DslDocument, opts: GenericOpts): CdlDiag
         while (集合?.has(stack)) stack += 1;
         埋める(lid, stack);
       }
-      b.node(id, { lane: lid, stack, kind: a.kind, title: 箱の題(a) });
+      b.node(id, {
+        lane: lid,
+        stack,
+        kind: 描ける種別(a.kind),
+        title: 箱の題(a),
+      });
     });
   } else if (kind === "flow" || kind === "topology") {
     // 1 lane に全 actor を縦 stack
@@ -6730,7 +6786,12 @@ function compileGenericWithAnimate(doc: DslDocument, opts: GenericOpts): CdlDiag
     doc.actors.forEach((a, idx) => {
       const id = slugify(a.name) || `n${idx}`;
       actorToNodeId.set(a.name, id);
-      b.node(id, { lane: lid, stack: idx, kind: a.kind, title: 箱の題(a) });
+      b.node(id, {
+        lane: lid,
+        stack: idx,
+        kind: 描ける種別(a.kind),
+        title: 箱の題(a),
+      });
     });
   } else {
     // swimlane / er / state ... actor ごとに 1 lane (横並び)
@@ -6755,7 +6816,7 @@ function compileGenericWithAnimate(doc: DslDocument, opts: GenericOpts): CdlDiag
       b.node(id, {
         lane: lid,
         stack: 0,
-        kind: a.kind,
+        kind: 描ける種別(a.kind),
         title: 箱の題(a),
         ...(isInitial ? { eyebrow: "初期" } : {}),
         ...(isFinal ? { eyebrow: "最終" } : {}),

package/src/index.ts

@@ -11,6 +11,17 @@
 export { parseTextDsl } from "./parser";
 export { compileToCdl } from "./compile";
 export type { CompileNotice } from "./compile";
+/**
+ * 組み立てた図の型 (#1415)。
+ *
+ * `textDslToDiagram` が返す型そのもので、実体は `@cardenelabs/cdl` が持つ。 使う側が
+ * 戻り値に型を付けるには必ず要るので、ここから引けるようにする。
+ *
+ * 再 export が無い間、使う側は `@cardenelabs/cdl` を直接の依存に足す必要があった。
+ * 足さずに書くと **型が暗黙の `any` に落ち、その先の `.map((n) => ...)` まで検査が効かなく
+ * なる** (実測 = この 1 件が 39 件の暗黙 `any` を生んでいた)。
+ */
+export type { CdlDiagram } from "@cardenelabs/cdl";
 export { parseTextDslV05 } from "./v05";
 // 記法一覧が「実際に受け付ける値」 を実装から引くための公開。 手書きすると説明と実装がずれる。
 export { DRAW_TARGETS, DRAW_WORDS, PHASE_ITEM_WORDS, PRESET_TYPES, TOP_LEVEL_KEYS } from "./v05/parser";

package/src/types.ts

@@ -4,6 +4,18 @@
  */
 
 import type { CdlDiagram, NodeKind, Tone, EdgeStyle } from "@cardenelabs/cdl";
+import type { DslOnlyKind } from "./v05/parser";
+
+/**
+ * 記法が書ける箱の種類 (#1420)。
+ *
+ * 描画できる種類 (`NodeKind`) に、**記法だけが持つ種類** (`contract` / `eoa` など) を足す。
+ * 後者は図種ごとの役割分け (`solidity` の縦列の並べ替えなど) に使い、描画側へ渡す手前で
+ * `compile.ts` の `描ける種別` が読み替える。
+ *
+ * `NodeKind` だけに縛っていた間、記法が受ける値を型が表せていなかった。
+ */
+export type DslNodeKind = NodeKind | DslOnlyKind;
 import type { RelativePos } from "./relative-pos";
 
 /**
@@ -188,7 +200,7 @@ export type DslAxes = {
 /** 登場人物 (v0.5+ ... inline option 拡張) */
 export type DslActor = {
   name: string;
-  kind: NodeKind;
+  kind: DslNodeKind;
   /**
    * 著者が種類を書いたか。 書かなかった時 `kind` には既定の `actor` が入るため、
    * `kind` の値だけでは「書いた `actor`」 と「書かなかった」 を区別できない。

package/src/v05/parser.ts

@@ -56,6 +56,7 @@ import type {
   DslAxes,
   DslDocument,
   DslActor,
+  DslNodeKind,
   DslDynShape,
   DslReadout,
   DslInput,
@@ -262,10 +263,13 @@ const NODE_KIND_DEFAULT: NodeKind = "actor";
  * 記法だけが持つ種類。 描画側には無いが、 図種ごとの組み立てで意味を持つ。
  *
  * `contract` / `eoa` / `multisig` / `proxy` / `library` / `interface` は Solidity 図の
- * 役割分けに、 `entity` / `state` は ER 図と状態遷移図に使う。 組み立ての段階で描画できる
- * 種類に置き換わるため、 そのまま描画側に渡ることはない。
+ * 役割分けに、 `entity` / `state` は ER 図と状態遷移図に使う。
+ *
+ * **描画側へ渡す前に必ず読み替える** (`compile.ts` の `描ける種別`)。 読み替えを通さずに渡すと
+ * 図の組み立てが落ちる = 描画側は知らない種類の大きさを引けない (#1420 で実測、
+ * `Cannot read properties of undefined (reading 'h')`)。
  */
-const DSL_ONLY_KINDS = [
+export const DSL_ONLY_KINDS = [
   "entity",
   "state",
   "contract",
@@ -276,6 +280,9 @@ const DSL_ONLY_KINDS = [
   "interface",
 ] as const;
 
+/** 記法だけが持つ種類。 描画側の `NodeKind` には含まれない */
+export type DslOnlyKind = (typeof DSL_ONLY_KINDS)[number];
+
 /**
  * AWS などの固有名を、 同じ役割を表す汎用の種類に読み替える表。
  *
@@ -1082,15 +1089,16 @@ function classifyValues(values: string[], line: number, errors: DslError[]): Act
 }
 
 /**
- * 書かれた種類名を、 描画できる種類に解決する。
+ * 書かれた種類名を、 記法が扱う種類に解決する。
  *
- * 固有名 (`lambda` / `rds` 等) は読み替え表を通す。 それ以外はそのまま返す。
+ * 固有名 (`lambda` / `rds` 等) は読み替え表を通す。 記法だけが持つ種類はそのまま返し、
+ * 描画側へ渡す時に `compile.ts` の `描ける種別` が読み替える。
  */
-export function resolveNodeKind(raw: string): NodeKind {
+export function resolveNodeKind(raw: string): DslNodeKind {
   if (raw === "") return NODE_KIND_DEFAULT;
   // `Object.hasOwn` で引く。 素の添字だと `toString` 等の既定の持ち物が引けてしまい、
   // 種類として関数が返る。 呼ぶ前に受理集合で弾いてはいるが、 表を引く側でも閉じておく。
-  return Object.hasOwn(INFRA_KIND_ALIAS, raw) ? INFRA_KIND_ALIAS[raw]! : (raw as NodeKind);
+  return Object.hasOwn(INFRA_KIND_ALIAS, raw) ? INFRA_KIND_ALIAS[raw]! : (raw as DslNodeKind);
 }
 
 function numberOrUndef(s: string | undefined): number | undefined {