RubyGems - ruwi - Versions diffs - 0.10.0 - Mend

ruwi 0.10.0

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 (117) hide show

checksums.yaml +7 -0
data/.cursor/rules/ruby_comments.mdc +29 -0
data/.github/workflows/playwright.yml +74 -0
data/.github/workflows/rspec.yml +31 -0
data/.node-version +1 -0
data/CODE_OF_CONDUCT.md +132 -0
data/LICENSE.txt +21 -0
data/Makefile +56 -0
data/README.md +237 -0
data/Rakefile +4 -0
data/docs/conditional-rendering.md +119 -0
data/docs/lifecycle-hooks.md +75 -0
data/docs/list-rendering.md +51 -0
data/examples/.gitignore +4 -0
data/examples/Gemfile +5 -0
data/examples/Gemfile.lock +39 -0
data/examples/Makefile +15 -0
data/examples/npm-packages/runtime/counter/index.html +28 -0
data/examples/npm-packages/runtime/counter/index.rb +62 -0
data/examples/npm-packages/runtime/counter/index.spec.js +42 -0
data/examples/npm-packages/runtime/hello/index.html +28 -0
data/examples/npm-packages/runtime/hello/index.rb +29 -0
data/examples/npm-packages/runtime/hello/index.spec.js +53 -0
data/examples/npm-packages/runtime/input/index.html +28 -0
data/examples/npm-packages/runtime/input/index.rb +46 -0
data/examples/npm-packages/runtime/input/index.spec.js +58 -0
data/examples/npm-packages/runtime/list/index.html +27 -0
data/examples/npm-packages/runtime/list/index.rb +33 -0
data/examples/npm-packages/runtime/list/index.spec.js +46 -0
data/examples/npm-packages/runtime/on_mounted_demo/index.html +40 -0
data/examples/npm-packages/runtime/on_mounted_demo/index.rb +59 -0
data/examples/npm-packages/runtime/on_mounted_demo/index.spec.js +50 -0
data/examples/npm-packages/runtime/r_if_attribute_demo/index.html +34 -0
data/examples/npm-packages/runtime/r_if_attribute_demo/index.rb +113 -0
data/examples/npm-packages/runtime/r_if_attribute_demo/index.spec.js +140 -0
data/examples/npm-packages/runtime/random_cocktail/index.html +27 -0
data/examples/npm-packages/runtime/random_cocktail/index.rb +69 -0
data/examples/npm-packages/runtime/random_cocktail/index.spec.js +101 -0
data/examples/npm-packages/runtime/search_field/index.html +27 -0
data/examples/npm-packages/runtime/search_field/index.rb +39 -0
data/examples/npm-packages/runtime/search_field/index.spec.js +59 -0
data/examples/npm-packages/runtime/todos/index.html +28 -0
data/examples/npm-packages/runtime/todos/index.rb +239 -0
data/examples/npm-packages/runtime/todos/index.spec.js +161 -0
data/examples/npm-packages/runtime/todos/todos_repository.rb +23 -0
data/examples/package.json +12 -0
data/examples/src/counter/index.html +23 -0
data/examples/src/counter/index.rb +60 -0
data/examples/src/index.html +21 -0
data/examples/src/index.rb +26 -0
data/examples/src/todos/index.html +23 -0
data/examples/src/todos/index.rb +237 -0
data/examples/src/todos/todos_repository.rb +23 -0
data/exe/ruwi +6 -0
data/lib/ruwi/cli/command/base.rb +192 -0
data/lib/ruwi/cli/command/dev.rb +207 -0
data/lib/ruwi/cli/command/pack.rb +36 -0
data/lib/ruwi/cli/command/rebuild.rb +38 -0
data/lib/ruwi/cli/command/setup.rb +159 -0
data/lib/ruwi/cli/command.rb +48 -0
data/lib/ruwi/runtime/app.rb +53 -0
data/lib/ruwi/runtime/component.rb +215 -0
data/lib/ruwi/runtime/dispatcher.rb +46 -0
data/lib/ruwi/runtime/dom/attributes.rb +105 -0
data/lib/ruwi/runtime/dom/destroy_dom.rb +63 -0
data/lib/ruwi/runtime/dom/events.rb +40 -0
data/lib/ruwi/runtime/dom/mount_dom.rb +108 -0
data/lib/ruwi/runtime/dom/patch_dom.rb +237 -0
data/lib/ruwi/runtime/dom/scheduler.rb +51 -0
data/lib/ruwi/runtime/dom.rb +13 -0
data/lib/ruwi/runtime/nodes_equal.rb +45 -0
data/lib/ruwi/runtime/template/build_conditional_group.rb +150 -0
data/lib/ruwi/runtime/template/build_for_group.rb +125 -0
data/lib/ruwi/runtime/template/build_vdom.rb +220 -0
data/lib/ruwi/runtime/template/parser.rb +134 -0
data/lib/ruwi/runtime/template.rb +11 -0
data/lib/ruwi/runtime/utils/arrays.rb +185 -0
data/lib/ruwi/runtime/utils/objects.rb +37 -0
data/lib/ruwi/runtime/utils/props.rb +25 -0
data/lib/ruwi/runtime/utils/strings.rb +19 -0
data/lib/ruwi/runtime/utils.rb +11 -0
data/lib/ruwi/runtime/vdom.rb +84 -0
data/lib/ruwi/version.rb +5 -0
data/lib/ruwi.rb +14 -0
data/package-lock.json +73 -0
data/package.json +32 -0
data/packages/npm-packages/runtime/README.md +5 -0
data/packages/npm-packages/runtime/eslint.config.mjs +16 -0
data/packages/npm-packages/runtime/package-lock.json +6668 -0
data/packages/npm-packages/runtime/package.json +38 -0
data/packages/npm-packages/runtime/rollup.config.mjs +147 -0
data/packages/npm-packages/runtime/src/__tests__/sample.test.js +5 -0
data/packages/npm-packages/runtime/src/index.js +37 -0
data/packages/npm-packages/runtime/src/ruwi +1 -0
data/packages/npm-packages/runtime/src/ruwi.rb +1 -0
data/packages/npm-packages/runtime/vitest.config.js +8 -0
data/playwright.config.js +78 -0
data/sig/ruwi.rbs +4 -0
data/spec/ruwi/cli/command/base_spec.rb +503 -0
data/spec/ruwi/cli/command/dev_spec.rb +442 -0
data/spec/ruwi/cli/command/pack_spec.rb +131 -0
data/spec/ruwi/cli/command/rebuild_spec.rb +95 -0
data/spec/ruwi/cli/command/setup_spec.rb +251 -0
data/spec/ruwi/cli/command_spec.rb +118 -0
data/spec/ruwi/runtime/component_spec.rb +416 -0
data/spec/ruwi/runtime/dom/scheduler_spec.rb +98 -0
data/spec/ruwi/runtime/nodes_equal_spec.rb +190 -0
data/spec/ruwi/runtime/template/build_conditional_group_spec.rb +505 -0
data/spec/ruwi/runtime/template/build_for_group_spec.rb +377 -0
data/spec/ruwi/runtime/template/build_vdom_spec.rb +573 -0
data/spec/ruwi/runtime/template/parser_spec.rb +627 -0
data/spec/ruwi/runtime/utils/arrays_spec.rb +228 -0
data/spec/ruwi/runtime/utils/objects_spec.rb +127 -0
data/spec/ruwi/runtime/utils/props_spec.rb +205 -0
data/spec/ruwi/runtime/utils/strings_spec.rb +107 -0
data/spec/spec_helper.rb +16 -0
metadata +229 -0

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

@@ -0,0 +1,58 @@
+import { test, expect } from "@playwright/test";
+test.describe("Input Example", () => {
+  test("should display input form and validate input length", async ({
+    page,
+  }) => {
+    await page.goto("/examples/npm-packages/runtime/input/index.html?env=DEV");
+    await page.waitForTimeout(3000);
+    // Check the page title
+    await expect(page).toHaveTitle("Input");
+    // Check form elements are present
+    await expect(page.locator("label")).toHaveText("User Name");
+    const input = page.locator('input[type="text"]');
+    await expect(input).toBeVisible();
+    // Check help text
+    await expect(page.locator("p").last()).toHaveText(
+      "*User name must be at least 4 characters"
+    );
+    // Check initial validation message (invalid state)
+    const validationMessage = page.locator("p").first();
+    await expect(validationMessage).toHaveText(
+      "User name must be at least 4 characters"
+    );
+    await expect(validationMessage).toHaveClass(/text-red-600/);
+    await expect(input).toHaveClass(/border-red-500/);
+    // Type less than 4 characters - should still be invalid
+    await input.fill("abc");
+    await page.waitForTimeout(100);
+    await expect(validationMessage).toHaveText(
+      "User name must be at least 4 characters"
+    );
+    await expect(validationMessage).toHaveClass(/text-red-600/);
+    await expect(input).toHaveClass(/border-red-500/);
+    // Type 4 or more characters - should become valid
+    await input.fill("abcd");
+    await page.waitForTimeout(100);
+    await expect(validationMessage).toHaveText("Valid");
+    await expect(validationMessage).toHaveClass(/text-green-600/);
+    await expect(input).toHaveClass(/border-green-500/);
+    // Clear input to make it invalid again
+    await input.fill("ab");
+    await page.waitForTimeout(100);
+    // Should be invalid again
+    await expect(input).toHaveValue("ab");
+    await expect(validationMessage).toHaveText(
+      "User name must be at least 4 characters"
+    );
+    await expect(validationMessage).toHaveClass(/text-red-600/);
+  });
+});

data/examples/npm-packages/runtime/list/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/ruwi.js"
+        : "https://unpkg.com/ruwi@latest";
+      document.head.appendChild(script);
+    </script>
+    <script defer type="text/ruby" src="index.rb"></script>
+    <title>List</title>
+  </head>
+  <body>
+    <h1>List</h1>
+    <div id="app"></div>
+  </body>
+</html>

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

@@ -0,0 +1,33 @@
+require "js"
+ListItem = Ruwi.define_component(
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <li>{props[:todo]}</li>
+    HTML
+  }
+)
+List = Ruwi.define_component(
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <ul>
+        <!-- component -->
+        <ListItem
+          r-for="{todo in props[:todos]}"
+          todo="{todo}"
+        />
+        <!-- element -->
+        <li r-for="todo in props[:todos]">
+          { todo }
+        </li>
+      </ul>
+    HTML
+  }
+)
+# Create and mount the app
+app = Ruwi::App.create(List, { todos: ['foo', 'bar', 'baz'] })
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

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/ruwi.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 = Ruwi.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: ->() {
+    Ruwi::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 = Ruwi.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: ->() {
+    Ruwi::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 = Ruwi.define_component(
+  template: -> {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <h1>on_mounted Demo</h1>
+        <SimpleComponent />
+        <AdvancedComponent />
+      </div>
+    HTML
+  }
+)
+# Mount the app
+app = Ruwi::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/ruwi.js"
+        : "https://unpkg.com/ruwi@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 = Ruwi.define_component(
+  # Initialize component state
+  state: ->() {
+    {
+      show_message: false,
+      counter: 0
+    }
+  },
+  # Render the component with r-if attribute examples
+  template: ->() {
+    Ruwi::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 = Ruwi::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/ruwi.js"
+        : "https://unpkg.com/ruwi@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>