penframe/docs/details.md

A lightweight DSL-based wireframe and UI structure visualization tool.

# PEG.js Grammar Implementation

## Overview
PEG.jsを使用して、ペンフレームのDSLをパースするための文法を実装しています。

## 文法の基本構造

### 現在の実装
現在は最も基本的な数値のパースのみを実装しています：

```pegjs
{
  // パース結果をそのまま返す
  function parseNumber(digits) {
    return parseInt(digits.join(""), 10);
  }
}

Start
  = Number

Number
  = digits:[0-9]+ {
    return parseNumber(digits);
  }
```

### 文法の説明

1. **初期化ブロック**
   - `{ ... }` で囲まれた部分は、パーサーの初期化時に実行されるJavaScriptコードです
   - 現在は `parseNumber` 関数を定義しており、数字の配列を整数に変換します

2. **Start ルール**
   - パーサーの開始点となるルールです
   - 現在は `Number` ルールを呼び出します

3. **Number ルール**
   - `[0-9]+` は1つ以上の数字にマッチします
   - `digits:` はマッチした数字の配列を `digits` という変数に格納します
   - `{ ... }` 内のコードは、マッチが成功した時に実行されます

## 今後の拡張予定

1. **アプリケーション定義の追加**
   ```pegjs
   App = "@app" _ device:Device _ "{" _ props:Properties _ "}"
   ```

2. **プロパティのサポート**
   ```pegjs
   Properties = head:Property tail:(_ Property)*
   Property = key:Identifier _ ":" _ value:Value
   ```

3. **値の型の追加**
   - 数値（整数、小数）
   - 文字列
   - 真偽値
   - 配列
   - オブジェクト

## 使用例

### 現在の実装
```typescript
// 入力: "123"
// 出力: 123 (number)
```

### 将来の実装
```typescript
// 入力:
@app pc {
  width: 1440
  height: 1024
  scale: 0.5
  title: "Sample Wireframe"
}

// 出力:
{
  type: "app",
  device: "pc",
  width: 1440,
  height: 1024,
  scale: 0.5,
  title: "Sample Wireframe"
}
```

## 注意点
- PEG.jsの文法は、上から下に向かって評価されます
- 各ルールは最初にマッチしたパターンを使用します
- 空白や改行の処理には特別な注意が必要です 

### PEG.js 自体は「ファイル分割」の仕組みをサポートしていません。