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

ruby_wasm_ui 0.8.1 → 0.8.3

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

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35c9a72b39d103d9d57bb41e60d69830966d45faa673c926cd1709ed991ad389
-  data.tar.gz: 62fd13431aff9e10a4bd29de95cc1457efd365004f9b82717207014658ea4204
+  metadata.gz: b322433e65bc63155825e97695c798bce90602a54e52797cd040aea67b909751
+  data.tar.gz: 1655781e0e93952e5f2ecc2e450d5a9286718979f3201f0169ae35dc94979872
 SHA512:
-  metadata.gz: f8384fb1deb73e52d0ab70c8444b459716db2b9ea01094fa87ce557bd970c38360b6853e8c1005d95c232f35148e71311bc510badfdd94ed04ce9bf5bace2ba8
-  data.tar.gz: dea729cadcb8b017fe8a7772364af85c168f9bf816dda4bd030f0e237796007231dd4b286e708e586d8a6f5b66b75afce2743aa703ab86179bcbc5b161cdb7c2
+  metadata.gz: 97e3cf3322340377c5cb75d74796bd20096d604d9ef1efe87ed9598d8394ae76ad6d7b481c43c3e721b683208489083164b6c7730b09106f4dceefdb8647a52c
+  data.tar.gz: 7d04075d81325a78375ffbd9d711e82af3a48531acc9eec340f6d71df76501741d4573bae368eca7ae14c752c1f4fb8c894ee028007c028df39cab2595ef10a1

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.3"></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/Gemfile.lock CHANGED Viewed

@@ -1,7 +1,7 @@
 PATH
   remote: ../..
   specs:
-    ruby_wasm_ui (0.8.1)
+    ruby_wasm_ui (0.8.3)
       js (~> 2.7)
       ruby_wasm (~> 2.7)

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.3"
 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.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ruby-wasm-ui",
-      "version": "0.8.1",
+      "version": "0.8.3",
       "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.3",
   "description": "",
   "main": "dist/ruby-wasm-ui.js",
   "files": [

data/packages/npm-packages/runtime/rollup.config.mjs CHANGED Viewed

@@ -4,7 +4,13 @@ import filesize from "rollup-plugin-filesize";
 import replace from "@rollup/plugin-replace";
 import { glob } from "glob";
 import process from "process";
-import { readFileSync, writeFileSync } from "fs";
+import {
+  readFileSync,
+  writeFileSync,
+  lstatSync,
+  unlinkSync,
+  realpathSync,
+} from "fs";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
@@ -28,22 +34,68 @@ const rubyFiles = glob
 // Determine environment based on NODE_ENV
 const isDevelopment = process.env.NODE_ENV === "development";
+// Plugin to clean up existing symlinks in dist directory before copy
+const cleanupSymlinks = () => {
+  return {
+    name: "cleanup-symlinks",
+    buildStart() {
+      const distRubyFilePath = join(__dirname, "dist/ruby_wasm_ui.rb");
+      try {
+        const stats = lstatSync(distRubyFilePath);
+        if (stats.isSymbolicLink() || stats.isFile()) {
+          // Remove existing file/symlink before copy plugin runs
+          unlinkSync(distRubyFilePath);
+        }
+      } catch (e) {
+        // Ignore errors (file might not exist)
+      }
+    },
+  };
+};
 // Plugin to remove require_relative lines from Ruby files
 const removeRequireRelative = () => {
   return {
     name: "remove-require-relative",
     writeBundle() {
-      // Process all Ruby files in dist directory recursively
-      const distRubyFiles = glob.sync("dist/**/*.rb");
+      // Process all Ruby files in dist directory (including dist/ruby_wasm_ui.rb)
+      // Ensure we only process files in dist/ directory, not lib/ or other source directories
+      const distDir = join(__dirname, "dist");
+      const distRubyFiles = glob.sync("dist/**/*.rb", {
+        cwd: __dirname,
+        absolute: false,
+      });
       distRubyFiles.forEach((file) => {
         const filePath = join(__dirname, file);
-        let content = readFileSync(filePath, "utf-8");
-        // Remove lines that start with require_relative (with optional whitespace)
-        content = content.replace(/^\s*require_relative\s+.*$/gm, "");
-        // Remove multiple consecutive empty lines
-        content = content.replace(/\n{3,}/g, "\n\n");
-        writeFileSync(filePath, content, "utf-8");
+        try {
+          const stats = lstatSync(filePath);
+          let content;
+          // If it's a symlink to lib/, read from lib but write to dist
+          if (stats.isSymbolicLink()) {
+            const resolvedPath = realpathSync(filePath);
+            const distDirResolved = realpathSync(distDir);
+            if (!resolvedPath.startsWith(distDirResolved)) {
+              // Read from lib, but write to dist (replacing the symlink)
+              content = readFileSync(resolvedPath, "utf-8");
+              unlinkSync(filePath);
+            } else {
+              // Symlink resolves within dist, read resolved path
+              content = readFileSync(resolvedPath, "utf-8");
+            }
+          } else {
+            // Regular file, read directly
+            content = readFileSync(filePath, "utf-8");
+          }
+          // Remove lines that start with require_relative (with optional whitespace)
+          content = content.replace(/^\s*require_relative\s+.*$/gm, "");
+          // Remove multiple consecutive empty lines
+          content = content.replace(/\n{3,}/g, "\n\n");
+          writeFileSync(filePath, content, "utf-8");
+        } catch (e) {
+          // If read/write fails, skip this file
+          console.warn(`Could not process file ${filePath}: ${e.message}`);
+        }
       });
     },
   };
@@ -66,6 +118,7 @@ export default {
         "window.RUBY_WASM_UI_FILES": JSON.stringify(rubyFiles),
       },
     }),
+    cleanupSymlinks(),
     copy({
       targets: [
         {
@@ -78,6 +131,11 @@ export default {
           dest: "dist",
         },
       ],
+      // Resolve symbolic links when copying to ensure dist files are regular files
+      // This allows us to process dist/ruby_wasm_ui.rb without affecting lib/ruby_wasm_ui.rb
+      copySyncOptions: {
+        dereference: true,
+      },
     }),
     cleanup({
       comments: "none",

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.3
 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