ruwi 0.10.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 23dcf163b84bd3dcfc1813eda7b733fab7329a6cced1032d4bc7b4c39b9c0502
+  data.tar.gz: 78bf95d820ffb8191296b2aa509fafb0aeb9a63249b08b0dcb601bb66c630603
+SHA512:
+  metadata.gz: b4659b38b22738c6ce148e6608896a52484c506780969024d89d809731fccca1853b6f6c85679cbe23a5e5e45402240fa416a82f0b5589fc3a3a8d610bfbc2d9
+  data.tar.gz: 6675d612861f03b2ddeb73da56c2fa99c21e6af1e4ecfbd5089b89b6237bfb7c3338e946e28c38e1c52310ce3c0ccbd3be8df72cc41137e3b5c05c000d18a987

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,31 @@
+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: |
+          bundle install
+
+      - name: Run RSpec
+        run: |
+          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/Makefile

@@ -0,0 +1,56 @@
+.PHONY: bump help
+
+help:
+	@echo "Usage: make bump <version>"
+	@echo "       make bump VERSION=<version>"
+	@echo "Example: make bump 0.9.0"
+	@echo ""
+	@echo "This command updates the version number in the following files:"
+	@echo "  - lib/ruwi/version.rb"
+	@echo "  - package.json"
+	@echo "  - packages/npm-packages/runtime/package.json"
+	@echo "  - README.md"
+	@echo "  - package-lock.json (via npm install)"
+	@echo "  - packages/npm-packages/runtime/package-lock.json (via npm install)"
+
+# Get version from position argument (if VERSION is not already set)
+VERSION_ARG := $(word 2,$(MAKECMDGOALS))
+ifndef VERSION
+  ifneq ($(VERSION_ARG),)
+    VERSION := $(VERSION_ARG)
+  endif
+endif
+
+bump:
+	@if [ -z "$(VERSION)" ]; then \
+		echo "Error: VERSION is required. Usage: make bump 0.9.0"; \
+		exit 1; \
+	fi
+	@echo "Bumping version to $(VERSION)..."
+	@# Update lib/ruwi/version.rb
+	@sed -i '' 's/VERSION = ".*"/VERSION = "$(VERSION)"/' lib/ruwi/version.rb
+	@echo "✓ Updated lib/ruwi/version.rb"
+	@# Update Gemfile.lock
+	@bundle install
+	@echo "✓ Updated Gemfile.lock"
+	@# Update root package.json
+	@sed -i '' 's/"version": ".*"/"version": "$(VERSION)"/' package.json
+	@echo "✓ Updated package.json"
+	@# Update packages/npm-packages/runtime/package.json
+	@sed -i '' 's/"version": ".*"/"version": "$(VERSION)"/' packages/npm-packages/runtime/package.json
+	@echo "✓ Updated packages/npm-packages/runtime/package.json"
+	@# Update README.md (unpkg.com URL)
+	@sed -i '' 's|unpkg.com/ruwi@[0-9.]*|unpkg.com/ruwi@$(VERSION)|' README.md
+	@echo "✓ Updated README.md"
+	@echo ""
+	@echo "Updating package-lock.json files..."
+	@npm install --package-lock-only
+	@echo "✓ Updated root package-lock.json"
+	@cd packages/npm-packages/runtime && npm install --package-lock-only && cd ../../..
+	@echo "✓ Updated packages/npm-packages/runtime/package-lock.json"
+	@echo ""
+	@echo "Version bumped to $(VERSION) successfully!"
+
+# Prevent make from treating the version argument as a target
+%:
+	@:

data/README.md

@@ -0,0 +1,237 @@
+# Ruwi(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/ruwi@0.10.0"></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 = Ruwi.define_component(
+  # Initialize component state
+  state: ->(props) {
+    { count: props[:count] || 0 }
+  },
+
+  # Render the counter component
+  template: ->() {
+    Ruwi::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 = Ruwi.define_component(
+  template: ->() {
+    Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <button on="{ click: ->() { emit('click_button') } }">
+        {props[:label]}
+      </button>
+    HTML
+  }
+)
+
+# Create and mount the app
+app = Ruwi::App.create(CounterComponent, count: 5)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)
+```
+
+## Using as a Gem
+
+You can also use `ruwi` as a Ruby gem with `rbwasm` to build your application as a WASM file.
+
+### Setup
+
+1. Add `ruwi` to your `Gemfile`:
+
+```ruby
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+gem "ruwi"
+```
+
+2. Install dependencies:
+
+```bash
+bundle install
+```
+
+### Building Your Application
+
+Set up your project (first time only):
+
+```bash
+bundle exec ruwi setup
+```
+
+This command will:
+- Configure excluded gems for WASM build
+- Build Ruby WASM file
+- Update `.gitignore`
+- Create initial `src/index.html` and `src/index.rb` files
+
+The setup command will configure your project structure as follows:
+
+```
+my-app/
+├── Gemfile
+└── src/
+    ├── index.rb
+    └── index.html
+```
+
+
+### Develop Your Application
+
+- **Development server**: Start a development server with file watching and auto-build:
+  ```bash
+  bundle exec ruwi dev
+  ```
+
+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 "ruwi"
+        require_relative './src/index.rb'
+      `);
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+```
+
+Your `src/index.rb` file can use `ruwi` just like in the Quick Start example:
+
+```ruby
+CounterComponent = Ruwi.define_component(
+  state: ->(props) {
+    { count: props[:count] || 0 }
+  },
+  template: ->() {
+    Ruwi::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 = Ruwi::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.
+
+
+**Additional Commands:**
+
+- **Rebuild Ruby WASM**: Rebuild the Ruby WASM file when you add new gems:
+  ```bash
+  bundle exec ruwi rebuild
+  ```
+
+### Deployment
+
+Pack your application files for deployment:
+
+```bash
+bundle exec ruwi pack
+```
+
+This command packs your Ruby files from the `./src` directory into the WASM file and outputs to the `dist` directory for deployment.
+
+## 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[]