glimmer-dsl-web 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +7 -0
- data/README.md +65 -39
- data/VERSION +1 -1
- data/glimmer-dsl-web.gemspec +2 -2
- data/lib/glimmer/dsl/web/element_expression.rb +2 -3
- data/lib/glimmer/web/element_proxy.rb +23 -32
- data/lib/glimmer-dsl-web/samples/hello/hello_world.rb +7 -6
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0da388a6300e3a65d87f0187665ef8e69b5d206d5e4b2f41a87c3bf02c75730f
|
4
|
+
data.tar.gz: 576c7d4fd51df187e76bd3024418011c081e97f603bb773aaa52360c2bc3a65b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 575f405b644a48498aa5bac901d7760a6a635e8d3a11668bb5beeee98e0023f1c92861f0393eca475d293fe411617881258f4decb5e6124288b5b74d3261b810
|
7
|
+
data.tar.gz: 882a868936f8bca1794f5b302ed1b28d8adb6b330606008c2738822a4517d1bf9ba3ffa13b36abcb2a8f37a6349397c63e9619ce3562e9c5f93aa59b322f92d5
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,12 @@
|
|
1
1
|
# Change Log
|
2
2
|
|
3
|
+
## 0.0.2
|
4
|
+
|
5
|
+
- Rename element `:root` option to `:parent` option
|
6
|
+
- Set `body` as parent by default if `:parent` option is not specified for a root element
|
7
|
+
- `glimmer-dsl-web/samples/hello/hello_world.rb`
|
8
|
+
- Set `class` instead of `id` on generated HTML elements to identify them (e.g. `element-2`).
|
9
|
+
|
3
10
|
## 0.0.1
|
4
11
|
|
5
12
|
- 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
CHANGED
@@ -1,21 +1,25 @@
|
|
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.
|
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)
|
2
2
|
## Ruby in the Browser Web GUI 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)
|
5
5
|
|
6
6
|
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.
|
7
7
|
|
8
|
+
Note that the library is an Early Alpha and its APIs might change frequently until hitting a minor release at least.
|
9
|
+
|
8
10
|
### You can finally live in pure Rubyland on the web!
|
9
11
|
|
10
12
|
[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).
|
11
13
|
|
12
|
-
**
|
14
|
+
**Sample**
|
13
15
|
|
14
16
|
Initial HTML Markup:
|
15
17
|
|
16
18
|
```html
|
19
|
+
...
|
17
20
|
<div id="app-container">
|
18
21
|
</div>
|
22
|
+
...
|
19
23
|
```
|
20
24
|
|
21
25
|
Glimmer GUI code:
|
@@ -25,8 +29,8 @@ require 'glimmer-dsl-web'
|
|
25
29
|
|
26
30
|
include Glimmer
|
27
31
|
|
28
|
-
# This will hook into element #
|
29
|
-
div(
|
32
|
+
# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
|
33
|
+
div(parent: '#app-container') {
|
30
34
|
label(class: 'greeting') {
|
31
35
|
'Hello, World!'
|
32
36
|
}
|
@@ -36,13 +40,39 @@ div(root: '#app-container') {
|
|
36
40
|
That produces:
|
37
41
|
|
38
42
|
```html
|
43
|
+
...
|
39
44
|
<div id="app-container">
|
40
|
-
<div
|
41
|
-
<label class="greeting element
|
45
|
+
<div parent="#app-container" class="element element-1">
|
46
|
+
<label class="greeting element element-2">
|
42
47
|
Hello, World!
|
43
48
|
</label>
|
44
49
|
</div>
|
45
50
|
</div>
|
51
|
+
...
|
52
|
+
```
|
53
|
+
|
54
|
+
**Hello, World! Sample**
|
55
|
+
|
56
|
+
Glimmer GUI code:
|
57
|
+
|
58
|
+
```ruby
|
59
|
+
require 'glimmer-dsl-web'
|
60
|
+
|
61
|
+
include Glimmer
|
62
|
+
|
63
|
+
Document.ready? do
|
64
|
+
div {
|
65
|
+
'Hello, World!'
|
66
|
+
}.render
|
67
|
+
end
|
68
|
+
```
|
69
|
+
|
70
|
+
That produces the following under `<body></body>`:
|
71
|
+
|
72
|
+
```html
|
73
|
+
<div parent="body" class="element element-1">
|
74
|
+
Hello, World!
|
75
|
+
</div>
|
46
76
|
```
|
47
77
|
|
48
78
|
**Hello, Button! Sample**
|
@@ -74,7 +104,7 @@ class HelloButton
|
|
74
104
|
end
|
75
105
|
|
76
106
|
markup {
|
77
|
-
# This will hook into element #
|
107
|
+
# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
|
78
108
|
div(root_css_selector) {
|
79
109
|
text 'Hello, Button!'
|
80
110
|
|
@@ -92,7 +122,7 @@ class HelloButton
|
|
92
122
|
}
|
93
123
|
end
|
94
124
|
|
95
|
-
HelloButton.render('#
|
125
|
+
HelloButton.render('#app-container')
|
96
126
|
```
|
97
127
|
|
98
128
|
That produces:
|
@@ -191,7 +221,7 @@ gem 'opal', '1.4.1'
|
|
191
221
|
gem 'opal-rails', '2.0.2'
|
192
222
|
gem 'opal-async', '~> 1.4.0'
|
193
223
|
gem 'opal-jquery', '~> 0.4.6'
|
194
|
-
gem 'glimmer-dsl-web', '~> 0.0.
|
224
|
+
gem 'glimmer-dsl-web', '~> 0.0.2'
|
195
225
|
gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
|
196
226
|
gem 'glimmer-dsl-css', '~> 1.2.1', require: false
|
197
227
|
```
|
@@ -255,8 +285,10 @@ Example to confirm setup is working:
|
|
255
285
|
Initial HTML Markup:
|
256
286
|
|
257
287
|
```html
|
288
|
+
...
|
258
289
|
<div id="app-container">
|
259
290
|
</div>
|
291
|
+
...
|
260
292
|
```
|
261
293
|
|
262
294
|
Glimmer GUI code:
|
@@ -266,8 +298,8 @@ require 'glimmer-dsl-web'
|
|
266
298
|
|
267
299
|
include Glimmer
|
268
300
|
|
269
|
-
# This will hook into element #
|
270
|
-
div(
|
301
|
+
# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
|
302
|
+
div(parent: '#app-container') {
|
271
303
|
label(class: 'greeting') {
|
272
304
|
'Hello, World!'
|
273
305
|
}
|
@@ -277,13 +309,15 @@ div(root: '#app-container') {
|
|
277
309
|
That produces:
|
278
310
|
|
279
311
|
```html
|
312
|
+
...
|
280
313
|
<div id="app-container">
|
281
|
-
<div
|
282
|
-
<label class="greeting element
|
314
|
+
<div parent="#app-container" class="element element-1">
|
315
|
+
<label class="greeting element element-2">
|
283
316
|
Hello, World!
|
284
317
|
</label>
|
285
318
|
</div>
|
286
319
|
</div>
|
320
|
+
...
|
287
321
|
```
|
288
322
|
|
289
323
|
Start the Rails server:
|
@@ -330,7 +364,7 @@ gem 'opal', '1.4.1'
|
|
330
364
|
gem 'opal-rails', '2.0.2'
|
331
365
|
gem 'opal-async', '~> 1.4.0'
|
332
366
|
gem 'opal-jquery', '~> 0.4.6'
|
333
|
-
gem 'glimmer-dsl-web', '~> 0.0.
|
367
|
+
gem 'glimmer-dsl-web', '~> 0.0.2'
|
334
368
|
gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
|
335
369
|
gem 'glimmer-dsl-css', '~> 1.2.1', require: false
|
336
370
|
```
|
@@ -398,8 +432,10 @@ Example to confirm setup is working:
|
|
398
432
|
Initial HTML Markup:
|
399
433
|
|
400
434
|
```html
|
435
|
+
...
|
401
436
|
<div id="app-container">
|
402
437
|
</div>
|
438
|
+
...
|
403
439
|
```
|
404
440
|
|
405
441
|
Glimmer GUI code:
|
@@ -409,8 +445,8 @@ require 'glimmer-dsl-web'
|
|
409
445
|
|
410
446
|
include Glimmer
|
411
447
|
|
412
|
-
# This will hook into element #
|
413
|
-
div(
|
448
|
+
# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
|
449
|
+
div(parent: '#app-container') {
|
414
450
|
label(class: 'greeting') {
|
415
451
|
'Hello, World!'
|
416
452
|
}
|
@@ -420,13 +456,15 @@ div(root: '#app-container') {
|
|
420
456
|
That produces:
|
421
457
|
|
422
458
|
```html
|
459
|
+
...
|
423
460
|
<div id="app-container">
|
424
|
-
<div
|
425
|
-
<label class="greeting element
|
461
|
+
<div parent="#app-container" class="element element-1">
|
462
|
+
<label class="greeting element element-2">
|
426
463
|
Hello, World!
|
427
464
|
</label>
|
428
465
|
</div>
|
429
466
|
</div>
|
467
|
+
...
|
430
468
|
```
|
431
469
|
|
432
470
|
Start the Rails server:
|
@@ -464,13 +502,6 @@ https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app
|
|
464
502
|
|
465
503
|
#### Hello, World!
|
466
504
|
|
467
|
-
Initial HTML Markup:
|
468
|
-
|
469
|
-
```html
|
470
|
-
<div id="app-container">
|
471
|
-
</div>
|
472
|
-
```
|
473
|
-
|
474
505
|
Glimmer GUI code:
|
475
506
|
|
476
507
|
```ruby
|
@@ -478,23 +509,18 @@ require 'glimmer-dsl-web'
|
|
478
509
|
|
479
510
|
include Glimmer
|
480
511
|
|
481
|
-
|
482
|
-
div
|
483
|
-
label(class: 'greeting') {
|
512
|
+
Document.ready? do
|
513
|
+
div {
|
484
514
|
'Hello, World!'
|
485
|
-
}
|
486
|
-
|
515
|
+
}.render
|
516
|
+
end
|
487
517
|
```
|
488
518
|
|
489
|
-
That produces
|
519
|
+
That produces the following under `<body></body>`:
|
490
520
|
|
491
521
|
```html
|
492
|
-
<div
|
493
|
-
|
494
|
-
<label class="greeting element" id="element-2">
|
495
|
-
Hello, World!
|
496
|
-
</label>
|
497
|
-
</div>
|
522
|
+
<div parent="body" class="element element-1">
|
523
|
+
Hello, World!
|
498
524
|
</div>
|
499
525
|
```
|
500
526
|
|
@@ -527,7 +553,7 @@ class HelloButton
|
|
527
553
|
end
|
528
554
|
|
529
555
|
markup {
|
530
|
-
# This will hook into element #
|
556
|
+
# This will hook into element #app-container and then build HTML inside it using Ruby DSL code
|
531
557
|
div(root_css_selector) {
|
532
558
|
text 'Hello, Button!'
|
533
559
|
|
@@ -545,7 +571,7 @@ class HelloButton
|
|
545
571
|
}
|
546
572
|
end
|
547
573
|
|
548
|
-
HelloButton.render('#
|
574
|
+
HelloButton.render('#app-container')
|
549
575
|
```
|
550
576
|
|
551
577
|
That produces:
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.2
|
data/glimmer-dsl-web.gemspec
CHANGED
@@ -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.
|
5
|
+
# stub: glimmer-dsl-web 0.0.2 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
|
+
s.version = "0.0.2".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]
|
@@ -9,10 +9,9 @@ module Glimmer
|
|
9
9
|
include ParentExpression
|
10
10
|
|
11
11
|
def can_interpret?(parent, keyword, *args, &block)
|
12
|
-
# TODO automatically pass
|
12
|
+
# TODO automatically pass parent option as element if not passed instead of rejecting elements without a paraent nor root
|
13
13
|
# TODO raise a proper error if root is an element that is not found (maybe do this in model)
|
14
|
-
|
15
|
-
(parent or options[:root])
|
14
|
+
true
|
16
15
|
end
|
17
16
|
|
18
17
|
def interpret(parent, keyword, *args, &block)
|
@@ -71,7 +71,7 @@ module Glimmer
|
|
71
71
|
|
72
72
|
Event = Struct.new(:widget, keyword_init: true)
|
73
73
|
|
74
|
-
attr_reader :keyword, :parent, :args, :options, :
|
74
|
+
attr_reader :keyword, :parent, :args, :options, :children, :enabled, :foreground, :background, :focus, :removed?, :rendered
|
75
75
|
alias rendered? rendered
|
76
76
|
|
77
77
|
def initialize(keyword, parent, args, block)
|
@@ -106,7 +106,7 @@ module Glimmer
|
|
106
106
|
|
107
107
|
def remove
|
108
108
|
remove_all_listeners
|
109
|
-
|
109
|
+
dom_element.remove
|
110
110
|
parent&.post_remove_child(self)
|
111
111
|
# children.each(:remove) # TODO enable this safely
|
112
112
|
@removed = true
|
@@ -128,10 +128,10 @@ module Glimmer
|
|
128
128
|
end
|
129
129
|
end
|
130
130
|
|
131
|
-
|
132
|
-
|
131
|
+
# Subclasses can override with their own selector
|
132
|
+
def selector
|
133
|
+
".#{element_id}"
|
133
134
|
end
|
134
|
-
alias widget_path path # pure path without subchildren modifications
|
135
135
|
|
136
136
|
# Root element representing widget. Must be overridden by subclasses if different from div
|
137
137
|
def element
|
@@ -190,15 +190,16 @@ module Glimmer
|
|
190
190
|
end
|
191
191
|
alias setFocus set_focus
|
192
192
|
|
193
|
-
def
|
194
|
-
@parent&.
|
193
|
+
def parent_selector
|
194
|
+
@parent&.selector
|
195
195
|
end
|
196
196
|
|
197
197
|
def parent_dom_element
|
198
|
-
if
|
199
|
-
Document.find(
|
200
|
-
|
201
|
-
|
198
|
+
if parent_selector
|
199
|
+
Document.find(parent_selector)
|
200
|
+
else
|
201
|
+
options[:parent] ||= 'body'
|
202
|
+
Document.find(options[:parent])
|
202
203
|
end
|
203
204
|
end
|
204
205
|
|
@@ -267,10 +268,9 @@ module Glimmer
|
|
267
268
|
end
|
268
269
|
|
269
270
|
def dom
|
270
|
-
|
271
|
-
|
271
|
+
body_class = ([name, element_id] + css_classes.to_a).join(' ')
|
272
|
+
# TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
|
272
273
|
html_options = options.dup
|
273
|
-
html_options[:id] ||= body_id
|
274
274
|
html_options[:class] ||= ''
|
275
275
|
html_options[:class] = "#{html_options[:class]} #{body_class}".strip
|
276
276
|
@dom ||= html {
|
@@ -657,20 +657,11 @@ module Glimmer
|
|
657
657
|
self.class.name.split('::').last.underscore.sub(/_proxy$/, '').gsub('_', '-')
|
658
658
|
end
|
659
659
|
|
660
|
-
|
661
|
-
|
662
|
-
|
663
|
-
|
664
|
-
|
665
|
-
# Sets id explicitly. Useful in cases of wanting to maintain a stable id
|
666
|
-
def id=(value)
|
667
|
-
# TODO delete this method if it is not needed and isn't accurate in what it does
|
668
|
-
@id = value
|
669
|
-
end
|
670
|
-
|
671
|
-
# Subclasses can override with their own selector
|
672
|
-
def selector
|
673
|
-
"#{name}##{id}"
|
660
|
+
# element ID is used as a css class to identify the element.
|
661
|
+
# It is intentionally not set as the actual HTML element ID to let software engineers
|
662
|
+
# specify their own IDs if they wanted
|
663
|
+
def element_id
|
664
|
+
@element_id ||= "element-#{ElementProxy.next_id_number_for(name)}"
|
674
665
|
end
|
675
666
|
|
676
667
|
def add_css_class(css_class)
|
@@ -699,7 +690,7 @@ module Glimmer
|
|
699
690
|
|
700
691
|
def dom_element
|
701
692
|
# 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)
|
702
|
-
Document.find(
|
693
|
+
Document.find(selector)
|
703
694
|
end
|
704
695
|
|
705
696
|
# 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
|
|
718
709
|
element
|
719
710
|
end
|
720
711
|
|
721
|
-
def
|
722
|
-
|
712
|
+
def listener_selector
|
713
|
+
selector
|
723
714
|
end
|
724
715
|
|
725
716
|
def listener_dom_element
|
726
|
-
Document.find(
|
717
|
+
Document.find(listener_selector)
|
727
718
|
end
|
728
719
|
|
729
720
|
def observation_requests
|
@@ -19,11 +19,12 @@
|
|
19
19
|
# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
20
|
# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
21
21
|
|
22
|
+
require 'glimmer-dsl-web'
|
23
|
+
|
22
24
|
include Glimmer
|
23
25
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
}.open
|
26
|
+
Document.ready? do
|
27
|
+
div {
|
28
|
+
'Hello, World!'
|
29
|
+
}.render
|
30
|
+
end
|