RubyGems - ruby_wasm_ui - Versions diffs - 0.8.1 → 0.8.2 - Mend

ruby_wasm_ui 0.8.1 → 0.8.2

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

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35c9a72b39d103d9d57bb41e60d69830966d45faa673c926cd1709ed991ad389
-  data.tar.gz: 62fd13431aff9e10a4bd29de95cc1457efd365004f9b82717207014658ea4204
+  metadata.gz: a999410f2d0e3c789843f58022405b1f9af0bd5640efb042ccc41464beb9e70d
+  data.tar.gz: 92733ff997682478437f0df8f21fa3a4d0903ebf20fb1dd17c4923686b4e19df
 SHA512:
-  metadata.gz: f8384fb1deb73e52d0ab70c8444b459716db2b9ea01094fa87ce557bd970c38360b6853e8c1005d95c232f35148e71311bc510badfdd94ed04ce9bf5bace2ba8
-  data.tar.gz: dea729cadcb8b017fe8a7772364af85c168f9bf816dda4bd030f0e237796007231dd4b286e708e586d8a6f5b66b75afce2743aa703ab86179bcbc5b161cdb7c2
+  metadata.gz: 35e4dcd436516375d2dc7e993580b1dd0cb73f3e8f6c55fbf4729ec6923f1b5655c724422e9356d65c6386c941838f6479281e002923f9f09071264e57681943
+  data.tar.gz: 62b4a4bb92dc563ce77c6ad0ee761acffd7c39b32c438bc1ca2732b1e729bd25062c8681553768f1061963962337825bad2de8674d902363eff78f5e52456572

data/README.md CHANGED Viewed

@@ -21,7 +21,7 @@ Create an HTML file:
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/ruby-wasm-ui@0.8.1"></script>
+    <script src="https://unpkg.com/ruby-wasm-ui@0.8.2"></script>
     <script defer type="text/ruby" src="app.rb"></script>
   </head>
   <body>
@@ -167,8 +167,6 @@ my-app/
 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 }

data/examples/src/todos/index.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Todos</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/todos/todos_repository.rb'
+        require_relative './src/todos/index.rb'
+      `);
+    </script>
+  </head>
+  <body>
+    <h1>Todos</h1>
+    <div id="app"></div>
+  </body>
+</html>

data/examples/src/todos/index.rb ADDED Viewed

@@ -0,0 +1,237 @@
+# Main App component - coordinates all other components
+AppComponent = RubyWasmUi.define_component(
+  # Initialize application state
+  state: ->(props) {
+    {
+      todos: [
+        { id: rand(10000), text: "Walk the dog" },
+        { id: rand(10000), text: "Water the plants" },
+        { id: rand(10000), text: "Sand the chairs" }
+      ]
+    }
+  },
+  on_mounted: -> {
+    update_state(todos: TodosRepository.read_todos)
+  },
+  # Render the complete application
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <template>
+        <h1>My TODOs</h1>
+        <CreateTodoComponent
+          on="{ add: ->(text) { add_todo(text) } }"
+        />
+        <TodoListComponent
+          todos="{state[:todos]}"
+          on="{
+            remove: ->(id) { remove_todo(id) },
+            edit: ->(payload) { edit_todo(payload) }
+          }"
+        />
+      </template>
+    HTML
+  },
+  # Component methods
+  methods: {
+    # Add a new TODO to the list
+    # @param text [String] The TODO text
+    add_todo: ->(text) {
+      todo = { id: rand(10000), text: text }
+      new_todos = state[:todos] + [todo]
+      update_state(todos: new_todos)
+      TodosRepository.write_todos(new_todos)
+    },
+    # Remove a TODO from the list
+    # @param id [Integer] Id of TODO to remove
+    remove_todo: ->(id) {
+      new_todos = state[:todos].dup
+      new_todos.delete_at(new_todos.index { |todo| todo[:id] == id })
+      update_state(todos: new_todos)
+      TodosRepository.write_todos(new_todos)
+    },
+    # Edit an existing TODO
+    # @param payload [Hash] Contains edited text and index
+    edit_todo: ->(payload) {
+      edited = payload[:edited]
+      id = payload[:id]
+      new_todos = state[:todos].dup
+      new_todos[new_todos.index { |todo| todo[:id] == id }] = new_todos[new_todos.index { |todo| todo[:id] == id }].merge(text: edited)
+      update_state(todos: new_todos)
+      TodosRepository.write_todos(new_todos)
+    }
+  }
+)
+# CreateTodo component - handles new TODO input
+CreateTodoComponent = RubyWasmUi.define_component(
+  # Initialize component state
+  state: ->(props) {
+    { text: "" }
+  },
+  # Render the new TODO input form
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <div>
+        <label for="todo-input" type="text">New TODO</label>
+        <input
+          type="text"
+          id="todo-input"
+          value="{state[:text]}"
+          on="{
+            input: ->(e) { update_state(text: e[:target][:value]) },
+            keydown: ->(e) {
+              if e[:key] == 'Enter' && state[:text].to_s.length >= 3
+                add_todo
+              end
+            }
+          }"
+        />
+        <button disabled="{state[:text].to_s.length < 3}" on="{ click: ->() { add_todo } }">
+          Add
+        </button>
+      </div>
+    HTML
+  },
+  # Component methods
+  methods: {
+    # Add a new TODO and emit event to parent
+    add_todo: ->() {
+      emit("add", state[:text])
+      update_state(text: "")
+    }
+  }
+)
+# TodoList component - manages the list of TODO items
+TodoListComponent = RubyWasmUi.define_component(
+  # Render the TODO list
+  template: ->() {
+    todos = props[:todos]
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <ul>
+        <TodoItemComponent
+          r-for="{todo in todos}"
+          key="{todo[:id]}"
+          todo="{todo[:text]}"
+          id="{todo[:id]}"
+          on="{
+            remove: ->(id) { emit('remove', id) },
+            edit: ->(payload) { emit('edit', payload) }
+          }"
+        />
+      </ul>
+    HTML
+  },
+)
+# TodoItem component - handles individual TODO items
+TodoItemComponent = RubyWasmUi.define_component(
+  # Initialize component state with editing capabilities
+  state: ->(props) {
+    {
+      original: props[:todo],
+      edited: props[:todo],
+      is_editing: false
+    }
+  },
+  # Render TODO item using r-if and r-else for conditional rendering
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <template>
+        <TodoItemEditComponent
+          r-if="{state[:is_editing]}"
+          edited="{state[:edited]}"
+          on="{
+            input: ->(value) { input_value(value) },
+            save: ->() { save_edition },
+            cancel: ->() { cancel_edition }
+          }"
+        />
+        <TodoItemViewComponent
+          r-else
+          original="{state[:original]}"
+          id="{props[:id]}"
+          on="{
+            editing: ->() { editing },
+            remove: ->(id) { emit('remove', id) }
+          }"
+        />
+      </template>
+    HTML
+  },
+  # Component methods
+  methods: {
+    input_value: ->(value) {
+      update_state(edited: value)
+    },
+    editing: ->() {
+      update_state(is_editing: true)
+    },
+    # Save the edited TODO
+    save_edition: ->() {
+      update_state(is_editing: false, original: state[:edited])
+      emit("edit", { edited: state[:edited], id: props[:id] })
+    },
+    # Cancel editing and revert changes
+    cancel_edition: ->() {
+      update_state(edited: state[:original], is_editing: false)
+    }
+  }
+)
+# TodoItemEdit component - handles TODO editing mode
+TodoItemEditComponent = RubyWasmUi.define_component(
+  # Render TODO item in edit mode
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <li>
+        <input
+          value="{props[:edited]}"
+          type="text"
+          on="{ input: ->(e) { emit('input', e[:target][:value]) } }"
+        />
+        <button on="{ click: ->() { emit('save') } }">
+          Save
+        </button>
+        <button on="{ click: ->() { emit('cancel') } }">
+          Cancel
+        </button>
+      </li>
+    HTML
+  },
+)
+# TodoItemView component - handles TODO display mode
+TodoItemViewComponent = RubyWasmUi.define_component(
+  # Render TODO item in view mode
+  template: ->() {
+    RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding)
+      <li>
+        <span on="{ dblclick: ->() { emit('editing') } }">
+          {props[:original]}
+        </span>
+        <button on="{ click: ->() { emit('remove', props[:id]) } }">
+          Done
+        </button>
+      </li>
+    HTML
+  },
+)
+# Create and mount the application
+app = RubyWasmUi::App.create(AppComponent)
+app_element = JS.global[:document].getElementById("app")
+app.mount(app_element)

data/examples/src/todos/todos_repository.rb ADDED Viewed

@@ -0,0 +1,23 @@
+require "json"
+# Repository class for managing todos in local storage
+class TodosRepository
+  class << self
+    # Read todos from local storage
+    # @return [Array] Array of todo items
+    def read_todos
+      todos_json = JS.global[:localStorage].getItem('todos') || '[]'
+      JSON.parse(todos_json.to_s).map do |todo|
+        { id: todo["id"], text: todo["text"] }
+      end
+    end
+    # Write todos to local storage
+    # @param todos [Array] Array of todo items to be stored
+    # @return [void]
+    def write_todos(todos)
+      todos_json = JSON.generate(todos)
+      JS.global[:localStorage].setItem('todos', todos_json)
+    end
+  end
+end

data/{packages/npm-packages/runtime/src → lib}/ruby_wasm_ui/version.rb RENAMED Viewed

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module RubyWasmUi
-  VERSION = "0.8.1"
+  VERSION = "0.8.2"
 end

data/lib/ruby_wasm_ui.rb ADDED Viewed

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+require_relative "ruby_wasm_ui/app"
+require_relative "ruby_wasm_ui/component"
+require_relative "ruby_wasm_ui/dispatcher"
+require_relative "ruby_wasm_ui/dom"
+require_relative "ruby_wasm_ui/nodes_equal"
+require_relative "ruby_wasm_ui/template"
+require_relative "ruby_wasm_ui/utils"
+require_relative "ruby_wasm_ui/vdom"
+require_relative "ruby_wasm_ui/version"
+module RubyWasmUi
+end

data/package-lock.json CHANGED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "ruby-wasm-ui-project",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ruby-wasm-ui-project",
-      "version": "0.8.1",
+      "version": "0.8.2",
       "license": "MIT",
       "workspaces": [
         "packages/*"

data/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ruby-wasm-ui-project",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": true,
   "description": "A project to ruby.wasm ui framework",
   "scripts": {

data/packages/npm-packages/runtime/package-lock.json CHANGED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "ruby-wasm-ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ruby-wasm-ui",
-      "version": "0.8.1",
+      "version": "0.8.2",
       "license": "MIT",
       "devDependencies": {
         "@rollup/plugin-replace": "^6.0.2",

data/packages/npm-packages/runtime/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ruby-wasm-ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "",
   "main": "dist/ruby-wasm-ui.js",
   "files": [
@@ -10,8 +10,8 @@
   ],
   "scripts": {
     "prepack": "npm run build",
-    "build": "NODE_ENV=production rollup -c",
-    "build:dev": "NODE_ENV=development rollup -c",
+    "build": "rm -rf dist && NODE_ENV=production rollup -c",
+    "build:dev": "rm -rf dist && NODE_ENV=development rollup -c",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "test": "vitest",

data/packages/npm-packages/runtime/src/ruby_wasm_ui ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../../../lib/ruby_wasm_ui

data/packages/npm-packages/runtime/src/ruby_wasm_ui.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../../../lib/ruby_wasm_ui.rb

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ruby_wasm_ui
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.8.2
 platform: ruby
 authors:
 - t0yohei
@@ -89,8 +89,33 @@ files:
 - examples/package.json
 - examples/src/counter/index.html
 - examples/src/counter/index.rb
-- lib/ruby_wasm_ui
+- examples/src/todos/index.html
+- examples/src/todos/index.rb
+- examples/src/todos/todos_repository.rb
 - lib/ruby_wasm_ui.rb
+- lib/ruby_wasm_ui/app.rb
+- lib/ruby_wasm_ui/component.rb
+- lib/ruby_wasm_ui/dispatcher.rb
+- lib/ruby_wasm_ui/dom.rb
+- lib/ruby_wasm_ui/dom/attributes.rb
+- lib/ruby_wasm_ui/dom/destroy_dom.rb
+- lib/ruby_wasm_ui/dom/events.rb
+- lib/ruby_wasm_ui/dom/mount_dom.rb
+- lib/ruby_wasm_ui/dom/patch_dom.rb
+- lib/ruby_wasm_ui/dom/scheduler.rb
+- lib/ruby_wasm_ui/nodes_equal.rb
+- lib/ruby_wasm_ui/template.rb
+- lib/ruby_wasm_ui/template/build_conditional_group.rb
+- lib/ruby_wasm_ui/template/build_for_group.rb
+- lib/ruby_wasm_ui/template/build_vdom.rb
+- lib/ruby_wasm_ui/template/parser.rb
+- lib/ruby_wasm_ui/utils.rb
+- lib/ruby_wasm_ui/utils/arrays.rb
+- lib/ruby_wasm_ui/utils/objects.rb
+- lib/ruby_wasm_ui/utils/props.rb
+- lib/ruby_wasm_ui/utils/strings.rb
+- lib/ruby_wasm_ui/vdom.rb
+- lib/ruby_wasm_ui/version.rb
 - package-lock.json
 - package.json
 - packages/npm-packages/runtime/Gemfile
@@ -114,30 +139,8 @@ files:
 - packages/npm-packages/runtime/spec/spec_helper.rb
 - packages/npm-packages/runtime/src/__tests__/sample.test.js
 - packages/npm-packages/runtime/src/index.js
+- packages/npm-packages/runtime/src/ruby_wasm_ui
 - packages/npm-packages/runtime/src/ruby_wasm_ui.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/app.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/component.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dispatcher.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dom.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dom/attributes.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dom/destroy_dom.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dom/events.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dom/mount_dom.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dom/patch_dom.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/dom/scheduler.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/nodes_equal.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/template.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/template/build_conditional_group.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/template/build_for_group.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/template/build_vdom.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/template/parser.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/utils.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/utils/arrays.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/utils/objects.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/utils/props.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/utils/strings.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/vdom.rb
-- packages/npm-packages/runtime/src/ruby_wasm_ui/version.rb
 - packages/npm-packages/runtime/vitest.config.js
 - playwright.config.js
 - sig/ruby_wasm_ui.rbs

data/lib/ruby_wasm_ui DELETED Viewed

	@@ -1 +0,0 @@
1	- ../packages/npm-packages/runtime/src/ruby_wasm_ui

data/lib/ruby_wasm_ui.rb DELETED Viewed

	@@ -1 +0,0 @@
1	- ../packages/npm-packages/runtime/src/ruby_wasm_ui.rb

data/packages/npm-packages/runtime/src/ruby_wasm_ui.rb DELETED Viewed

@@ -1,14 +0,0 @@
-# frozen_string_literal: true
-require_relative "ruby_wasm_ui/app"
-require_relative "ruby_wasm_ui/component"
-require_relative "ruby_wasm_ui/dispatcher"
-require_relative "ruby_wasm_ui/dom"
-require_relative "ruby_wasm_ui/nodes_equal"
-require_relative "ruby_wasm_ui/template"
-require_relative "ruby_wasm_ui/utils"
-require_relative "ruby_wasm_ui/vdom"
-require_relative "ruby_wasm_ui/version"
-module RubyWasmUi
-end