@sue445/rb-wasm-vdom 0.1.0-beta.5 → 0.1.1

package/README.md

@@ -5,6 +5,67 @@ A reactive Virtual DOM library for [ruby.wasm](https://github.com/ruby/ruby.wasm
 [![](https://data.jsdelivr.com/v1/package/npm/@sue445/rb-wasm-vdom/badge)](https://www.jsdelivr.com/package/npm/@sue445/rb-wasm-vdom)
 [![build](https://github.com/sue445/rb-wasm-vdom/actions/workflows/build.yml/badge.svg)](https://github.com/sue445/rb-wasm-vdom/actions/workflows/build.yml)
 
+## Quick Start
+```html
+<!-- Using ruby.wasm -->
+<script src="https://cdn.jsdelivr.net/npm/@ruby/head-wasm-wasi/dist/browser.script.iife.min.js"></script>
+
+<!--
+or using Picoruby.wasm
+<script src="https://cdn.jsdelivr.net/npm/@picoruby/wasm-wasi@latest/dist/init.iife.js"></script>
+-->
+
+<script type="text/ruby" src="https://cdn.jsdelivr.net/npm/@sue445/rb-wasm-vdom@latest/dist/rb-wasm-vdom.rb"></script>
+
+<div id="app"></div>
+
+<script type="text/ruby">
+  # Define the template with variable interpolation and event bindings
+  template = <<~HTML
+    <div class="app-container">
+      <h2 style="margin-top: 0; color: #cc342d;">{{ title }}</h2>
+
+      <div style="margin-bottom: 15px;">
+        <label>Step value: </label>
+        <input type="number" class="input-box" value="{{ step }}" @input="update_step">
+      </div>
+
+      <p style="font-size: 1.2rem;">Current Count: <strong>{{ count }}</strong></p>
+
+      <button class="btn" @click="increment">+ Increment</button>
+      <button class="btn" @click="decrement">- Decrement</button>
+      <button class="btn" style="background: #666;" @click="reset">Reset</button>
+    </div>
+  HTML
+
+  # Define the reactive state
+  state = {
+    title: "Ruby Reactivity App",
+    count: 0,
+    step: 1
+  }
+
+  # Define the methods to handle events and mutate the state
+  methods = {
+    increment:   ->(e, s) { s[:count] += s[:step] },
+    decrement:   ->(e, s) { s[:count] -= s[:step] },
+    reset:       ->(e, s) { s[:count] = 0 },
+    update_step: ->(e, s) { s[:step] = e[:target][:value].to_i }
+  }
+
+  # Initialize and mount the application
+  RbWasmVdom.create_app("#app", template: template, state: state, methods: methods)
+</script>
+
+```
+
+## Examples
+* https://sue445.github.io/rb-wasm-vdom/example1-ruby-wasm.html
+* https://sue445.github.io/rb-wasm-vdom/example1-picoruby-wasm.html
+
+## Usage
+For detailed usage, see [USAGE.md](USAGE.md).
+
 ## Development
 ### Run unit test
 At first, install [wasmtime](https://docs.wasmtime.dev/cli-install.html)

package/dist/rb-wasm-vdom.rb

@@ -21,9 +21,6 @@ module RbWasmVdom
 end
 
 
-# frozen_string_literal: true
-# rbs_inline: enabled
-
 module RbWasmVdom
   # Reactive State Management
   class ReactiveState
@@ -54,9 +51,6 @@ module RbWasmVdom
 end
 
 
-# frozen_string_literal: true
-# rbs_inline: enabled
-
 module RbWasmVdom
   # HTML Template Parser
   class TemplateParser
@@ -113,9 +107,6 @@ module RbWasmVdom
 end
 
 
-# frozen_string_literal: true
-# rbs_inline: enabled
-
 module RbWasmVdom
   module DomRenderer
     private
@@ -207,9 +198,6 @@ module RbWasmVdom
 end
 
 
-# frozen_string_literal: true
-# rbs_inline: enabled
-
 module RbWasmVdom
   module Patcher
     include DomRenderer
@@ -335,9 +323,6 @@ module RbWasmVdom
 end
 
 
-# frozen_string_literal: true
-# rbs_inline: enabled
-
 module RbWasmVdom
   class Interpolator
     PLACEHOLDER_PATTERN = /\{\{\s*\w+\s*\}\}/
@@ -369,9 +354,6 @@ module RbWasmVdom
 end
 
 
-# frozen_string_literal: true
-# rbs_inline: enabled
-
 module RbWasmVdom
   # Framework Core
   class App
@@ -430,9 +412,6 @@ module RbWasmVdom
 end
 
 
-# frozen_string_literal: true
-# rbs_inline: enabled
-
 require "js"
 require "json"
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sue445/rb-wasm-vdom",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.1",
   "description": "A reactive Virtual DOM library for ruby.wasm and Picoruby.wasm",
   "keywords": [
     "ruby.wasm",
     "picoruby.wasm"
   ],
-  "homepage": "https://github.com/sue445/rb-wasm-vdom#readme",
+  "homepage": "https://github.com/sue445/rb-wasm-vdom",
   "bugs": {
     "url": "https://github.com/sue445/rb-wasm-vdom/issues"
   },
@@ -31,7 +31,8 @@
   ],
   "scripts": {
     "build": "vite build && node scripts/build-ruby.js",
-    "test": "npm run test:unit && npm run test:integration",
+    "test": "npm run test:unit && npm run test:integration && npm run test:integration",
+    "test:build": "node --test 'test/build/*.test.js'",
     "test:integration": "npm run build && playwright test test/integration/",
     "test:unit": "npm run test:unit:ruby-wasm-head",
     "test:unit:ruby-wasm-head": "node scripts/run-unit-tests.js ruby-wasm-head"