opal-react 0.0.4 → 0.0.5

Sign up to get free protection for your applications and to get access to all the features.
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
- )