RubyGems - ruby_wasm_ui - Versions diffs - 0.8.1 - Mend

ruby_wasm_ui 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

data/examples/npm-packages/runtime/search_field/index.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      const urlParams = new URLSearchParams(window.location.search);
+      const isDev = urlParams.get("env") === "DEV";
+      const script = document.createElement("script");
+      script.defer = true;
+      script.src = isDev
+        ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js"
+        : "https://unpkg.com/ruby-wasm-ui@latest";
+      document.head.appendChild(script);
+    </script>
+    <script defer type="text/ruby" src="index.rb"></script>
+    <title>Search Field</title>
+  </head>
+  <body>
+    <h1>Search Field</h1>
+    <div id="app"></div>
+  </body>
+</html>

data/examples/npm-packages/runtime/search_field/index.rb ADDED Viewed

@@ -0,0 +1,39 @@
+require "js"
+# search-field component definition
+SearchField = RubyWasmUi.define_component(
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <input
+        type="text"
+        placeholder="Search..."
+        value="{props[:value]}"
+        on="{ input: ->(event) { emit('search', event[:target][:value].to_s) } }"
+      />
+    HTML
+  }
+)
+# search-demo component to show the search functionality
+SearchDemo = RubyWasmUi.define_component(
+  state: ->() {
+    { search_term: '' }
+  },
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <template>
+        <h2>Search Demo</h2>
+        <search-field
+          value="{state[:search_term]}"
+          on="{ search: ->(search_term) { update_state({ search_term: search_term }) } }"
+        />
+        <p>Current search term: {state[:search_term]}</p>
+      </template>
+    HTML
+  }
+)
+# Create and mount the app
+app = RubyWasmUi::App.create(SearchDemo)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

data/examples/npm-packages/runtime/search_field/index.spec.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { test, expect } from "@playwright/test";
+test.describe("Search Field Example", () => {
+  test("should display search demo and handle various input scenarios", async ({
+    page,
+  }) => {
+    await page.goto("/examples/npm-packages/runtime/search_field/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check the page title
+    await expect(page).toHaveTitle("Search Field");
+    // Check search demo heading
+    await expect(page.locator("h2")).toHaveText("Search Demo");
+    // Check search input field is present
+    const searchInput = page.locator('input[type="text"]');
+    const searchTermDisplay = page.locator("p");
+    await expect(searchInput).toBeVisible();
+    await expect(searchInput).toHaveAttribute("placeholder", "Search...");
+    // Check initial search term display
+    await expect(searchTermDisplay).toHaveText("Current search term: ");
+    // Test basic search functionality
+    await searchInput.fill("test");
+    await page.waitForTimeout(100);
+    await expect(searchTermDisplay).toHaveText("Current search term: test");
+    await expect(searchInput).toHaveValue("test");
+    // Test multiple search term updates
+    const searchTerms = ["hello", "world", "ruby", "wasm", ""];
+    for (const term of searchTerms) {
+      await searchInput.fill(term);
+      await page.waitForTimeout(100);
+      await expect(searchTermDisplay).toHaveText(
+        `Current search term: ${term}`
+      );
+      await expect(searchInput).toHaveValue(term);
+    }
+    // Test special characters in search input
+    const specialSearchTerms = [
+      "test@example.com",
+      "123-456-789",
+      "hello world!",
+      "search with spaces",
+      "special!@#$%^&*()",
+    ];
+    for (const term of specialSearchTerms) {
+      await searchInput.fill(term);
+      await page.waitForTimeout(100);
+      await expect(searchTermDisplay).toHaveText(
+        `Current search term: ${term}`
+      );
+      await expect(searchInput).toHaveValue(term);
+    }
+  });
+});

data/examples/npm-packages/runtime/todos/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      const urlParams = new URLSearchParams(window.location.search);
+      const isDev = urlParams.get("env") === "DEV";
+      const script = document.createElement("script");
+      script.defer = true;
+      script.src = isDev
+        ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js"
+        : "https://unpkg.com/ruby-wasm-ui@latest";
+      document.head.appendChild(script);
+    </script>
+    <script defer type="text/ruby" src="todos_repository.rb"></script>
+    <script defer type="text/ruby" src="index.rb"></script>
+    <title>Todos</title>
+  </head>
+  <body>
+    <h1>Todos</h1>
+    <div id="app"></div>
+  </body>
+</html>

data/examples/npm-packages/runtime/todos/index.rb ADDED Viewed

@@ -0,0 +1,239 @@
+require "js"
+# Main App component - coordinates all other components
+AppComponent = RubyWasmUi.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: ->() {
+    RubyWasmUi::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 = RubyWasmUi.define_component(
+  # Initialize component state
+  state: ->(props) {
+    { text: "" }
+  },
+  # Render the new TODO input form
+  template: ->() {
+    RubyWasmUi::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 = RubyWasmUi.define_component(
+  # Render the TODO list
+  template: ->() {
+    todos = props[:todos]
+    RubyWasmUi::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 = RubyWasmUi.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: ->() {
+    RubyWasmUi::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 = RubyWasmUi.define_component(
+  # Render TODO item in edit mode
+  template: ->() {
+    RubyWasmUi::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 = RubyWasmUi.define_component(
+  # Render TODO item in view mode
+  template: ->() {
+    RubyWasmUi::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 = RubyWasmUi::App.create(AppComponent)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "name": "gem",
+  "private": true,
+  "version": "0.0.1",
+  "description": "A Ruby gem for the ruby-wasm-ui 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 ADDED Viewed

@@ -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 "ruby_wasm_ui"
+        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 ADDED Viewed

@@ -0,0 +1,60 @@
+# Counter component using the latest component-based API with TemplateParser
+CounterComponent = RubyWasmUi.define_component(
+  # Initialize component state
+  state: ->(props) {
+    { count: props[:count] || 0 }
+  },
+  # Render the counter component
+  template: ->() {
+    RubyWasmUi::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 = RubyWasmUi.define_component(
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <button on="{ click: ->() { emit('click_button') } }">
+        {props[:label]}
+      </button>
+    HTML
+  }
+)
+# app_a to be destroyed
+app_a = RubyWasmUi::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 = RubyWasmUi::App.create(CounterComponent, count: 10)
+app_element_b = JS.global[:document].getElementById("app-b")
+app_b.mount(app_element_b)

data/lib/ruby_wasm_ui ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../packages/npm-packages/runtime/src/ruby_wasm_ui

data/lib/ruby_wasm_ui.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../packages/npm-packages/runtime/src/ruby_wasm_ui.rb