@sue445/rb-wasm-vdom 0.1.0-beta.5 → 0.1.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.
- package/README.md +61 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -5,6 +5,67 @@ A reactive Virtual DOM library for [ruby.wasm](https://github.com/ruby/ruby.wasm
|
|
|
5
5
|
[](https://www.jsdelivr.com/package/npm/@sue445/rb-wasm-vdom)
|
|
6
6
|
[](https://github.com/sue445/rb-wasm-vdom/actions/workflows/build.yml)
|
|
7
7
|
|
|
8
|
+
## Quick Start
|
|
9
|
+
```html
|
|
10
|
+
<!-- Using ruby.wasm -->
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/@ruby/head-wasm-wasi/dist/browser.script.iife.min.js"></script>
|
|
12
|
+
|
|
13
|
+
<!--
|
|
14
|
+
or using Picoruby.wasm
|
|
15
|
+
<script src="https://cdn.jsdelivr.net/npm/@picoruby/wasm-wasi@latest/dist/init.iife.js"></script>
|
|
16
|
+
-->
|
|
17
|
+
|
|
18
|
+
<script type="text/ruby" src="https://cdn.jsdelivr.net/npm/@sue445/rb-wasm-vdom@latest/dist/rb-wasm-vdom.rb"></script>
|
|
19
|
+
|
|
20
|
+
<div id="app"></div>
|
|
21
|
+
|
|
22
|
+
<script type="text/ruby">
|
|
23
|
+
# Define the template with variable interpolation and event bindings
|
|
24
|
+
template = <<~HTML
|
|
25
|
+
<div class="app-container">
|
|
26
|
+
<h2 style="margin-top: 0; color: #cc342d;">{{ title }}</h2>
|
|
27
|
+
|
|
28
|
+
<div style="margin-bottom: 15px;">
|
|
29
|
+
<label>Step value: </label>
|
|
30
|
+
<input type="number" class="input-box" value="{{ step }}" @input="update_step">
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<p style="font-size: 1.2rem;">Current Count: <strong>{{ count }}</strong></p>
|
|
34
|
+
|
|
35
|
+
<button class="btn" @click="increment">+ Increment</button>
|
|
36
|
+
<button class="btn" @click="decrement">- Decrement</button>
|
|
37
|
+
<button class="btn" style="background: #666;" @click="reset">Reset</button>
|
|
38
|
+
</div>
|
|
39
|
+
HTML
|
|
40
|
+
|
|
41
|
+
# Define the reactive state
|
|
42
|
+
state = {
|
|
43
|
+
title: "Ruby Reactivity App",
|
|
44
|
+
count: 0,
|
|
45
|
+
step: 1
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
# Define the methods to handle events and mutate the state
|
|
49
|
+
methods = {
|
|
50
|
+
increment: ->(e, s) { s[:count] += s[:step] },
|
|
51
|
+
decrement: ->(e, s) { s[:count] -= s[:step] },
|
|
52
|
+
reset: ->(e, s) { s[:count] = 0 },
|
|
53
|
+
update_step: ->(e, s) { s[:step] = e[:target][:value].to_i }
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
# Initialize and mount the application
|
|
57
|
+
RbWasmVdom.create_app("#app", template: template, state: state, methods: methods)
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Examples
|
|
63
|
+
* https://sue445.github.io/rb-wasm-vdom/example1-ruby-wasm.html
|
|
64
|
+
* https://sue445.github.io/rb-wasm-vdom/example1-picoruby-wasm.html
|
|
65
|
+
|
|
66
|
+
## Usage
|
|
67
|
+
For detailed usage, see [USAGE.md](USAGE.md).
|
|
68
|
+
|
|
8
69
|
## Development
|
|
9
70
|
### Run unit test
|
|
10
71
|
At first, install [wasmtime](https://docs.wasmtime.dev/cli-install.html)
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sue445/rb-wasm-vdom",
|
|
3
|
-
"version": "0.1.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "A reactive Virtual DOM library for ruby.wasm and Picoruby.wasm",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ruby.wasm",
|
|
7
7
|
"picoruby.wasm"
|
|
8
8
|
],
|
|
9
|
-
"homepage": "https://github.com/sue445/rb-wasm-vdom
|
|
9
|
+
"homepage": "https://github.com/sue445/rb-wasm-vdom",
|
|
10
10
|
"bugs": {
|
|
11
11
|
"url": "https://github.com/sue445/rb-wasm-vdom/issues"
|
|
12
12
|
},
|