glimmer-dsl-web 0.0.10 → 0.0.12

data/VERSION

@@ -1 +1 @@
-0.0.10
+0.0.12

data/glimmer-dsl-web.gemspec

@@ -2,17 +2,17 @@
 # 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.10 ruby lib
+# stub: glimmer-dsl-web 0.0.12 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.10".freeze
+  s.version = "0.0.12".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andy Maleh".freeze]
-  s.date = "2024-01-05"
-  s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) - Enables frontend GUI development with Ruby by adopting a DSL that follows web-like HTML syntax, enabling the transfer of HTML/CSS/JS skills to Ruby frontend development. This library relies on Opal Ruby.".freeze
+  s.date = "2024-01-07"
+  s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) enables building Web GUI frontends using Ruby in the Browser, as per Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend library in existence. The library follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) while supporting both Unidirectional (One-Way) Data-Binding (using <=) and Bidirectional (Two-Way) Data-Binding (using <=>). Dynamic rendering (and re-rendering) of HTML content is also supported via Content Data-Binding. And, modular design is supported with Glimmer Web Components. You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This library relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
     "CHANGELOG.md",
@@ -37,7 +37,10 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_form.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_observer.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
+    "lib/glimmer-dsl-web/samples/regular/button_counter.rb",
     "lib/glimmer-dsl-web/vendor/jquery.js",
     "lib/glimmer/config/opal_logger.rb",
     "lib/glimmer/data_binding/element_binding.rb",
@@ -47,8 +50,10 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/data_binding_expression.rb",
     "lib/glimmer/dsl/web/dsl.rb",
     "lib/glimmer/dsl/web/element_expression.rb",
+    "lib/glimmer/dsl/web/formatting_element_expression.rb",
     "lib/glimmer/dsl/web/general_element_expression.rb",
     "lib/glimmer/dsl/web/listener_expression.rb",
+    "lib/glimmer/dsl/web/observe_expression.rb",
     "lib/glimmer/dsl/web/p_expression.rb",
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/select_expression.rb",
@@ -59,6 +64,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/web/component.rb",
     "lib/glimmer/web/element_proxy.rb",
     "lib/glimmer/web/event_proxy.rb",
+    "lib/glimmer/web/formatting_element_proxy.rb",
     "lib/glimmer/web/listener_proxy.rb"
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze
@@ -74,7 +80,7 @@ Gem::Specification.new do |s|
   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.0".freeze])
-  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.4.6".freeze])
+  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.0".freeze])
   s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1".freeze, "< 3.0.0".freeze])
   s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 0".freeze])
   s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0".freeze, "< 14.0.0".freeze])

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

@@ -21,8 +21,9 @@ module Glimmer
           if block.source_location && (block.source_location == parent.content&.__getobj__&.source_location)
             parent.content.call(parent) unless parent.content.called?
           else
-            super
+            super(parent, keyword, *args, &block)
           end
+          parent.post_add_content
         end
       end
     end

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

@@ -1,5 +1,27 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# 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/engine'
 require 'glimmer/dsl/web/element_expression'
+require 'glimmer/dsl/web/formatting_element_expression'
 require 'glimmer/dsl/web/listener_expression'
 require 'glimmer/dsl/web/property_expression'
 require 'glimmer/dsl/web/p_expression'
@@ -9,6 +31,7 @@ require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'
 require 'glimmer/dsl/web/shine_data_binding_expression'
 require 'glimmer/dsl/web/component_expression'
+require 'glimmer/dsl/web/observe_expression'
 
 module Glimmer
   module DSL
@@ -22,6 +45,7 @@ module Glimmer
          property
          content_data_binding
          shine_data_binding
+         formatting_element
          element
        ]
       )

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

@@ -0,0 +1,19 @@
+require 'glimmer/dsl/expression'
+
+require 'glimmer/web/formatting_element_proxy'
+
+module Glimmer
+  module DSL
+    module Web
+      class FormattingElementExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          Glimmer::Web::FormattingElementProxy.keyword_supported?(keyword, parent: parent)
+        end
+        
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Web::FormattingElementProxy.format(keyword, *args, &block)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# 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/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/dsl/observe_expression'
+require 'glimmer/web/component'
+
+module Glimmer
+  module DSL
+    module SWT
+      class ObserveExpression < StaticExpression
+        include TopLevelExpression
+        include Glimmer::DSL::ObserveExpression
+
+        def interpret(parent, keyword, *args, &block)
+          observer_registration = super(parent, keyword, *args, &block)
+          Glimmer::Web::Component.interpretation_stack.last&.observer_registrations&.push(observer_registration)
+          observer_registration
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/helpers/glimmer_helper.rb

@@ -15,13 +15,11 @@ module GlimmerHelper
     component_args_json = JSON.dump(component_args)
     opal_script = <<~Opal
       require 'glimmer-dsl-web'
-      Document.ready? do
-        component_args_json = '#{component_args_json}'
-        component_args = JSON.parse(component_args_json)
-        component_args << {} if !component_args.last.is_a?(Hash)
-        component_args.last[:parent] = "##{component_id}"
-        #{component_class_name}.render(*component_args)
-      end
+      component_args_json = '#{component_args_json}'
+      component_args = JSON.parse(component_args_json)
+      component_args << {} if !component_args.last.is_a?(Hash)
+      component_args.last[:parent] = "##{component_id}"
+      #{component_class_name}.render(*component_args)
     Opal
     content_tag(:div, id: component_script_container_id, class: ['glimmer_component_script_container', "#{component_file}_script_container"]) do
       content_tag(:div, '', id: component_id, class: ['glimmer_component', component_file]) +

data/lib/glimmer/web/component.rb

@@ -176,6 +176,10 @@ module Glimmer
         def reset_component_namespaces
           @component_namespaces = Set[Object, Glimmer::Web]
         end
+        
+        def interpretation_stack
+          @interpretation_stack ||= []
+        end
       end
       # <- end of class methods
       
@@ -184,6 +188,7 @@ module Glimmer
       alias parent_proxy parent
 
       def initialize(parent, args, options, &content)
+        Component.interpretation_stack.push(self)
         @parent = parent
         options = args.delete_at(-1) if args.is_a?(Array) && args.last.is_a?(Hash)
         if args.is_a?(Hash)
@@ -203,6 +208,14 @@ module Glimmer
         @parent ||= @markup_root.parent
         raise Glimmer::Error, 'Invalid Glimmer web component for having an empty markup! Please fill markup block!' if @markup_root.nil?
         execute_hooks('after_render')
+        
+        # TODO adapt for web
+        observer_registration_cleanup_listener = proc do
+          observer_registrations.compact.each(&:deregister)
+          observer_registrations.clear
+        end
+        @markup_root.handle_observation_request('on_remove', observer_registration_cleanup_listener)
+        post_add_content if content.nil?
       end
       
       # Subclasses may override to perform post initialization work on an added child
@@ -210,6 +223,15 @@ module Glimmer
         # No Op by default
       end
 
+      def post_add_content
+        Component.interpretation_stack.pop
+      end
+      
+      # This stores observe keyword registrations of model/attribute observers
+      def observer_registrations
+        @observer_registrations ||= []
+      end
+
       def can_handle_observation_request?(observation_request)
         observation_request = observation_request.to_s
         result = false

data/lib/glimmer/web/element_proxy.rb

@@ -139,11 +139,14 @@ module Glimmer
         @children.dup.each do |child|
           child.remove
         end
+        on_remove_listeners = listeners_for('on_remove').dup
         remove_all_listeners
         dom_element.remove
         parent&.post_remove_child(self)
         @removed = true
-#         listeners_for('widget_removed').each {|listener| listener.call(Event.new(widget: self))}
+        on_remove_listeners.each do |listener|
+          listener.original_event_listener.call(EventProxy.new(listener: listener))
+        end
       end
       
       def remove_all_listeners
@@ -217,10 +220,12 @@ module Glimmer
         if parent_selector
           Document.find(parent_selector)
         else
-          # TODO consider moving this to initializer
           options[:parent] ||= 'body'
           the_element = Document.find(options[:parent])
-          the_element = Document.find('body') if the_element.length == 0
+          if the_element.length == 0
+            options[:parent] = 'body'
+            the_element = Document.find('body')
+          end
           the_element
         end
       end
@@ -297,6 +302,7 @@ module Glimmer
             
       def dom
         # TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
+        # TODO check if we need to avoid rendering content block if no content is available
         @dom ||= html {
           send(keyword, html_options) {
             args.first if args.first.is_a?(String)
@@ -433,22 +439,12 @@ module Glimmer
       end
       
       def handle_observation_request(keyword, original_event_listener)
-#         case keyword
-#         when 'on_widget_removed'
-#           listeners_for(keyword.sub(/^on_/, '')) << original_event_listener.to_proc
-#         else
-          handle_javascript_observation_request(keyword, original_event_listener)
-#         end
-      end
-      
-      def handle_javascript_observation_request(keyword, original_event_listener)
         listener = ListenerProxy.new(
           element: self,
           selector: selector,
           dom_element: dom_element,
           event_attribute: keyword,
-          listener: original_event_listener,
-          original_event_listener: original_event_listener
+          original_event_listener: original_event_listener,
         )
         listener.register
         listeners_for(keyword) << listener

data/lib/glimmer/web/event_proxy.rb

@@ -24,9 +24,11 @@ module Glimmer
     class EventProxy
       attr_reader :js_event, :listener
 
-      def initialize(js_event:, listener:)
-        @js_event = js_event
+      # Instantiates EventProxy
+      # When js_event is nil, it is a custom event
+      def initialize(listener:, js_event: nil)
         @listener = listener
+        @js_event = js_event
       end
       
       def element = listener.element
@@ -34,6 +36,7 @@ module Glimmer
       def event_attribute = listener.event_attribute
       
       def original_event
+        return if js_event.nil?
         Native(`#{js_event.to_n}.originalEvent`)
       end
       
@@ -41,14 +44,14 @@ module Glimmer
         property_name = method_name.to_s.camelcase
         super(method_name, include_private) ||
           js_event.respond_to?(method_name, include_private) ||
-          `#{property_name} in #{original_event.to_n}`
+          (original_event && `#{property_name} in #{original_event.to_n}`)
       end
       
       def method_missing(method_name, *args, &block)
         property_name = method_name.to_s.camelcase
         if js_event.respond_to?(method_name, true)
           js_event.send(method_name, *args, &block)
-        elsif `#{property_name} in #{original_event.to_n}`
+        elsif (original_event && `#{property_name} in #{original_event.to_n}`)
           original_event[property_name]
         else
           super(method_name, *args, &block)

data/lib/glimmer/web/formatting_element_proxy.rb

@@ -0,0 +1,56 @@
+# backtick_javascript: true
+
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+module Glimmer
+  module Web
+    class FormattingElementProxy
+      class << self
+        include Glimmer
+        
+        def keyword_supported?(keyword, parent: nil)
+          keyword = keyword.to_s
+          (
+            FORMATTING_ELEMENT_KEYWORDS.include?(keyword) ||
+            (parent&.keyword == 'p' && keyword == 'span')
+          )
+        end
+      
+        def format(keyword, *args, &block)
+          content = nil
+          if block_given?
+            content = block.call.to_s
+          elsif args.any? && !args.first.is_a?(Hash)
+            content = args.first.to_s
+          end
+          attribute_hash = args.last.is_a?(Hash) ? args.last : {}
+          content_block = proc { content } unless content.nil?
+          html {
+            send(keyword, attribute_hash, &content_block)
+          }.to_s
+        end
+      end
+      
+      FORMATTING_ELEMENT_KEYWORDS = %w[b i strong em sub sup del ins small mark br]
+    end
+  end
+end

data/lib/glimmer/web/listener_proxy.rb

@@ -24,33 +24,34 @@ require 'glimmer/web/event_proxy'
 module Glimmer
   module Web
     class ListenerProxy
-      attr_reader :element, :event_attribute, :event_name, :dom_element, :selector, :listener, :js_listener, :original_event_listener
+      attr_reader :element, :event_attribute, :event_name, :dom_element, :selector, :js_listener, :original_event_listener
 
-      def initialize(element:, event_attribute:, dom_element:, selector:, listener:)
+      def initialize(element:, event_attribute:, dom_element:, selector:, original_event_listener:)
         @element = element
         @event_attribute = event_attribute
-        @event_name = event_attribute.sub(/^on/, '')
+        @event_name = event_attribute.sub(/^on_/, '').sub(/^on/, '')
         @dom_element = dom_element
         @selector = selector
-        @listener = listener
-        @js_listener = lambda do |js_event|
-          event = EventProxy.new(js_event: js_event, listener: self)
-          result = listener.call(event)
-          result = true if result.nil?
-          result
+        if !event_attribute.start_with?('on_') # custom event
+          @js_listener = lambda do |js_event|
+            event = EventProxy.new(js_event: js_event, listener: self)
+            result = original_event_listener.call(event)
+            result = true if result.nil?
+            result
+          end
         end
         @original_event_listener = original_event_listener
       end
       
       def register
-        @dom_element.on(@event_name, &@js_listener)
+        @dom_element.on(@event_name, &@js_listener) unless @js_listener.nil?
       end
       alias observe register
       alias reregister register
       
       def unregister
         # TODO contribute fix to opal to allow passing observer with & to off with selector not specified as nil
-        @dom_element.off(@event_name, @js_listener)
+        @dom_element.off(@event_name, @js_listener) unless @js_listener.nil?
         @element.listeners_for(@event_attribute).delete(self)
       end
       alias unobserve unregister

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

@@ -0,0 +1,90 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# 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'
+
+class NumberHolder
+  attr_accessor :number
+  
+  def initialize
+    self.number = 50
+  end
+end
+
+class HelloObserver
+  include Glimmer::Web::Component
+  
+  before_render do
+    @number_holder = NumberHolder.new
+  end
+  
+  after_render do
+    # Observe Model attribute @number_holder.number for changes and update View
+    # Observer is automatically cleaned up if remove method is called on rendered HelloObserver
+    # or its top-level element
+    observe(@number_holder, :number) do
+      number_string = @number_holder.number.to_s
+      @number_input.value = number_string unless @number_input.value == number_string
+      @range_input.value = number_string unless @range_input.value == number_string
+    end
+    # Bidirectional Data-Binding does the same thing automatically
+    # Just disable the observe block above as well as the oninput listeners below
+    # and enable the `value <=> [@number_holder, :number]` lines to try the data-binding version
+    # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+  end
+  
+  markup {
+    div {
+      div {
+        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+          # oninput listener updates Model attribute @number_holder.number
+          oninput do
+            @number_holder.number = @number_input.value.to_i
+          end
+          
+          # Bidirectional Data-Binding simplifies the implementation significantly
+          # by enabling the following line and disabling oninput listeners as well
+          # as the after_body observe block observer
+          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+#           value <=> [@number_holder, :number]
+        }
+      }
+      div {
+        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+          # oninput listener updates Model attribute @number_holder.number
+          oninput do
+            @number_holder.number = @range_input.value.to_i
+          end
+          
+          # Bidirectional Data-Binding simplifies the implementation significantly
+          # by enabling the following line and disabling oninput listeners as well
+          # as the after_body observe block observer
+          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+#           value <=> [@number_holder, :number]
+        }
+      }
+    }
+  }
+end
+
+Document.ready? do
+  HelloObserver.render
+end

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

@@ -0,0 +1,67 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# 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'
+
+class HelloParagraph
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      h1(class: 'title') {
+        'Flying Cars Become 100% Safe with AI Powered Balance!'
+      }
+      
+      p(class: 'intro') {"
+        In the early 2030's, #{em('flying cars')} became affordable after their prices dropped
+        below #{small(del('$100,000'))}#{ins('$80,000')} as a result of the innovations of #{strong('Travel-X')}. Still, that did not
+        make #{em('flying cars')} any popular due to the extreme difficulty in piloting such flying vehicles for the average
+        person, making it very tough to pass the tests for getting a piloting license given the learning curve.
+      "}
+      
+      p {"
+        That said, #{b('Travel-X')} has recently come up with a new feature for their flagship #{i('flying car')},
+        the Ptero#{sub(1)}#{sup('TM')}, which relies on AI#{sub(2)} to automatically balance the flying cars in mid-air,
+        thus significantly facilitating their piloting by the average consumer.
+      "}
+      
+      p(class: 'conclusion') {"
+        That Ptero#{sup('TM')} will be so stable and well balanced while flying that the consumer will be able to drive
+        as if it is a plain old car, with the only difference being vertical elevation, the control of which will be handled
+        automatically by AI. The Ptero#{sup('TM')} will debut for #{span(style: 'text-decoration: underline dashed;'){'$79,000'}}.
+      "}
+      
+      h2(class: 'legend-title') {
+        mark('Legend:')
+      }
+      
+      p(class: 'legend') {"
+        #{strong("1- Ptero:")} Pterosaur is flying dinosaur species#{br}
+        #{strong("2- AI:")} Artificial Intelligence#{br}
+      "}
+        
+    }
+  }
+end
+
+Document.ready? do
+  HelloParagraph.render
+end

data/lib/glimmer-dsl-web/samples/regular/button_counter.rb

@@ -0,0 +1,36 @@
+require 'glimmer-dsl-web'
+
+class Counter
+  attr_accessor :count
+
+  def initialize
+    self.count = 0
+  end
+end
+
+class ButtonCounter
+  include Glimmer::Web::Component
+  
+  before_render do
+    @counter = Counter.new
+  end
+  
+  markup {
+    div {
+      button {
+        # Unidirectional Data-Binding indicating that on every change to @counter.count, the value
+        # is read and converted to "Click To Increment: #{value}  ", and then automatically
+        # copied to button innerText (content) to display to the user
+        inner_text <= [@counter, :count,
+                        on_read: ->(value) { "Click To Increment: #{value}  " }
+                      ]
+        
+        onclick {
+          @counter.count += 1
+        }
+      }
+    }
+  }
+end
+
+ButtonCounter.render