opal-react 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -0
  3. data/README.md +20 -2
  4. data/dist/opal-react.js +1 -1
  5. data/examples/hello/Gemfile +6 -0
  6. data/examples/hello/Rakefile +14 -0
  7. data/examples/hello/application.rb +10 -0
  8. data/examples/hello/index.html +12 -0
  9. data/examples/timer/Gemfile +6 -0
  10. data/examples/timer/Rakefile +14 -0
  11. data/examples/timer/application.rb +27 -0
  12. data/examples/timer/index.html +12 -0
  13. data/examples/todoapp/Rakefile +3 -0
  14. data/examples/todoapp/application.rb +5 -3
  15. data/lib/opal/react.rb +1 -1
  16. data/lib/opal/react/component.rb +4 -8
  17. data/lib/opal/react/{dom.rb → dsl.rb} +1 -1
  18. data/lib/opal/react/version.rb +1 -1
  19. data/lib/opal/react/window.rb +11 -5
  20. metadata +11 -8
  21. data/LICENSE +0 -21
  22. data/LICENSE.txt +0 -22
  23. data/tutorial/package.json +0 -15
  24. data/tutorial/tutorial1.html +0 -36
  25. data/tutorial/tutorial1.rb +0 -19
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 4632477a73b22c689149eba13a1ec7e9a60db31e
4
- data.tar.gz: 79279fb2c5a5ea8bcc7b0a4d117438fa74614ef9
3
+ metadata.gz: f754e16c509ee571313019a9dfb14baf699538f6
4
+ data.tar.gz: ae3dc45d06acc8fcc7059493485df24e2687f521
5
5
  SHA512:
6
- metadata.gz: 2e0a3d84557b1a933873d31334a0749502bc9120e3532633948656768f76c384c40cde0d9944429ea51881f06441c0db6ba982208de83d30cf01ef7a33532ff1
7
- data.tar.gz: 66c16e8f7e1bc8a23dd689ecf2fcaa88e7d89d16727b36061ca9d8d05043947904d479cc5e9b7c11d06deb64bca62c37a4cc5cc4a005ee88673b6d2f994c108f
6
+ metadata.gz: f36003798a4d82a8d25b966ea275569317fac85cca723a2014e3cdb6657da6ed9d0c39ced81858027ebbd3617dafeff05d6f3fa7ccfe6e62ad9c13c2037e8c12
7
+ data.tar.gz: 11a39ca4ffbb4ca5abad845491f6024f4a49cb14bd393ce2b6f1bf3cba1c99956baecf4a8a030ab42026979f9b128b6df39c28bfbe3e7c679df955bd5028d8f2
data/.gitignore CHANGED
@@ -13,3 +13,5 @@
13
13
  *.a
14
14
  mkmf.log
15
15
  node_modules
16
+ *.lock
17
+ build
data/README.md CHANGED
@@ -1,6 +1,16 @@
1
1
  # Opal::React
2
2
 
3
- TODO: Write a gem description
3
+ ## Disclamer
4
+
5
+ I'm not a rails developer™
6
+
7
+ You should check out [Clearwater](https://github.com/clearwater-rb/clearwater)
8
+ and [React.rb](http://ruby-hyperloop.io) as well. They are built by rails
9
+ people and they aim for a more ruby-like experience.
10
+
11
+ This was done as a proof of concept and for me to learn more about
12
+ [Opal](http://opalrb.org). That being said, this is still supposed to
13
+ be a complete wrapper around [React](https://facebook.github.io/react/).
4
14
 
5
15
  ## Installation
6
16
 
@@ -12,7 +22,7 @@ gem 'opal-react'
12
22
 
13
23
  And then execute:
14
24
 
15
- $ bundle
25
+ $ bundle install
16
26
 
17
27
  Or install it yourself as:
18
28
 
@@ -68,6 +78,14 @@ end
68
78
  TodoApp.run()
69
79
  ```
70
80
 
81
+ ## Extras
82
+
83
+ `React::Window` provides a thin wrapper for common dom operations.
84
+
85
+ https://developer.mozilla.org/en-US/docs/Web/API/Window has a long list of available properties and methods.
86
+
87
+ This makes it possible to write `fetch("https://...")` and `window.setTimeout(-> { ... }, timeout)` anywhere
88
+ in your components.
71
89
 
72
90
  ## Contributing
73
91
 
data/dist/opal-react.js CHANGED
@@ -1303,7 +1303,7 @@ Opal.modules["react/version"] = function(Opal) {
1303
1303
 
1304
1304
  var def = self.$$proto, $scope = self.$$scope;
1305
1305
 
1306
- Opal.cdecl($scope, 'VERSION', "0.0.3")
1306
+ Opal.cdecl($scope, 'VERSION', "0.0.4")
1307
1307
  })($scope.base)
1308
1308
  })($scope.base)
1309
1309
  };
data/examples/hello/Gemfile ADDED
@@ -0,0 +1,6 @@
1
+ source 'https://rubygems.org'
2
+
3
+ gem 'rake'
4
+ gem 'opal'
5
+
6
+ gem 'opal-react', path: '../../'
data/examples/hello/Rakefile ADDED
@@ -0,0 +1,14 @@
1
+ require 'bundler/setup'
2
+ Bundler.require
3
+
4
+ task :default => [:build]
5
+
6
+ desc "Build bundle"
7
+ task :build do
8
+ Opal.append_path "."
9
+ build = Opal::Builder.build("application")
10
+ FileUtils.mkdir_p "build"
11
+ File.binwrite "build/bundle.js", build.to_s << "\n//# sourceMappingURL=bundle.js.map"
12
+ File.binwrite "build/bundle.js.map", build.source_map
13
+ end
14
+
data/examples/hello/application.rb ADDED
@@ -0,0 +1,10 @@
1
+ require 'react'
2
+
3
+ class HelloMessage < React::Component
4
+
5
+ def render
6
+ div("Hello #{props[:name]}")
7
+ end
8
+ end
9
+
10
+ HelloMessage.run( name: "John" )
data/examples/hello/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <script src="https://unpkg.com/react@15.3.2/dist/react-with-addons.min.js"></script>
6
+ <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.min.js"></script>
7
+ <script src="http://cdn.opalrb.org/opal/0.10.1/opal.min.js"></script>
8
+ </head>
9
+ <body>
10
+ <script src="build/bundle.js"></script>
11
+ </body>
12
+ </html>
data/examples/timer/Gemfile ADDED
@@ -0,0 +1,6 @@
1
+ source 'https://rubygems.org'
2
+
3
+ gem 'rake'
4
+ gem 'opal'
5
+
6
+ gem 'opal-react', path: '../../'
data/examples/timer/Rakefile ADDED
@@ -0,0 +1,14 @@
1
+ require 'bundler/setup'
2
+ Bundler.require
3
+
4
+ task :default => [:build]
5
+
6
+ desc "Build bundle"
7
+ task :build do
8
+ Opal.append_path "."
9
+ build = Opal::Builder.build("application")
10
+ FileUtils.mkdir_p "build"
11
+ File.binwrite "build/bundle.js", build.to_s << "\n//# sourceMappingURL=bundle.js.map"
12
+ File.binwrite "build/bundle.js.map", build.source_map
13
+ end
14
+
data/examples/timer/application.rb ADDED
@@ -0,0 +1,27 @@
1
+ require 'react'
2
+
3
+ class Timer < React::Component
4
+
5
+ def initial_state
6
+ { seconds_elapsed: 0 }
7
+ end
8
+
9
+ def tick
10
+ set_state(seconds_elapsed: state[:seconds_elapsed] + 1)
11
+ end
12
+
13
+ def component_did_mount
14
+ @interval = window.setInterval(-> { tick }, 1000)
15
+ end
16
+
17
+ def component_will_unmount
18
+ window.clearInterval(@interval)
19
+ end
20
+
21
+ def render
22
+ div("Seconds Elapsed: #{state[:seconds_elapsed]}")
23
+ end
24
+
25
+ end
26
+
27
+ Timer.run
data/examples/timer/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <script src="https://unpkg.com/react@15.3.2/dist/react-with-addons.min.js"></script>
6
+ <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.min.js"></script>
7
+ <script src="http://cdn.opalrb.org/opal/0.10.1/opal.min.js"></script>
8
+ </head>
9
+ <body>
10
+ <script src="build/bundle.js"></script>
11
+ </body>
12
+ </html>
data/examples/todoapp/Rakefile CHANGED
@@ -1,10 +1,13 @@
1
1
  require 'bundler/setup'
2
2
  Bundler.require
3
3
 
4
+ task :default => [:build]
5
+
4
6
  desc "Build bundle"
5
7
  task :build do
6
8
  Opal.append_path "."
7
9
  build = Opal::Builder.build("application")
10
+ FileUtils.mkdir_p "build"
8
11
  File.binwrite "build/bundle.js", build.to_s << "\n//# sourceMappingURL=bundle.js.map"
9
12
  File.binwrite "build/bundle.js.map", build.source_map
10
13
  end
data/examples/todoapp/application.rb CHANGED
@@ -23,9 +23,11 @@ class TodoApp < React::Component
23
23
  def handleSubmit(e)
24
24
  e.preventDefault()
25
25
  now = Time.now
26
- nextItems = state[:items] + [{ text: state[:text], id: now.to_i * 1e6 + now.usec }]
27
- nextText = ''
28
- set_state({items: nextItems, text: nextText})
26
+ new_item = [{ text: state[:text], id: now.to_i * 1e6 + now.usec }]
27
+ set_state(
28
+ items: state[:items] + new_item,
29
+ text: ''
30
+ )
29
31
  end
30
32
 
31
33
  def render
data/lib/opal/react.rb CHANGED
@@ -3,7 +3,7 @@ if RUBY_ENGINE == 'opal'
3
3
  require 'native'
4
4
 
5
5
  require_relative "react/react.rb"
6
- require_relative "react/dom.rb"
6
+ require_relative "react/dsl.rb"
7
7
  require_relative "react/window.rb"
8
8
  require_relative "react/component.rb"
9
9
  require_relative "react/version"
data/lib/opal/react/component.rb CHANGED
@@ -7,7 +7,7 @@ module React
7
7
  end
8
8
 
9
9
  def [](key)
10
- `return #{@native}[key] || #{nil};`
10
+ `return #{@native}[key];`
11
11
  end
12
12
  end
13
13
 
@@ -41,7 +41,7 @@ module React
41
41
 
42
42
  class Component
43
43
 
44
- include DOM
44
+ include DSL
45
45
  include Window
46
46
 
47
47
  def self.inherited(subclass)
@@ -109,9 +109,9 @@ module React
109
109
  }
110
110
 
111
111
  name = subclass.dsl_name(subclass.name)
112
- DOM.define_method(name, _create)
112
+ DSL.define_method(name, _create)
113
113
 
114
- subclass.class.define_method('run') do |props: nil, container: nil|
114
+ subclass.class.define_method('run') do |props = nil, container = nil|
115
115
  if container
116
116
  ReactDOM.render(_create.call(props), container)
117
117
  else
@@ -193,9 +193,5 @@ module React
193
193
  def mounted?
194
194
  `return #{@this}.isMounted();`
195
195
  end
196
-
197
- def defer(ms=0)
198
- $$[:setTimeout].call( -> { yield if block_given? }, ms)
199
- end
200
196
  end
201
197
  end
data/lib/opal/react/{dom.rb → dsl.rb} RENAMED
@@ -1,5 +1,5 @@
1
1
  module React
2
- module DOM
2
+ module DSL
3
3
  $$.React.DOM.each do |name, factory|
4
4
  define_method(name) do |props = nil, children = nil, &block|
5
5
  if children.nil?
data/lib/opal/react/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Opal
2
2
  module React
3
- VERSION = "0.0.4"
3
+ VERSION = "0.0.5"
4
4
  end
5
5
  end
data/lib/opal/react/window.rb CHANGED
@@ -1,7 +1,7 @@
1
1
  module React
2
2
  module Window
3
- [
4
- # Properties
3
+
4
+ [ # Properties
5
5
  :closed, :console, :controllers, :crypto, :devicePixelRatio,
6
6
  :dialogArguments, :document, :frameElement, :frames, :fullscreen,
7
7
  :history, :indexedDB, :innerHeight, :innerWidth, :isSecureContext,
@@ -10,7 +10,9 @@ module React
10
10
  :parent, :performance, :personalbar, :screen, :screenX, :screenY,
11
11
  :scrollbars, :scrollX, :scrollY, :sessionStorage, :status, :statusbar,
12
12
  :toolbar, :top, :URL, :window,
13
- # Methods
13
+ ].each { |key| define_method(key){ $$.window[key] } }
14
+
15
+ [ # Methods
14
16
  :alert, :atob, :blur, :btoa, :cancelAnimationFrame, :cancelIdleCallback,
15
17
  :clearImmediate, :clearInterval, :clearTimeout, :close, :confirm,
16
18
  :convertPointFromNodeToPage, :createImageBitmap, :fetch, :focus,
@@ -18,8 +20,12 @@ module React
18
20
  :getSelection, :home, :matchMedia, :minimize, :moveBy, :moveTo, :open,
19
21
  :postMessage, :prompt, :requestAnimationFrame, :requestIdleCallback,
20
22
  :resizeBy, :resizeTo, :restore, :scroll, :scrollBy, :scrollByPages,
21
- :scrollTo, :setImmediate, :setInterval, :setTimeout, :sizeToContent,
23
+ :scrollTo, :setInterval, :setImmediate, :setTimeout, :sizeToContent,
22
24
  :stop, :updateCommands
23
- ].each { |key| define_method(key){ $$.window[key] } }
25
+ ].each { |key|
26
+ define_method(key) { |*args, &block|
27
+ $$.window[key].call(*args, &block)
28
+ }}
29
+
24
30
  end
25
31
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: opal-react
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4
4
+ version: 0.0.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - John Susi
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-09-20 00:00:00.000000000 Z
11
+ date: 2016-09-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -75,28 +75,31 @@ extra_rdoc_files: []
75
75
  files:
76
76
  - ".gitignore"
77
77
  - Gemfile
78
- - LICENSE
79
- - LICENSE.txt
80
78
  - README.md
81
79
  - Rakefile
82
80
  - config.ru
83
81
  - dist/opal-react.js
84
82
  - dist/opal-react.js.map
83
+ - examples/hello/Gemfile
84
+ - examples/hello/Rakefile
85
+ - examples/hello/application.rb
86
+ - examples/hello/index.html
87
+ - examples/timer/Gemfile
88
+ - examples/timer/Rakefile
89
+ - examples/timer/application.rb
90
+ - examples/timer/index.html
85
91
  - examples/todoapp/Gemfile
86
92
  - examples/todoapp/Rakefile
87
93
  - examples/todoapp/application.rb
88
94
  - examples/todoapp/index.html
89
95
  - lib/opal/react.rb
90
96
  - lib/opal/react/component.rb
91
- - lib/opal/react/dom.rb
97
+ - lib/opal/react/dsl.rb
92
98
  - lib/opal/react/react.rb
93
99
  - lib/opal/react/version.rb
94
100
  - lib/opal/react/window.rb
95
101
  - opal-react.gemspec
96
102
  - spec/index.html.erb
97
- - tutorial/package.json
98
- - tutorial/tutorial1.html
99
- - tutorial/tutorial1.rb
100
103
  homepage: https://github.com/johnsusi/opal-react
101
104
  licenses:
102
105
  - MIT
data/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- The MIT License (MIT)
2
-
3
- Copyright (c) 2016 John Susi
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
data/LICENSE.txt DELETED
@@ -1,22 +0,0 @@
1
- Copyright (c) 2016 John Susi
2
-
3
- MIT License
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining
6
- a copy of this software and associated documentation files (the
7
- "Software"), to deal in the Software without restriction, including
8
- without limitation the rights to use, copy, modify, merge, publish,
9
- distribute, sublicense, and/or sell copies of the Software, and to
10
- permit persons to whom the Software is furnished to do so, subject to
11
- the following conditions:
12
-
13
- The above copyright notice and this permission notice shall be
14
- included in all copies or substantial portions of the Software.
15
-
16
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
- NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
- LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
- OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
- WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/tutorial/package.json DELETED
@@ -1,15 +0,0 @@
1
- {
2
- "name": "tutorial",
3
- "version": "1.0.0",
4
- "description": "",
5
- "main": "opal.js",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
9
- "author": "",
10
- "license": "ISC",
11
- "dependencies": {
12
- "react": "^15.0.1",
13
- "react-dom": "^15.0.1"
14
- }
15
- }
data/tutorial/tutorial1.html DELETED
@@ -1,36 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Hello React!</title>
6
- <script src="https://fb.me/react-15.0.1.js"></script>
7
- <script src="https://fb.me/react-dom-15.0.1.js"></script>
8
- <script src="http://cdn.opalrb.org/opal/0.9.2/opal.js"></script>
9
- <script src="http://cdn.opalrb.org/opal/0.9.2/opal-parser.js"></script>
10
- <script src="../dist/opal-react.js"></script>
11
- <script type="text/javascript">Opal.load('opal-parser')</script>
12
-
13
- </head>
14
- <body>
15
- <div id="content"></div>
16
- <script type="text/ruby">
17
- # tutorial1.rb
18
-
19
- class CommentBox < React::Component
20
-
21
- def render
22
- div(className: 'commentBox') do
23
- 'Hello, world! I am a CommentBox.'
24
- end
25
- end
26
- end
27
-
28
- include React::DOM
29
-
30
- ReactDOM.render(
31
- CommentBox(),
32
- $$.document.getElementById('content')
33
- )
34
- </script>
35
- </body>
36
- </html>
data/tutorial/tutorial1.rb DELETED
@@ -1,19 +0,0 @@
1
- # tutorial1.rb
2
-
3
- require 'opal'
4
- require 'opal/react'
5
-
6
- class CommentBox < React::Component
7
-
8
- def render
9
- div(className: 'commentBox') do
10
- 'Hello, world! I am a CommentBox.'
11
- end
12
- end
13
- end
14
-
15
- include React::DOM
16
-
17
- $$.console.log ReactDOMServer.renderToStaticMarkup(
18
- CommentBox()
19
- )