ruwi 0.10.0

data/examples/npm-packages/runtime/todos/index.spec.js

@@ -0,0 +1,161 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Todos Example", () => {
+  // Clear localStorage before each test to ensure clean state
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/examples/npm-packages/runtime/todos/index.html?env=DEV");
+    await page.evaluate(() => localStorage.clear());
+    await page.reload();
+    await page.waitForTimeout(3000);
+  });
+
+  test("should display todos app and handle basic add/remove operations", async ({
+    page,
+  }) => {
+    // Check the page title and basic layout
+    await expect(page).toHaveTitle("Todos");
+    await expect(page.locator("#app h1")).toHaveText("My TODOs");
+
+    // Check new todo form elements
+    const todoInput = page.locator("#todo-input");
+    const addButton = page.locator("button").first();
+    await expect(page.locator('label[for="todo-input"]')).toHaveText(
+      "New TODO"
+    );
+    await expect(todoInput).toBeVisible();
+    await expect(addButton).toHaveText("Add");
+
+    // Check that initial todos are displayed (from component state)
+    const todoItems = page.locator("li");
+    await expect(todoItems).toHaveCount(3);
+    await expect(page.locator("li span")).toHaveCount(3);
+
+    // Test add button validation - initially disabled (empty input)
+    await expect(addButton).toBeDisabled();
+
+    // Type less than 3 characters - should keep button disabled
+    await todoInput.fill("ab");
+    await page.waitForTimeout(100);
+    await expect(addButton).toBeDisabled();
+
+    // Type 3 or more characters - should enable the button
+    await todoInput.fill("New test todo");
+    await page.waitForTimeout(100);
+    await expect(addButton).toBeEnabled();
+
+    // Add the todo via button click
+    const initialTodoCount = await page.locator("li").count();
+    await addButton.click();
+    await page.waitForTimeout(100);
+
+    await expect(page.locator("li")).toHaveCount(initialTodoCount + 1);
+    await expect(todoInput).toHaveValue("");
+    await expect(addButton).toBeDisabled();
+    await expect(page.locator("li span").last()).toHaveText("New test todo");
+
+    // Test adding todo with Enter key
+    await todoInput.fill("Todo added with Enter");
+    await page.waitForTimeout(100);
+    const currentTodoCount = await page.locator("li").count();
+
+    await todoInput.press("Enter");
+    await page.waitForTimeout(100);
+
+    await expect(page.locator("li")).toHaveCount(currentTodoCount + 1);
+    await expect(todoInput).toHaveValue("");
+    await expect(page.locator("li span").last()).toHaveText(
+      "Todo added with Enter"
+    );
+
+    // Test that Enter doesn't work with less than 3 characters
+    await todoInput.fill("ab");
+    await page.waitForTimeout(100);
+    const countBeforeInvalidEnter = await page.locator("li").count();
+
+    await todoInput.press("Enter");
+    await page.waitForTimeout(100);
+
+    await expect(page.locator("li")).toHaveCount(countBeforeInvalidEnter);
+    await expect(todoInput).toHaveValue("ab");
+
+    // Test remove todo functionality
+    const countBeforeRemove = await page.locator("li").count();
+    await page.locator("li button").first().click();
+    await page.waitForTimeout(100);
+
+    await expect(page.locator("li")).toHaveCount(countBeforeRemove - 1);
+  });
+
+  test("should handle todo editing operations", async ({ page }) => {
+    // Get the original text of the first todo
+    const originalText = await page.locator("li span").first().textContent();
+
+    // Test entering edit mode by double-clicking
+    await page.locator("li span").first().dblclick();
+    await page.waitForTimeout(100);
+
+    // Should show edit input and buttons
+    await expect(page.locator('li input[type="text"]').first()).toBeVisible();
+    await expect(page.locator("li button").first()).toHaveText("Save");
+    await expect(page.locator("li button").nth(1)).toHaveText("Cancel");
+
+    // Test saving edited todo
+    const editInput = page.locator('li input[type="text"]').first();
+    await editInput.fill("Edited todo text");
+    await page.waitForTimeout(100);
+
+    await page.locator("li button").first().click(); // Save button
+    await page.waitForTimeout(100);
+
+    // Should exit edit mode and show updated text
+    await expect(page.locator("li span").first()).toHaveText(
+      "Edited todo text"
+    );
+    await expect(
+      page.locator('li input[type="text"]').first()
+    ).not.toBeVisible();
+
+    // Test canceling edit operation
+    await page.locator("li span").first().dblclick();
+    await page.waitForTimeout(100);
+
+    const editInput2 = page.locator('li input[type="text"]').first();
+    await editInput2.fill("This should be cancelled");
+    await page.waitForTimeout(100);
+
+    await page.locator("li button").nth(1).click(); // Cancel button
+    await page.waitForTimeout(100);
+
+    // Should exit edit mode and show previous text (not cancelled text)
+    await expect(page.locator("li span").first()).toHaveText(
+      "Edited todo text"
+    );
+    await expect(
+      page.locator('li input[type="text"]').first()
+    ).not.toBeVisible();
+  });
+
+  test("should persist todos in localStorage", async ({ page }) => {
+    // Initial count should be 3 (from component state)
+    await expect(page.locator("li")).toHaveCount(3);
+
+    // Add a new todo
+    const todoInput = page.locator("#todo-input");
+    await todoInput.fill("Persistent todo");
+    await page.locator("button").first().click();
+    await page.waitForTimeout(100);
+
+    // Should now have 4 todos
+    await expect(page.locator("li")).toHaveCount(4);
+
+    // Reload the page
+    await page.reload();
+    await page.waitForTimeout(3000);
+
+    // Should still have 4 todos (loaded from localStorage)
+    await expect(page.locator("li")).toHaveCount(4);
+
+    // Should still contain the persistent todo
+    await expect(page.locator("li span")).toContainText(["Persistent todo"]);
+  });
+});

data/examples/npm-packages/runtime/todos/todos_repository.rb

@@ -0,0 +1,23 @@
+require "json"
+
+# Repository class for managing todos in local storage
+class TodosRepository
+  class << self
+    # Read todos from local storage
+    # @return [Array] Array of todo items
+    def read_todos
+      todos_json = JS.global[:localStorage].getItem('todos') || '[]'
+      JSON.parse(todos_json.to_s).map do |todo|
+        { id: todo["id"], text: todo["text"] }
+      end
+    end
+
+    # Write todos to local storage
+    # @param todos [Array] Array of todo items to be stored
+    # @return [void]
+    def write_todos(todos)
+      todos_json = JSON.generate(todos)
+      JS.global[:localStorage].setItem('todos', todos_json)
+    end
+  end
+end

data/examples/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "gem",
+  "private": true,
+  "version": "0.0.1",
+  "description": "A Ruby gem for the ruwi framework",
+  "license": "MIT",
+  "author": "t0yohei <k.t0yohei@gmail.com>",
+  "type": "module",
+  "scripts": {
+    "serve": "npx http-server . -o './gem' --cors -P 'http://localhost:8080?' -c-1"
+  }
+}

data/examples/src/counter/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Counter</title>
+    <script type="module">
+      import { DefaultRubyVM } from "https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.2/dist/browser/+esm";
+      const response = await fetch("../../src.wasm");
+      const module = await WebAssembly.compileStreaming(response);
+      const { vm } = await DefaultRubyVM(module);
+      vm.evalAsync(`
+        require "ruwi"
+        require_relative './src/counter/index.rb'
+      `);
+    </script>
+  </head>
+  <body>
+    <h1>Counter</h1>
+
+    <div id="app-a"></div>
+    <div id="app-b"></div>
+  </body>
+</html>

data/examples/src/counter/index.rb

@@ -0,0 +1,60 @@
+# Counter component using the latest component-based API with TemplateParser
+CounterComponent = Ruwi.define_component(
+  # Initialize component state
+  state: ->(props) {
+    { count: props[:count] || 0 }
+  },
+
+  # Render the counter component
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <div>{state[:count]}</div>
+        <!-- Both ButtonComponent and button-component are valid -->
+        <ButtonComponent
+          label="Increment"
+          on="{ click_button: -> { increment } }">
+        </ButtonComponent>
+        <button-component
+          label="Decrement"
+          on="{ click_button: -> { decrement } }"
+        />
+      </div>
+    HTML
+},
+
+  # Component methods
+  methods: {
+    # Increment the counter
+    increment: ->() {
+      update_state(count: state[:count] + 1)
+    },
+
+    # Decrement the counter
+    decrement: ->() {
+      update_state(count: state[:count] - 1)
+    }
+  }
+)
+
+# Button component - reusable button with click handler
+ButtonComponent = Ruwi.define_component(
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <button on="{ click: ->() { emit('click_button') } }">
+        {props[:label]}
+      </button>
+    HTML
+  }
+)
+
+# app_a to be destroyed
+app_a = Ruwi::App.create(CounterComponent, count: 0)
+app_element_a = JS.global[:document].getElementById("app-a")
+app_a.mount(app_element_a)
+app_a.unmount
+
+# app_b to be mounted
+app_b = Ruwi::App.create(CounterComponent, count: 10)
+app_element_b = JS.global[:document].getElementById("app-b")
+app_b.mount(app_element_b)

data/examples/src/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>My App</title>
+    <script type="module">
+      import { DefaultRubyVM } from "https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.2/dist/browser/+esm";
+      const response = await fetch("./src.wasm");
+      const module = await WebAssembly.compileStreaming(response);
+      const { vm } = await DefaultRubyVM(module);
+      vm.evalAsync(`
+        require "ruwi"
+        require_relative './src/index.rb'
+      `);
+    </script>
+  </head>
+  <body>
+    <h1>My App</h1>
+    <div id="app"></div>
+  </body>
+</html>

data/examples/src/index.rb

@@ -0,0 +1,26 @@
+# Simple Hello World component
+HelloComponent = Ruwi.define_component(
+  state: ->(props) {
+    { message: props[:message] || "Hello, Ruby WASM UI!" }
+  },
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <h2>{state[:message]}</h2>
+        <button on="{ click: -> { update_message } }">
+          Click me!
+        </button>
+      </div>
+    HTML
+  },
+  methods: {
+    update_message: ->() {
+      update_state(message: "You clicked the button!")
+    }
+  }
+)
+
+# Create and mount the app
+app = Ruwi::App.create(HelloComponent, message: "Hello, Ruby WASM UI!")
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

data/examples/src/todos/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Todos</title>
+    <script type="module">
+      import { DefaultRubyVM } from "https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.2/dist/browser/+esm";
+      const response = await fetch("../../src.wasm");
+      const module = await WebAssembly.compileStreaming(response);
+      const { vm } = await DefaultRubyVM(module);
+      vm.evalAsync(`
+        require "ruwi"
+        require_relative './src/todos/todos_repository.rb'
+        require_relative './src/todos/index.rb'
+      `);
+    </script>
+  </head>
+  <body>
+    <h1>Todos</h1>
+
+    <div id="app"></div>
+  </body>
+</html>

data/examples/src/todos/index.rb

@@ -0,0 +1,237 @@
+# Main App component - coordinates all other components
+AppComponent = Ruwi.define_component(
+  # Initialize application state
+  state: ->(props) {
+    {
+      todos: [
+        { id: rand(10000), text: "Walk the dog" },
+        { id: rand(10000), text: "Water the plants" },
+        { id: rand(10000), text: "Sand the chairs" }
+      ]
+    }
+  },
+
+  on_mounted: -> {
+    update_state(todos: TodosRepository.read_todos)
+  },
+
+  # Render the complete application
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <template>
+        <h1>My TODOs</h1>
+        <CreateTodoComponent
+          on="{ add: ->(text) { add_todo(text) } }"
+        />
+        <TodoListComponent
+          todos="{state[:todos]}"
+          on="{
+            remove: ->(id) { remove_todo(id) },
+            edit: ->(payload) { edit_todo(payload) }
+          }"
+        />
+      </template>
+    HTML
+  },
+
+  # Component methods
+  methods: {
+    # Add a new TODO to the list
+    # @param text [String] The TODO text
+    add_todo: ->(text) {
+      todo = { id: rand(10000), text: text }
+      new_todos = state[:todos] + [todo]
+      update_state(todos: new_todos)
+      TodosRepository.write_todos(new_todos)
+    },
+
+    # Remove a TODO from the list
+    # @param id [Integer] Id of TODO to remove
+    remove_todo: ->(id) {
+      new_todos = state[:todos].dup
+      new_todos.delete_at(new_todos.index { |todo| todo[:id] == id })
+      update_state(todos: new_todos)
+      TodosRepository.write_todos(new_todos)
+    },
+
+    # Edit an existing TODO
+    # @param payload [Hash] Contains edited text and index
+    edit_todo: ->(payload) {
+      edited = payload[:edited]
+      id = payload[:id]
+      new_todos = state[:todos].dup
+      new_todos[new_todos.index { |todo| todo[:id] == id }] = new_todos[new_todos.index { |todo| todo[:id] == id }].merge(text: edited)
+      update_state(todos: new_todos)
+      TodosRepository.write_todos(new_todos)
+    }
+  }
+)
+
+# CreateTodo component - handles new TODO input
+CreateTodoComponent = Ruwi.define_component(
+  # Initialize component state
+  state: ->(props) {
+    { text: "" }
+  },
+
+  # Render the new TODO input form
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <label for="todo-input" type="text">New TODO</label>
+        <input
+          type="text"
+          id="todo-input"
+          value="{state[:text]}"
+          on="{
+            input: ->(e) { update_state(text: e[:target][:value]) },
+            keydown: ->(e) {
+              if e[:key] == 'Enter' && state[:text].to_s.length >= 3
+                add_todo
+              end
+            }
+          }"
+        />
+        <button disabled="{state[:text].to_s.length < 3}" on="{ click: ->() { add_todo } }">
+          Add
+        </button>
+      </div>
+    HTML
+  },
+
+  # Component methods
+  methods: {
+    # Add a new TODO and emit event to parent
+    add_todo: ->() {
+      emit("add", state[:text])
+      update_state(text: "")
+    }
+  }
+)
+
+# TodoList component - manages the list of TODO items
+TodoListComponent = Ruwi.define_component(
+  # Render the TODO list
+  template: ->() {
+    todos = props[:todos]
+
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <ul>
+        <TodoItemComponent
+          r-for="{todo in todos}"
+          key="{todo[:id]}"
+          todo="{todo[:text]}"
+          id="{todo[:id]}"
+          on="{
+            remove: ->(id) { emit('remove', id) },
+            edit: ->(payload) { emit('edit', payload) }
+          }"
+        />
+      </ul>
+    HTML
+  },
+)
+
+# TodoItem component - handles individual TODO items
+TodoItemComponent = Ruwi.define_component(
+  # Initialize component state with editing capabilities
+  state: ->(props) {
+    {
+      original: props[:todo],
+      edited: props[:todo],
+      is_editing: false
+    }
+  },
+
+  # Render TODO item using r-if and r-else for conditional rendering
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <template>
+        <TodoItemEditComponent
+          r-if="{state[:is_editing]}"
+          edited="{state[:edited]}"
+          on="{
+            input: ->(value) { input_value(value) },
+            save: ->() { save_edition },
+            cancel: ->() { cancel_edition }
+          }"
+        />
+        <TodoItemViewComponent
+          r-else
+          original="{state[:original]}"
+          id="{props[:id]}"
+          on="{
+            editing: ->() { editing },
+            remove: ->(id) { emit('remove', id) }
+          }"
+        />
+      </template>
+    HTML
+  },
+
+  # Component methods
+  methods: {
+    input_value: ->(value) {
+      update_state(edited: value)
+    },
+
+    editing: ->() {
+      update_state(is_editing: true)
+    },
+
+    # Save the edited TODO
+    save_edition: ->() {
+      update_state(is_editing: false, original: state[:edited])
+      emit("edit", { edited: state[:edited], id: props[:id] })
+    },
+
+    # Cancel editing and revert changes
+    cancel_edition: ->() {
+      update_state(edited: state[:original], is_editing: false)
+    }
+  }
+)
+
+# TodoItemEdit component - handles TODO editing mode
+TodoItemEditComponent = Ruwi.define_component(
+  # Render TODO item in edit mode
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <li>
+        <input
+          value="{props[:edited]}"
+          type="text"
+          on="{ input: ->(e) { emit('input', e[:target][:value]) } }"
+        />
+        <button on="{ click: ->() { emit('save') } }">
+          Save
+        </button>
+        <button on="{ click: ->() { emit('cancel') } }">
+          Cancel
+        </button>
+      </li>
+    HTML
+  },
+)
+
+# TodoItemView component - handles TODO display mode
+TodoItemViewComponent = Ruwi.define_component(
+  # Render TODO item in view mode
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <li>
+        <span on="{ dblclick: ->() { emit('editing') } }">
+          {props[:original]}
+        </span>
+        <button on="{ click: ->() { emit('remove', props[:id]) } }">
+          Done
+        </button>
+      </li>
+    HTML
+  },
+)
+
+# Create and mount the application
+app = Ruwi::App.create(AppComponent)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

data/examples/src/todos/todos_repository.rb

@@ -0,0 +1,23 @@
+require "json"
+
+# Repository class for managing todos in local storage
+class TodosRepository
+  class << self
+    # Read todos from local storage
+    # @return [Array] Array of todo items
+    def read_todos
+      todos_json = JS.global[:localStorage].getItem('todos') || '[]'
+      JSON.parse(todos_json.to_s).map do |todo|
+        { id: todo["id"], text: todo["text"] }
+      end
+    end
+
+    # Write todos to local storage
+    # @param todos [Array] Array of todo items to be stored
+    # @return [void]
+    def write_todos(todos)
+      todos_json = JSON.generate(todos)
+      JS.global[:localStorage].setItem('todos', todos_json)
+    end
+  end
+end

data/exe/ruwi

@@ -0,0 +1,6 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative "../lib/ruwi/cli/command"
+
+Ruwi::Cli::Command.run(ARGV)