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/list/index.spec.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { test, expect } from "@playwright/test";
+test.describe("List Example", () => {
+  test("should display list with initial todos", async ({ page }) => {
+    await page.goto("/examples/npm-packages/runtime/list/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check the page title
+    await expect(page).toHaveTitle("List");
+    // Check that the list is rendered
+    await expect(page.locator("ul")).toBeVisible();
+    // Check that all initial todos are displayed (both component and element versions)
+    const listItems = page.locator("li");
+    await expect(listItems).toHaveCount(6);
+    // Check the content of each list item (component version first, then element version)
+    await expect(listItems.nth(0)).toHaveText("foo");
+    await expect(listItems.nth(1)).toHaveText("bar");
+    await expect(listItems.nth(2)).toHaveText("baz");
+    await expect(listItems.nth(3)).toHaveText("foo");
+    await expect(listItems.nth(4)).toHaveText("bar");
+    await expect(listItems.nth(5)).toHaveText("baz");
+  });
+  test("should render r-for with components correctly", async ({ page }) => {
+    await page.goto("/examples/npm-packages/runtime/list/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check that ListItem components are rendered (first 3 items)
+    const componentItems = page.locator("li").nth(0);
+    await expect(componentItems).toBeVisible();
+    await expect(componentItems).toHaveText("foo");
+  });
+  test("should render r-for with elements correctly", async ({ page }) => {
+    await page.goto("/examples/npm-packages/runtime/list/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check that direct li elements are rendered (last 3 items)
+    const elementItems = page.locator("li").nth(3);
+    await expect(elementItems).toBeVisible();
+    await expect(elementItems).toHaveText("foo");
+  });
+});

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

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>on_mounted Demo</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      div {
+        margin: 20px 0;
+        padding: 15px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+      }
+      h1 {
+        color: #333;
+        text-align: center;
+      }
+      h2 {
+        color: #666;
+      }
+      p {
+        color: #777;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script
+      type="module"
+      src="../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js"
+    ></script>
+    <script type="text/ruby" src="./index.rb"></script>
+  </body>
+</html>

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

@@ -0,0 +1,59 @@
+require "js"
+# Component with argument-less on_mounted that can call component methods directly
+SimpleComponent = RubyWasmUi.define_component(
+  state: -> { { message: "Not mounted yet" } },
+  # on_mounted without arguments - can call update_state directly!
+  on_mounted: -> {
+    puts "SimpleComponent mounted without arguments!"
+    update_state(message: "Mounted and state updated without component argument!")
+  },
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <h2>Simple Component (no args in on_mounted)</h2>
+        <p>{state[:message]}</p>
+      </div>
+    HTML
+  }
+)
+# Component with on_mounted that takes component argument (existing behavior)
+AdvancedComponent = RubyWasmUi.define_component(
+  state: -> { { message: "Not mounted yet" } },
+  # on_mounted with component argument - existing behavior still works
+  on_mounted: ->() {
+    puts "AdvancedComponent mounted with component argument!"
+    update_state(message: "Mounted and state updated!")
+  },
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <h2>Advanced Component (with args in on_mounted)</h2>
+        <p>{state[:message]}</p>
+      </div>
+    HTML
+  }
+)
+# Main App component
+AppComponent = RubyWasmUi.define_component(
+  template: -> {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <h1>on_mounted Demo</h1>
+        <SimpleComponent />
+        <AdvancedComponent />
+      </div>
+    HTML
+  }
+)
+# Mount the app
+app = RubyWasmUi::App.create(AppComponent)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

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

@@ -0,0 +1,50 @@
+import { test, expect } from "@playwright/test";
+test.describe("On Mounted Demo Example", () => {
+  test("should display components and verify on_mounted hooks execute correctly", async ({
+    page,
+  }) => {
+    await page.goto("/examples/npm-packages/runtime/on_mounted_demo/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check the page title
+    await expect(page).toHaveTitle("on_mounted Demo");
+    // Check main heading
+    await expect(page.locator("h1")).toHaveText("on_mounted Demo");
+    // Check both component headings are present
+    await expect(page.locator("h2").first()).toHaveText(
+      "Simple Component (no args in on_mounted)"
+    );
+    await expect(page.locator("h2").last()).toHaveText(
+      "Advanced Component (with args in on_mounted)"
+    );
+    // Verify on_mounted hooks have executed and updated the messages
+    const simpleComponentMessage = page
+      .locator("h2")
+      .first()
+      .locator("..")
+      .locator("p");
+    await expect(simpleComponentMessage).toHaveText(
+      "Mounted and state updated without component argument!"
+    );
+    const advancedComponentMessage = page
+      .locator("h2")
+      .last()
+      .locator("..")
+      .locator("p");
+    await expect(advancedComponentMessage).toHaveText(
+      "Mounted and state updated!"
+    );
+    // Neither component should show the initial "Not mounted yet" message
+    const paragraphs = page.locator("p");
+    for (let i = 0; i < (await paragraphs.count()); i++) {
+      const text = await paragraphs.nth(i).textContent();
+      expect(text).not.toBe("Not mounted yet");
+    }
+  });
+});

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

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>r-if Attribute Demo</title>
+    <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>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        max-width: 600px;
+        margin: 20px auto;
+        padding: 20px;
+        background-color: #f5f5f5;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>r-if Attribute Demo</h1>
+    <div id="app">
+      <!-- Ruby WASM UI app will mount here -->
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,113 @@
+require "js"
+# R-If Attribute Demo component to demonstrate conditional rendering using r-if attribute
+RIfAttributeDemo = RubyWasmUi.define_component(
+  # Initialize component state
+  state: ->() {
+    {
+      show_message: false,
+      counter: 0
+    }
+  },
+  # Render the component with r-if attribute examples
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <p>Using r-if as an attribute (like Vue.js r-if)</p>
+        <!-- Example 1: Simple boolean toggle -->
+        <div style="border: 1px solid #ccc; margin: 10px 0; padding: 10px;">
+          <h2>Toggle Message</h2>
+          <button
+            style="background: #007bff; color: white; padding: 8px 16px; border: none; cursor: pointer;"
+            on="{click: ->() { toggle_message }}"
+          >
+            {state[:show_message] ? "Hide" : "Show"} Message
+          </button>
+          <div
+            style="background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 10px; margin-top: 10px;"
+            r-if="{state[:show_message]}"
+          >
+            <p>This message is conditionally rendered using r-if attribute!</p>
+          </div>
+        </div>
+        <!-- Example 2: Counter-based condition -->
+        <div style="border: 1px solid #ccc; margin: 10px 0; padding: 10px;">
+          <h2>Counter Conditions</h2>
+          <button
+            style="background: #28a745; color: white; padding: 8px 16px; border: none; cursor: pointer; margin-right: 5px;"
+            on="{click: ->() { increment_counter }}"
+          >
+            +1
+          </button>
+          <button
+            style="background: #dc3545; color: white; padding: 8px 16px; border: none; cursor: pointer; margin-right: 5px;"
+            on="{click: ->() { decrement_counter }}"
+          >
+            -1
+          </button>
+          <button
+            style="background: #6c757d; color: white; padding: 8px 16px; border: none; cursor: pointer;"
+            on="{click: ->() { reset_counter }}"
+          >
+            Reset
+          </button>
+          <p>Counter: <strong>{state[:counter]}</strong></p>
+          <div
+            style="background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 10px; margin: 5px 0;"
+            r-if="{state[:counter] > 0}"
+          >
+            <p>Counter is positive! ({state[:counter]})</p>
+          </div>
+          <div
+            style="background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 10px; margin: 5px 0;"
+            r-if="{state[:counter] < 0}"
+          >
+            <p>Counter is negative! ({state[:counter]})</p>
+          </div>
+          <div
+            style="background: #e2e3e5; border: 1px solid #d6d8db; color: #383d41; padding: 10px; margin: 5px 0;"
+            r-if="{state[:counter] == 0}"
+          >
+            <p>Counter is zero.</p>
+          </div>
+        </div>
+      </div>
+    HTML
+  },
+  # Component methods
+  methods: {
+    # Toggle the message visibility
+    toggle_message: ->() {
+      update_state(show_message: !state[:show_message])
+    },
+    # Increment the counter
+    increment_counter: ->() {
+      update_state(counter: state[:counter] + 1)
+    },
+    # Decrement the counter
+    decrement_counter: ->() {
+      update_state(counter: state[:counter] - 1)
+    },
+    # Reset the counter to zero
+    reset_counter: ->() {
+      update_state(counter: 0)
+    }
+  }
+)
+# Create and mount the app
+app = RubyWasmUi::App.create(RIfAttributeDemo)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

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

@@ -0,0 +1,140 @@
+import { test, expect } from "@playwright/test";
+test.describe("R-If Attribute Demo Example", () => {
+  test("should display page layout and toggle message functionality", async ({
+    page,
+  }) => {
+    await page.goto("/examples/npm-packages/runtime/r_if_attribute_demo/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check the page title
+    await expect(page).toHaveTitle("r-if Attribute Demo");
+    // Check main heading
+    await expect(page.locator("h1")).toHaveText("r-if Attribute Demo");
+    // Check description
+    await expect(page.locator("p").first()).toHaveText(
+      "Using r-if as an attribute (like Vue.js r-if)"
+    );
+    // Check section headings
+    await expect(page.locator("h2").first()).toHaveText("Toggle Message");
+    await expect(page.locator("h2").last()).toHaveText("Counter Conditions");
+    // Test message toggle functionality
+    const toggleButton = page.locator("button").first();
+    const messageDiv = page
+      .getByText("This message is conditionally rendered using r-if attribute!")
+      .locator("..");
+    // Initially message should be hidden (show_message: false)
+    await expect(toggleButton).toHaveText("Show Message");
+    await expect(messageDiv).not.toBeVisible();
+    // Click to show message
+    await toggleButton.click();
+    await page.waitForTimeout(100);
+    await expect(toggleButton).toHaveText("Hide Message");
+    await expect(messageDiv).toBeVisible();
+    await expect(messageDiv.locator("p")).toHaveText(
+      "This message is conditionally rendered using r-if attribute!"
+    );
+    // Click to hide message again
+    await toggleButton.click();
+    await page.waitForTimeout(100);
+    await expect(toggleButton).toHaveText("Show Message");
+    await expect(messageDiv).not.toBeVisible();
+  });
+  test("should handle counter operations and conditional message display", async ({
+    page,
+  }) => {
+    await page.goto("/examples/npm-packages/runtime/r_if_attribute_demo/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check counter buttons
+    const incrementButton = page.locator("button").nth(1); // +1 button
+    const decrementButton = page.locator("button").nth(2); // -1 button
+    const resetButton = page.locator("button").nth(3); // Reset button
+    const counterDisplay = page.locator("p").filter({ hasText: "Counter:" });
+    await expect(incrementButton).toHaveText("+1");
+    await expect(decrementButton).toHaveText("-1");
+    await expect(resetButton).toHaveText("Reset");
+    // Check initial counter display and zero message
+    await expect(counterDisplay).toContainText("Counter:0");
+    const positiveMessage = page
+      .getByText("Counter is positive!")
+      .locator("..");
+    const negativeMessage = page
+      .getByText("Counter is negative!")
+      .locator("..");
+    const zeroMessage = page.getByText("Counter is zero.").locator("..");
+    await expect(zeroMessage).toBeVisible();
+    await expect(positiveMessage).not.toBeVisible();
+    await expect(negativeMessage).not.toBeVisible();
+    // Test increment operations and positive message
+    await incrementButton.click();
+    await page.waitForTimeout(100);
+    await expect(counterDisplay).toContainText("Counter:1");
+    await expect(positiveMessage).toBeVisible();
+    await expect(positiveMessage.locator("p")).toHaveText(
+      "Counter is positive! (1)"
+    );
+    await expect(zeroMessage).not.toBeVisible();
+    await expect(negativeMessage).not.toBeVisible();
+    // Test more increments
+    await incrementButton.click();
+    await incrementButton.click();
+    await page.waitForTimeout(100);
+    await expect(counterDisplay).toContainText("Counter:3");
+    await expect(positiveMessage.locator("p")).toHaveText(
+      "Counter is positive! (3)"
+    );
+    // Test reset
+    await resetButton.click();
+    await page.waitForTimeout(100);
+    await expect(counterDisplay).toContainText("Counter:0");
+    await expect(zeroMessage).toBeVisible();
+    await expect(positiveMessage).not.toBeVisible();
+    await expect(negativeMessage).not.toBeVisible();
+    // Test decrement operations and negative message
+    await decrementButton.click();
+    await page.waitForTimeout(100);
+    await expect(counterDisplay).toContainText("Counter:-1");
+    await expect(negativeMessage).toBeVisible();
+    await expect(negativeMessage.locator("p")).toHaveText(
+      "Counter is negative! (-1)"
+    );
+    await expect(zeroMessage).not.toBeVisible();
+    await expect(positiveMessage).not.toBeVisible();
+    // Test more decrements
+    await decrementButton.click();
+    await decrementButton.click();
+    await page.waitForTimeout(100);
+    await expect(counterDisplay).toContainText("Counter:-3");
+    await expect(negativeMessage.locator("p")).toHaveText(
+      "Counter is negative! (-3)"
+    );
+    // Verify styling for conditional messages
+    await expect(negativeMessage).toHaveAttribute("style");
+    // Reset and verify zero message styling
+    await resetButton.click();
+    await page.waitForTimeout(100);
+    await expect(zeroMessage).toHaveAttribute("style");
+  });
+});

data/examples/npm-packages/runtime/random_cocktail/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>Random Cocktail</title>
+  </head>
+  <body>
+    <h1>Random Cocktail</h1>
+    <div id="app"></div>
+  </body>
+</html>

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

@@ -0,0 +1,69 @@
+require "js"
+random_cocktail = RubyWasmUi.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
+    RubyWasmUi::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 = RubyWasmUi.define_component(
+  state: ->(props) {
+    { label: props[:label] }
+  },
+  template: ->() {
+    RubyWasmUi::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 = RubyWasmUi::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 ADDED Viewed

@@ -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);
+  });
+});