glimmer-dsl-web 0.0.9 → 0.0.10

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: eb52a7e2713efb045e669024219a7100ec1e883d36ad0a617f8afc4c9955ef80
4
- data.tar.gz: 2f2ea6499404327420613adee09d4a13a55395b90b911e60314d8f7388adf291
3
+ metadata.gz: 522174dca9cfe36d506a80f5eefeaf5e5a01cc16689eaabae580129098340d6c
4
+ data.tar.gz: 0266eed24ef90137c981fbc90507111f2d6eadc4a1d88cb521992de133b79033
5
5
  SHA512:
6
- metadata.gz: 8b9a182d977bd3d30c440736840e8c0fd5855f6a63d2a09d030bb97f08068cd3e81aa0f298361d2321a5ff500de4c0009b43bec6c70142d7cead27a90d656cdf
7
- data.tar.gz: ab3a23dd8a7d2d7d78d6110e56780099c660fcd11f5f935a3067b16ea578dff20b13ebf2e984a15f6c8f276dcee2f0d4d5e7c559df856c9836c30b9e8292ef30
6
+ metadata.gz: 07f70e33e39db9019d2e1d9d50bcb1fd132bd27f604697c2e3854415cf95577d76d5c3150acedffa92310bbfc1fbf8efbdad4e2eef85a8b32cd6a14d3926e0f6
7
+ data.tar.gz: f291ae73bc1a6c2af90dfa821e9c71419690c218da3d921bb5fb7eff2fc17f5a30e790700db18b7dd77aef00ebe11783c57c3caf7d34fe9a0c68e9583fee6ec5
data/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.0.10
4
+
5
+ - Glimmer Component Rails Helper (add `include GlimmerHelper` to `ApplicationHelper` or another Rails helper) and use `<%= glimmer_component("path/to/component", *args) %>` in Views
6
+ - Support passing args to Components via `ComponentClassName.render(*args)`
7
+ - Update `element#render` API to require `:parent` kwarg to pass parent selector (no longer accepting parent selector directly as first arg)
8
+ - Upgrade to opal 1.8.2 (latest version)
9
+ - Upgrade to opal-rails 2.0.3 (latest version)
10
+ - Change setup instructions to avoid relying on `app/assets/javascript/application.js.rb`, yet instead rename to `app/assets/opal/application.rb` and rely on `app/assets/opal` for Opal frontend files.
11
+
3
12
  ## 0.0.9
4
13
 
5
14
  - Component support (View component classes simply `include Glimmer::Web::Component`)
data/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.0.9 (Early Alpha)
1
+ # [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.0.10 (Early Alpha)
2
2
  ## Ruby in the Browser Web GUI Frontend Library
3
3
  [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
4
4
  [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -479,6 +479,9 @@ by simply defining a class with `include Glimmer::Web::Component` and encasing t
479
479
  a `markup {...}` block. Glimmer web components automatically extend the Glimmer GUI DSL with new keywords
480
480
  that match the underscored versions of the component class names (e.g. a `OrderSummary` class yields
481
481
  the `order_summary` keyword for reusing that component within the Glimmer GUI DSL).
482
+ You may also insert a Glimmer component anywhere into a Rails application View using
483
+ `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper`
484
+ or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
482
485
  Below, we define an `AddressForm` component that generates a `address_form` keyword, and then we
483
486
  reuse it twice inside an `AddressPage` component displaying a Shipping Address and a Billing Address.
484
487
 
@@ -763,7 +766,7 @@ rails new glimmer_app_server
763
766
  Add the following to `Gemfile`:
764
767
 
765
768
  ```
766
- gem 'glimmer-dsl-web', '~> 0.0.9'
769
+ gem 'glimmer-dsl-web', '~> 0.0.10'
767
770
  ```
768
771
 
769
772
  Run:
@@ -772,6 +775,8 @@ Run:
772
775
  bundle
773
776
  ```
774
777
 
778
+ (run `rm -rf tmp/cache` from inside your Rails app if you upgrade your `glimmer-dsl-web` gem version from an older one to clear Opal-Rails's cache)
779
+
775
780
  Follow [opal-rails](https://github.com/opal/opal-rails) instructions, basically running:
776
781
 
777
782
  ```
@@ -782,6 +787,7 @@ To enable the `glimmer-dsl-web` library in the frontend, edit `config/initialize
782
787
 
783
788
  ```ruby
784
789
  Opal.use_gem 'glimmer-dsl-web'
790
+ Opal.append_path Rails.root.join('app', 'assets', 'opal')
785
791
  ```
786
792
 
787
793
  To enable Opal Browser Debugging in Ruby with the [Source Maps](https://opalrb.com/docs/guides/v1.4.1/source_maps.html) feature, edit `config/initializers/opal.rb` and add the following inside the `Rails.application.configure do; end` block at the bottom of it:
@@ -813,7 +819,18 @@ Clear the file `app/views/welcomes/index.html.erb` completely from all content.
813
819
 
814
820
  Delete `app/javascript/application.js`
815
821
 
816
- Edit and replace `app/assets/javascript/application.js.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below):
822
+ Rename `app/assets/javascript` directory to `app/assets/opal`.
823
+
824
+ Add the following lines to `app/assets/config/manifest.js` (and delete their `javascript` equivalents):
825
+
826
+ ```js
827
+ //= link_tree ../../opal .js
828
+ //= link_directory ../opal .js
829
+ ```
830
+
831
+ Rename `app/assets/opal/application.js.rb` to `app/assets/opal/application.rb`.
832
+
833
+ Edit and replace `app/assets/opal/application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below inside a `Document.ready? do; end` block):
817
834
 
818
835
  ```ruby
819
836
  require 'glimmer-dsl-web' # brings opal and other dependencies automatically
@@ -823,15 +840,6 @@ require 'glimmer-dsl-web' # brings opal and other dependencies automatically
823
840
 
824
841
  Example to confirm setup is working:
825
842
 
826
- Initial HTML Markup:
827
-
828
- ```html
829
- ...
830
- <div id="app-container">
831
- </div>
832
- ...
833
- ```
834
-
835
843
  Glimmer GUI code:
836
844
 
837
845
  ```ruby
@@ -853,13 +861,11 @@ That produces:
853
861
 
854
862
  ```html
855
863
  ...
856
- <div id="app-container">
857
- <div data-parent="#app-container" class="element element-1">
864
+ <div data-parent="body" class="element element-1">
858
865
  <label class="greeting element element-2">
859
866
  Hello, World!
860
867
  </label>
861
868
  </div>
862
- </div>
863
869
  ...
864
870
  ```
865
871
 
@@ -874,6 +880,22 @@ You should see:
874
880
 
875
881
  ![setup is working](/images/glimmer-dsl-web-setup-example-working.png)
876
882
 
883
+ You may also insert a Glimmer component anywhere into a Rails application View using `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper` or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
884
+
885
+ To use `glimmer_component`, edit `app/helpers/application_helper.rb` in your Rails application, add `require 'glimmer/helpers/glimmer_helper'` on top and `include GlimmerHelper` inside `module`.
886
+
887
+ `app/helpers/application_helper.rb` should look like this after the change:
888
+
889
+ ```ruby
890
+ require 'glimmer/helpers/glimmer_helper'
891
+
892
+ module ApplicationHelper
893
+ # ...
894
+ include GlimmerHelper
895
+ # ...
896
+ end
897
+ ```
898
+
877
899
  If you run into any issues in setup, refer to the [Sample Glimmer DSL for Web Rails 7 App](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) project (in case I forgot to include some setup steps by mistake).
878
900
 
879
901
  Otherwise, if you still cannot setup successfully (even with the help of the sample project, or if the sample project stops working), please do not hesitate to report an [Issue request](https://github.com/AndyObtiva/glimmer-dsl-web/issues) or fix and submit a [Pull Request](https://github.com/AndyObtiva/glimmer-dsl-web/pulls).
@@ -903,7 +925,7 @@ Disable the `webpacker` gem line in `Gemfile`:
903
925
  Add the following to `Gemfile`:
904
926
 
905
927
  ```ruby
906
- gem 'glimmer-dsl-web', '~> 0.0.9'
928
+ gem 'glimmer-dsl-web', '~> 0.0.10'
907
929
  ```
908
930
 
909
931
  Run:
@@ -912,6 +934,8 @@ Run:
912
934
  bundle
913
935
  ```
914
936
 
937
+ (run `rm -rf tmp/cache` from inside your Rails app if you upgrade your `glimmer-dsl-web` gem version from an older one to clear Opal-Rails's cache)
938
+
915
939
  Follow [opal-rails](https://github.com/opal/opal-rails) instructions, basically running:
916
940
 
917
941
  ```
@@ -922,6 +946,7 @@ To enable the `glimmer-dsl-web` library in the frontend, edit `config/initialize
922
946
 
923
947
  ```ruby
924
948
  Opal.use_gem 'glimmer-dsl-web'
949
+ Opal.append_path Rails.root.join('app', 'assets', 'opal')
925
950
  ```
926
951
 
927
952
  To enable Opal Browser Debugging in Ruby with the [Source Maps](https://opalrb.com/docs/guides/v1.4.1/source_maps.html) feature, edit `config/initializers/opal.rb` and add the following inside the `Rails.application.configure do; end` block at the bottom of it:
@@ -958,7 +983,18 @@ Also, delete the following line:
958
983
 
959
984
  Clear the file `app/views/welcomes/index.html.erb` completely from all content.
960
985
 
961
- Edit and replace `app/assets/javascript/application.js.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below):
986
+ Rename `app/assets/javascript` directory to `app/assets/opal`.
987
+
988
+ Add the following lines to `app/assets/config/manifest.js` (and delete their `javascript` equivalents):
989
+
990
+ ```js
991
+ //= link_tree ../../opal .js
992
+ //= link_directory ../opal .js
993
+ ```
994
+
995
+ Rename `app/assets/opal/application.js.rb` to `app/assets/opal/application.rb`.
996
+
997
+ Edit and replace `app/assets/opal/application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below inside a `Document.ready? do; end` block):
962
998
 
963
999
  ```ruby
964
1000
  require 'glimmer-dsl-web' # brings opal and other dependencies automatically
@@ -1019,6 +1055,22 @@ You should see:
1019
1055
 
1020
1056
  ![setup is working](/images/glimmer-dsl-web-setup-example-working.png)
1021
1057
 
1058
+ You may also insert a Glimmer component anywhere into a Rails application View using `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper` or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
1059
+
1060
+ To use `glimmer_component`, edit `app/helpers/application_helper.rb` in your Rails application, add `require 'glimmer/helpers/glimmer_helper'` on top and `include GlimmerHelper` inside `module`.
1061
+
1062
+ `app/helpers/application_helper.rb` should look like this after the change:
1063
+
1064
+ ```ruby
1065
+ require 'glimmer/helpers/glimmer_helper'
1066
+
1067
+ module ApplicationHelper
1068
+ # ...
1069
+ include GlimmerHelper
1070
+ # ...
1071
+ end
1072
+ ```
1073
+
1022
1074
  **NOT RELEASED OR SUPPORTED YET**
1023
1075
 
1024
1076
  If you run into any issues in setup, refer to the [Sample Glimmer DSL for Web Rails 6 App](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails6-app) project (in case I forgot to include some setup steps by mistake).
@@ -1669,6 +1721,9 @@ by simply defining a class with `include Glimmer::Web::Component` and encasing t
1669
1721
  a `markup {...}` block. Glimmer web components automatically extend the Glimmer GUI DSL with new keywords
1670
1722
  that match the underscored versions of the component class names (e.g. a `OrderSummary` class yields
1671
1723
  the `order_summary` keyword for reusing that component within the Glimmer GUI DSL).
1724
+ You may also insert a Glimmer component anywhere into a Rails application View using
1725
+ `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper`
1726
+ or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
1672
1727
  Below, we define an `AddressForm` component that generates a `address_form` keyword, and then we
1673
1728
  reuse it twice inside an `AddressPage` component displaying a Shipping Address and a Billing Address.
1674
1729
 
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.0.9
1
+ 0.0.10
@@ -2,11 +2,11 @@
2
2
  # DO NOT EDIT THIS FILE DIRECTLY
3
3
  # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
4
4
  # -*- encoding: utf-8 -*-
5
- # stub: glimmer-dsl-web 0.0.9 ruby lib
5
+ # stub: glimmer-dsl-web 0.0.10 ruby lib
6
6
 
7
7
  Gem::Specification.new do |s|
8
8
  s.name = "glimmer-dsl-web".freeze
9
- s.version = "0.0.9".freeze
9
+ s.version = "0.0.10".freeze
10
10
 
11
11
  s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
12
12
  s.require_paths = ["lib".freeze]
@@ -35,6 +35,7 @@ Gem::Specification.new do |s|
35
35
  "lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb",
36
36
  "lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb",
37
37
  "lib/glimmer-dsl-web/samples/hello/hello_form.rb",
38
+ "lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb",
38
39
  "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
39
40
  "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
40
41
  "lib/glimmer-dsl-web/vendor/jquery.js",
@@ -52,6 +53,7 @@ Gem::Specification.new do |s|
52
53
  "lib/glimmer/dsl/web/property_expression.rb",
53
54
  "lib/glimmer/dsl/web/select_expression.rb",
54
55
  "lib/glimmer/dsl/web/shine_data_binding_expression.rb",
56
+ "lib/glimmer/helpers/glimmer_helper.rb",
55
57
  "lib/glimmer/util/proc_tracker.rb",
56
58
  "lib/glimmer/web.rb",
57
59
  "lib/glimmer/web/component.rb",
@@ -69,8 +71,8 @@ Gem::Specification.new do |s|
69
71
  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
70
72
  s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2".freeze])
71
73
  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.2".freeze])
72
- s.add_runtime_dependency(%q<opal>.freeze, ["= 1.4.1".freeze])
73
- s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.2".freeze])
74
+ s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
75
+ s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
74
76
  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.0".freeze])
75
77
  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.4.6".freeze])
76
78
  s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1".freeze, "< 3.0.0".freeze])
@@ -0,0 +1,32 @@
1
+ module GlimmerHelper
2
+ class << self
3
+ def next_id_number
4
+ @next_id_number ||= 0
5
+ @next_id_number += 1
6
+ end
7
+ end
8
+
9
+ def glimmer_component(component_asset_path, *component_args)
10
+ component_file = component_asset_path.split('/').last
11
+ component_class_name = component_file.classify
12
+ next_id_number = GlimmerHelper.next_id_number
13
+ component_id = "glimmer_component_#{next_id_number}"
14
+ component_script_container_id = "glimmer_component_script_container_#{next_id_number}"
15
+ component_args_json = JSON.dump(component_args)
16
+ opal_script = <<~Opal
17
+ require 'glimmer-dsl-web'
18
+ Document.ready? do
19
+ component_args_json = '#{component_args_json}'
20
+ component_args = JSON.parse(component_args_json)
21
+ component_args << {} if !component_args.last.is_a?(Hash)
22
+ component_args.last[:parent] = "##{component_id}"
23
+ #{component_class_name}.render(*component_args)
24
+ end
25
+ Opal
26
+ content_tag(:div, id: component_script_container_id, class: ['glimmer_component_script_container', "#{component_file}_script_container"]) do
27
+ content_tag(:div, '', id: component_id, class: ['glimmer_component', component_file]) +
28
+ javascript_include_tag(component_asset_path, "data-turbolinks-track": "reload") +
29
+ content_tag(:script, raw(opal_script), type: 'text/ruby')
30
+ end
31
+ end
32
+ end
@@ -94,8 +94,9 @@ module Glimmer
94
94
  end
95
95
 
96
96
  def render(*args)
97
- rendered_component = send(keyword)
98
- rendered_component.render(*args)
97
+ rendered_component = send(keyword, *args)
98
+ options = args.last.is_a?(Hash) ? args.last.slice(:parent, :custom_parent_dom_element, :brand_new) : {}
99
+ rendered_component.render(**options)
99
100
  rendered_component
100
101
  end
101
102
  end
@@ -179,7 +180,7 @@ module Glimmer
179
180
  # <- end of class methods
180
181
 
181
182
 
182
- attr_reader :markup_root, :parent, :options
183
+ attr_reader :markup_root, :parent, :args, :options
183
184
  alias parent_proxy parent
184
185
 
185
186
  def initialize(parent, args, options, &content)
@@ -198,6 +199,7 @@ module Glimmer
198
199
  markup_block = self.class.instance_variable_get("@markup_block")
199
200
  raise Glimmer::Error, 'Invalid Glimmer web component for having no markup! Please define markup block!' if markup_block.nil?
200
201
  @markup_root = instance_exec(&markup_block)
202
+ @markup_root.options[:parent] = options[:parent] if options[:parent]
201
203
  @parent ||= @markup_root.parent
202
204
  raise Glimmer::Error, 'Invalid Glimmer web component for having an empty markup! Please fill markup block!' if @markup_root.nil?
203
205
  execute_hooks('after_render')
@@ -273,9 +275,9 @@ module Glimmer
273
275
  "#{attribute_name}="
274
276
  end
275
277
 
276
- def render(*args)
278
+ def render(parent: nil, custom_parent_dom_element: nil, brand_new: false)
277
279
  # this method is defined to prevent displaying a harmless Glimmer no keyword error as an annoying useless warning
278
- @markup_root&.render(*args)
280
+ @markup_root&.render(parent: parent, custom_parent_dom_element: custom_parent_dom_element, brand_new: brand_new)
279
281
  end
280
282
 
281
283
  # Returns content block if used as an attribute reader (no args)
@@ -1,3 +1,5 @@
1
+ # backtick_javascript: true
2
+
1
3
  # Copyright (c) 2023-2024 Andy Maleh
2
4
  #
3
5
  # Permission is hereby granted, free of charge, to any person obtaining
@@ -223,7 +225,8 @@ module Glimmer
223
225
  end
224
226
  end
225
227
 
226
- def render(parent_selector = nil, custom_parent_dom_element: nil, brand_new: false)
228
+ def render(parent: nil, custom_parent_dom_element: nil, brand_new: false)
229
+ parent_selector = parent
227
230
  options[:parent] = parent_selector if !parent_selector.to_s.empty?
228
231
  if !options[:parent].to_s.empty?
229
232
  # ensure element is orphaned as it is becoming a top-level root element
@@ -499,7 +502,7 @@ module Glimmer
499
502
  end
500
503
 
501
504
  def respond_to_missing?(method_name, include_private = false)
502
- # TODO consider doing more correct checking of availability of properties/methods using native `` ticks
505
+ # TODO consider doing more correct checking of availability of properties/methods using native ticks
503
506
  property_name = property_name_for(method_name)
504
507
  unnormalized_property_name = unnormalized_property_name_for(method_name)
505
508
  super(method_name, include_private) ||
@@ -512,7 +515,7 @@ module Glimmer
512
515
  end
513
516
 
514
517
  def method_missing(method_name, *args, &block)
515
- # TODO consider doing more correct checking of availability of properties/methods using native `` ticks
518
+ # TODO consider doing more correct checking of availability of properties/methods using native ticks
516
519
  property_name = property_name_for(method_name)
517
520
  unnormalized_property_name = unnormalized_property_name_for(method_name)
518
521
  if method_name.to_s.start_with?('on_')
@@ -0,0 +1,156 @@
1
+ require 'glimmer-dsl-web'
2
+
3
+ class AddressForm
4
+ Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, keyword_init: true) do
5
+ def state_code
6
+ STATES.invert[state]
7
+ end
8
+
9
+ def state_code=(value)
10
+ self.state = STATES[value]
11
+ end
12
+
13
+ def summary
14
+ to_h.values.map(&:to_s).reject(&:empty?).join(', ')
15
+ end
16
+ end
17
+
18
+ STATES = {
19
+ "AK"=>"Alaska",
20
+ "AL"=>"Alabama",
21
+ "AR"=>"Arkansas",
22
+ "AS"=>"American Samoa",
23
+ "AZ"=>"Arizona",
24
+ "CA"=>"California",
25
+ "CO"=>"Colorado",
26
+ "CT"=>"Connecticut",
27
+ "DC"=>"District of Columbia",
28
+ "DE"=>"Delaware",
29
+ "FL"=>"Florida",
30
+ "GA"=>"Georgia",
31
+ "GU"=>"Guam",
32
+ "HI"=>"Hawaii",
33
+ "IA"=>"Iowa",
34
+ "ID"=>"Idaho",
35
+ "IL"=>"Illinois",
36
+ "IN"=>"Indiana",
37
+ "KS"=>"Kansas",
38
+ "KY"=>"Kentucky",
39
+ "LA"=>"Louisiana",
40
+ "MA"=>"Massachusetts",
41
+ "MD"=>"Maryland",
42
+ "ME"=>"Maine",
43
+ "MI"=>"Michigan",
44
+ "MN"=>"Minnesota",
45
+ "MO"=>"Missouri",
46
+ "MS"=>"Mississippi",
47
+ "MT"=>"Montana",
48
+ "NC"=>"North Carolina",
49
+ "ND"=>"North Dakota",
50
+ "NE"=>"Nebraska",
51
+ "NH"=>"New Hampshire",
52
+ "NJ"=>"New Jersey",
53
+ "NM"=>"New Mexico",
54
+ "NV"=>"Nevada",
55
+ "NY"=>"New York",
56
+ "OH"=>"Ohio",
57
+ "OK"=>"Oklahoma",
58
+ "OR"=>"Oregon",
59
+ "PA"=>"Pennsylvania",
60
+ "PR"=>"Puerto Rico",
61
+ "RI"=>"Rhode Island",
62
+ "SC"=>"South Carolina",
63
+ "SD"=>"South Dakota",
64
+ "TN"=>"Tennessee",
65
+ "TX"=>"Texas",
66
+ "UT"=>"Utah",
67
+ "VA"=>"Virginia",
68
+ "VI"=>"Virgin Islands",
69
+ "VT"=>"Vermont",
70
+ "WA"=>"Washington",
71
+ "WI"=>"Wisconsin",
72
+ "WV"=>"West Virginia",
73
+ "WY"=>"Wyoming"
74
+ }
75
+
76
+ include Glimmer::Web::Component
77
+
78
+ option :full_name
79
+ option :street
80
+ option :street2
81
+ option :city
82
+ option :state
83
+ option :zip_code
84
+
85
+ attr_reader :address
86
+
87
+ before_render do
88
+ @address = Address.new(
89
+ full_name: full_name,
90
+ street: street,
91
+ street2: street2,
92
+ city: city,
93
+ state: state,
94
+ zip_code: zip_code,
95
+ )
96
+ end
97
+
98
+ markup {
99
+ div {
100
+ div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
101
+ label('Full Name: ', for: 'full-name-field')
102
+ input(id: 'full-name-field') {
103
+ value <=> [address, :full_name]
104
+ }
105
+
106
+ @somelabel = label('Street: ', for: 'street-field')
107
+ input(id: 'street-field') {
108
+ value <=> [address, :street]
109
+ }
110
+
111
+ label('Street 2: ', for: 'street2-field')
112
+ textarea(id: 'street2-field') {
113
+ value <=> [address, :street2]
114
+ }
115
+
116
+ label('City: ', for: 'city-field')
117
+ input(id: 'city-field') {
118
+ value <=> [address, :city]
119
+ }
120
+
121
+ label('State: ', for: 'state-field')
122
+ select(id: 'state-field') {
123
+ STATES.each do |state_code, state|
124
+ option(value: state_code) { state }
125
+ end
126
+
127
+ value <=> [address, :state_code]
128
+ }
129
+
130
+ label('Zip Code: ', for: 'zip-code-field')
131
+ input(id: 'zip-code-field', type: 'number', min: '0', max: '99999') {
132
+ value <=> [address, :zip_code,
133
+ on_write: :to_s,
134
+ ]
135
+ }
136
+
137
+ style {
138
+ <<~CSS
139
+ #{address_div.selector} * {
140
+ margin: 5px;
141
+ }
142
+ #{address_div.selector} input, #{address_div.selector} select {
143
+ grid-column: 2;
144
+ }
145
+ CSS
146
+ }
147
+ }
148
+
149
+ div(style: 'margin: 5px') {
150
+ inner_text <= [address, :summary,
151
+ computed_by: address.members + ['state_code'],
152
+ ]
153
+ }
154
+ }
155
+ }
156
+ end
@@ -30,6 +30,7 @@ if RUBY_ENGINE != 'opal'
30
30
  require 'opal-rails'
31
31
  require 'opal-async'
32
32
  require 'opal-jquery'
33
+ require 'glimmer/helpers/glimmer_helper'
33
34
  else
34
35
  # GLIMMER_DSL_OPAL_MISSING = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib', 'glimmer-dsl-opal', 'missing')
35
36
 
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: glimmer-dsl-web
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.9
4
+ version: 0.0.10
5
5
  platform: ruby
6
6
  authors:
7
7
  - Andy Maleh
@@ -58,28 +58,28 @@ dependencies:
58
58
  requirements:
59
59
  - - '='
60
60
  - !ruby/object:Gem::Version
61
- version: 1.4.1
61
+ version: 1.8.2
62
62
  type: :runtime
63
63
  prerelease: false
64
64
  version_requirements: !ruby/object:Gem::Requirement
65
65
  requirements:
66
66
  - - '='
67
67
  - !ruby/object:Gem::Version
68
- version: 1.4.1
68
+ version: 1.8.2
69
69
  - !ruby/object:Gem::Dependency
70
70
  name: opal-rails
71
71
  requirement: !ruby/object:Gem::Requirement
72
72
  requirements:
73
73
  - - '='
74
74
  - !ruby/object:Gem::Version
75
- version: 2.0.2
75
+ version: 2.0.3
76
76
  type: :runtime
77
77
  prerelease: false
78
78
  version_requirements: !ruby/object:Gem::Requirement
79
79
  requirements:
80
80
  - - '='
81
81
  - !ruby/object:Gem::Version
82
- version: 2.0.2
82
+ version: 2.0.3
83
83
  - !ruby/object:Gem::Dependency
84
84
  name: opal-async
85
85
  requirement: !ruby/object:Gem::Requirement
@@ -257,6 +257,7 @@ files:
257
257
  - lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb
258
258
  - lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb
259
259
  - lib/glimmer-dsl-web/samples/hello/hello_form.rb
260
+ - lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb
260
261
  - lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb
261
262
  - lib/glimmer-dsl-web/samples/hello/hello_world.rb
262
263
  - lib/glimmer-dsl-web/vendor/jquery.js
@@ -274,6 +275,7 @@ files:
274
275
  - lib/glimmer/dsl/web/property_expression.rb
275
276
  - lib/glimmer/dsl/web/select_expression.rb
276
277
  - lib/glimmer/dsl/web/shine_data_binding_expression.rb
278
+ - lib/glimmer/helpers/glimmer_helper.rb
277
279
  - lib/glimmer/util/proc_tracker.rb
278
280
  - lib/glimmer/web.rb
279
281
  - lib/glimmer/web/component.rb