diff --git a/Gemfile b/Gemfile index 2d82517..0d8e8a3 100644 --- a/Gemfile +++ b/Gemfile @@ -2,7 +2,7 @@ source "https://rubygems.org" -# Specify your gem's dependencies in ruby_wasm_ui.gemspec +# Specify your gem's dependencies in ruwi.gemspec gemspec gem "irb" diff --git a/Gemfile.lock b/Gemfile.lock index 1e730c9..01620a7 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - ruby_wasm_ui (0.9.1) + ruwi (0.9.1) js (~> 2.7) listen (~> 3.8) puma (~> 6.0) @@ -94,7 +94,7 @@ DEPENDENCIES irb rake (~> 13.0) rspec - ruby_wasm_ui! + ruwi! BUNDLED WITH 2.7.2 diff --git a/Makefile b/Makefile index 5129df2..72aad07 100644 --- a/Makefile +++ b/Makefile @@ -6,7 +6,7 @@ help: @echo "Example: make bump 0.9.0" @echo "" @echo "This command updates the version number in the following files:" - @echo " - lib/ruby_wasm_ui/version.rb" + @echo " - lib/ruwi/version.rb" @echo " - package.json" @echo " - packages/npm-packages/runtime/package.json" @echo " - README.md" @@ -27,9 +27,9 @@ bump: exit 1; \ fi @echo "Bumping version to $(VERSION)..." - @# Update lib/ruby_wasm_ui/version.rb - @sed -i '' 's/VERSION = ".*"/VERSION = "$(VERSION)"/' lib/ruby_wasm_ui/version.rb - @echo "✓ Updated lib/ruby_wasm_ui/version.rb" + @# 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" @@ -40,7 +40,7 @@ bump: @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/ruby-wasm-ui@[0-9.]*|unpkg.com/ruby-wasm-ui@$(VERSION)|' README.md + @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..." diff --git a/README.md b/README.md index 2bb7ee8..40b9dcf 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ruby-wasm-ui +# ruwi 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. @@ -21,7 +21,7 @@ Create an HTML file: - + @@ -36,7 +36,7 @@ Create `app.rb`: require "js" # Define a Counter component -CounterComponent = RubyWasmUi.define_component( +CounterComponent = Ruwi.define_component( # Initialize component state state: ->(props) { { count: props[:count] || 0 } @@ -44,7 +44,7 @@ CounterComponent = RubyWasmUi.define_component( # Render the counter component template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
{state[:count]}
@@ -72,9 +72,9 @@ CounterComponent = RubyWasmUi.define_component( ) # Button component - reusable button with click handler -ButtonComponent = RubyWasmUi.define_component( +ButtonComponent = Ruwi.define_component( template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding) @@ -83,25 +83,25 @@ ButtonComponent = RubyWasmUi.define_component( ) # Create and mount the app -app = RubyWasmUi::App.create(CounterComponent, count: 5) +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 `ruby_wasm_ui` as a Ruby gem with `rbwasm` to build your application as a WASM file. +You can also use `ruwi` as a Ruby gem with `rbwasm` to build your application as a WASM file. ### Setup -1. Add `ruby_wasm_ui` to your `Gemfile`: +1. Add `ruwi` to your `Gemfile`: ```ruby # frozen_string_literal: true source "https://rubygems.org" -gem "ruby_wasm_ui" +gem "ruwi" ``` 2. Install dependencies: @@ -115,7 +115,7 @@ bundle install Set up your project (first time only): ```bash -bundle exec ruby-wasm-ui setup +bundle exec ruwi setup ``` This command will: @@ -139,7 +139,7 @@ my-app/ - **Development server**: Start a development server with file watching and auto-build: ```bash - bundle exec ruby-wasm-ui dev + bundle exec ruwi dev ``` Create an HTML file in the `src` directory that loads the WASM file: @@ -156,7 +156,7 @@ Create an HTML file in the `src` directory that loads the WASM file: const module = await WebAssembly.compileStreaming(response); const { vm } = await DefaultRubyVM(module); vm.evalAsync(` - require "ruby_wasm_ui" + require "ruwi" require_relative './src/index.rb' `); @@ -167,15 +167,15 @@ Create an HTML file in the `src` directory that loads the WASM file: ``` -Your `src/index.rb` file can use `ruby_wasm_ui` just like in the Quick Start example: +Your `src/index.rb` file can use `ruwi` just like in the Quick Start example: ```ruby -CounterComponent = RubyWasmUi.define_component( +CounterComponent = Ruwi.define_component( state: ->(props) { { count: props[:count] || 0 } }, template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
{state[:count]}
@@ -189,7 +189,7 @@ CounterComponent = RubyWasmUi.define_component( } ) -app = RubyWasmUi::App.create(CounterComponent, count: 0) +app = Ruwi::App.create(CounterComponent, count: 0) app_element = JS.global[:document].getElementById("app") app.mount(app_element) ``` @@ -201,7 +201,7 @@ See the [examples](examples) directory for a complete working example. - **Rebuild Ruby WASM**: Rebuild the Ruby WASM file when you add new gems: ```bash - bundle exec ruby-wasm-ui rebuild + bundle exec ruwi rebuild ``` ### Deployment @@ -209,7 +209,7 @@ See the [examples](examples) directory for a complete working example. Pack your application files for deployment: ```bash -bundle exec ruby-wasm-ui pack +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. diff --git a/bin/console b/bin/console index dfb0123..ccceb1f 100755 --- a/bin/console +++ b/bin/console @@ -2,7 +2,7 @@ # frozen_string_literal: true require "bundler/setup" -require "ruby_wasm_ui" +require "ruwi" # You can add fixtures and/or initialization code here to make experimenting # with your gem easier. You can also use a different console, if you like. diff --git a/docs/conditional-rendering.md b/docs/conditional-rendering.md index d654a90..0e9012a 100644 --- a/docs/conditional-rendering.md +++ b/docs/conditional-rendering.md @@ -1,10 +1,10 @@ # Conditional Rendering with r-if -ruby-wasm-ui provides the `r-if` directive for conditional rendering of elements based on state or computed values: +ruwi provides the `r-if` directive for conditional rendering of elements based on state or computed values: ```ruby # Component demonstrating r-if conditional rendering -ConditionalComponent = RubyWasmUi.define_component( +ConditionalComponent = Ruwi.define_component( state: ->() { { show_message: false, @@ -13,7 +13,7 @@ ConditionalComponent = RubyWasmUi.define_component( }, template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
@@ -81,7 +81,7 @@ All conditional expressions are evaluated as Ruby code within curly braces `{}`: ```ruby # Real-world example with loading states and data -LoadingComponent = RubyWasmUi.define_component( +LoadingComponent = Ruwi.define_component( state: ->() { { is_loading: false, @@ -91,7 +91,7 @@ LoadingComponent = RubyWasmUi.define_component( }, template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)

Loading...

diff --git a/docs/lifecycle-hooks.md b/docs/lifecycle-hooks.md index 0afcff3..d2dc828 100644 --- a/docs/lifecycle-hooks.md +++ b/docs/lifecycle-hooks.md @@ -3,7 +3,7 @@ Components support lifecycle hooks to execute code at specific points in a component's lifecycle: ```ruby -RandomCocktailComponent = RubyWasmUi.define_component( +RandomCocktailComponent = Ruwi.define_component( state: ->() { { is_loading: false, @@ -54,7 +54,7 @@ RandomCocktailComponent = RubyWasmUi.define_component(
HTML - RubyWasmUi::Template::Parser.parse_and_eval(template, binding) + Ruwi::Template::Parser.parse_and_eval(template, binding) } ) ``` @@ -72,4 +72,4 @@ The `on_mounted` hook is called after the component is mounted to the DOM. This ## Asynchronous Operations -Note: Unlike JavaScript frameworks, asynchronous operations in ruby-wasm-ui are designed to use Ruby's Fiber system rather than Promises. +Note: Unlike JavaScript frameworks, asynchronous operations in ruwi are designed to use Ruby's Fiber system rather than Promises. diff --git a/docs/list-rendering.md b/docs/list-rendering.md index 11fc4d8..be74653 100644 --- a/docs/list-rendering.md +++ b/docs/list-rendering.md @@ -1,21 +1,21 @@ # List Rendering with r-for -ruby-wasm-ui provides the `r-for` directive for rendering lists of items. You can use `r-for` with both components and regular HTML elements: +ruwi provides the `r-for` directive for rendering lists of items. You can use `r-for` with both components and regular HTML elements: ```ruby # Define a reusable list item component -ListItem = RubyWasmUi.define_component( +ListItem = Ruwi.define_component( template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
  • {props[:todo]}
    • HTML } ) # Main list component demonstrating r-for usage -List = RubyWasmUi.define_component( +List = Ruwi.define_component( template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
      2.7) listen (~> 3.8) puma (~> 6.0) @@ -33,7 +33,7 @@ PLATFORMS arm64-darwin DEPENDENCIES - ruby_wasm_ui! + ruwi! BUNDLED WITH 2.7.2 diff --git a/examples/npm-packages/runtime/counter/index.html b/examples/npm-packages/runtime/counter/index.html index 1cb5e58..58c484f 100644 --- a/examples/npm-packages/runtime/counter/index.html +++ b/examples/npm-packages/runtime/counter/index.html @@ -11,8 +11,8 @@ const script = document.createElement("script"); script.defer = true; script.src = isDev - ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js" - : "https://unpkg.com/ruby-wasm-ui@latest"; + ? "../../../../packages/npm-packages/runtime/dist/ruwi.js" + : "https://unpkg.com/ruwi@latest"; document.head.appendChild(script); diff --git a/examples/npm-packages/runtime/counter/index.rb b/examples/npm-packages/runtime/counter/index.rb index 1e2b16d..3df3c19 100644 --- a/examples/npm-packages/runtime/counter/index.rb +++ b/examples/npm-packages/runtime/counter/index.rb @@ -1,7 +1,7 @@ require "js" # Counter component using the latest component-based API with TemplateParser -CounterComponent = RubyWasmUi.define_component( +CounterComponent = Ruwi.define_component( # Initialize component state state: ->(props) { { count: props[:count] || 0 } @@ -9,7 +9,7 @@ # Render the counter component template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
      {state[:count]}
      @@ -40,9 +40,9 @@ ) # Button component - reusable button with click handler -ButtonComponent = RubyWasmUi.define_component( +ButtonComponent = Ruwi.define_component( template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding) @@ -51,12 +51,12 @@ ) # app_a to be destroyed -app_a = RubyWasmUi::App.create(CounterComponent, count: 0) +app_a = Ruwi::App.create(CounterComponent, count: 0) app_element_a = JS.global[:document].getElementById("app-a") app_a.mount(app_element_a) app_a.unmount # app_b to be mounted -app_b = RubyWasmUi::App.create(CounterComponent, count: 10) +app_b = Ruwi::App.create(CounterComponent, count: 10) app_element_b = JS.global[:document].getElementById("app-b") app_b.mount(app_element_b) diff --git a/examples/npm-packages/runtime/hello/index.html b/examples/npm-packages/runtime/hello/index.html index 0109b04..9d5d85b 100644 --- a/examples/npm-packages/runtime/hello/index.html +++ b/examples/npm-packages/runtime/hello/index.html @@ -11,8 +11,8 @@ const script = document.createElement("script"); script.defer = true; script.src = isDev - ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js" - : "https://unpkg.com/ruby-wasm-ui@latest"; + ? "../../../../packages/npm-packages/runtime/dist/ruwi.js" + : "https://unpkg.com/ruwi@latest"; document.head.appendChild(script); diff --git a/examples/npm-packages/runtime/hello/index.rb b/examples/npm-packages/runtime/hello/index.rb index d434b19..53df689 100644 --- a/examples/npm-packages/runtime/hello/index.rb +++ b/examples/npm-packages/runtime/hello/index.rb @@ -1,29 +1,29 @@ require "js" # h_a to be destroyed -h_a = RubyWasmUi::Vdom.h("div", {}, [RubyWasmUi::Vdom.h("h1", {}, ["Hello, world!"])]) +h_a = Ruwi::Vdom.h("div", {}, [Ruwi::Vdom.h("h1", {}, ["Hello, world!"])]) h1_a_element = JS.global[:document].getElementById("h1-a") -RubyWasmUi::Dom::Events.add_event_listener("click", ->(e) { puts "clicked" }, h1_a_element) -RubyWasmUi::Dom::Attributes.set_attributes(h1_a_element, { +Ruwi::Dom::Events.add_event_listener("click", ->(e) { puts "clicked" }, h1_a_element) +Ruwi::Dom::Attributes.set_attributes(h1_a_element, { class: "bg-red-500" }) -RubyWasmUi::Dom::Attributes.set_attribute(h1_a_element, "data-test", "test") -RubyWasmUi::Dom::Attributes.set_class(h1_a_element, "bg-blue-500") -RubyWasmUi::Dom::Attributes.set_style(h1_a_element, "background-color", "red") -RubyWasmUi::Dom::Attributes.remove_attribute(h1_a_element, "data-test") -RubyWasmUi::Dom::Attributes.remove_style(h1_a_element, "background-color") +Ruwi::Dom::Attributes.set_attribute(h1_a_element, "data-test", "test") +Ruwi::Dom::Attributes.set_class(h1_a_element, "bg-blue-500") +Ruwi::Dom::Attributes.set_style(h1_a_element, "background-color", "red") +Ruwi::Dom::Attributes.remove_attribute(h1_a_element, "data-test") +Ruwi::Dom::Attributes.remove_style(h1_a_element, "background-color") -RubyWasmUi::Dom::MountDom.execute(h_a, h1_a_element) -RubyWasmUi::Dom::DestroyDom.execute(h_a) +Ruwi::Dom::MountDom.execute(h_a, h1_a_element) +Ruwi::Dom::DestroyDom.execute(h_a) # h_b to be mounted -h_b = RubyWasmUi::Vdom.h("div", {}, [RubyWasmUi::Vdom.h("h1", {}, ["Hello, world!"])]) +h_b = Ruwi::Vdom.h("div", {}, [Ruwi::Vdom.h("h1", {}, ["Hello, world!"])]) h1_b_element = JS.global[:document].getElementById("h1-b") -RubyWasmUi::Dom::Events.add_event_listener("click", ->(e) { puts "clicked" }, h1_b_element) -RubyWasmUi::Dom::Attributes.set_attributes(h1_b_element, { +Ruwi::Dom::Events.add_event_listener("click", ->(e) { puts "clicked" }, h1_b_element) +Ruwi::Dom::Attributes.set_attributes(h1_b_element, { class: "bg-red-500" }) -RubyWasmUi::Dom::Attributes.set_attribute(h1_b_element, "data-test", "test") -RubyWasmUi::Dom::Attributes.set_class(h1_b_element, "bg-red-500") -RubyWasmUi::Dom::Attributes.set_style(h1_b_element, "background-color", "blue") -RubyWasmUi::Dom::MountDom.execute(h_b, h1_b_element) +Ruwi::Dom::Attributes.set_attribute(h1_b_element, "data-test", "test") +Ruwi::Dom::Attributes.set_class(h1_b_element, "bg-red-500") +Ruwi::Dom::Attributes.set_style(h1_b_element, "background-color", "blue") +Ruwi::Dom::MountDom.execute(h_b, h1_b_element) diff --git a/examples/npm-packages/runtime/input/index.html b/examples/npm-packages/runtime/input/index.html index 5c4b170..3cd66bf 100644 --- a/examples/npm-packages/runtime/input/index.html +++ b/examples/npm-packages/runtime/input/index.html @@ -11,8 +11,8 @@ const script = document.createElement("script"); script.defer = true; script.src = isDev - ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js" - : "https://unpkg.com/ruby-wasm-ui@latest"; + ? "../../../../packages/npm-packages/runtime/dist/ruwi.js" + : "https://unpkg.com/ruwi@latest"; document.head.appendChild(script); diff --git a/examples/npm-packages/runtime/input/index.rb b/examples/npm-packages/runtime/input/index.rb index ab410e8..b69e0bf 100644 --- a/examples/npm-packages/runtime/input/index.rb +++ b/examples/npm-packages/runtime/input/index.rb @@ -1,7 +1,7 @@ require "js" # input-form component using the latest component-based API -InputForm = RubyWasmUi.define_component( +InputForm = Ruwi.define_component( # Initialize component state state: ->() { { @@ -12,7 +12,7 @@ # Render the input component template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
      diff --git a/examples/npm-packages/runtime/list/index.rb b/examples/npm-packages/runtime/list/index.rb index fba7f40..abcea83 100644 --- a/examples/npm-packages/runtime/list/index.rb +++ b/examples/npm-packages/runtime/list/index.rb @@ -1,17 +1,17 @@ require "js" -ListItem = RubyWasmUi.define_component( +ListItem = Ruwi.define_component( template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
    • {props[:todo]}
      • HTML } ) -List = RubyWasmUi.define_component( +List = Ruwi.define_component( template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)
      diff --git a/examples/npm-packages/runtime/on_mounted_demo/index.rb b/examples/npm-packages/runtime/on_mounted_demo/index.rb index bb27b01..2ddb9d2 100644 --- a/examples/npm-packages/runtime/on_mounted_demo/index.rb +++ b/examples/npm-packages/runtime/on_mounted_demo/index.rb @@ -1,7 +1,7 @@ require "js" # Component with argument-less on_mounted that can call component methods directly -SimpleComponent = RubyWasmUi.define_component( +SimpleComponent = Ruwi.define_component( state: -> { { message: "Not mounted yet" } }, # on_mounted without arguments - can call update_state directly! @@ -11,7 +11,7 @@ }, template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)

      Simple Component (no args in on_mounted)

      {state[:message]}

      @@ -21,7 +21,7 @@ ) # Component with on_mounted that takes component argument (existing behavior) -AdvancedComponent = RubyWasmUi.define_component( +AdvancedComponent = Ruwi.define_component( state: -> { { message: "Not mounted yet" } }, # on_mounted with component argument - existing behavior still works @@ -31,7 +31,7 @@ }, template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)

      Advanced Component (with args in on_mounted)

      {state[:message]}

      @@ -41,9 +41,9 @@ ) # Main App component -AppComponent = RubyWasmUi.define_component( +AppComponent = Ruwi.define_component( template: -> { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)

      on_mounted Demo

      @@ -54,6 +54,6 @@ ) # Mount the app -app = RubyWasmUi::App.create(AppComponent) +app = Ruwi::App.create(AppComponent) app_element = JS.global[:document].getElementById("app") app.mount(app_element) diff --git a/examples/npm-packages/runtime/r_if_attribute_demo/index.html b/examples/npm-packages/runtime/r_if_attribute_demo/index.html index 781a573..0aa7d40 100644 --- a/examples/npm-packages/runtime/r_if_attribute_demo/index.html +++ b/examples/npm-packages/runtime/r_if_attribute_demo/index.html @@ -10,8 +10,8 @@ const script = document.createElement("script"); script.defer = true; script.src = isDev - ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js" - : "https://unpkg.com/ruby-wasm-ui@latest"; + ? "../../../../packages/npm-packages/runtime/dist/ruwi.js" + : "https://unpkg.com/ruwi@latest"; document.head.appendChild(script); diff --git a/examples/npm-packages/runtime/r_if_attribute_demo/index.rb b/examples/npm-packages/runtime/r_if_attribute_demo/index.rb index 1ff3249..4d72f0e 100644 --- a/examples/npm-packages/runtime/r_if_attribute_demo/index.rb +++ b/examples/npm-packages/runtime/r_if_attribute_demo/index.rb @@ -1,7 +1,7 @@ require "js" # R-If Attribute Demo component to demonstrate conditional rendering using r-if attribute -RIfAttributeDemo = RubyWasmUi.define_component( +RIfAttributeDemo = Ruwi.define_component( # Initialize component state state: ->() { { @@ -12,7 +12,7 @@ # Render the component with r-if attribute examples template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)

      Using r-if as an attribute (like Vue.js r-if)

      @@ -108,6 +108,6 @@ ) # Create and mount the app -app = RubyWasmUi::App.create(RIfAttributeDemo) +app = Ruwi::App.create(RIfAttributeDemo) app_element = JS.global[:document].getElementById("app") app.mount(app_element) diff --git a/examples/npm-packages/runtime/random_cocktail/index.html b/examples/npm-packages/runtime/random_cocktail/index.html index a0e4456..a67af5e 100644 --- a/examples/npm-packages/runtime/random_cocktail/index.html +++ b/examples/npm-packages/runtime/random_cocktail/index.html @@ -11,8 +11,8 @@ const script = document.createElement("script"); script.defer = true; script.src = isDev - ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js" - : "https://unpkg.com/ruby-wasm-ui@latest"; + ? "../../../../packages/npm-packages/runtime/dist/ruwi.js" + : "https://unpkg.com/ruwi@latest"; document.head.appendChild(script); diff --git a/examples/npm-packages/runtime/random_cocktail/index.rb b/examples/npm-packages/runtime/random_cocktail/index.rb index 7250444..c0e9d02 100644 --- a/examples/npm-packages/runtime/random_cocktail/index.rb +++ b/examples/npm-packages/runtime/random_cocktail/index.rb @@ -1,6 +1,6 @@ require "js" -random_cocktail = RubyWasmUi.define_component( +random_cocktail = Ruwi.define_component( state: ->() { { is_loading: false, @@ -25,7 +25,7 @@ HTML - RubyWasmUi::Template::Parser.parse_and_eval(template, binding) + Ruwi::Template::Parser.parse_and_eval(template, binding) }, methods: { @@ -49,13 +49,13 @@ } ) -ButtonComponent = RubyWasmUi.define_component( +ButtonComponent = Ruwi.define_component( state: ->(props) { { label: props[:label] } }, template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding) @@ -64,6 +64,6 @@ ) # Create and mount the app -app = RubyWasmUi::App.create(random_cocktail) +app = Ruwi::App.create(random_cocktail) app_element = JS.global[:document].getElementById("app") app.mount(app_element) diff --git a/examples/npm-packages/runtime/search_field/index.html b/examples/npm-packages/runtime/search_field/index.html index 354a708..a3109cb 100644 --- a/examples/npm-packages/runtime/search_field/index.html +++ b/examples/npm-packages/runtime/search_field/index.html @@ -11,8 +11,8 @@ const script = document.createElement("script"); script.defer = true; script.src = isDev - ? "../../../../packages/npm-packages/runtime/dist/ruby-wasm-ui.js" - : "https://unpkg.com/ruby-wasm-ui@latest"; + ? "../../../../packages/npm-packages/runtime/dist/ruwi.js" + : "https://unpkg.com/ruwi@latest"; document.head.appendChild(script); diff --git a/examples/npm-packages/runtime/search_field/index.rb b/examples/npm-packages/runtime/search_field/index.rb index c58b1c8..2858921 100644 --- a/examples/npm-packages/runtime/search_field/index.rb +++ b/examples/npm-packages/runtime/search_field/index.rb @@ -1,9 +1,9 @@ require "js" # search-field component definition -SearchField = RubyWasmUi.define_component( +SearchField = Ruwi.define_component( template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding) () { { search_term: '' } }, template: ->() { - RubyWasmUi::Template::Parser.parse_and_eval(<<~HTML, binding) + Ruwi::Template::Parser.parse_and_eval(<<~HTML, binding)