glimmer-dsl-web 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84438bf8ca94283ebca35c684038f1ba326c9301782508bdf07b7c4e23ecb391
-  data.tar.gz: f7246af497c04e9c509457444ac9c17c8617aa881fca82adb4561473f1d18044
+  metadata.gz: 429afe58eb54b98a9aa229faeecbe09ceefb82ebae7e240ef3dd68ce63110164
+  data.tar.gz: '03469f3f04757d5b95aab910b1469047e467481aeaf6169ed69a33a8ab900b6f'
 SHA512:
-  metadata.gz: b47263b248b7952d58d9fe8fb03f0614f8c917e025310839f7ab311f33fc31e292fe257ffec8f1c487843eab7814253829c00579ea2132385b4064b75e801890
-  data.tar.gz: 6be5e5bab5900605d78977e703d27ac95dac303fa3855d52bd4f7dd4a1e8c8f090d49b95c57a5abe3155dde9adece9a028cfa7afc3872b9fcead2ce1a417676d
+  metadata.gz: 93b2b65475f2609476997bb7139e2078f8851b88e881d123af4298df2f293a8a2537eecf3f697d734d09e0a8d5ad87771b32899873b9161b74f3e5387e86df00
+  data.tar.gz: 7a37b8b255486545016a982522a52ee3cf00c8238557d396a874e38da8d5689fda9e8a8b021cb698f380f641e68d341b9b9e2ea10e035692192e534693cfac21

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 0.2.0
+
+- Support `style` element content as Glimmer DSL for CSS syntax (Ruby Programmable CSS) as an alternative to a CSS `String`
+
 ## 0.1.1
 
 - Upgrade to opal-jquery 0.5.1 (adds `# backtick_javascript: true` where needed to satisfy new Opal requirement)

data/README.md

@@ -1,4 +1,4 @@
-# [<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.1.1 (Beta)
+# [<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.2.0 (Beta)
 ## Ruby in the Browser Web GUI Frontend Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
 [![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)
@@ -131,6 +131,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;
@@ -392,15 +393,15 @@ Document.ready? do
         }
       }
       
+      # Programmable CSS using Glimmer DSL for CSS
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        # `r` is an alias for `rule`, generating a CSS rule
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   
@@ -528,20 +529,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }
@@ -708,14 +707,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -957,14 +954,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -1146,7 +1141,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.1.1'
+gem 'glimmer-dsl-web', '~> 0.2.0'
 ```
 
 Run:
@@ -1367,7 +1362,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.1.1'
+gem 'glimmer-dsl-web', '~> 0.2.0'
 ```
 
 Run:
@@ -1764,6 +1759,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;
@@ -2082,14 +2078,12 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   
@@ -2217,20 +2211,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }
@@ -2397,14 +2389,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -2646,14 +2636,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -2850,17 +2838,15 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{container_div.selector} * {
-            margin: 5px;
-          }
-          #{container_div.selector} label {
-            grid-column: 1;
-          }
-          #{container_div.selector} input {
-            grid-column: 2;
-          }
-        CSS
+        r("#{container_div.selector} *") {
+          margin '5px'
+        }
+        r("#{container_div.selector} label") {
+          grid_column '1'
+        }
+        r("#{container_div.selector} input") {
+          grid_column '2'
+        }
       }
     }
   }

data/VERSION

@@ -1 +1 @@
-0.1.1
+0.2.0

data/glimmer-dsl-web.gemspec

@@ -2,11 +2,11 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.1.1 ruby lib
+# stub: glimmer-dsl-web 0.2.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.1.1".freeze
+  s.version = "0.2.0".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
@@ -58,6 +58,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/select_expression.rb",
     "lib/glimmer/dsl/web/shine_data_binding_expression.rb",
+    "lib/glimmer/dsl/web/style_expression.rb",
     "lib/glimmer/helpers/glimmer_helper.rb",
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
@@ -76,7 +77,7 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2".freeze])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.2".freeze])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.3".freeze])
   s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
   s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
   s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1".freeze])

data/lib/glimmer/dsl/web/dsl.rb

@@ -26,6 +26,7 @@ require 'glimmer/dsl/web/listener_expression'
 require 'glimmer/dsl/web/property_expression'
 require 'glimmer/dsl/web/p_expression'
 require 'glimmer/dsl/web/select_expression'
+require 'glimmer/dsl/web/style_expression'
 require 'glimmer/dsl/web/bind_expression'
 require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'

data/lib/glimmer/dsl/web/style_expression.rb

@@ -0,0 +1,27 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/web/general_element_expression'
+
+module Glimmer
+  module DSL
+    module Web
+      class StyleExpression < StaticExpression
+        include GeneralElementExpression
+        include Glimmer
+        
+        def add_content(parent, keyword, *args, &block)
+          if parent.rendered? || parent.skip_content_on_render_blocks?
+            return_value = css(&block).to_s
+            return_value = super(parent, keyword, *args, &block) if return_value.to_s.empty?
+            if return_value.is_a?(String) && parent.dom_element.text.to_s.empty?
+              parent.add_text_content(return_value)
+            end
+            parent.post_add_content
+            return_value
+          else
+            parent.add_content_on_render(&block)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/glimmer-dsl-web/samples/hello/hello_component.rb

@@ -158,14 +158,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       

data/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb

@@ -117,20 +117,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }

data/lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb

@@ -156,15 +156,15 @@ Document.ready? do
         }
       }
       
+      # Programmable CSS using Glimmer DSL for CSS
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        # `r` is an alias for `rule`, generating a CSS rule
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   

data/lib/glimmer-dsl-web/samples/hello/hello_form.rb

@@ -79,6 +79,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;

data/lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb

@@ -135,14 +135,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       

data/lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb

@@ -100,17 +100,15 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{container_div.selector} * {
-            margin: 5px;
-          }
-          #{container_div.selector} label {
-            grid-column: 1;
-          }
-          #{container_div.selector} input {
-            grid-column: 2;
-          }
-        CSS
+        r("#{container_div.selector} *") {
+          margin '5px'
+        }
+        r("#{container_div.selector} label") {
+          grid_column '1'
+        }
+        r("#{container_div.selector} input") {
+          grid_column '2'
+        }
       }
     }
   }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Andy Maleh
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.2.2
+        version: 1.2.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.2.2
+        version: 1.2.3
 - !ruby/object:Gem::Dependency
   name: opal
   requirement: !ruby/object:Gem::Requirement
@@ -287,6 +287,7 @@ files:
 - lib/glimmer/dsl/web/property_expression.rb
 - lib/glimmer/dsl/web/select_expression.rb
 - lib/glimmer/dsl/web/shine_data_binding_expression.rb
+- lib/glimmer/dsl/web/style_expression.rb
 - lib/glimmer/helpers/glimmer_helper.rb
 - lib/glimmer/util/proc_tracker.rb
 - lib/glimmer/web.rb