ruby_wasm_ui 0.8.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 35c9a72b39d103d9d57bb41e60d69830966d45faa673c926cd1709ed991ad389
+  data.tar.gz: 62fd13431aff9e10a4bd29de95cc1457efd365004f9b82717207014658ea4204
+SHA512:
+  metadata.gz: f8384fb1deb73e52d0ab70c8444b459716db2b9ea01094fa87ce557bd970c38360b6853e8c1005d95c232f35148e71311bc510badfdd94ed04ce9bf5bace2ba8
+  data.tar.gz: dea729cadcb8b017fe8a7772364af85c168f9bf816dda4bd030f0e237796007231dd4b286e708e586d8a6f5b66b75afce2743aa703ab86179bcbc5b161cdb7c2

data/.cursor/rules/ruby_comments.mdc

@@ -0,0 +1,29 @@
+When writing or modifying Ruby code:
+
+1. Comments and Documentation
+- All comments MUST be written in English
+- Use YARD documentation style for methods and classes
+- Include @param and @return tags for method documentation
+- Keep comments clear and concise
+
+2. Documentation Examples:
+
+Good:
+```ruby
+# Create a new component instance
+# @param props [Hash] Component properties
+def initialize(props = {})
+  # Initialize component state
+  @state = {}
+end
+```
+
+3. Documentation Requirements:
+- Document all public methods
+- Include type information for parameters and return values
+- Use descriptive English names for methods and variables
+- Add context when the code's purpose isn't immediately clear
+description:
+globs:
+alwaysApply: false
+---

data/.github/workflows/playwright.yml

@@ -0,0 +1,74 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.x"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./node_modules/@playwright/test/package.json').version)")" >> $GITHUB_ENV
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}-${{ runner.os }}
+
+      - name: Install Playwright Browsers (Chromium only)
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install chromium --with-deps
+
+      - name: Cache runtime node_modules
+        uses: actions/cache@v4
+        with:
+          path: packages/npm-packages/runtime/node_modules
+          key: runtime-node-modules-${{ hashFiles('packages/npm-packages/runtime/package-lock.json') }}
+
+      - name: Install runtime dependencies
+        run: |
+          cd packages/npm-packages/runtime
+          npm ci
+
+      - name: Build runtime package
+        run: |
+          cd packages/npm-packages/runtime
+          npm run build:dev
+
+      - name: Run Playwright tests
+        run: npm run test
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always() && hashFiles('test-results/**/*') != ''
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 30

data/.github/workflows/rspec.yml

@@ -0,0 +1,33 @@
+name: RSpec
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        ruby-version: ["3.4.0"]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: ${{ matrix.ruby-version }}
+          bundler-cache: true
+
+      - name: Install dependencies
+        run: |
+          cd packages/npm-packages/runtime
+          bundle install
+
+      - name: Run RSpec
+        run: |
+          cd packages/npm-packages/runtime
+          bundle exec rspec

data/.node-version

@@ -0,0 +1 @@
+23.11.0

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[INSERT CONTACT METHOD].
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 t0yohei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,218 @@
+# ruby-wasm-ui
+
+A modern web frontend framework for Ruby using [ruby.wasm](https://github.com/ruby/ruby.wasm). Write reactive web applications using familiar Ruby syntax and patterns.
+
+**⚠️ Warning: This library is currently under development and subject to frequent breaking changes. Please use with caution and expect API changes in future versions.**
+
+## Features
+
+- **Reactive State Management**: Simple, predictable state updates with actions
+- **Virtual DOM**: Efficient DOM updates using a virtual DOM implementation
+- **Event Handling**: Intuitive event system with Ruby lambdas
+- **Component Architecture**: Build reusable components with clean separation of concerns
+- **Lifecycle Hooks**: Manage component lifecycle with hooks like `on_mounted`
+- **Ruby Syntax**: Write frontend applications using Ruby instead of JavaScript
+
+## Quick Start
+
+Create an HTML file:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://unpkg.com/ruby-wasm-ui@0.8.1"></script>
+    <script defer type="text/ruby" src="app.rb"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+```
+
+Create `app.rb`:
+
+```ruby
+require "js"
+
+# Define a Counter component
+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: ->() {
+      update_state(count: state[:count] + 1)
+    },
+    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
+  }
+)
+
+# Create and mount the app
+app = RubyWasmUi::App.create(CounterComponent, count: 5)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)
+```
+
+## Using as a Gem
+
+You can also use `ruby_wasm_ui` as a Ruby gem with `rbwasm` to build your application as a WASM file.
+
+### Setup
+
+1. Add `ruby_wasm_ui` to your `Gemfile`:
+
+```ruby
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+gem "ruby_wasm_ui"
+```
+
+2. Install dependencies:
+
+```bash
+bundle install
+```
+
+### Building Your Application
+
+1. Build Ruby WASM:
+
+```bash
+bundle exec rbwasm build --ruby-version 3.4 -o ruby.wasm
+```
+
+2. Pack your application files:
+
+```bash
+bundle exec rbwasm pack ruby.wasm --dir ./src::./src -o src.wasm
+```
+
+This command packs your Ruby files from the `./src` directory into the WASM file.
+
+### Creating Your HTML File
+
+Create an HTML file in the `src` directory that loads the WASM file:
+
+```html
+<!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 "ruby_wasm_ui"
+        require_relative './src/app.rb'
+      `);
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+```
+
+### Example Project Structure
+
+```
+my-app/
+├── Gemfile
+├── src.wasm
+└── src/
+    ├── app.rb
+    └── index.html
+```
+
+Your `src/app.rb` file can use `ruby_wasm_ui` just like in the Quick Start example:
+
+```ruby
+require "js"
+
+CounterComponent = RubyWasmUi.define_component(
+  state: ->(props) {
+    { count: props[:count] || 0 }
+  },
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <div>{state[:count]}</div>
+        <button on="{ click: -> { increment } }">Increment</button>
+      </div>
+    HTML
+  },
+  methods: {
+    increment: ->() {
+      update_state(count: state[:count] + 1)
+    }
+  }
+)
+
+app = RubyWasmUi::App.create(CounterComponent, count: 0)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)
+```
+
+See the [examples](examples) directory for a complete working example.
+
+## Documentation
+
+- [Conditional Rendering with r-if](docs/conditional-rendering.md)
+- [List Rendering with r-for](docs/list-rendering.md)
+- [Lifecycle Hooks](docs/lifecycle-hooks.md)
+
+## Development
+
+This project is currently under active development. To run the examples locally:
+
+```bash
+# Run production examples
+npm run serve:examples
+
+# Run development examples
+npm run serve:examples:dev
+```
+
+## License
+
+MIT

data/Rakefile

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+task default: %i[]

data/docs/conditional-rendering.md

@@ -0,0 +1,119 @@
+# Conditional Rendering with r-if
+
+ruby-wasm-ui provides the `r-if` directive for conditional rendering of elements based on state or computed values:
+
+```ruby
+# Component demonstrating r-if conditional rendering
+ConditionalComponent = RubyWasmUi.define_component(
+  state: ->() {
+    {
+      show_message: false,
+      counter: 0
+    }
+  },
+
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <!-- Simple boolean condition -->
+        <div r-if="{state[:show_message]}">
+          <p>This message is conditionally rendered!</p>
+        </div>
+
+        <!-- Using r-if, r-elsif, r-else for multiple conditions -->
+        <div r-if="{state[:counter] > 0}">
+          <p>Counter is positive: {state[:counter]}</p>
+        </div>
+
+        <div r-elsif="{state[:counter] < 0}">
+          <p>Counter is negative: {state[:counter]}</p>
+        </div>
+
+        <div r-else>
+          <p>Counter is zero</p>
+        </div>
+
+        <!-- Toggle button -->
+        <button on="{click: ->() { toggle_message }}">
+          {state[:show_message] ? "Hide" : "Show"} Message
+        </button>
+      </div>
+    HTML
+  },
+
+  methods: {
+    toggle_message: ->() {
+      update_state(show_message: !state[:show_message])
+    }
+  }
+)
+```
+
+## r-if, r-elsif, r-else Syntax
+
+The conditional directives work together to create if-elsif-else chains:
+
+### Basic Usage
+
+- **`r-if="{condition}"`**: Renders the element when condition is truthy
+- **`r-elsif="{condition}"`**: Renders when previous conditions are falsy and this condition is truthy
+- **`r-else`**: Renders when all previous conditions are falsy (no condition needed)
+
+### Expression Evaluation
+
+All conditional expressions are evaluated as Ruby code within curly braces `{}`:
+
+- Use any valid Ruby expression that returns a truthy or falsy value
+- Access component state with `state[:key]`
+- Access props with `props[:key]`
+- Support for comparison operators (`>`, `<`, `==`, `!=`, etc.)
+- Support for logical operators (`&&`, `||`, `!`)
+- Support for method calls and complex expressions
+
+### Conditional Chain Rules
+
+1. **Sequential Processing**: Conditions are evaluated in order (r-if → r-elsif → r-else)
+2. **Mutual Exclusivity**: Only one element in a conditional chain will render
+3. **Grouping**: Consecutive conditional elements form a single conditional group
+4. **Breaking**: A new `r-if` breaks the current conditional chain and starts a new one
+
+### Advanced Example
+
+```ruby
+# Real-world example with loading states and data
+LoadingComponent = RubyWasmUi.define_component(
+  state: ->() {
+    {
+      is_loading: false,
+      data: nil,
+      error: nil
+    }
+  },
+
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <!-- Loading state -->
+        <p r-if="{state[:is_loading]}">Loading...</p>
+
+        <!-- Error state -->
+        <div r-elsif="{state[:error]}" style="color: red;">
+          <p>Error: {state[:error]}</p>
+          <button on="{click: ->() { retry_load }}">Retry</button>
+        </div>
+
+        <!-- Success state with data -->
+        <div r-elsif="{state[:data]}">
+          <h2>{state[:data][:title]}</h2>
+          <p>{state[:data][:description]}</p>
+        </div>
+
+        <!-- Initial state (no loading, no error, no data) -->
+        <button r-else on="{click: ->() { load_data }}">
+          Load Data
+        </button>
+      </div>
+    HTML
+  }
+)
+```