Skip to content
This repository was archived by the owner on Oct 19, 2018. It is now read-only.

Commit 6d0f8c9

Browse files
author
Barrie Hadfield
committed
refactor
1 parent fb9bc39 commit 6d0f8c9

15 files changed

+23116
-42186
lines changed

‎Gemfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ gem 'react-rails', '~> 1.9.0'
99
gem 'hyper-component'
1010
gem 'hyper-operation'
1111
gem 'hyper-store'
12+
gem 'hyper-router'
1213
gem 'hyperloop-config'
1314
gem 'opal-jquery'
1415
gem 'uglifier'

‎Gemfile.lock

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ GEM
3838
i18n (~> 0.7)
3939
minitest (~> 5.1)
4040
tzinfo (~> 1.1)
41-
addressable (2.5.1)
42-
public_suffix (~> 2.0, >= 2.0.2)
41+
addressable (2.5.2)
42+
public_suffix (>= 2.0.2, < 4.0)
4343
arel (8.0.0)
4444
babel-source (5.8.35)
4545
babel-transpiler (0.7.0)
@@ -88,6 +88,10 @@ GEM
8888
hyperloop-config (>= 0.9.7)
8989
opal (>= 0.8.0)
9090
opal-activesupport (>= 0.2.0)
91+
hyper-router (4.1.1)
92+
hyper-component
93+
hyper-react (~> 0.12.7)
94+
opal-browser
9195
hyper-store (0.2.3)
9296
hyperloop-config (>= 0.9.2)
9397
hyperloop-config (0.9.10)
@@ -139,7 +143,7 @@ GEM
139143
sprockets (~> 3.1)
140144
tilt (>= 1.4)
141145
paggio (0.2.6)
142-
public_suffix (2.0.5)
146+
public_suffix (3.0.0)
143147
pusher (1.3.1)
144148
httpclient (~> 2.7)
145149
multi_json (~> 1.0)
@@ -188,15 +192,15 @@ GEM
188192
sprockets (3.7.1)
189193
concurrent-ruby (~> 1.0)
190194
rack (> 1, < 3)
191-
sprockets-rails (3.2.0)
195+
sprockets-rails (3.2.1)
192196
actionpack (>= 4.0)
193197
activesupport (>= 4.0)
194198
sprockets (>= 3.0.0)
195199
thin (1.7.2)
196200
daemons (~> 1.0, >= 1.0.9)
197201
eventmachine (~> 1.0, >= 1.0.4)
198202
rack (>= 1, < 3)
199-
thor (0.19.4)
203+
thor (0.20.0)
200204
thread_safe (0.3.6)
201205
tilt (2.0.8)
202206
tzinfo (1.2.3)
@@ -213,6 +217,7 @@ PLATFORMS
213217
DEPENDENCIES
214218
hyper-component
215219
hyper-operation
220+
hyper-router
216221
hyper-store
217222
hyperloop-config
218223
opal

‎README.md

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,102 @@
11
# Hyperloop JS
22

3-
Client-side Hyperloop and Opal for static sites or fast prototyping, with no backend or build process needed.
3+
### Hyperloop.js
4+
5+
Hyperloop client-side including:
6+
7+
+ Hyperloop Components
8+
+ Hyperloop Stores
9+
+ Hyperloop Operations
10+
+ Hyper-Router (React Router v4 DSL wrapper)
11+
+ Opal Active Support, Opal JQuery
12+
13+
Note: React, ReactDOM, ReactRouter and JQuery are not included. You will need to provide these.
14+
15+
### Hyperloop-compiler.js
16+
17+
Compiles code in your browser. Client-side Hyperloop and Opal for static sites or fast prototyping, with no backend or build process needed.
418

519
+ Ruby code in your HTML pages is compiled into JavaScript on page load
6-
+ You can work with Hyperloop Components, Stores, and Operations
20+
+ You can work with Hyperloop Components, Stores, Operations and HyperRouter
721
+ No backend dependency or setup required
822

23+
<!-- ### Opal.js
24+
25+
+ Latest build of Opal. Include this file or bring your own. -->
26+
927
## Documentation and Help
1028

1129
+ Please see the [ruby-hyperloop.io](http://ruby-hyperloop.io/) website for documentation
1230
+ Join the Hyperloop [gitter.io](https://gitter.im/ruby-hyperloop/chat) chat for help and support
1331

32+
See [VERSIONS](https://github.com/ruby-hyperloop/hyperloop-js/blob/master/VERSIONS.md) for the version numbers of the included Gems.
33+
1434
## How it works
1535

16-
Your ruby code will be compiled by the browser into JavaScript and executed. Any compilation or runtime errors will be briefly reported to the console.
36+
#### Hyperloop.js
1737

18-
You can write any Ruby code supported by Opal and access JavaScript libraries from within your Ruby code.
38+
##### Front-end
1939

20-
Ruby classes can subclass `Hyperloop::Component` to become React components, `Hyperloop::Store` to become Stores, and `Hyperloop::Operation` to become client-side Operations and then use the Hyperloop DSL to dynamically generate reactive DOM nodes, mutate state and dispatch messages.
40+
Hyperloop-js includes Hyperloop's client side Components, Operations, Stores and Hyper-Router.
2141

22-
## What is included
42+
##### Back-end
2343

24-
+ Opal (Ruby to Javascript Transpiler)
25-
+ Opal-Jquery (Ruby Jquery wrapper, including HTTP, timers, and of course DOM queries)
26-
+ Hyperloop Components (Ruby React.js wrapper)
27-
+ Hyperloop Stores (Much like Flux Stores, they hold state)
28-
+ Hyperloop Operations (Operations dispatch messages to Stores to mutate data)
29-
+ Hyperloop Auto Import (automatically imports JS components to Ruby)
44+
You will need a backend to build the Hyperloop code you write.
3045

31-
**Note** Hyperloop is dependent on React and JQuery.
46+
+ Hyperloop Gem for Rails integration
47+
+ Opal Sprockets for Rack backend
48+
+ Simple Opal Rake rask
3249

33-
See [VERSIONS](https://github.com/ruby-hyperloop/hyperloop-js/blob/master/VERSIONS.md) for the version numbers of the included Gems.
50+
See Installation options on http://ruby-hyperloop.io/
51+
52+
##### No back-end
53+
54+
If you do not want a backend then you can use Hyperloop-compiler.js to compile code in your browser.
55+
56+
#### Hyperloop-Compiler.js
57+
58+
Your ruby code will be compiled by the browser into JavaScript and executed. Any compilation or runtime errors will be briefly reported to the console.
3459

3560
## How to use
3661

37-
First add React, JQuery, `hyperloop.js` and `opal-compiler.js` to your HTML page:
62+
### Hyperloop-JS
63+
64+
Add the following to your HTML page:
3865

3966
```html
4067
<head>
41-
<!-- React and JQuery -->
68+
<!-- React and JQuery (or bring your own) -->
4269
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
4370
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
4471
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
4572

46-
<!-- Opal and Hyperloop -->
47-
<script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/opal-compiler.min.js"></script>
48-
<script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/hyperloop.min.js"></script>
73+
<!-- React Router (if you are using it) -->
74+
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
75+
76+
<!-- Opal (or bring your own) -->
77+
<script src="http://cdn.opalrb.org/opal/current/opal.min.js"></script>
78+
79+
<!-- Hyperloop-js -->
80+
<script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/refactor/dist/hyperloop.min.js"></script>
81+
</head>
82+
```
83+
84+
That is all you need for Hyperloop Components, Stores, Operations and Router client-side. If you have a back-end building Hyperloop code you are good to go.
85+
86+
If you want to do in browser compiling then follow the next step.
87+
88+
### Hyperloop-compiler
89+
90+
Complete the Hyperloop-JS step above then add the following to your HTML page:
91+
92+
```html
93+
<head>
94+
<!-- Hyperloop-compiler (only needed if you are doing in browser compiling) -->
95+
<script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/refactor/dist/hyperloop-compiler.min.js"></script>
4996
</head>
5097
```
5198

52-
Next, specify your ruby code inside script tags or link to your ruby code using the src attribute `<script type="text/ruby" src=.../>`
99+
Specify your ruby code inside script tags or link to your ruby code using the src attribute `<script type="text/ruby" src=.../>`
53100

54101
```html
55102
<head>
@@ -68,7 +115,7 @@ Finally, mount your Component(s) as a DOM element and specify the Component and
68115
```
69116
Note: For a Single Page Application (SPA) you would only mount your first (top-level) Component and that would render all subsequent Components.
70117

71-
## Example
118+
#### Example
72119

73120
There is a live demo page here (index.html in this repo): [https://ruby-hyperloop.github.io/hyperloop-js/](https://ruby-hyperloop.github.io/hyperloop-js/)
74121

@@ -111,19 +158,19 @@ Here is a simple index.html:
111158

112159
Copy the code above into an `index.html` file and launch a simple web server with `ruby -run -e httpd . -p 8000` (or if you prefer Python) `python -m SimpleHTTPServer` then navigate to http://localhost:8000/
113160

114-
### Want a larger example?
161+
#### Want a larger example?
115162

116163
The [Hyperloop website](http://ruby-hyperloop.io/) and [ChatRoom application and tutorial](http://ruby-hyperloop.io/tutorials/chat_app/) uses hyperloop-js.
117164

118-
### Trying it out using GitHub
165+
#### Trying it out using GitHub
119166

120167
Github makes a great sandbox to try out small Hyperloop online with nothing but your browser.
121168

122169
Have a look at the instructions here: https://pages.github.com/
123170

124171
Rather than "cloning" the repo, and editing your files on your computer you can just create and edit files right on the GitHub site.
125172

126-
## Mounting Components
173+
#### Mounting Components
127174

128175
hyperloop-js will directly mount components onto DOM elements that have the `data-hyperloop-mount` attribute. The attribute value should be the fully qualified name of the component. For example "MyComponent". Any additional data attributes will be passed as params to the component. The attribute names will be snake cased (i.e. `data-foo-bar` becomes the `foo_bar` key)
129176

‎Rakefile

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,48 @@ require 'rubygems'
33
require 'opal-rails'
44
require 'hyper-operation'
55
require 'hyper-store'
6+
require 'hyper-router'
67
require 'opal-browser'
78
require 'opal-jquery'
89
require 'uglifier'
910

10-
desc 'Build Hyperloop and Opal Compiler'
11+
desc 'Build hyperloop-js, hyperloop-compiler.js, hyperloop-opal.js'
1112
task :build do
1213
Opal.append_path 'hyperloop'
1314
puts "About to build hyperloop.js"
14-
File.binwrite 'hyperloop.js', Opal::Builder.build('application').to_s
15+
File.binwrite 'hyperloop.js', Opal::Builder.build('hyperloop').to_s
1516
puts "done"
1617

17-
puts "About to build opal-compiler.js"
18-
File.binwrite 'opal-compiler.js', Opal::Builder.build('opal-compiler').to_s
18+
puts "About to build hyperloop-compiler.js"
19+
File.binwrite 'hyperloop-compiler.js', Opal::Builder.build('hyperloop-compiler').to_s
1920
puts "done"
21+
22+
# puts "About to build opal.js"
23+
# File.binwrite 'opal.js', Opal::Builder.build('opal').to_s
24+
# puts "done"
2025
end
2126

2227
desc 'Minify using uglifier gem'
2328
task :minify do
29+
30+
mkdir 'dist' unless File.directory?('dist')
31+
2432
puts "About to build hyperloop.min.js"
2533
js_file = "hyperloop.js"
26-
js_min_file = "hyperloop.min.js"
34+
js_min_file = "./dist/hyperloop.min.js"
2735
File.open(js_min_file, "w").write(Uglifier.new.compile(File.read(js_file)))
2836
puts "done"
2937

30-
puts "About to build opal-compiler.min.js"
31-
js_file = "opal-compiler.js"
32-
js_min_file = "opal-compiler.min.js"
38+
puts "About to build hyperloop-compiler.min.js"
39+
js_file = "hyperloop-compiler.js"
40+
js_min_file = "./dist/hyperloop-compiler.min.js"
3341
File.open(js_min_file, "w").write(Uglifier.new.compile(File.read(js_file)))
3442
puts "done"
43+
44+
# puts "About to build opal.min.js"
45+
# js_file = "opal.js"
46+
# js_min_file = "./dist/opal.min.js"
47+
# File.open(js_min_file, "w").write(Uglifier.new.compile(File.read(js_file)))
48+
# puts "done"
3549
end
3650
task default: [:build, :minify]

‎VERSIONS.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,17 @@ These libraries are built with the following Gem versions:
77
| hyper-operation | 0.5.11 |
88
| hyper-store | 0.2.3 |
99
| hyper-react | 0.12.7 |
10+
| hyper-router | 4.1.1 |
1011
| hyperloop-config | 0.9.10 |
1112
| opal-browser | 0.2.0 |
1213
| opal-jquery | 0.4.2 |
13-
14-
| opal-compiler.js | Version |
15-
|--------------------|----------|
16-
| opal | 0.10.5 |
1714
| opal-activesupport | 0.3.0 |
15+
16+
| hperloop-compiler.js | Version |
17+
|------------------------|----------|
18+
| opal-compiler | 0.10.5 |
19+
20+
21+
| opal.js | Version |
22+
|------------------------|----------|
23+
| opal | 0.10.5 |

‎dist/hyperloop-compiler.min.js

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/hyperloop.min.js

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)