picoride 0.1.0

data/web/public/js/editor.js

@@ -0,0 +1,257 @@
+// Prism.js + textarea オーバーレイ方式のシンプルなコードエディタ。
+// picoruby.org/terminal の File Editor (PicoModem) と同じ構造:
+//   textarea(透明・キャレットのみ表示) の下に、Prismでハイライトした <pre><code> を重ねて表示する。
+// ビルドステップ不要(Prism.jsは <script> タグ読み込みでグローバルに window.Prism を公開する)。
+
+(function () {
+  "use strict";
+
+  const fileListEl = document.getElementById("file-list");
+  const currentFileEl = document.getElementById("current-file");
+  const saveBtn = document.getElementById("save-btn");
+  const statusEl = document.getElementById("status");
+
+  const textarea = document.getElementById("editor");
+  const highlightContent = document.getElementById("highlight-content");
+  const lineNumbersInner = document.getElementById("line-numbers-inner");
+  const scrollArea = document.querySelector(".editor-scroll-area");
+  const lineNumbers = document.getElementById("line-numbers");
+
+  let currentPath = null;
+  let savedContent = "";
+  let currentLanguage = null; // Prism.languages.xxx
+  let currentLanguageName = null; // "ruby" | "c"
+
+  // 拡張子 -> Prism言語のマッピング
+  function languageFor(path) {
+    const ext = path.split(".").pop().toLowerCase();
+    switch (ext) {
+      case "rb":
+        return { grammar: Prism.languages.ruby, name: "ruby" };
+      case "c":
+      case "h":
+        return { grammar: Prism.languages.c, name: "c" };
+      default:
+        return { grammar: Prism.languages.plain || {}, name: "none" };
+    }
+  }
+
+  function iconFor(path) {
+    return path.split(".").pop().toLowerCase();
+  }
+
+  function setStatus(message, kind) {
+    statusEl.textContent = message;
+    statusEl.className = "status" + (kind ? " " + kind : "");
+    if (message) {
+      setTimeout(() => {
+        if (statusEl.textContent === message) {
+          statusEl.textContent = "";
+          statusEl.className = "status";
+        }
+      }, 2500);
+    }
+  }
+
+  // ---- ハイライト & 行番号の再描画 ----
+
+  function escapeHtml(text) {
+    return text
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+
+  function renderHighlight() {
+    const code = textarea.value;
+
+    if (currentLanguage && currentLanguageName !== "none") {
+      highlightContent.innerHTML = Prism.highlight(code, currentLanguage, currentLanguageName);
+    } else {
+      highlightContent.innerHTML = escapeHtml(code);
+    }
+
+    // textareaの末尾に改行がある場合、<pre>の高さがずれないよう調整用の改行を足す
+    if (code.endsWith("\n")) {
+      highlightContent.innerHTML += "\n";
+    }
+
+    renderLineNumbers(code);
+  }
+
+  function renderLineNumbers(code) {
+    const lineCount = code.length === 0 ? 1 : code.split("\n").length;
+    const currentCount = lineNumbersInner.childElementCount;
+
+    if (currentCount < lineCount) {
+      const fragment = document.createDocumentFragment();
+      for (let i = currentCount + 1; i <= lineCount; i++) {
+        const div = document.createElement("div");
+        div.textContent = String(i);
+        fragment.appendChild(div);
+      }
+      lineNumbersInner.appendChild(fragment);
+    } else if (currentCount > lineCount) {
+      for (let i = currentCount; i > lineCount; i--) {
+        lineNumbersInner.removeChild(lineNumbersInner.lastChild);
+      }
+    }
+  }
+
+  function syncScroll() {
+    // highlight-layer(<pre>)は#editor(<textarea>)と同じグリッドセルに重なっており、
+    // どちらも .editor-scroll-area のスクロールに自動で追従するため、JSでの同期は不要。
+    // 行番号だけは独立したカラムなので、ここでスクロール位置を合わせる。
+    lineNumbers.scrollTop = scrollArea.scrollTop;
+  }
+
+  function updateDirtyState() {
+    const dirty = textarea.value !== savedContent;
+    saveBtn.disabled = !currentPath || !dirty;
+  }
+
+  textarea.addEventListener("input", () => {
+    renderHighlight();
+    updateDirtyState();
+  });
+
+  scrollArea.addEventListener("scroll", syncScroll);
+
+  // Tabキーでインデント挿入(デフォルトのフォーカス移動を止める)
+  textarea.addEventListener("keydown", (e) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      textarea.value = textarea.value.slice(0, start) + "  " + textarea.value.slice(end);
+      textarea.selectionStart = textarea.selectionEnd = start + 2;
+      renderHighlight();
+      updateDirtyState();
+    }
+  });
+
+  // ---- ファイル一覧・読み込み・保存 ----
+
+  async function loadFileList() {
+    try {
+      const res = await fetch("/api/files");
+      if (!res.ok) throw new Error("failed to load file list");
+      const files = await res.json();
+
+      fileListEl.innerHTML = "";
+
+      if (files.length === 0) {
+        const li = document.createElement("li");
+        li.className = "empty";
+        li.textContent = "編集可能なファイルがありません";
+        fileListEl.appendChild(li);
+        return;
+      }
+
+      for (const path of files) {
+        const li = document.createElement("li");
+        li.dataset.path = path;
+
+        const icon = document.createElement("span");
+        icon.className = `file-icon ${iconFor(path)}`;
+        icon.textContent = iconFor(path).slice(0, 1).toUpperCase();
+
+        const label = document.createElement("span");
+        label.textContent = path;
+
+        li.appendChild(icon);
+        li.appendChild(label);
+        li.addEventListener("click", () => openFile(path));
+
+        fileListEl.appendChild(li);
+      }
+    } catch (err) {
+      fileListEl.innerHTML = "";
+      const li = document.createElement("li");
+      li.className = "empty";
+      li.textContent = "ファイル一覧の取得に失敗しました";
+      fileListEl.appendChild(li);
+      console.error(err);
+    }
+  }
+
+  async function openFile(path) {
+    try {
+      setStatus("読み込み中...", "");
+      const res = await fetch(`/api/file?path=${encodeURIComponent(path)}`);
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "failed to load file");
+      }
+      const data = await res.json();
+
+      currentPath = data.path;
+      savedContent = data.content;
+
+      const lang = languageFor(data.path);
+      currentLanguage = lang.grammar;
+      currentLanguageName = lang.name;
+
+      textarea.value = data.content;
+      textarea.disabled = false;
+      renderHighlight();
+
+      currentFileEl.textContent = data.path;
+      updateDirtyState();
+      setStatus("", "");
+
+      for (const li of fileListEl.querySelectorAll("li")) {
+        li.classList.toggle("active", li.dataset.path === path);
+      }
+
+      textarea.focus();
+    } catch (err) {
+      setStatus("読み込みエラー", "error");
+      console.error(err);
+    }
+  }
+
+  async function saveFile() {
+    if (!currentPath) return;
+
+    const content = textarea.value;
+
+    try {
+      saveBtn.disabled = true;
+      setStatus("保存中...", "");
+
+      const res = await fetch("/api/file", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: currentPath, content }),
+      });
+
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "failed to save file");
+      }
+
+      savedContent = content;
+      setStatus("保存しました", "ok");
+      updateDirtyState();
+    } catch (err) {
+      setStatus("保存に失敗しました", "error");
+      saveBtn.disabled = false;
+      console.error(err);
+    }
+  }
+
+  saveBtn.addEventListener("click", saveFile);
+
+  // Ctrl/Cmd + S で保存
+  window.addEventListener("keydown", (e) => {
+    const isSaveShortcut = (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s";
+    if (isSaveShortcut) {
+      e.preventDefault();
+      saveFile();
+    }
+  });
+
+  renderLineNumbers("");
+  loadFileList();
+})();

data/web/views/index.erb

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>PicoRuby Editor (Funicular)</title>
+
+  <!-- スタイルは web/public/css/style.css をそのまま流用する -->
+  <link rel="stylesheet" href="/css/style.css">
+
+  <!--
+    Prism.js (シンタックスハイライト)
+    CDNのESM importはバージョン解決が不安定なので、
+    バージョン固定の <script> タグで読み込む方針。
+  -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-core.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-clike.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-c.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-ruby.min.js"></script>
+
+  <!--
+    ESP Web Tools (https://esphome.github.io/esp-web-tools/)。
+    <esp-web-install-button> カスタム要素を登録する。ブラウザのWeb Serial API経由で
+    ESP32にファームウェアを書き込む処理はすべてこのライブラリに任せている
+    (サーバ側は /api/firmware/manifest.json でマニフェストを返すだけ)。
+    バージョン固定のCDN読み込み方針は他のライブラリと同様。
+  -->
+  <script type="module" src="https://cdn.jsdelivr.net/npm/esp-web-tools@10.4.0/dist/web/install-button.js"></script>
+
+  <!--
+    xterm.js (ターミナル画面の描画)。
+    PicoRuby Web Terminal (picoruby.org/terminal) と同じくWeb Serial API経由で
+    実機のUSBシリアルに直結し、ここに表示する。バージョン固定のCDN読み込み方針は
+    他のライブラリと同様。
+  -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@6.0.0/css/xterm.css">
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@6.0.0/lib/xterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.11.0/lib/addon-fit.js"></script>
+
+  <!--
+    Ruby(Funicular)側から呼ぶための薄いJSラッパ。
+    Prismの細かい作法(文法オブジェクトの取り出し、末尾改行の補正)はここに閉じ込めて、
+    Ruby側は funicularHighlight(code, lang) だけ知っていればよい状態にする。
+  -->
+  <script>
+    window.funicularHighlight = function (code, lang) {
+      var grammar = Prism.languages[lang] || Prism.languages.clike;
+      // 末尾が改行だと最終行の高さが潰れてキャレットとズレるため空白を足す
+      var source = /\n$/.test(code) ? code + ' ' : code;
+      return Prism.highlight(source, grammar, lang);
+    };
+
+    // サイドバー(ファイルツリー)の自前コンテキストメニューとブラウザ標準の
+    // 右クリックメニューが同時に出てしまう問題への対処。
+    // tree_view.rb / editor_app.rb 側でもFunicularのDSL(oncontextmenu:)経由で
+    // event.preventDefaultを呼んでいるが、Funicularの合成イベントはPicoRuby.wasmを
+    // 経由する分、ブラウザが「このcontextmenuイベントのデフォルト動作をまだ
+    // キャンセルできる」タイミングに間に合わないことがある(実機でのユーザー確認で
+    // 発覚)。preventDefaultはネイティブのJSイベントハンドラ内で同期的に呼ぶ必要が
+    // あるため、ここだけはPicoRuby/Funicularのブリッジを経由しない素のJSで
+    // 直接止める(funicularHighlightと同じ「確実性が要る部分はプレーンJSに
+    // 任せる」方針)。サイドバーの外(エディタのtextarea等)は標準メニューを
+    // 残したいので、.sidebar配下かどうかをclosestで判定してそこだけ抑止する。
+    document.addEventListener('contextmenu', function (event) {
+      if (event.target.closest('.sidebar')) {
+        event.preventDefault();
+      }
+    });
+  </script>
+</head>
+<body>
+  <div id="app"><!-- Funicular がここにマウントされる --></div>
+
+  <!--
+    Ruby ソースは読み込み順がそのまま依存順になる。
+    子コンポーネント → ルートコンポーネント → 起動 の順に並べること。
+  -->
+  <script type="text/ruby" src="/ruby/components/tree_view.rb"></script>
+  <script type="text/ruby" src="/ruby/components/toolbar.rb"></script>
+  <script type="text/ruby" src="/ruby/components/project_settings_dialog.rb"></script>
+  <script type="text/ruby" src="/ruby/components/prompt_dialog.rb"></script>
+  <script type="text/ruby" src="/ruby/components/directory_browser_dialog.rb"></script>
+  <script type="text/ruby" src="/ruby/components/log_panel.rb"></script>
+  <script type="text/ruby" src="/ruby/components/menu_bar.rb"></script>
+  <script type="text/ruby" src="/ruby/components/editor_app.rb"></script>
+  <script type="text/ruby" src="/ruby/main.rb"></script>
+
+  <!--
+    PicoRuby.wasm 本体。Funicular は同梱されている。
+    text/ruby スクリプトを走査する側なので、必ず最後に置く。
+  -->
+  <script src="https://cdn.jsdelivr.net/npm/@picoruby/wasm-wasi@4.0.2/dist/init.iife.js"></script>
+</body>
+</html>

metadata

@@ -0,0 +1,132 @@
+--- !ruby/object:Gem::Specification
+name: picoride
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- youchan
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sinatra
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: puma
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rackup
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: perfect_toml
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A Integrated develop emvironment for PicoRuby ESP32
+email:
+- youchan@gmail.com
+executables:
+- picoride
+extensions: []
+extra_rdoc_files: []
+files:
+- ".claude/launch.json"
+- CHANGELOG.md
+- CLAUDE.md
+- CODE_OF_CONDUCT.md
+- Dockerfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- docker/esp32/Dockerfile
+- docker/pico/Dockerfile
+- exe/picoride
+- lib/picoride.rb
+- lib/picoride/background_job.rb
+- lib/picoride/project_store.rb
+- lib/picoride/r2p2_state.rb
+- lib/picoride/server.rb
+- lib/picoride/version.rb
+- sig/picoruby/esp32/ide.rbs
+- web/funicular/README.md
+- web/funicular/ruby/components/directory_browser_dialog.rb
+- web/funicular/ruby/components/editor_app.rb
+- web/funicular/ruby/components/log_panel.rb
+- web/funicular/ruby/components/menu_bar.rb
+- web/funicular/ruby/components/project_settings_dialog.rb
+- web/funicular/ruby/components/prompt_dialog.rb
+- web/funicular/ruby/components/toolbar.rb
+- web/funicular/ruby/components/tree_view.rb
+- web/funicular/ruby/main.rb
+- web/public/css/style.css
+- web/public/js/editor.js
+- web/views/index.erb
+homepage: https://github.com/youchan/picoride
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/youchan/picoride
+  source_code_uri: https://github.com/youchan/picoride
+  changelog_uri: https://github.com/youchan/picoride/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.6
+specification_version: 4
+summary: PicoRuby ESP32 IDE
+test_files: []