fie 0.1.10 → 0.1.11
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +91 -18
- data/lib/fie/state/changelog.rb +21 -5
- data/lib/fie/version.rb +1 -1
- data/lib/opal/fie/listeners.rb +9 -6
- data/lib/opal/fie/native/timeout.rb +11 -0
- data/vendor/javascript/fie.js +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a738ba65dca90aa1244891e027b009a844f57c12
|
|
4
|
+
data.tar.gz: cc3ce83b850b2511f0b3d6bc2577d2adf2f61a75
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c6f600905946799d535a638d77321f6291793f3fc901c848ccb83f6b350b7b05800358aa18a81def2f68f7d895385ffb3b1d2e473583e353525089e594b16695
|
|
7
|
+
data.tar.gz: aa87a41952290b08012b7151ab07ec649925194a35c756fec4beed3593c85b70eb9319d53ac4ff3afd7c53ce860825c2d75fb6858cc3eed25b5c08d60cbe367d
|
data/README.md
CHANGED
|
@@ -1,40 +1,116 @@
|
|
|
1
|
-
|
|
1
|
+
# <a href="https://fie.eranpeer.co/" target="_blank"><img src="https://image.ibb.co/c0JaA8/github_fie.jpg" height="200" /></a>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://badge.fury.io/rb/fie)
|
|
4
|
+
[](https://www.codefactor.io/repository/github/raen79/fie)
|
|
5
|
+
[](https://gitter.im/rails-fie/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
|
6
|
+
[](https://github.com/raen79/fie/blob/master/LICENSE)
|
|
7
|
+
[](https://beerpay.io/raen79/fie)
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
### Fie is a Rails-centric frontend framework running over a permanent WebSocket connection.
|
|
6
10
|
|
|
7
|
-
|
|
11
|
+
fie is a framework for Ruby on Rails that shares the state of your views with the backend.
|
|
8
12
|
|
|
9
|
-
|
|
13
|
+
For each controller within which you wish to use fie, you must create a commander. fie uses commanders in the same way a Ruby on Rails application uses controllers.
|
|
14
|
+
|
|
15
|
+
When an instance variable is changed in the commander, the view is updated. Likewise, if the same variable is modified within the view (through a form for example), the change is reflected in the commander and within other instances of the variable in the view. This means that fie supports three-way data binding.
|
|
16
|
+
|
|
17
|
+
fie therefore replaces traditional Javascript frontend frameworks while requiring you to write less code overall. If you implement fie within your application, you will no longer rely on Javascript for complex tasks, but rather use it only for what it was intended to be used for: to be sprinkled in your views and make them feel more dynamic (through animations for example).
|
|
10
18
|
|
|
11
|
-
|
|
19
|
+
## Installation
|
|
12
20
|
|
|
21
|
+
1. Add the gem to your gemfile like so:
|
|
13
22
|
```ruby
|
|
14
|
-
gem 'fie'
|
|
23
|
+
gem 'fie', '~> 0.1.11'
|
|
24
|
+
```
|
|
25
|
+
2. Run the bundler
|
|
26
|
+
```bash
|
|
27
|
+
$ bundle install
|
|
28
|
+
```
|
|
29
|
+
3. Replace yield in your main layout with `render template: 'layouts/fie' %>`. Below is an example.
|
|
30
|
+
* Old:
|
|
31
|
+
```erb
|
|
32
|
+
<!DOCTYPE html>
|
|
33
|
+
<html>
|
|
34
|
+
<head>
|
|
35
|
+
<title>Fie</title>
|
|
36
|
+
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
|
37
|
+
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
|
|
38
|
+
</head>
|
|
39
|
+
|
|
40
|
+
<body>
|
|
41
|
+
<%= yield %>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
44
|
+
```
|
|
45
|
+
* New:
|
|
46
|
+
```erb
|
|
47
|
+
<!DOCTYPE html>
|
|
48
|
+
<html>
|
|
49
|
+
<head>
|
|
50
|
+
<title>Fie</title>
|
|
51
|
+
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
|
52
|
+
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
|
|
53
|
+
</head>
|
|
54
|
+
|
|
55
|
+
<body>
|
|
56
|
+
<%= render template: 'layouts/fie' %>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
59
|
+
```
|
|
60
|
+
4. Add `//= require fie` to your `app/assets/application.js` file.
|
|
61
|
+
```javascript
|
|
62
|
+
//= require rails-ujs
|
|
63
|
+
//= require turbolinks
|
|
64
|
+
//= require fie
|
|
65
|
+
//= require_tree .
|
|
15
66
|
```
|
|
16
67
|
|
|
17
|
-
|
|
68
|
+
5. Ensure action cable uses Redis in development by changing async to redis in `config/cable.yml`.
|
|
69
|
+
```yaml
|
|
70
|
+
redis: &redis
|
|
71
|
+
adapter: redis
|
|
72
|
+
url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
|
|
73
|
+
channel_prefix: fie_example_app_production
|
|
74
|
+
|
|
75
|
+
development: *redis
|
|
76
|
+
test: *redis
|
|
77
|
+
production: *redis
|
|
78
|
+
```
|
|
18
79
|
|
|
19
|
-
|
|
80
|
+
6. Create an `app/commanders` folder.
|
|
20
81
|
|
|
21
|
-
|
|
82
|
+
7. Restart your application.
|
|
22
83
|
|
|
23
|
-
|
|
84
|
+
8. Create your first commander in the `app/commanders` with the same prefix as one of your controllers. e.g. `app/commanders/hello_world_commander.rb`
|
|
85
|
+
|
|
86
|
+
```ruby
|
|
87
|
+
class HelloWorldCommander < Fie::Commander
|
|
88
|
+
end
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Hello World
|
|
92
|
+
|
|
93
|
+
Create a hello world app using our [tutorial](https://fie.eranpeer.co/start#hello-world).
|
|
24
94
|
|
|
25
95
|
## Usage
|
|
26
96
|
|
|
27
|
-
|
|
97
|
+
Usage is documented and described in our [guide](https://fie.eranpeer.co/guide).
|
|
28
98
|
|
|
29
99
|
## Development
|
|
30
100
|
|
|
31
|
-
|
|
101
|
+
Your first step is to run `npm install` within the root folder in order to install the relevant node packages. Also run `npm install uglify-js -g`.
|
|
32
102
|
|
|
33
|
-
To
|
|
103
|
+
The project does not use javascript, but opal. To build the opal project (in `lib/opal`), run `rake build_opal`. If you are actively developing the frontend using opal, run `bundle exec guard` which will start a watcher for the opal source and will recompile in the `vendor/javascript` folder on every change.
|
|
104
|
+
|
|
105
|
+
To transfer gems and node packages to opal, add `Opal.use_gem(gem_name)` or `Opal.append_path('./node_modules/module_name/dist')` in the Rakefile within the `build_opal` task.
|
|
106
|
+
|
|
107
|
+
The ruby files can be found within `lib\opal` and their development is the same as in any other gem.
|
|
108
|
+
|
|
109
|
+
Please add tests if you add new features or resolve bugs.
|
|
34
110
|
|
|
35
111
|
## Contributing
|
|
36
112
|
|
|
37
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/
|
|
113
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/raen79/fie. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
|
38
114
|
|
|
39
115
|
## License
|
|
40
116
|
|
|
@@ -43,6 +119,3 @@ The gem is available as open source under the terms of the [MIT License](https:/
|
|
|
43
119
|
## Code of Conduct
|
|
44
120
|
|
|
45
121
|
Everyone interacting in the Fie project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/fie/blob/master/CODE_OF_CONDUCT.md).
|
|
46
|
-
|
|
47
|
-
[](https://beerpay.io/raen79/fie) [](https://beerpay.io/raen79/fie?focus=wish)
|
|
48
|
-
-->
|
data/lib/fie/state/changelog.rb
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
module Fie
|
|
2
2
|
module Changelog
|
|
3
3
|
def update_object_using_changelog(changelog, object = self)
|
|
4
|
-
object = object.with_indifferent_access if object.is_a?(Hash)
|
|
5
|
-
|
|
6
4
|
unless changelog.blank?
|
|
7
5
|
changelog.each do |node_name, _|
|
|
8
6
|
changelog_node = changelog[node_name]
|
|
@@ -26,9 +24,18 @@ module Fie
|
|
|
26
24
|
|
|
27
25
|
private
|
|
28
26
|
def traverse(changelog:, object:, node_name:, changelog_node:)
|
|
29
|
-
if object.is_a?(
|
|
30
|
-
node_name = node_name.to_i
|
|
27
|
+
if object.is_a?(Array)
|
|
28
|
+
node_name = node_name.to_i
|
|
31
29
|
object_node = object[node_name]
|
|
30
|
+
elsif object.is_a?(Hash)
|
|
31
|
+
string_in_hash = object.keys.include? node_name
|
|
32
|
+
symbol_in_hash = object.keys.include? node_name.to_sym
|
|
33
|
+
|
|
34
|
+
if string_in_hash
|
|
35
|
+
object_node = object[node_name]
|
|
36
|
+
elsif symbol_in_hash
|
|
37
|
+
object_node = object[node_name.to_sym]
|
|
38
|
+
end
|
|
32
39
|
else
|
|
33
40
|
object_node = object.send(node_name)
|
|
34
41
|
end
|
|
@@ -37,9 +44,18 @@ module Fie
|
|
|
37
44
|
end
|
|
38
45
|
|
|
39
46
|
def update_object_value(object:, node_name:, value:)
|
|
40
|
-
if object.is_a?(
|
|
47
|
+
if object.is_a?(Array)
|
|
41
48
|
node_name = node_name.to_i if object.is_a?(Array)
|
|
42
49
|
object[node_name] = value
|
|
50
|
+
elsif object.is_a?(Hash)
|
|
51
|
+
string_in_hash = object.keys.include? node_name
|
|
52
|
+
symbol_in_hash = object.keys.include? node_name.to_sym
|
|
53
|
+
|
|
54
|
+
if string_in_hash
|
|
55
|
+
object[node_name] = value
|
|
56
|
+
elsif symbol_in_hash
|
|
57
|
+
object[node_name.to_sym] = value
|
|
58
|
+
end
|
|
43
59
|
else
|
|
44
60
|
object.send("#{node_name}=", value)
|
|
45
61
|
end
|
data/lib/fie/version.rb
CHANGED
data/lib/opal/fie/listeners.rb
CHANGED
|
@@ -6,6 +6,7 @@ module Fie
|
|
|
6
6
|
|
|
7
7
|
def initialize(cable)
|
|
8
8
|
@cable = cable
|
|
9
|
+
@timer = Timeout.new(0) { 'hello' }
|
|
9
10
|
|
|
10
11
|
initialize_input_elements
|
|
11
12
|
initialize_fie_events [:click, :submit, :scroll, :keyup, :keydown, :enter]
|
|
@@ -33,6 +34,8 @@ module Fie
|
|
|
33
34
|
remote_function_name = element["fie-#{ fie_event_name }"]
|
|
34
35
|
function_parameters = JSON.parse(element['fie-parameters'] || {})
|
|
35
36
|
|
|
37
|
+
@timer.fast_forward
|
|
38
|
+
|
|
36
39
|
@cable.call_remote_function \
|
|
37
40
|
element: element,
|
|
38
41
|
function_name: remote_function_name,
|
|
@@ -42,8 +45,6 @@ module Fie
|
|
|
42
45
|
end
|
|
43
46
|
|
|
44
47
|
def initialize_input_elements
|
|
45
|
-
timer = Timeout.new(0) { }
|
|
46
|
-
|
|
47
48
|
typing_input_types = ['text', 'password', 'search', 'tel', 'url']
|
|
48
49
|
|
|
49
50
|
typing_input_selector = (['textarea'] + typing_input_types).reduce do |selector, input_type|
|
|
@@ -55,12 +56,14 @@ module Fie
|
|
|
55
56
|
end
|
|
56
57
|
|
|
57
58
|
Element.fie_body.add_event_listener('keydown', typing_input_selector) do |event|
|
|
58
|
-
|
|
59
|
+
unless event.keyCode == 13
|
|
60
|
+
@timer.clear
|
|
59
61
|
|
|
60
|
-
|
|
62
|
+
input_element = Element.new(element: event.target)
|
|
61
63
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
+
@timer = Timeout.new(500) do
|
|
65
|
+
update_state_using_changelog(input_element)
|
|
66
|
+
end
|
|
64
67
|
end
|
|
65
68
|
end
|
|
66
69
|
|
|
@@ -2,12 +2,23 @@ module Fie
|
|
|
2
2
|
module Native
|
|
3
3
|
class Timeout
|
|
4
4
|
def initialize(time = 0, &block)
|
|
5
|
+
@proc = block
|
|
5
6
|
@timeout = `setTimeout(#{block}, time)`
|
|
6
7
|
end
|
|
7
8
|
|
|
8
9
|
def clear
|
|
9
10
|
`clearTimeout(#{@timeout})`
|
|
10
11
|
end
|
|
12
|
+
|
|
13
|
+
def fast_forward
|
|
14
|
+
`clearTimeout(#{@timeout})`
|
|
15
|
+
|
|
16
|
+
begin
|
|
17
|
+
@proc.call
|
|
18
|
+
rescue Exception => exception
|
|
19
|
+
puts exception.message
|
|
20
|
+
end
|
|
21
|
+
end
|
|
11
22
|
end
|
|
12
23
|
end
|
|
13
24
|
end
|