glimmer-dsl-web 0.0.12 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aaaa7092a643511c072a409a2b771b34db6b2aa0859adc5b200e5aba0869590e
-  data.tar.gz: 15ba8d9639037fa17104cb997a449f42e79703ae9ec4992f21b8a7551d3b09f0
+  metadata.gz: 5c9bd6a7f085751de551a8eada611f25b6462c32f31019ebc31e296a98a7dbe7
+  data.tar.gz: cde631c346fddf15d48c52b85643f4f436761b059ccca0a8909cca56fdc7676e
 SHA512:
-  metadata.gz: 5732c5dca9591d17917fd6dfbd1425eed080f6aa345f6b9fb6bbbd8f3d487ce83428063b9ef974cabab8c2fdd7e6d8799b67e4442c462e6c174a4a81448900c6
-  data.tar.gz: 34afe2b80aeb727dad38572f81f46f7d442ef2998cb97b94ae92d332364f3ff2da0669203ced36a0484304fbbcbdfb1c7cb30a8b74b49ce42abb329ce333b7de
+  metadata.gz: 036cbe077a6378e6fb18cf10060074b4a071b20f4293960ded842458069c4dfb5bc041eb909f0b7b3cfbb809f73a41605f2b97f101b338f1ee616e52f00445c3
+  data.tar.gz: 4441339edfaf2724324e4aa30c19b2afc7e0e9d673add6130882e1c3220e278a1be1d21be126bf9b8aaa7568c62a0c59ecbce9ca2d1103183263ae17deb2d15e

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.1.0
+
+- Update rendering system to render HTML elements immediately instead of waiting for complete components to be rendered all at once.
+- Support `render: false` option in any element or component to avoid rendering when building the elements/components (including a Component#create alternative to Component#render that defers rendering if needed).
+- Fix `Glimmer::Web::Component` `after_render` hook by ensuring it only fires after the component markup has been rendered
+
 ## 0.0.12
 
 - Treat HTML text formatting elements differently (e.g. `b`, `i`, `strong`, `em`, `sub`, `sup`, `del`, `ins`, `small`, `mark`) by not appending to their parent content, yet having them generate a String with `to_s` that can be embedded in a `String` that is the text content of another normal element like `p` or `div`.

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.0.12 (Early Alpha)
+# [<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.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)
@@ -17,7 +17,7 @@ include Glimmer
 Document.ready? do
   div {
     'Hello, World!'
-  }.render
+  }
 end
 ```
 
@@ -49,7 +49,7 @@ Document.ready? do
         $$.alert('Hello, Button!')
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -150,7 +150,7 @@ Document.ready? do
         }
       CSS
     }
-  }.render
+  }
 end
 ```
 
@@ -245,6 +245,8 @@ class HelloObserver
   end
   
   after_render do
+    @number_input.value = @number_holder.number
+    @range_input.value = @number_holder.number
     # 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
@@ -262,7 +264,7 @@ class HelloObserver
   markup {
     div {
       div {
-        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+        @number_input = input(type: 'number', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
@@ -276,7 +278,7 @@ class HelloObserver
         }
       }
       div {
-        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+        @range_input = input(type: 'range', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i
@@ -411,7 +413,7 @@ Document.ready? do
                       computed_by: @address.members + ['state_code'],
                     ]
     }
-  }.render
+  }
 end
 ```
 
@@ -546,7 +548,7 @@ Document.ready? do
         end
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -1073,7 +1075,7 @@ Screenshot:
 
 --
 
-NOTE: Glimmer DSL for Web is an Early Alpha project. If you want it developed faster, please [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-web/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-web/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-web/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
+NOTE: Glimmer DSL for Web is a Beta project. If you want it developed faster, please [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-web/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-web/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-web/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still a Beta, so the more feedback and issues you report the better.
 
 Learn more about the differences between various [Glimmer](https://github.com/AndyObtiva/glimmer) DSLs by looking at:
 
@@ -1081,7 +1083,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Table of Contents
 
-- [Glimmer DSL for Web](#-glimmer-dsl-for-opal-alpha-pure-ruby-web-gui)
+- [Glimmer DSL for Web](#)
   - [Prerequisites](#prerequisites)
   - [Setup](#setup)
   - [Usage](#usage)
@@ -1121,7 +1123,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Setup
 
-(NOTE: Keep in mind this is an Early Alpha. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
+(NOTE: Keep in mind this is a Beta. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
 
 The [glimmer-dsl-web](https://rubygems.org/gems/glimmer-dsl-web) gem is a [Rails Engine](https://guides.rubyonrails.org/engines.html) gem that includes assets.
 
@@ -1144,7 +1146,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.0.12'
+gem 'glimmer-dsl-web', '~> 0.1.0'
 ```
 
 Run:
@@ -1247,7 +1249,7 @@ Document.ready? do
     label(class: 'greeting') {
       'Hello, World!'
     }
-  }.render
+  }
 end
 ```
 
@@ -1298,7 +1300,7 @@ Document.ready? do
     label(class: 'greeting') {
       'Hello, World!'
     }
-  }.render
+  }
 end
 ```
 
@@ -1360,7 +1362,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.0.12'
+gem 'glimmer-dsl-web', '~> 0.1.0'
 ```
 
 Run:
@@ -1461,7 +1463,7 @@ Document.ready? do
     label(class: 'greeting') {
       'Hello, World!'
     }
-  }.render
+  }
 end
 ```
 
@@ -1616,7 +1618,7 @@ include Glimmer
 Document.ready? do
   div {
     'Hello, World!'
-  }.render
+  }
 end
 ```
 
@@ -1638,7 +1640,7 @@ require 'glimmer-dsl-web'
 include Glimmer
 
 Document.ready? do
-  div('Hello, World!').render
+  div('Hello, World!')
 end
 ```
 
@@ -1670,7 +1672,7 @@ Document.ready? do
         $$.alert('Hello, Button!')
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -1771,7 +1773,7 @@ Document.ready? do
         }
       CSS
     }
-  }.render
+  }
 end
 ```
 
@@ -1866,6 +1868,8 @@ class HelloObserver
   end
   
   after_render do
+    @number_input.value = @number_holder.number
+    @range_input.value = @number_holder.number
     # 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
@@ -1883,7 +1887,7 @@ class HelloObserver
   markup {
     div {
       div {
-        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+        @number_input = input(type: 'number', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
@@ -1897,7 +1901,7 @@ class HelloObserver
         }
       }
       div {
-        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+        @range_input = input(type: 'range', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i
@@ -2088,7 +2092,7 @@ Document.ready? do
                       computed_by: @address.members + ['state_code'],
                     ]
     }
-  }.render
+  }
 end
 ```
 
@@ -2223,7 +2227,7 @@ Document.ready? do
         end
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -2849,7 +2853,7 @@ Document.ready? do
         CSS
       }
     }
-  }.render
+  }
 end
 ```
 

data/VERSION

@@ -1 +1 @@
-0.0.12
+0.1.0

data/glimmer-dsl-web.gemspec

@@ -2,16 +2,16 @@
 # 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.12 ruby lib
+# stub: glimmer-dsl-web 0.1.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.12".freeze
+  s.version = "0.1.0".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-07"
+  s.date = "2024-01-08"
   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 = [

data/lib/glimmer/web/component.rb

@@ -93,10 +93,17 @@ module Glimmer
           self.name.underscore.gsub('::', '__').split('__').last
         end
         
+        # Creates component without rendering
+        def create(*args)
+          args << {} unless args.last.is_a?(Hash)
+          args.last[:render] = false
+          rendered_component = send(keyword, *args)
+          rendered_component
+        end
+        
+        # Creates and renders component
         def render(*args)
           rendered_component = send(keyword, *args)
-          options = args.last.is_a?(Hash) ? args.last.slice(:parent, :custom_parent_dom_element, :brand_new) : {}
-          rendered_component.render(**options)
           rendered_component
         end
       end
@@ -204,10 +211,15 @@ module Glimmer
         markup_block = self.class.instance_variable_get("@markup_block")
         raise Glimmer::Error, 'Invalid Glimmer web component for having no markup! Please define markup block!' if markup_block.nil?
         @markup_root = instance_exec(&markup_block)
-        @markup_root.options[:parent] = options[:parent] if options[:parent]
+        @markup_root.options[:parent] = options[:parent] if !options[:parent].nil?
         @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')
+        if options[:render] != false
+          execute_hooks('after_render')
+        else
+          on_render_listener = proc { execute_hooks('after_render') }
+          @markup_root.handle_observation_request('on_render', on_render_listener)
+        end
         
         # TODO adapt for web
         observer_registration_cleanup_listener = proc do

data/lib/glimmer/web/element_proxy.rb

@@ -109,16 +109,25 @@ module Glimmer
         @keyword = keyword
         @parent = parent
         @options = args.last.is_a?(Hash) ? args.last.symbolize_keys : {}
+        if parent.nil?
+          options[:parent] ||= Component.interpretation_stack.last&.options&.[](:parent)
+          options[:render] ||= Component.interpretation_stack.last&.options&.[](:render)
+        end
         @args = args
         @block = block
         @children = []
         @parent&.post_initialize_child(self)
+        render if !@rendered && render_after_create?
+      end
+      
+      def render_after_create?
+        options[:render] != false && (@parent.nil? || @parent.render_after_create?)
       end
       
       # Executes for the parent of a child that just got added
       def post_initialize_child(child)
         @children << child
-        child.render
+        child.render if !render_after_create?
       end
       
       # Executes for the parent of a child that just got removed
@@ -128,6 +137,7 @@ module Glimmer
       
       # Executes at the closing of a parent widget curly braces after all children/properties have been added/set
       def post_add_content
+        # TODO double check every place we should call this method
         # No Op
       end
       
@@ -215,7 +225,7 @@ module Glimmer
       def parent_selector
         @parent&.selector
       end
-
+      
       def parent_dom_element
         if parent_selector
           Document.find(parent_selector)
@@ -253,8 +263,10 @@ module Glimmer
             handle_observation_request(keyword, event_listener)
           end
         end
-        children.each do |child|
-          child.render
+        unless render_after_create?
+          children.each do |child|
+            child.render
+          end
         end
         @rendered = true
         unless skip_content_on_render_blocks?
@@ -262,6 +274,10 @@ module Glimmer
             content(&content_block)
           end
         end
+        # TODO replace following line with a method call like (`notify_listeners('on_render')`)
+        listeners_for('on_render').each do |listener|
+          listener.original_event_listener.call(EventProxy.new(listener: listener))
+        end
       end
       alias rerender render
         

data/lib/glimmer/web/event_proxy.rb

@@ -1,3 +1,5 @@
+# backtick_javascript: true
+
 # Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining

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

@@ -30,5 +30,5 @@ Document.ready? do
         $$.alert('Hello, Button!')
       end
     }
-  }.render
+  }
 end

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

@@ -137,5 +137,5 @@ Document.ready? do
         end
       end
     }
-  }.render
+  }
 end

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

@@ -177,5 +177,5 @@ Document.ready? do
                       computed_by: @address.members + ['state_code'],
                     ]
     }
-  }.render
+  }
 end

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

@@ -98,5 +98,5 @@ Document.ready? do
         }
       CSS
     }
-  }.render
+  }
 end

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

@@ -113,5 +113,5 @@ Document.ready? do
         CSS
       }
     }
-  }.render
+  }
 end

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

@@ -37,6 +37,8 @@ class HelloObserver
   end
   
   after_render do
+    @number_input.value = @number_holder.number
+    @range_input.value = @number_holder.number
     # 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
@@ -54,7 +56,7 @@ class HelloObserver
   markup {
     div {
       div {
-        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+        @number_input = input(type: 'number', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
@@ -68,7 +70,7 @@ class HelloObserver
         }
       }
       div {
-        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+        @range_input = input(type: 'range', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i

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

@@ -26,5 +26,5 @@ include Glimmer
 Document.ready? do
   div {
     'Hello, World!'
-  }.render
+  }
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.12
+  version: 0.1.0
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-07 00:00:00.000000000 Z
+date: 2024-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer