picoride 0.1.0

data/lib/picoride/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Picoride
+  VERSION = "0.1.0"
+end

data/lib/picoride.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_relative "picoride/version"
+
+module Picoride
+  class Error < StandardError; end
+end
+
+require_relative "picoride/background_job"
+require_relative "picoride/r2p2_state"
+require_relative "picoride/project_store"

data/sig/picoruby/esp32/ide.rbs

@@ -0,0 +1,8 @@
+module Picoruby
+  module Esp32
+    module Ide
+      VERSION: String
+      # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+    end
+  end
+end

data/web/funicular/README.md

@@ -0,0 +1,111 @@
+# web/funicular
+
+PicoRuby.wasm + [Funicular](https://github.com/picoruby/funicular)(hasumikin作)で書いた
+エディタのフロントエンド。**JavaScriptを書かずに、ブラウザ側のロジックを全部Rubyで書く**構成。
+
+バックエンド(Sinatra)は `lib/picoride/server.rb`、CSSは `../public/` (= `web/public/`)のものをそのまま使う。
+このディレクトリにはフロントエンドのRubyコードとHTMLだけを置く。
+
+## 構成
+
+```
+web/funicular/
+├── index.html                     # PicoRuby.wasm と Prism.js の読み込み + マウント先
+└── ruby/
+    ├── main.rb                    # Funicular.start(EditorApp, container: 'app')
+    └── components/
+        ├── tree_view.rb           # 汎用ツリー表示(表示専用。ファイル一覧に限らない)
+        ├── toolbar.rb             # ファイル名・保存ボタン・ステータス(表示専用)
+        └── editor_app.rb          # ルート。状態・サーバ通信・ターミナルはすべてここ
+```
+
+(この一覧はサンプルの主要ファイルのみ。実際には `menu_bar.rb` `log_panel.rb`
+`project_settings_dialog.rb` 等もある。最新の一覧は `views/index.erb` の
+`<script type="text/ruby">` タグの並びを見るのが確実)
+
+`index.html` の `<script type="text/ruby" src="...">` は**書いた順に実行される**ので、
+子コンポーネント → ルート → `main.rb` の順に並べること。
+
+## 起動
+
+```console
+$ bundle install
+$ ruby app/app.rb
+```
+
+- `/` … Funicular版エディタ
+- `/legacy` … 旧エディタ(素のJavaScript + Prism.js版)。比較用に残してある
+
+`lib/picoride/server.rb` 側に、`/ruby/**/*.rb` を `web/funicular/ruby/` から配信するルートを足してある。
+
+## 設計メモ
+
+### コンポーネント分割
+
+状態(ファイル一覧・編集中パス・バッファ・保存済み内容・ターミナル接続状態)は
+`EditorApp` が一手に持ち、`TreeView` と `Toolbar` は props を受け取って描画するだけの
+表示専用にしている。子から親へは props で渡した lambda (`on_select` / `on_save`) を
+呼び返す。
+
+**注意**: 子コンポーネント(`component(SomeClass, ...)`)は、呼び出す親が
+再描画されるたびに `initialize_state` からもう一度作り直される(ルートコンポーネント
+だけがマウント1回を保証される)。そのため「一度だけ初期化して使い回したい副作用」
+(外部ライブラリのインスタンス化、接続、イベントリスナー登録など)を持つロジックは
+子コンポーネントに切り出さず、`EditorApp` 側に書くこと。実際にターミナル機能
+(xterm.js + Web Serial)をこのルールに反して別コンポーネントに切り出した結果、
+「タブを行き来すると接続が切れる」不具合を起こした(詳細は `CLAUDE.md` 参照)。
+
+Funicularのライフサイクルは `initialize_state` → `render` → `component_mounted` →
+(state更新のたび `render` / `component_updated`) → `component_unmounted`。
+
+### textarea は「非制御」にしている
+
+`render` で `value:` を出力していない。VDOMが入力のたびに value を書き戻すと
+キャレットが末尾に飛ぶため。ファイルを切り替えたときだけ
+`refs[:editor][:value] = content` で流し込んでいる。
+
+### ハイライト層は ref + innerHTML
+
+Prismが返すのはHTML文字列なので、VDOMでは表現できない。
+ハイライト用の `<code>` は**子を持たない空要素**としてVDOMに描画し、
+`refs[:highlight][:innerHTML]` に直接書き込む。
+子を持たない要素は再描画時の差分がゼロなので、書き込んだHTMLが消されることはない。
+
+同期のタイミングは `component_updated` で、
+`content` か `current_path` が変わったときだけ再ハイライトする
+(`Funicular::Component#patch` は `component_updated` を引数なしで呼ぶ仕様なので、
+前回描画時の値は `@prev_highlight_content` / `@prev_highlight_path` に自前で持っている)。
+
+Prism固有の作法(文法オブジェクトの取り出し、末尾改行の補正)は `index.html` の
+`window.funicularHighlight(code, lang)` に閉じ込めてあり、Ruby側は
+`JS.global.funicularHighlight(...)` を呼ぶだけ。
+
+### 行番号はVDOMで描画
+
+行番号は単なるテキストなので innerHTML を使わず、`div { n.to_s }` の素直な
+VDOM描画にしている。スクロール追従は `onscroll:` ハンドラで
+`refs[:lines][:scrollTop]` を同期。
+
+### スクロールのズレ対策
+
+`.editor-scroll-area` に `display: grid` を指定し、ハイライト層と textarea を
+`grid-area: 1 / 1` で重ねる方式(`web/public/css/style.css`)。
+これは旧エディタから引き継いだCSSで、textareaが要素内部で独自スクロールして
+キャレットとハイライトがズレる問題への対処。
+
+## 動作確認済み
+
+ブラウザで一覧表示・ファイル選択・シンタックスハイライト・保存を確認済み。
+実装時に不明だった点は以下の通りだった:
+
+- `component_updated` は `Funicular::Component#patch` から**引数なし**で呼ばれる
+  (`component_updated(prev_state)` ではなく `component_updated`)。差分検知は
+  インスタンス変数で自前管理する必要がある
+
+## 既知の制約(旧エディタから引き継ぎ)
+
+- 自動インデント未実装(Tabはスペース2つを挿入するだけ)
+- 新規作成/削除/リネームAPIなし。既存ファイルの上書き保存のみ
+- 同時編集の競合制御なし(後勝ち)
+- 対応拡張子は `.rb` `.c` `.h`。増やす場合は `app/app.rb` の `ALLOWED_EXTENSIONS`、
+  `index.html` のPrismコンポーネント読み込み、`editor_app.rb` の `LANGUAGES` の3箇所

data/web/funicular/ruby/components/directory_browser_dialog.rb

@@ -0,0 +1,212 @@
+# 「プロジェクトを開く」のディレクトリ選択UI。絶対パスを直接テキスト入力させる
+# 代わりに、よくあるファイルビューアのようにパンくず("/"区切りのクリック可能な
+# セグメント)とサブディレクトリの一覧でファイルシステムを辿れるようにしてある。
+#
+# EditorAppの「子コンポーネントは親の再描画のたびに作り直される」制約により、
+# このコンポーネント自身はinitialize_stateを持たない(表示専用)。現在地・
+# 一覧・読み込み中/エラー状態は全部EditorApp側のstate[:project_browser]に
+# 持たせ、propsとして受け取るだけにしてある(TreeViewと同じ設計)。新規フォルダ名の
+# 入力欄だけはPromptDialogと同じ理由(ポーリング中の親再描画で入力中の文字が
+# 消える)でrefベースの非制御コンポーネントにしてある。
+#
+# props:
+#   path:              現在表示しているディレクトリの絶対パス(初回ロード前はnil)
+#   parent:            1つ上のディレクトリの絶対パス(これ以上は上がれないならnil)
+#   entries:           [{name:, path:}, ...] サブディレクトリの一覧
+#   loading:           一覧取得中かどうか
+#   error:             ナビゲーション(移動)時のエラーメッセージ(あれば)
+#   creating:          「新しいフォルダ」の名前入力欄を表示するかどうか
+#   create_error:      フォルダ作成時のエラーメッセージ(あれば)
+#   open_error:        「このディレクトリを開く」実行時のエラーメッセージ(あれば)
+#   on_navigate:       移動先の絶対パスを渡して呼ばれるlambda(パンくず・一覧項目・上へ)
+#   on_open:           「このディレクトリを開く」ボタン
+#   on_start_create:   「新しいフォルダ」ボタン(名前入力欄を開く)
+#   on_confirm_create: 入力された名前(String)を渡して呼ばれるlambda
+#   on_cancel_create:  新規フォルダ名入力のキャンセル
+#   on_cancel:         ダイアログ全体のキャンセル(閉じる)
+class DirectoryBrowserDialog < Funicular::Component
+  def render
+    div(class: 'dialog-overlay') do
+      div(class: 'dialog directory-browser-dialog') do
+        h2 { 'プロジェクトを開く' }
+        render_breadcrumb
+        div(class: 'directory-browser-toolbar') do
+          render_up_button
+          render_new_folder_button
+        end
+        render_navigate_error
+        render_entry_list
+        render_create_folder_row if props[:creating]
+        render_open_error
+        div(class: 'dialog-actions') do
+          button(class: 'dialog-cancel', onclick: :handle_cancel) { 'キャンセル' }
+          render_open_button
+        end
+      end
+    end
+  end
+
+  def handle_cancel(event)
+    event.preventDefault
+    on_cancel = props[:on_cancel]
+    on_cancel.call if on_cancel
+  end
+
+  def handle_open(event)
+    event.preventDefault
+    on_open = props[:on_open]
+    on_open.call if on_open
+  end
+
+  def handle_up(event)
+    event.preventDefault
+    navigate_to(props[:parent])
+  end
+
+  def handle_start_create(event)
+    event.preventDefault
+    on_start_create = props[:on_start_create]
+    on_start_create.call if on_start_create
+  end
+
+  def handle_cancel_create(event)
+    event.preventDefault
+    on_cancel_create = props[:on_cancel_create]
+    on_cancel_create.call if on_cancel_create
+  end
+
+  def handle_confirm_create(event)
+    event.preventDefault
+    confirm_create
+  end
+
+  # Enterキーでも作成を確定できるようにする(PromptDialogと同じ)。
+  def handle_create_keydown(event)
+    confirm_create if event[:key].to_s == 'Enter'
+  end
+
+  private
+
+  def navigate_to(path)
+    return if path.to_s.empty?
+    on_navigate = props[:on_navigate]
+    on_navigate.call(path) if on_navigate
+  end
+
+  def confirm_create
+    node = refs[:new_folder_input]
+    return unless node
+
+    on_confirm_create = props[:on_confirm_create]
+    on_confirm_create.call(node[:value].to_s) if on_confirm_create
+  end
+
+  # 例: "/home/youchan/Projects" ->
+  #   [{label: '/', path: '/'}, {label: 'home', path: '/home'},
+  #    {label: 'youchan', path: '/home/youchan'}, {label: 'Projects', path: '/home/youchan/Projects'}]
+  # PicoRuby.wasm上ではFile系メソッドの対応が不確かなため、素の文字列分割で求める
+  # (menu_bar.rbのproject_labelと同じ理由)。
+  def breadcrumb_segments
+    path = props[:path].to_s
+    return [] if path.empty?
+
+    parts = path.split('/').reject { |p| p.empty? }
+    crumbs = [{ label: '/', path: '/' }]
+    acc = ''
+    parts.each do |part|
+      acc = "#{acc}/#{part}"
+      crumbs << { label: part, path: acc }
+    end
+    crumbs
+  end
+
+  def render_breadcrumb
+    div(class: 'directory-browser-breadcrumb') do
+      breadcrumb_segments.each_with_index do |segment, index|
+        span(class: 'breadcrumb-sep') { '/' } if index.positive?
+        render_breadcrumb_segment(segment)
+      end
+    end
+  end
+
+  def render_breadcrumb_segment(segment)
+    if segment[:path] == props[:path]
+      span(class: 'breadcrumb-segment breadcrumb-current') { segment[:label] }
+    else
+      span(class: 'breadcrumb-segment', onclick: -> { navigate_to(segment[:path]) }) { segment[:label] }
+    end
+  end
+
+  def render_up_button
+    if props[:parent].to_s.empty?
+      button(class: 'directory-browser-up', disabled: true) { '↑ 上の階層へ' }
+    else
+      button(class: 'directory-browser-up', onclick: :handle_up) { '↑ 上の階層へ' }
+    end
+  end
+
+  def render_new_folder_button
+    button(class: 'directory-browser-new-folder', onclick: :handle_start_create) { '新しいフォルダ…' }
+  end
+
+  def render_navigate_error
+    return if props[:error].to_s.empty?
+    div(class: 'prompt-error') { props[:error].to_s }
+  end
+
+  def render_entry_list
+    div(class: 'directory-browser-list') do
+      if props[:loading]
+        div(class: 'directory-browser-message') { '読み込み中…' }
+      elsif (props[:entries] || []).empty?
+        div(class: 'directory-browser-message') { '(サブフォルダがありません)' }
+      else
+        (props[:entries] || []).each { |entry| render_entry(entry) }
+      end
+    end
+  end
+
+  # entryはJSON(GET /api/browseのentries)をそのまま渡しているため、
+  # パース結果がシンボルキーになるとは限らない(文字列キーのHashになりうる)。
+  # value_of(menu_bar.rbのproject_label付近と同じ理由)で両対応させる。
+  def render_entry(entry)
+    path = value_of(entry, 'path')
+    div(class: 'directory-browser-item', key: path, onclick: -> { navigate_to(path) }) do
+      span(class: 'directory-browser-item-icon') { '📁' }
+      span(class: 'directory-browser-item-name') { value_of(entry, 'name') }
+    end
+  end
+
+  def render_create_folder_row
+    div(class: 'directory-browser-create') do
+      tag(:input, type: 'text', ref: :new_folder_input, placeholder: '新しいフォルダ名',
+                  onkeydown: :handle_create_keydown)
+      button(class: 'dialog-confirm', onclick: :handle_confirm_create) { '作成' }
+      button(class: 'dialog-cancel', onclick: :handle_cancel_create) { 'キャンセル' }
+      render_create_error
+    end
+  end
+
+  def render_create_error
+    return if props[:create_error].to_s.empty?
+    div(class: 'prompt-error') { props[:create_error].to_s }
+  end
+
+  def render_open_error
+    return if props[:open_error].to_s.empty?
+    div(class: 'prompt-error') { props[:open_error].to_s }
+  end
+
+  def render_open_button
+    if props[:path].to_s.empty?
+      button(class: 'dialog-confirm', disabled: true) { 'このディレクトリを開く' }
+    else
+      button(class: 'dialog-confirm', onclick: :handle_open) { 'このディレクトリを開く' }
+    end
+  end
+
+  def value_of(data, key)
+    return nil unless data
+    data[key] || data[key.to_sym]
+  end
+end