lissio 0.1.0.beta1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +5 -0
- data/Gemfile +7 -0
- data/Gemfile.lock +53 -0
- data/README.md +184 -0
- data/Rakefile +5 -0
- data/lib/lissio.rb +5 -0
- data/lib/lissio/server.rb +148 -0
- data/lissio.gemspec +27 -0
- data/opal/lissio.rb +26 -0
- data/opal/lissio/adapter.rb +45 -0
- data/opal/lissio/adapter/rest.rb +268 -0
- data/opal/lissio/adapter/storage.rb +167 -0
- data/opal/lissio/application.rb +66 -0
- data/opal/lissio/collection.rb +70 -0
- data/opal/lissio/component.rb +177 -0
- data/opal/lissio/component/alert.rb +110 -0
- data/opal/lissio/component/container.rb +56 -0
- data/opal/lissio/component/markdown.rb +332 -0
- data/opal/lissio/component/tooltip.rb +373 -0
- data/opal/lissio/model.rb +204 -0
- data/opal/lissio/router.rb +164 -0
- data/opal/lissio/version.rb +3 -0
- data/spec/route_spec.rb +65 -0
- data/spec/router_spec.rb +109 -0
- data/spec/spec_helper.rb +33 -0
- metadata +154 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 0f0f172ff0e936f469a65ec836bf667540493078
|
|
4
|
+
data.tar.gz: 19eeeaa38dec2bc28f36bae0e477aace77ebc22a
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: a55d054ac98ec0d76ac2fb7bb76d4b2828bdead360139a877f053f375309cd05fe0253634ecaafe240c18d7c2582268303609dc660c47b47f929c5fc2c37da40
|
|
7
|
+
data.tar.gz: 32ef95d19670fcd5e291ada0ebc8d222106bc34b3f59ae1f24ee370c81338ed0ffbc03df830d956546bac94b538c191cb42f5235e6b60cf31e19bd1f3cb3ee3e
|
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
GIT
|
|
2
|
+
remote: git://github.com/opal/opal-browser.git
|
|
3
|
+
revision: 49e60b355580e6acf8ed7a62325b58c4a75bccfd
|
|
4
|
+
specs:
|
|
5
|
+
opal-browser (0.1.0)
|
|
6
|
+
opal (>= 0.3.44)
|
|
7
|
+
|
|
8
|
+
GIT
|
|
9
|
+
remote: git://github.com/opal/opal.git
|
|
10
|
+
revision: 9760cc785d29fc6aab66021213dd2be09bfb3cbc
|
|
11
|
+
specs:
|
|
12
|
+
opal (0.4.3)
|
|
13
|
+
source_map
|
|
14
|
+
|
|
15
|
+
PATH
|
|
16
|
+
remote: .
|
|
17
|
+
specs:
|
|
18
|
+
lissio (0.1.0)
|
|
19
|
+
opal (>= 0.4.1)
|
|
20
|
+
opal-browser
|
|
21
|
+
|
|
22
|
+
GEM
|
|
23
|
+
remote: https://rubygems.org/
|
|
24
|
+
specs:
|
|
25
|
+
hike (1.2.3)
|
|
26
|
+
json (1.8.0)
|
|
27
|
+
multi_json (1.7.7)
|
|
28
|
+
opal-spec (0.2.17)
|
|
29
|
+
opal (~> 0.4.1)
|
|
30
|
+
opal-sprockets (~> 0.1.0)
|
|
31
|
+
opal-sprockets (0.1.1)
|
|
32
|
+
opal (~> 0.4.0)
|
|
33
|
+
sprockets
|
|
34
|
+
rack (1.5.2)
|
|
35
|
+
rake (10.1.0)
|
|
36
|
+
source_map (3.0.1)
|
|
37
|
+
json
|
|
38
|
+
sprockets (2.10.0)
|
|
39
|
+
hike (~> 1.2)
|
|
40
|
+
multi_json (~> 1.0)
|
|
41
|
+
rack (~> 1.0)
|
|
42
|
+
tilt (~> 1.1, != 1.3.0)
|
|
43
|
+
tilt (1.4.1)
|
|
44
|
+
|
|
45
|
+
PLATFORMS
|
|
46
|
+
ruby
|
|
47
|
+
|
|
48
|
+
DEPENDENCIES
|
|
49
|
+
lissio!
|
|
50
|
+
opal!
|
|
51
|
+
opal-browser!
|
|
52
|
+
opal-spec
|
|
53
|
+
rake
|
data/README.md
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
lissio - e vai col lissio
|
|
2
|
+
=========================
|
|
3
|
+
**lissio** is a VCL (Vai Col Lissio) framework for [Opal](http://opalrb.org) to
|
|
4
|
+
implement frontends completely on the client side.
|
|
5
|
+
|
|
6
|
+
[Here](http://www.youtube.com/watch?v=7JU5ssyKczw) you can find the best
|
|
7
|
+
musical background while developing **lissio** applications.
|
|
8
|
+
|
|
9
|
+
Application
|
|
10
|
+
-----------
|
|
11
|
+
Every **lissio** frontend begins with an `Application` singleton.
|
|
12
|
+
|
|
13
|
+
A `Lissio::Application` singleton is a `Lissio::Component` that takes ownership
|
|
14
|
+
of the `body` element and renders itself on it, since it's just a component you
|
|
15
|
+
can do anything you can do with any other component.
|
|
16
|
+
|
|
17
|
+
It also internally creates a router, so you can define the routes and what they
|
|
18
|
+
do directly in the `#initialize` method.
|
|
19
|
+
|
|
20
|
+
```ruby
|
|
21
|
+
class MyApplication < Lissio::Application
|
|
22
|
+
def initialize
|
|
23
|
+
super
|
|
24
|
+
|
|
25
|
+
route '/' do
|
|
26
|
+
alert "This is an awesome index, ain't it?"
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
route '/about' do
|
|
30
|
+
alert "I don't know you, you don't know me"
|
|
31
|
+
end
|
|
32
|
+
end
|
|
33
|
+
end
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Component
|
|
37
|
+
---------
|
|
38
|
+
Components are the heart of any lissio application, in the MVC pattern a lissio
|
|
39
|
+
component would be a mix of a view and a controller.
|
|
40
|
+
|
|
41
|
+
Every component has the ability to define the HTML, the CSS and the behaviour
|
|
42
|
+
in pure Ruby using various DSLs.
|
|
43
|
+
|
|
44
|
+
```ruby
|
|
45
|
+
class MyComponent < Lissio::Component
|
|
46
|
+
tag class: 'my-component'
|
|
47
|
+
|
|
48
|
+
on :click, '.title' do
|
|
49
|
+
alert 'You clicked on the title'
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
on :hover, '.subtitle' do
|
|
53
|
+
alert 'You hovered over the subtitle'
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
html do
|
|
57
|
+
div.title 'hue'
|
|
58
|
+
div.subtitle 'huehuehuehue'
|
|
59
|
+
end
|
|
60
|
+
|
|
61
|
+
css do
|
|
62
|
+
rule '.my-component' do
|
|
63
|
+
rule '.title' do
|
|
64
|
+
font size: 32.px
|
|
65
|
+
end
|
|
66
|
+
|
|
67
|
+
rule '.subtitle' do
|
|
68
|
+
font size: 18.px,
|
|
69
|
+
style: :italic
|
|
70
|
+
end
|
|
71
|
+
end
|
|
72
|
+
end
|
|
73
|
+
end
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Every component has a `#render` method, once it's called it will create an
|
|
77
|
+
element based on the `#tag` definition or render itself in the defined
|
|
78
|
+
`#element`.
|
|
79
|
+
|
|
80
|
+
On rendering the `#html` DSL block will produce the DOM directly, there won't
|
|
81
|
+
be any generate-parse passes, and the `#css` block will generate the CSS style
|
|
82
|
+
and put it in the `<head>`
|
|
83
|
+
|
|
84
|
+
Model
|
|
85
|
+
-----
|
|
86
|
+
Models are the classic models, they have properties and can be populated using
|
|
87
|
+
adapters.
|
|
88
|
+
|
|
89
|
+
```ruby
|
|
90
|
+
class Message < Lissio::Model
|
|
91
|
+
property :id, as: Integer, primary: true
|
|
92
|
+
property :at, as: Time, default: -> { Time.now }
|
|
93
|
+
property :content, as: String
|
|
94
|
+
end
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
You can then instantiate the model `Message.new(id: 2, content: "huehue")`.
|
|
98
|
+
|
|
99
|
+
Collection
|
|
100
|
+
----------
|
|
101
|
+
Collections are, well, collections of models, they're separate entities since
|
|
102
|
+
they can have different adapters and have different methods of fetching or
|
|
103
|
+
working on the models they contain.
|
|
104
|
+
|
|
105
|
+
```ruby
|
|
106
|
+
class Messages < Lissio::Collection
|
|
107
|
+
model Message
|
|
108
|
+
end
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Adapter
|
|
112
|
+
-------
|
|
113
|
+
Without adapters models and collections would be pretty much useless since you
|
|
114
|
+
wouldn't be able to persist them.
|
|
115
|
+
|
|
116
|
+
When you define a model you can set an adapter calling the `#adapter` method.
|
|
117
|
+
|
|
118
|
+
**lissio** comes with two default adapters, REST and localStorage, they take
|
|
119
|
+
various options to define endpoints and other behaviour.
|
|
120
|
+
|
|
121
|
+
```ruby
|
|
122
|
+
class Message < Lissio::Model
|
|
123
|
+
adapter Lissio::Adapter::REST, endpoint: '/message'
|
|
124
|
+
|
|
125
|
+
property :id, as: Integer, primary: true
|
|
126
|
+
property :at, as: Time, default: -> { Time.now }
|
|
127
|
+
property :content, as: String
|
|
128
|
+
end
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
Now you'll be able to fetch a model like this.
|
|
132
|
+
|
|
133
|
+
```ruby
|
|
134
|
+
Message.fetch(1) {|msg|
|
|
135
|
+
if Message === msg
|
|
136
|
+
alert msg.content
|
|
137
|
+
else
|
|
138
|
+
alert msg.inspect
|
|
139
|
+
end
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
When you do operations using adapters you'll always have to provide a block
|
|
144
|
+
that will be called, since all operations are asynchronous.
|
|
145
|
+
|
|
146
|
+
The class check is done because the block will be either passed the model or an
|
|
147
|
+
error.
|
|
148
|
+
|
|
149
|
+
Server
|
|
150
|
+
------
|
|
151
|
+
**lissio** comes with a server to run and provide the built application, you're
|
|
152
|
+
not forced to use it, but it provides seamless access to the HTML5 history.
|
|
153
|
+
|
|
154
|
+
This means it always gives you the index when accessing any URL that isn't a
|
|
155
|
+
static file.
|
|
156
|
+
|
|
157
|
+
In the future it will do prerendering using phantomjs to make **lissio**
|
|
158
|
+
applications indexable and crawlable by search engines, so you might want to
|
|
159
|
+
stick with it.
|
|
160
|
+
|
|
161
|
+
Following an example on how to run the server.
|
|
162
|
+
|
|
163
|
+
```ruby
|
|
164
|
+
require 'bundler'
|
|
165
|
+
Bundler.require
|
|
166
|
+
|
|
167
|
+
run Lissio::Server.new {|s|
|
|
168
|
+
s.append_path 'app'
|
|
169
|
+
s.append_path 'css'
|
|
170
|
+
s.append_path 'js'
|
|
171
|
+
|
|
172
|
+
s.index = 'index.html.erb'
|
|
173
|
+
s.debug = true
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
The application usually goes in `app/`.
|
|
178
|
+
|
|
179
|
+
External CSS should go in `css/`, usually you don't need to write CSS at all,
|
|
180
|
+
you should just use the `#css` method in the component.
|
|
181
|
+
|
|
182
|
+
External JavaScript should go in `js/`, typically compatibility files like
|
|
183
|
+
`json2` and `sizzle` go there, or other libraries you are using that aren't
|
|
184
|
+
Opal libraries.
|
data/Rakefile
ADDED
data/lib/lissio.rb
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
require 'rack/file'
|
|
2
|
+
require 'rack/urlmap'
|
|
3
|
+
require 'rack/builder'
|
|
4
|
+
require 'rack/directory'
|
|
5
|
+
require 'rack/showexceptions'
|
|
6
|
+
require 'opal/source_map'
|
|
7
|
+
require 'opal/sprockets/environment'
|
|
8
|
+
|
|
9
|
+
require 'forwardable'
|
|
10
|
+
|
|
11
|
+
module Lissio
|
|
12
|
+
|
|
13
|
+
class Server
|
|
14
|
+
class SourceMap
|
|
15
|
+
attr_accessor :prefix
|
|
16
|
+
|
|
17
|
+
def initialize(sprockets)
|
|
18
|
+
@sprockets = sprockets
|
|
19
|
+
@prefix = '/__opal_source_maps__'
|
|
20
|
+
end
|
|
21
|
+
|
|
22
|
+
def call(env)
|
|
23
|
+
if asset = @sprockets[env['PATH_INFO'].gsub(/^\/|\.js\.map$/, '')]
|
|
24
|
+
[200, { "Content-Type" => "text/json" }, [$OPAL_SOURCE_MAPS[asset.pathname].to_s]]
|
|
25
|
+
else
|
|
26
|
+
[404, {}, []]
|
|
27
|
+
end
|
|
28
|
+
end
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
class Prerenderer
|
|
32
|
+
def initialize(app, server)
|
|
33
|
+
@app = app
|
|
34
|
+
@server = server
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
def call(env)
|
|
38
|
+
@app.call(env)
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
class Index
|
|
43
|
+
def initialize(server)
|
|
44
|
+
@server = server
|
|
45
|
+
@path = server.index
|
|
46
|
+
end
|
|
47
|
+
|
|
48
|
+
def call(env)
|
|
49
|
+
if env['PATH_INFO'] =~ /\.[^.]+$/
|
|
50
|
+
[404, {"Content-Type" => "text/plain"}, []]
|
|
51
|
+
else
|
|
52
|
+
[200, { 'Content-Type' => 'text/html' }, [html]]
|
|
53
|
+
end
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
def html
|
|
57
|
+
source = if @path
|
|
58
|
+
unless File.exist?(@path)
|
|
59
|
+
raise "index does not exist: #{@path}"
|
|
60
|
+
end
|
|
61
|
+
|
|
62
|
+
File.read @path
|
|
63
|
+
elsif File.exist? 'index.html'
|
|
64
|
+
File.read 'index.html'
|
|
65
|
+
elsif File.exist? 'index.html.erb'
|
|
66
|
+
File.read 'index.html.erb'
|
|
67
|
+
else
|
|
68
|
+
<<-HTML
|
|
69
|
+
<!DOCTYPE html>
|
|
70
|
+
<html>
|
|
71
|
+
<head>
|
|
72
|
+
<%= lissio %>
|
|
73
|
+
</head>
|
|
74
|
+
<body>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
77
|
+
HTML
|
|
78
|
+
end
|
|
79
|
+
|
|
80
|
+
::ERB.new(source).result binding
|
|
81
|
+
end
|
|
82
|
+
|
|
83
|
+
def lissio(source = @server.main)
|
|
84
|
+
if @server.debug
|
|
85
|
+
if (assets = @server.sprockets[source].to_a).empty?
|
|
86
|
+
raise "Cannot find asset: #{source}"
|
|
87
|
+
end
|
|
88
|
+
|
|
89
|
+
assets.map {|a|
|
|
90
|
+
%Q{<script src="/assets/#{a.logical_path}?body=1"></script>}
|
|
91
|
+
}.join ?\n
|
|
92
|
+
else
|
|
93
|
+
"<script src=\"/assets/#{source}.js\"></script>"
|
|
94
|
+
end
|
|
95
|
+
end
|
|
96
|
+
end
|
|
97
|
+
|
|
98
|
+
extend Forwardable
|
|
99
|
+
|
|
100
|
+
attr_accessor :debug, :index, :main, :static, :source_maps, :sprockets
|
|
101
|
+
def_delegators :@sprockets, :append_path, :use_gem
|
|
102
|
+
|
|
103
|
+
def initialize(options = {}, &block)
|
|
104
|
+
@sprockets = Opal::Environment.new
|
|
105
|
+
|
|
106
|
+
block.call(self) if block
|
|
107
|
+
end
|
|
108
|
+
|
|
109
|
+
def source_maps?
|
|
110
|
+
@source_maps
|
|
111
|
+
end
|
|
112
|
+
|
|
113
|
+
def extend(&block)
|
|
114
|
+
@extend = block
|
|
115
|
+
end
|
|
116
|
+
|
|
117
|
+
def app
|
|
118
|
+
this = self
|
|
119
|
+
block = @extend
|
|
120
|
+
|
|
121
|
+
@app ||= Rack::Builder.app do
|
|
122
|
+
use Rack::ShowExceptions
|
|
123
|
+
|
|
124
|
+
map '/assets' do
|
|
125
|
+
run this.sprockets
|
|
126
|
+
end
|
|
127
|
+
|
|
128
|
+
if this.source_maps?
|
|
129
|
+
map this.source_maps.prefix do
|
|
130
|
+
run this.source_maps
|
|
131
|
+
end
|
|
132
|
+
end
|
|
133
|
+
|
|
134
|
+
use Prerenderer, this
|
|
135
|
+
use Rack::Static, urls: this.static if this.static
|
|
136
|
+
|
|
137
|
+
instance_exec(&block) if block
|
|
138
|
+
|
|
139
|
+
run Index.new(this)
|
|
140
|
+
end
|
|
141
|
+
end
|
|
142
|
+
|
|
143
|
+
def call(env)
|
|
144
|
+
app.call(env)
|
|
145
|
+
end
|
|
146
|
+
end
|
|
147
|
+
|
|
148
|
+
end
|
data/lissio.gemspec
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
$LOAD_PATH << File.expand_path('../opal', __FILE__)
|
|
3
|
+
require 'lissio/version'
|
|
4
|
+
|
|
5
|
+
Gem::Specification.new do |s|
|
|
6
|
+
s.name = 'lissio'
|
|
7
|
+
s.version = Lissio::VERSION
|
|
8
|
+
s.author = 'meh.'
|
|
9
|
+
s.email = 'meh@schizofreni.co'
|
|
10
|
+
s.homepage = 'https://github.com/meh/lissio'
|
|
11
|
+
s.summary = '.'
|
|
12
|
+
s.description = '..'
|
|
13
|
+
|
|
14
|
+
s.files = `git ls-files`.split("\n")
|
|
15
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
|
|
16
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
|
17
|
+
s.require_paths = ['lib']
|
|
18
|
+
|
|
19
|
+
s.add_dependency 'opal', '>= 0.5.5'
|
|
20
|
+
s.add_dependency 'opal-browser'
|
|
21
|
+
s.add_dependency 'rack'
|
|
22
|
+
|
|
23
|
+
s.add_development_dependency 'opal-spec'
|
|
24
|
+
s.add_development_dependency 'rake'
|
|
25
|
+
|
|
26
|
+
s.add_dependency 'thor'
|
|
27
|
+
end
|