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

Commit 3440b9c

Browse files
author
Barrie Hadfield
committed
with hyper-router as its own lib
1 parent 72e6343 commit 3440b9c

File tree

10 files changed

+19684
-974
lines changed

10 files changed

+19684
-974
lines changed

‎Rakefile

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ task :build do
2424
# File.binwrite 'hyper-router.js', Opal::Builder.build('hyper-router').to_s
2525
# puts "done"
2626

27-
# puts "About to build opal.js"
28-
# File.binwrite 'opal.js', Opal::Builder.build('opal').to_s
29-
# puts "done"
27+
puts "About to build opal.js"
28+
File.binwrite 'opal.js', Opal::Builder.build('opal').to_s
29+
puts "done"
3030
end
3131

3232
desc 'Minify using uglifier gem'
@@ -52,10 +52,10 @@ task :minify do
5252
# File.open(js_min_file, "w").write(Uglifier.new.compile(File.read(js_file)))
5353
# puts "done"
5454

55-
# puts "About to build opal.min.js"
56-
# js_file = "opal.js"
57-
# js_min_file = "./dist/opal.min.js"
58-
# File.open(js_min_file, "w").write(Uglifier.new.compile(File.read(js_file)))
59-
# puts "done"
55+
puts "About to build opal.min.js"
56+
js_file = "opal.js"
57+
js_min_file = "./dist/opal.min.js"
58+
File.open(js_min_file, "w").write(Uglifier.new.compile(File.read(js_file)))
59+
puts "done"
6060
end
6161
task default: [:build, :minify]

‎dist/hyperloop.min.js

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

‎dist/index.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<!--[if IE]><![endif]-->
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<title>Hyperloop-JS Demo</title>
8+
9+
<!-- React and JQuery -->
10+
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
11+
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
12+
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
13+
14+
<!-- React Router (if you are using it) -->
15+
<!-- <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script> -->
16+
17+
<!-- Opal (or bring your own) -->
18+
<script src="http://cdn.opalrb.org/opal/current/opal.min.js"></script>
19+
20+
<!-- Opal and Hyperloop -->
21+
<!-- <script src="opal.min.js"></script> -->
22+
<script src="hyperloop.min.js"></script>
23+
<script src="hyperloop-compiler.min.js"></script>
24+
25+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
26+
27+
<script type="text/ruby">
28+
class TopLevelComponent < Hyperloop::Component
29+
render(DIV) do
30+
div.container do
31+
H1 { "Components, Stores and Operations" }
32+
P { "A few examples using Hyperloop Components which wrap React, Stores to hold state which is shared between Components and an Operation for mutating the Store's state. Finally, a Clock which demonstrates local state and a callback which triggers every second." }
33+
TypeAlong()
34+
Buttons()
35+
Clock()
36+
StylishTable()
37+
end
38+
end
39+
end
40+
41+
class Buttons < Hyperloop::Component
42+
render(DIV) do
43+
H2 { "Some buttons" }
44+
BUTTON(class: 'btn btn-primary') { 'See the value' }.on(:click) { alert "MyStore value is '#{ MyStore.value }'" }
45+
BUTTON(class: 'btn btn-link') { 'Clear' }.on(:click) { ClearOp.run }
46+
end
47+
end
48+
49+
class TypeAlong < Hyperloop::Component
50+
render(DIV) do
51+
H2 { "MyStore value is '#{ MyStore.value }'" }
52+
INPUT(type: :text, value: MyStore.value ).on(:change) do |e|
53+
MyStore.set_value e.target.value
54+
end
55+
end
56+
end
57+
58+
class Clock < Hyperloop::Component
59+
param format: '%a, %e %b %Y %H:%M:%S'
60+
before_mount do
61+
mutate.time Time.now.strftime(params.format)
62+
every(1) { mutate.time Time.now.strftime(params.format) }
63+
end
64+
render(DIV) do
65+
H2 { "And a clock" }
66+
"The time is #{state.time}"
67+
end
68+
end
69+
70+
class MyStore < Hyperloop::Store
71+
state :value, reader: true, scope: :class
72+
def self.set_value value
73+
mutate.value value
74+
end
75+
def self.clear
76+
mutate.value ""
77+
end
78+
end
79+
80+
class ClearOp < Hyperloop::Operation
81+
step { puts "about to clear everything" }
82+
step { MyStore.clear }
83+
end
84+
85+
class StylishTable < Hyperloop::Component
86+
render(DIV) do
87+
H2 { "A stylish table" }
88+
table.table.table_bordered do
89+
thead do
90+
tr do
91+
th { "First Name" }
92+
th { "Last Name" }
93+
th { "Username" }
94+
end
95+
end
96+
tbody do
97+
tr do
98+
td { "Mark" }
99+
td { "Otto" }
100+
td.text_success { MyStore.value }
101+
end
102+
end
103+
end
104+
end
105+
end
106+
107+
</script>
108+
109+
</head>
110+
111+
<body>
112+
<div data-hyperloop-mount="TopLevelComponent"></div>
113+
</body>
114+
</html>

‎dist/opal.min.js

Lines changed: 9 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)