glimmer-dsl-web 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f25d5b94aa413809d21b46a16bbbe525b3166ff6dc62789942410465795858c
-  data.tar.gz: 611add41ae0b8db1e9e964be7dbcecc6b046dafac023e109ab9c6e4f51943c24
+  metadata.gz: 0da388a6300e3a65d87f0187665ef8e69b5d206d5e4b2f41a87c3bf02c75730f
+  data.tar.gz: 576c7d4fd51df187e76bd3024418011c081e97f603bb773aaa52360c2bc3a65b
 SHA512:
-  metadata.gz: 8cde325767663eaf70334758888a1c65708b77b41a626f3ad1d990135ebbf8aa424457cf79026d4893a62968b7737661ec5f89cede81f98632a7f69be53e1e59
-  data.tar.gz: f9d3a94e629ca6eae4663df1e1eb89f5b4f013c225aa1948e7c8acc8420061f9740559dc8a591388720f214646d0a62ab9e5f77265ed34faeb0437c1ea18fb6c
+  metadata.gz: 575f405b644a48498aa5bac901d7760a6a635e8d3a11668bb5beeee98e0023f1c92861f0393eca475d293fe411617881258f4decb5e6124288b5b74d3261b810
+  data.tar.gz: 882a868936f8bca1794f5b302ed1b28d8adb6b330606008c2738822a4517d1bf9ba3ffa13b36abcb2a8f37a6349397c63e9619ce3562e9c5f93aa59b322f92d5

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.0.2
+
+- Rename element `:root` option to `:parent` option
+- Set `body` as parent by default if `:parent` option is not specified for a root element
+- `glimmer-dsl-web/samples/hello/hello_world.rb`
+- Set `class` instead of `id` on generated HTML elements to identify them (e.g. `element-2`).
+
 ## 0.0.1
 
 - Render top-level HTML element + attributes under a root parent element by specifying `root: 'css_selector'` option (e.g. `div(root: 'css_selector')`)

data/README.md

@@ -1,21 +1,25 @@
-# [<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.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.2 (Early Alpha)
 ## Ruby in the Browser Web GUI 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)
 
 This project is inspired-by [Glimmer DSL for Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) and is similar in enabling frontend GUI development with Ruby, but it mainly differs from Glimmer DSL for Opal by adopting a DSL that follows web-like HTML syntax in Ruby (enabling transfer of HTML/CSS/JS skills) instead of adopting a desktop GUI DSL that is webified. Also, it will begin by supporting [Opal Ruby](https://opalrb.com/), but it might grow to support [Ruby WASM](https://github.com/ruby/ruby.wasm) as an alternative to [Opal Ruby](https://opalrb.com/) that could be switched to with a simple configuration change.
 
+Note that the library is an Early Alpha and its APIs might change frequently until hitting a minor release at least.
+
 ### You can finally live in pure Rubyland on the web!
 
 [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web is an upcoming **pre-alpha** [gem](https://rubygems.org/gems/glimmer-dsl-web) that enables building web GUI in pure Ruby via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/) (and potentially [Ruby WASM](https://github.com/ruby/ruby.wasm) in the future).
 
-**Hello, World! Sample**
+**Sample**
 
 Initial HTML Markup:
 
 ```html
+...
 <div id="app-container">
 </div>
+...
 ```
 
 Glimmer GUI code:
@@ -25,8 +29,8 @@ require 'glimmer-dsl-web'
 
 include Glimmer
 
-# This will hook into element #application and then build HTML inside it using Ruby DSL code
-div(root: '#app-container') {
+# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
+div(parent: '#app-container') {
   label(class: 'greeting') {
     'Hello, World!'
   }
@@ -36,13 +40,39 @@ div(root: '#app-container') {
 That produces:
 
 ```html
+...
 <div id="app-container">
-  <div root="#app-container" id="element-1" class="element">
-    <label class="greeting element" id="element-2">
+  <div parent="#app-container" class="element element-1">
+    <label class="greeting element element-2">
       Hello, World!
     </label>
   </div>
 </div>
+...
+```
+
+**Hello, World! Sample**
+
+Glimmer GUI code:
+
+```ruby
+require 'glimmer-dsl-web'
+
+include Glimmer
+
+Document.ready? do
+  div {
+    'Hello, World!'
+  }.render
+end
+```
+
+That produces the following under `<body></body>`:
+
+```html
+<div parent="body" class="element element-1">
+  Hello, World!
+</div>
 ```
 
 **Hello, Button! Sample**
@@ -74,7 +104,7 @@ class HelloButton
   end
   
   markup {
-    # This will hook into element #application and then build HTML inside it using Ruby DSL code
+    # This will hook into element #app-container and then build HTML inside it using Ruby DSL code
     div(root_css_selector) {
       text 'Hello, Button!'
       
@@ -92,7 +122,7 @@ class HelloButton
   }
 end
 
-HelloButton.render('#application')
+HelloButton.render('#app-container')
 ```
 
 That produces:
@@ -191,7 +221,7 @@ gem 'opal', '1.4.1'
 gem 'opal-rails', '2.0.2'
 gem 'opal-async', '~> 1.4.0'
 gem 'opal-jquery', '~> 0.4.6'
-gem 'glimmer-dsl-web', '~> 0.0.1'
+gem 'glimmer-dsl-web', '~> 0.0.2'
 gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
 gem 'glimmer-dsl-css', '~> 1.2.1', require: false
 ```
@@ -255,8 +285,10 @@ Example to confirm setup is working:
 Initial HTML Markup:
 
 ```html
+...
 <div id="app-container">
 </div>
+...
 ```
 
 Glimmer GUI code:
@@ -266,8 +298,8 @@ require 'glimmer-dsl-web'
 
 include Glimmer
 
-# This will hook into element #application and then build HTML inside it using Ruby DSL code
-div(root: '#app-container') {
+# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
+div(parent: '#app-container') {
   label(class: 'greeting') {
     'Hello, World!'
   }
@@ -277,13 +309,15 @@ div(root: '#app-container') {
 That produces:
 
 ```html
+...
 <div id="app-container">
-  <div root="#app-container" id="element-1" class="element">
-    <label class="greeting element" id="element-2">
+  <div parent="#app-container" class="element element-1">
+    <label class="greeting element element-2">
       Hello, World!
     </label>
   </div>
 </div>
+...
 ```
 
 Start the Rails server:
@@ -330,7 +364,7 @@ gem 'opal', '1.4.1'
 gem 'opal-rails', '2.0.2'
 gem 'opal-async', '~> 1.4.0'
 gem 'opal-jquery', '~> 0.4.6'
-gem 'glimmer-dsl-web', '~> 0.0.1'
+gem 'glimmer-dsl-web', '~> 0.0.2'
 gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
 gem 'glimmer-dsl-css', '~> 1.2.1', require: false
 ```
@@ -398,8 +432,10 @@ Example to confirm setup is working:
 Initial HTML Markup:
 
 ```html
+...
 <div id="app-container">
 </div>
+...
 ```
 
 Glimmer GUI code:
@@ -409,8 +445,8 @@ require 'glimmer-dsl-web'
 
 include Glimmer
 
-# This will hook into element #application and then build HTML inside it using Ruby DSL code
-div(root: '#app-container') {
+# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
+div(parent: '#app-container') {
   label(class: 'greeting') {
     'Hello, World!'
   }
@@ -420,13 +456,15 @@ div(root: '#app-container') {
 That produces:
 
 ```html
+...
 <div id="app-container">
-  <div root="#app-container" id="element-1" class="element">
-    <label class="greeting element" id="element-2">
+  <div parent="#app-container" class="element element-1">
+    <label class="greeting element element-2">
       Hello, World!
     </label>
   </div>
 </div>
+...
 ```
 
 Start the Rails server:
@@ -464,13 +502,6 @@ https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app
 
 #### Hello, World!
 
-Initial HTML Markup:
-
-```html
-<div id="app-container">
-</div>
-```
-
 Glimmer GUI code:
 
 ```ruby
@@ -478,23 +509,18 @@ require 'glimmer-dsl-web'
 
 include Glimmer
 
-# This will hook into element #application and then build HTML inside it using Ruby DSL code
-div(root: '#application') {
-  label(class: 'greeting') {
+Document.ready? do
+  div {
     'Hello, World!'
-  }
-}
+  }.render
+end
 ```
 
-That produces:
+That produces the following under `<body></body>`:
 
 ```html
-<div id="app-container">
-  <div root="#app-container" id="element-1" class="element">
-    <label class="greeting element" id="element-2">
-      Hello, World!
-    </label>
-  </div>
+<div parent="body" class="element element-1">
+  Hello, World!
 </div>
 ```
 
@@ -527,7 +553,7 @@ class HelloButton
   end
   
   markup {
-    # This will hook into element #application and then build HTML inside it using Ruby DSL code
+    # This will hook into element #app-container and then build HTML inside it using Ruby DSL code
     div(root_css_selector) {
       text 'Hello, Button!'
       
@@ -545,7 +571,7 @@ class HelloButton
   }
 end
 
-HelloButton.render('#application')
+HelloButton.render('#app-container')
 ```
 
 That produces:

data/VERSION

@@ -1 +1 @@
-0.0.1
+0.0.2

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.0.1 ruby lib
+# stub: glimmer-dsl-web 0.0.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.1".freeze
+  s.version = "0.0.2".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]

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

@@ -9,10 +9,9 @@ module Glimmer
         include ParentExpression
         
         def can_interpret?(parent, keyword, *args, &block)
-          # TODO automatically pass root as element if not passed instead of rejecting elements without a paraent nor root
+          # TODO automatically pass parent option as element if not passed instead of rejecting elements without a paraent nor root
           # TODO raise a proper error if root is an element that is not found (maybe do this in model)
-          options = args.last.is_a?(Hash) ? args.last : {}
-          (parent or options[:root])
+          true
         end
 
         def interpret(parent, keyword, *args, &block)

data/lib/glimmer/web/element_proxy.rb

@@ -71,7 +71,7 @@ module Glimmer
             
       Event = Struct.new(:widget, keyword_init: true)
     
-      attr_reader :keyword, :parent, :args, :options, :path, :children, :enabled, :foreground, :background, :focus, :removed?, :rendered
+      attr_reader :keyword, :parent, :args, :options, :children, :enabled, :foreground, :background, :focus, :removed?, :rendered
       alias rendered? rendered
       
       def initialize(keyword, parent, args, block)
@@ -106,7 +106,7 @@ module Glimmer
       
       def remove
         remove_all_listeners
-        Document.find(path).remove
+        dom_element.remove
         parent&.post_remove_child(self)
 #         children.each(:remove) # TODO enable this safely
         @removed = true
@@ -128,10 +128,10 @@ module Glimmer
         end
       end
       
-      def path
-        "#{parent_path} #{element}##{id}.#{name}"
+      # Subclasses can override with their own selector
+      def selector
+        ".#{element_id}"
       end
-      alias widget_path path # pure path without subchildren modifications
 
       # Root element representing widget. Must be overridden by subclasses if different from div
       def element
@@ -190,15 +190,16 @@ module Glimmer
       end
       alias setFocus set_focus
       
-      def parent_path
-        @parent&.path
+      def parent_selector
+        @parent&.selector
       end
 
       def parent_dom_element
-        if parent_path
-          Document.find(parent_path)
-        elsif options[:root]
-          Document.find(options[:root])
+        if parent_selector
+          Document.find(parent_selector)
+        else
+          options[:parent] ||= 'body'
+          Document.find(options[:parent])
         end
       end
       
@@ -267,10 +268,9 @@ module Glimmer
       end
             
       def dom
-        body_id = id
-        body_class = ([name] + css_classes.to_a).join(' ')
+        body_class = ([name, element_id] + css_classes.to_a).join(' ')
+        # TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
         html_options = options.dup
-        html_options[:id] ||= body_id
         html_options[:class] ||= ''
         html_options[:class] = "#{html_options[:class]} #{body_class}".strip
         @dom ||= html {
@@ -657,20 +657,11 @@ module Glimmer
         self.class.name.split('::').last.underscore.sub(/_proxy$/, '').gsub('_', '-')
       end
       
-      def id
-        return options[:id] if options.include?(:id)
-        @id ||= "#{name}-#{ElementProxy.next_id_number_for(name)}"
-      end
-            
-      # Sets id explicitly. Useful in cases of wanting to maintain a stable id
-      def id=(value)
-        # TODO delete this method if it is not needed and isn't accurate in what it does
-        @id = value
-      end
-            
-      # Subclasses can override with their own selector
-      def selector
-        "#{name}##{id}"
+      # element ID is used as a css class to identify the element.
+      # It is intentionally not set as the actual HTML element ID to let software engineers
+      # specify their own IDs if they wanted
+      def element_id
+        @element_id ||= "element-#{ElementProxy.next_id_number_for(name)}"
       end
       
       def add_css_class(css_class)
@@ -699,7 +690,7 @@ module Glimmer
       
       def dom_element
         # TODO consider making this pick an element in relation to its parent, allowing unhooked dom elements to be built if needed (unhooked to the visible page dom)
-        Document.find(path)
+        Document.find(selector)
       end
       
       # TODO consider adding a default #dom method implementation for the common case, automatically relying on #element and other methods to build the dom html
@@ -718,12 +709,12 @@ module Glimmer
         element
       end
       
-      def listener_path
-        path
+      def listener_selector
+        selector
       end
       
       def listener_dom_element
-        Document.find(listener_path)
+        Document.find(listener_selector)
       end
       
       def observation_requests

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

@@ -19,11 +19,12 @@
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+require 'glimmer-dsl-web'
+
 include Glimmer
 
-shell {
-  text 'Glimmer'
-  label {
-    text 'Hello, World!'
-  }
-}.open
+Document.ready? do
+  div {
+    'Hello, World!'
+  }.render
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Andy Maleh