ovto 0.4.1 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 926f757cb64d82a3e56e1cb8c2b113553526eb3753e09b27f2a4d153d4899026
-  data.tar.gz: bdd2852d3534c4a13e1a1033a52f26b39c937aa21b67558052015a0e2538698a
+  metadata.gz: af78c92bfaecab00f15a74103e9c3f5da29f7e5580ce757d31dc631375659822
+  data.tar.gz: 30f3d9855241f9f1cf5f45fd42681aff410958ca19d52fab583a255f727da7d3
 SHA512:
-  metadata.gz: f6024cff86eab0363d2a24eeeb50a90b19d45385c66f7708ec9df741a48c23524639401369b965bd288f3b49d1ddef4412a7dcc96633a8200e79b027bf712072
-  data.tar.gz: 32b3cf568b6db978a652ca97b168928613b28d733035b4243069341a0b6c9db7c0c092c81f22f9bc3aae1c6d268fd89dbd98abfc6b8e383fe6ffd388aca94016
+  metadata.gz: e36a4544dca7bdd0b98f6a487cca2ceaa460b600c38cb656f69c124df606538301c650790b61333037353c4e80f30a82a421122483cf58be0d833f35eb1099e3
+  data.tar.gz: 3dc5df9d6c98aef173b9733bac33cf9d8bd019291497a35812a87c1bbd8b82ba12e607f1b5f1a1cf501801c6e3f2a69af8838de25b757d909061acec338415b0

data/.gitignore

@@ -1,3 +1,3 @@
 /,
 /.yardoc
-/example/static/app.js
+/examples/static/app.js

data/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "opal-rspec"]
+	path = opal-rspec
+	url = https://github.com/opal/opal-rspec.git

data/CHANGELOG.md

@@ -1,4 +1,18 @@
-## HEAD
+## v0.6.1 (2021-10-22)
+
+- Update Opal to 1.2
+
+## v0.6.0 (2020-02-29)
+
+- feat: Ovto::Middleware (#18)
+  - Experimental. API may change during 0.6.x
+- feat(State): default_proc (#17)
+- feat(o): `o SubComp do ...end` now passes the block to `SubComp#render` (#16)
+
+## v0.5.0 (2019-12-22)
+
+- new: Ovto::PureComponent
+- new: Support Opal 1.0
 
 ## v0.4.1 (2019-04-19)
 
@@ -15,7 +29,6 @@ New features
   Example:
       
       o 'div', `{nodeName: ....}`
-      
 
 ## v0.3.0 (2018-12-24)
 

data/Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
-gem 'opal'
-gem 'opal-rspec'
+gem 'opal', '>= 1.2.0'
+gem 'opal-rspec', '>= 0.8.0.alpha3'
 gem 'opal-sprockets'
 gem 'rake'
 gem 'ovto', path: '.'

data/Gemfile.lock

@@ -1,52 +1,48 @@
 PATH
   remote: .
   specs:
-    ovto (0.4.0)
-      opal (~> 0.11)
+    ovto (0.6.1)
+      opal (>= 0.11, < 2)
       rack (~> 2.0)
       thor (~> 0.20)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    ast (2.4.0)
-    concurrent-ruby (1.1.5)
-    hike (1.2.3)
-    opal (0.11.4)
+    ast (2.4.2)
+    concurrent-ruby (1.1.9)
+    opal (1.2.0)
       ast (>= 2.3.0)
-      hike (~> 1.2)
-      parser (= 2.3.3.1)
-      sourcemap (~> 0.1.0)
-    opal-rspec (0.7.1)
-      opal (>= 0.11, < 0.12)
-      opal-sprockets
-      rake (~> 12.0)
-    opal-sprockets (0.4.3.0.11.0.3.7)
-      opal (~> 0.11.0)
-      sprockets (~> 3.7)
+      parser (~> 3.0)
+    opal-rspec (0.8.0.alpha3)
+      opal (>= 1.0.0, < 2.0)
+      opal-sprockets (< 2.0)
+      rake (>= 12.0)
+    opal-sprockets (1.0.2)
+      opal (>= 1.0, < 2.0)
+      sprockets (~> 4.0)
       tilt (>= 1.4)
-    parser (2.3.3.1)
-      ast (~> 2.2)
-    rack (2.0.7)
-    rake (12.3.2)
-    sourcemap (0.1.1)
-    sprockets (3.7.2)
+    parser (3.0.2.0)
+      ast (~> 2.4.1)
+    rack (2.2.3)
+    rake (13.0.6)
+    sprockets (4.0.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
     thor (0.20.3)
-    tilt (2.0.9)
-    yard (0.9.19)
+    tilt (2.0.10)
+    yard (0.9.26)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  opal
-  opal-rspec
+  opal (>= 1.2.0)
+  opal-rspec (>= 0.8.0.alpha3)
   opal-sprockets
   ovto!
   rake
   yard
 
 BUNDLED WITH
-   2.0.1
+   2.2.22

data/README.md

@@ -6,7 +6,7 @@ Client-side web framework for Opal
 
 ## Documents
 
-- [Book](https://yhara.github.io/ovto/)
+- [Book](https://yhara.github.io/ovto/docs/)
 - [yardoc](https://yhara.github.io/ovto/api/)
 
 ## Example
@@ -59,7 +59,7 @@ end
 MyApp.run(id: 'ovto')
 ```
 
-See the [book](https://yhara.github.io/ovto/guides/tutorial.html) for details.
+See the [book](https://yhara.github.io/ovto/docs/guides/tutorial.html) for details.
 
 ## Setup
 

data/book/SUMMARY.md

@@ -1,12 +1,14 @@
 # Summary
 
-- [Introduction](README.md)
 - [Getting Started](guides/tutorial.md)
+- [Install](guides/install.md)
 - API
   - [Ovto::App](api/app.md)
   - [Ovto::State](api/state.md)
   - [Ovto::Actions](api/actions.md)
   - [Ovto::Component](api/component.md)
+  - [Ovto::PureComponent](api/pure_component.md)
+  - [Ovto::Middleware](api/middleware.md)
   - [Ovto.fetch](api/fetch.md)
 - Guides
   - [Debugging](guides/debugging.md)

data/book/api/actions.md

@@ -15,7 +15,7 @@ require 'ovto'
 
 class MyApp < Ovto::App
   class State < Ovto::State
-    item :count, 0
+    item :count, default: 0
   end
 
   class Actions < Ovto::Actions

data/book/api/fetch.md

@@ -9,7 +9,7 @@ Ovto provides wrapper of [Fetch API](https://developer.mozilla.org/en-US/docs/We
 GET
 
 ```rb
-Ovto.fetch('/api/tasks'){|json_data|
+Ovto.fetch('/api/tasks').then{|json_data|
   p json_data
 }.fail{|e|  # Network error, 404 Not Found, JSON parse error, etc.
   p e
@@ -19,7 +19,7 @@ Ovto.fetch('/api/tasks'){|json_data|
 POST
 
 ```rb
-Ovto.fetch('/api/new_task', 'POST', {title: "do something"}){|json_data|
+Ovto.fetch('/api/new_task', 'POST', {title: "do something"}).then{|json_data|
   p json_data
 }.fail{|e|  # Network error, 404 Not Found, JSON parse error, etc.
   p e
@@ -30,7 +30,7 @@ Ovto.fetch('/api/new_task', 'POST', {title: "do something"}){|json_data|
 PUT
 
 ```rb
-Ovto.fetch('/api/tasks/1', 'PUT', {title: "do something"}){|json_data|
+Ovto.fetch('/api/tasks/1', 'PUT', {title: "do something"}).then{|json_data|
   p json_data
 }.fail{|e|  # Network error, 404 Not Found, JSON parse error, etc.
   p e

data/book/api/middleware.md

@@ -0,0 +1,99 @@
+# Ovto::Middleware
+
+When you are making a big app with Ovto, you may want to extract
+certain parts which are independent from the app. Ovto::Middleware is
+for such cases.
+
+- A middleware has its own namespace of state and actions
+  - that is, you don't need to add prefixes to the names of states and actions of a middleware.
+
+## Example
+
+```rb
+# 1. Middleware name must be valid as a method name in Ruby
+class MyMiddleware < Ovto::Middleware("my_middleware")
+  def setup
+    # Called on app startup
+  end
+
+  # 2. Make a subclass of MyMiddleware's State
+  class State < MyMiddleware::State
+    item :count, default: 0
+  end
+
+  # 3. Make a subclass of MyMiddleware's Actions
+  class Actions < MyMiddleware::Actions
+    def increment(by:)
+      return {count: state.count + by}
+    end
+  end
+
+  # 4. Make a subclass of MyMiddleware's Component
+  class SomeComponent < MyMiddleware::Component
+    def render
+      o 'div' do
+        o 'span', state.count
+        o 'button', onclick: ->{ actions.increment(by: 1) }
+      end
+    end
+  end
+end
+
+class MyApp < Ovto::App
+  # 5. Declare middlewares to use
+  use MyMiddleware
+
+  class State < Ovto::State; end
+  class Actions < Ovto::Actions; end
+
+  class MainComponent < Ovto::Component
+    def render
+      o 'div.counter' do
+        o MyMiddleware::SomeComponent
+      end
+    end
+  end
+end
+```
+
+## Advanced
+
+### Getting middlware state from app
+
+```rb
+class MyApp < Ovto::App
+  def MainComponent < Ovto::Component
+    def render
+      o 'span', state._middlewares.middleware1.some_state
+    end
+  end
+end
+```
+
+### Calling middlware action from app
+
+```rb
+class MyApp < Ovto::App
+  # From actions
+  def Actions < Ovto::Actions
+    def some_action
+      actions.middleware1.some_action()
+    end
+  end
+
+  # From component
+  def MainComponent < Ovto::Component
+    def render
+      o 'button', onclick: ->{ actions.middleware1.some_action() }
+    end
+  end
+end
+```
+
+### Using a middleware from another middleware
+
+```rb
+class Middleware1 < Ovto::Middleware("middleware1")
+  use Middleware2
+end
+```

data/book/api/pure_component.md

@@ -0,0 +1,30 @@
+# Ovto::PureComponent
+
+It almost the same as `Ovto::Component`, but it caches the `render` method calling with arguments of the method.
+
+## When to use PureComponent?
+
+Use it when your app is slow and need more speed.
+
+## Cache strategy
+
+It compares `render` method arguments and the previous arguments.
+
+```rb
+def render
+  o 'div' do
+    o Pure, foo: state.foo
+    o NotPure bar: state.bar
+  end
+end
+```
+
+In this case, `NotPure` component's render method is called even if `state.foo` is changed.
+Whereas `Pure` component's render method is called only if `state.foo` is changed.
+
+
+## State
+
+`state` method is not available in `PureComponent`, because `PureComponent` does not treat state as the cache key.
+If you'd like to use state in `PureComponent`, pass the state from the parent component.
+

data/book/guides/install.md

@@ -0,0 +1,76 @@
+# Install
+
+## Use Ovto with static files
+
+```
+$ gem i ovto
+$ ovto new myapp --static
+```
+
+## Use Ovto with Sinatra
+
+```
+$ gem i ovto
+$ ovto new myapp --sinatra
+```
+
+## Install Ovto into Rails apps
+
+Edit `Gemfile`
+
+```rb
+gem 'opal-rails'
+gem 'ovto'
+```
+
+Run `bundle install`
+
+Remove `app/assets/javascripts/application.js`
+
+Create `app/assets/javascripts/application.js.rb`
+
+```rb
+require 'opal'
+require 'rails-ujs'
+require 'activestorage'
+require 'turbolinks'
+require_tree '.'
+```
+
+Create `app/assets/javascripts/foo.js.rb` (file name is arbitrary)
+
+```rb
+require 'ovto'
+
+class Foo < Ovto::App
+  class State < Ovto::State
+  end
+
+  class Actions < Ovto::Actions
+  end
+
+  class MainComponent < Ovto::Component
+    def render(state:)
+      o 'h1', "HELLO"
+    end
+  end
+end
+```
+
+Edit `app/views/<some controller/<some view>.html.erb`
+
+```
+<div id='foo-app'></div>
+<%= opal_tag do %>
+  Foo.run(id: 'foo-app')
+<% end %>
+```
+
+This should render `HELLO` in the browser.
+
+You also need to edit config/environments/production.rb like this before deploy it to production.
+
+```rb
+    #config.assets.js_compressor = :uglifier
+    config.assets.js_compressor = Uglifier.new(harmony: true)
+```

data/book/guides/tutorial.md

@@ -5,7 +5,7 @@ but you can embed Ovto apps into a Rails or Sinatra app (See `./examples/*`).
 
 This is the final Ruby code.
 
-```
+```rb
 require 'ovto'
 
 class MyApp < Ovto::App
@@ -62,7 +62,7 @@ Let's take a look step-by-step.
 
 Make a Gemfile:
 
-```
+```rb
 source "https://rubygems.org"
 gem "ovto", github: 'yhara/ovto'  # Use git master because ovto gem is not released yet
 gem 'rake'
@@ -197,7 +197,7 @@ convert.
 
 Now you can know the value by `state.fahrenheit`. Update `MainComponent` to show the value too.
 
-```
+```rb
   class MainComponent < Ovto::Component
     def render
       o 'div' do

data/docs/api/Array.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>
+  Class: Array
+  
+    &mdash; Documentation by YARD 0.9.24
+  
+</title>
+
+  <link rel="stylesheet" href="css/style.css" type="text/css" />
+
+  <link rel="stylesheet" href="css/common.css" type="text/css" />
+
+<script type="text/javascript">
+  pathId = "Array";
+  relpath = '';
+</script>
+
+
+  <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
+
+  <script type="text/javascript" charset="utf-8" src="js/app.js"></script>
+
+
+  </head>
+  <body>
+    <div class="nav_wrap">
+      <iframe id="nav" src="class_list.html?1"></iframe>
+      <div id="resizer"></div>
+    </div>
+
+    <div id="main" tabindex="-1">
+      <div id="header">
+        <div id="menu">
+  
+    <a href="_index.html">Index (A)</a> &raquo;
+    
+    
+    <span class="title">Array</span>
+  
+</div>
+
+        <div id="search">
+  
+    <a class="full_list_link" id="class_list_link"
+        href="class_list.html">
+
+        <svg width="24" height="24">
+          <rect x="0" y="4" width="24" height="4" rx="1" ry="1"></rect>
+          <rect x="0" y="12" width="24" height="4" rx="1" ry="1"></rect>
+          <rect x="0" y="20" width="24" height="4" rx="1" ry="1"></rect>
+        </svg>
+    </a>
+  
+</div>
+        <div class="clear"></div>
+      </div>
+
+      <div id="content"><h1>Class: Array
+  
+  
+  
+</h1>
+<div class="box_info">
+  
+  <dl>
+    <dt>Inherits:</dt>
+    <dd>
+      <span class="inheritName">Object</span>
+      
+        <ul class="fullTree">
+          <li>Object</li>
+          
+            <li class="next">Array</li>
+          
+        </ul>
+        <a href="#" class="inheritanceTree">show all</a>
+      
+    </dd>
+  </dl>
+  
+
+  
+  
+  
+  
+  
+
+  
+
+  
+  <dl>
+    <dt>Defined in:</dt>
+    <dd>lib/mighty_inspect.rb</dd>
+  </dl>
+  
+</div>
+
+
+
+
+
+
+
+
+  
+    <h2>
+      Instance Method Summary
+      <small><a href="#" class="summary_toggle">collapse</a></small>
+    </h2>
+
+    <ul class="summary">
+      
+        <li class="public ">
+  <span class="summary_signature">
+    
+      <a href="#mighty_inspect-instance_method" title="#mighty_inspect (instance method)">#<strong>mighty_inspect</strong>  &#x21d2; Object </a>
+    
+
+    
+  </span>
+  
+  
+  
+  
+  
+  
+  
+
+  
+    <span class="summary_desc"><div class='inline'></div></span>
+  
+</li>
+
+      
+    </ul>
+  
+
+
+
+  <div id="instance_method_details" class="method_details_list">
+    <h2>Instance Method Details</h2>
+
+    
+      <div class="method_details first">
+  <h3 class="signature first" id="mighty_inspect-instance_method">
+  
+    #<strong>mighty_inspect</strong>  &#x21d2; <tt>Object</tt> 
+  
+
+  
+
+  
+</h3><table class="source_code">
+  <tr>
+    <td>
+      <pre class="lines">
+
+
+18
+19
+20</pre>
+    </td>
+    <td>
+      <pre class="code"><span class="info file"># File 'lib/mighty_inspect.rb', line 18</span>
+
+<span class='kw'>def</span> <span class='id identifier rubyid_mighty_inspect'>mighty_inspect</span>
+  <span class='tstring'><span class='tstring_beg'>&quot;</span><span class='tstring_content'>[</span><span class='tstring_end'>&quot;</span></span> <span class='op'>+</span> <span class='kw'>self</span><span class='period'>.</span><span class='id identifier rubyid_map'>map</span><span class='lbrace'>{</span><span class='op'>|</span><span class='id identifier rubyid_x'>x</span><span class='op'>|</span> <span class='const'><span class='object_link'><a href="MightyInspect.html" title="MightyInspect (module)">MightyInspect</a></span></span><span class='period'>.</span><span class='id identifier rubyid_mighty_inspect'><span class='object_link'><a href="MightyInspect.html#mighty_inspect-class_method" title="MightyInspect.mighty_inspect (method)">mighty_inspect</a></span></span><span class='lparen'>(</span><span class='id identifier rubyid_x'>x</span><span class='rparen'>)</span> <span class='rbrace'>}</span><span class='period'>.</span><span class='id identifier rubyid_join'>join</span><span class='lparen'>(</span><span class='tstring'><span class='tstring_beg'>&quot;</span><span class='tstring_content'>, </span><span class='tstring_end'>&quot;</span></span><span class='rparen'>)</span> <span class='op'>+</span> <span class='tstring'><span class='tstring_beg'>&quot;</span><span class='tstring_content'>]</span><span class='tstring_end'>&quot;</span></span>
+<span class='kw'>end</span></pre>
+    </td>
+  </tr>
+</table>
+</div>
+    
+  </div>
+
+</div>
+
+      <div id="footer">
+  Generated on Sat Feb 29 23:26:32 2020 by
+  <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
+  0.9.24 (ruby-2.5.5).
+</div>
+
+    </div>
+  </body>
+</html>