ruwi 0.10.0

data/examples/npm-packages/runtime/random_cocktail/index.rb

@@ -0,0 +1,69 @@
+require "js"
+
+random_cocktail = Ruwi.define_component(
+  state: ->() {
+    {
+      is_loading: false,
+      cocktail: nil
+    }
+  },
+
+  template: ->() {
+    is_loading = state[:is_loading] # Used in template
+    cocktail = state[:cocktail] # Used in template
+
+    template = <<~HTML
+      <p r-if="{is_loading}">
+        Loading...
+      </p>
+      <button-component r-elsif="{cocktail.nil?}" on="{click_button: ->() { fetch_cocktail }}" label="Get a cocktail"/>
+      <template r-else>
+        <h1>{cocktail['strDrink']}</h1>
+        <p>{cocktail['strInstructions']}</p>
+        <img src="{cocktail['strDrinkThumb']}" alt="{cocktail['strDrink']}" style="width: 300px; height: 300px" />
+        <button-component on="{click_button: ->() { fetch_cocktail }}" label="Get another cocktail"/>
+      </template>
+    HTML
+
+    Ruwi::Template::Parser.parse_and_eval(template, binding)
+  },
+
+  methods: {
+    fetch_cocktail: ->{
+      # Set loading state
+      update_state(is_loading: true, cocktail: nil)
+
+      Fiber.new do
+        response = JS.global.fetch("https://www.thecocktaildb.com/api/json/v1/1/random.php").await
+        response.call(:json).then(->(data) {
+          update_state(is_loading: false, cocktail: data[:drinks][0])
+        }).catch(->(error) {
+          update_state(is_loading: false, cocktail: nil)
+        })
+      end.transfer
+    }
+  },
+
+  on_mounted: ->() {
+    fetch_cocktail
+  }
+)
+
+ButtonComponent = Ruwi.define_component(
+  state: ->(props) {
+    { label: props[:label] }
+  },
+
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <button on="{click: ->() { emit('click_button') }}" style="display: block; margin: 1em auto">
+        {state[:label]}
+      </button>
+    HTML
+  }
+)
+
+# Create and mount the app
+app = Ruwi::App.create(random_cocktail)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

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

@@ -0,0 +1,101 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Random Cocktail Example", () => {
+  test("should display loading state and fetch initial cocktail data", async ({
+    page,
+  }) => {
+    await page.goto("/examples/npm-packages/runtime/random_cocktail/index.html?env=DEV");
+    await page.waitForTimeout(1000); // Shorter wait to catch loading state
+
+    // Check the page title
+    await expect(page).toHaveTitle("Random Cocktail");
+
+    // Should initially show loading state or quickly transition to cocktail data
+    // const hasLoadingOrCocktail = await Promise.race([
+    //   page
+    //     .getByText("Loading...")
+    //     .isVisible()
+    //     .catch(() => false),
+    //   page
+    //     .locator("#app h1")
+    //     .isVisible()
+    //     .catch(() => false),
+    // ]);
+    // expect(hasLoadingOrCocktail).toBe(true);
+
+    // Wait for the cocktail to load (API call)
+    await page.waitForTimeout(5000);
+
+    // After loading, should show cocktail information
+    await expect(page.locator("#app h1")).toBeVisible();
+    await expect(page.locator("#app p").last()).toBeVisible();
+    await expect(page.locator("img")).toBeVisible();
+    await expect(page.locator("button")).toHaveText("Get another cocktail");
+
+    // Verify cocktail data is displayed correctly
+    const cocktailName = await page.locator("#app h1").textContent();
+    expect(cocktailName).toBeTruthy();
+    expect(cocktailName.length).toBeGreaterThan(0);
+
+    const instructions = await page.locator("#app p").last().textContent();
+    expect(instructions).toBeTruthy();
+    expect(instructions.length).toBeGreaterThan(0);
+
+    // Verify image attributes and styling
+    const img = page.locator("img");
+    await expect(img).toHaveAttribute("alt");
+    await expect(img).toHaveAttribute("src");
+    await expect(img).toHaveCSS("width", "300px");
+    await expect(img).toHaveCSS("height", "300px");
+
+    const imgSrc = await img.getAttribute("src");
+    const imgAlt = await img.getAttribute("alt");
+    expect(imgSrc).toBeTruthy();
+    expect(imgAlt).toBeTruthy();
+    expect(imgSrc).toMatch(/^https?:\/\//); // Should be a valid URL
+
+    // Verify button styling and behavior
+    const button = page.locator("button");
+    await expect(button).toBeVisible();
+    await expect(button).toBeEnabled();
+    await expect(button).toHaveCSS("display", "block");
+  });
+
+  test("should fetch new cocktail when button is clicked", async ({ page }) => {
+    await page.goto("/examples/npm-packages/runtime/random_cocktail/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+
+    // Wait for initial cocktail to load
+    await page.waitForTimeout(5000);
+
+    // Get the initial cocktail name
+    const initialCocktailName = await page.locator("#app h1").textContent();
+
+    // Click "Get another cocktail" button
+    const button = page.locator("button");
+    await button.click();
+
+    // Should show loading state
+    await expect(page.getByText("Loading...")).toBeVisible();
+
+    // Wait for new cocktail to load
+    await page.waitForTimeout(5000);
+
+    // Should display new cocktail data with correct structure
+    await expect(page.locator("#app h1")).toBeVisible();
+    await expect(page.locator("#app p").last()).toBeVisible();
+    await expect(page.locator("img")).toBeVisible();
+    await expect(button).toHaveText("Get another cocktail");
+
+    // Verify we have valid cocktail data
+    const newCocktailName = await page.locator("#app h1").textContent();
+    expect(newCocktailName).toBeTruthy();
+    expect(newCocktailName.length).toBeGreaterThan(0);
+
+    // Verify the component maintains proper state
+    const hasLoading = (await page.getByText("Loading...").count()) > 0;
+    const hasCocktail = (await page.locator("#app h1").count()) > 0;
+    const hasButton = (await button.count()) > 0;
+    expect(hasLoading || hasCocktail || hasButton).toBe(true);
+  });
+});

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

@@ -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/ruwi.js"
+        : "https://unpkg.com/ruwi@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

@@ -0,0 +1,39 @@
+require "js"
+
+# search-field component definition
+SearchField = Ruwi.define_component(
+  template: ->() {
+    Ruwi::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 = Ruwi.define_component(
+  state: ->() {
+    { search_term: '' }
+  },
+  template: ->() {
+    Ruwi::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 = Ruwi::App.create(SearchDemo)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

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

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

@@ -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/ruwi.js"
+        : "https://unpkg.com/ruwi@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

@@ -0,0 +1,239 @@
+require "js"
+
+# 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)