penframe/docs/design.md

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

## Ph1 PoC段階

## アプリの概要及び目的

シンプルなDSL(ドメイン固有言語)を用いてワイヤーフレームやUI構造を記述し、視覚的にレンダリングする軽量ツール

## 機能

- DSLパーサ： ユーザーからの入力をASTに変換する
    - PC / タブレット / スマホ** それぞれの画面サイズに対応(`@app` 構文)   
    - 見出し(@h1 / @h2 / @h3)やコンポーネントの位置指定(x / y) が可能 
- ASTからSVGへ出力する
    - SVGファイルを出力する

### DSLパース構文

```pengent
@app pc { width: 1440px,height: 1024px,scale: 0.5}
```

width及びheight,scalehaは省略できる

## 技術スタック

### 言語・フレームワーク
- TypeScript: 型安全性と開発効率の向上
- Node.js: 実行環境

### 主要ライブラリ
- PEG.js: DSLパーサー実装（PEG文法による直感的な文法定義）
- svg.js: SVG生成
- Commander: CLIインターフェース
- Jest: テストフレームワーク

## プロジェクト構造

```
penframe/
├── src/
│   ├── parser/           # DSLパーサー関連
│   │   ├── grammar.pegjs # PEG文法定義
│   │   ├── parser.ts     # パーサー実装
│   │   └── ast.ts        # AST定義
│   ├── renderer/         # SVGレンダリング
│   │   ├── svg.ts        # SVG生成
│   │   └── components/   # コンポーネント定義
│   ├── cli/             # CLI関連
│   │   └── index.ts     # CLIエントリーポイント
│   ├── types/           # 型定義
│   └── utils/           # ユーティリティ関数
├── tests/               # テストファイル
├── examples/           # サンプルDSL
└── docs/              # ドキュメント
```

## 実装フェーズ

### Phase 1: 基本機能実装
1. DSLパーサーの実装
   - PEG文法の定義
   - パーサーの実装
   - ASTの定義と生成

2. SVGレンダラーの実装
   - 基本的なコンポーネントの実装
   - SVG出力機能の実装

3. CLIインターフェースの実装
   - コマンドライン引数の処理
   - ファイル入出力の実装

### Phase 2: 機能拡張
1. レスポンシブ対応の強化
2. コンポーネントライブラリの拡充
3. エラーハンドリングの改善

### Phase 3: 最適化
1. パフォーマンスチューニング
2. コード品質の向上
3. テストカバレッジの向上

## 開発環境セットアップ

```bash
# プロジェクトの初期化
npm init -y

# 依存関係のインストール
npm install typescript @types/node
npm install pegjs svg.js commander
npm install -D jest @types/jest ts-jest @types/pegjs
```

## 今後の課題

1. エディタの実装（シンタックスハイライト、補完機能）
2. コンポーネントのカスタマイズ機能
3. エクスポート機能の拡張（PNG, PDF等）
4. プレビュー機能の実装

## 文法定義の例

```pegjs
// grammar.pegjs
{
  function createApp(type, props) {
    return {
      type: 'app',
      device: type,
      ...props
    };
  }
}

Start
  = App

App
  = "@app" _ device:Device _ "{" _ props:Properties _ "}" {
    return createApp(device, props);
  }

Device
  = "pc" / "tablet" / "mobile"

Properties
  = prop:Property rest:(_ Property)* {
    return Object.assign({}, prop, ...rest.map(r => r[1]));
  }

Property
  = key:Identifier _ ":" _ value:Value {
    return { [key]: value };
  }

Value
  = Number / String

// ... その他の文法規則
```