futurism 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c74426f9853a4805efb25ac42eebc0304d463146910b29c0508475be67b972b
-  data.tar.gz: ed5d1b2cc4f493d9bf01806d57ca6b3b1e428f949b5c9b652bae9a5e9348f5ca
+  metadata.gz: e4522cbff1a5893e2a977bf7a32236b1ad9425983ed38521f188c5696dbbfec1
+  data.tar.gz: 37cb1278ae994766170290f172aca2f4db3b8e2a801edcb77c1ce4632352d56a
 SHA512:
-  metadata.gz: eff8b1b73bf954eade8ebf3ff3883cb9d4e64b9b0144331a2229cc886de71b75235697c8ea06a7379b4fa480df973e9c7cc143b58c8c6d8e979e41b7c0d98f4a
-  data.tar.gz: a2295457e258a9de0b2061fe4ed3b86e0944a99783ea0a7da2367148a8b488a43c0b8ea174711b79720162865fcf80f8d206839bf44e29f2f061274f284bdf85
+  metadata.gz: 83742f96cb378d99ddc8d51bb95b8734fcdec0d9e22d0f3ac2b17122977dedf518942ed38664d715ec2b6890017269a301c31ebe3489d1e10d2176412970c13e
+  data.tar.gz: 42a03c5aa611bd415ecfc33b76b9242ce2c4d1e2c06cab8bf50ee06e6e7fe67fb14bad078f4c36bf9b0cd2e242eeefdd3f79581a5f50d47e2c89f5c184f12e40

data/README.md

@@ -1,25 +1,105 @@
 # Futurism
+[![Twitter follow](https://img.shields.io/twitter/follow/julian_rubisch?style=social)](https://twitter.com/julian_rubisch)
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 Lazy-load Rails partials via CableReady
 
+:rotating_light: *Futurism is still in pre-1.0 state. As much as I hope to keep the API backwards-compatible, I cannot guarantee it* :rotating_light:
+
+## Facts
+- only one dependency: CableReady
+- bundle size (without CableReady) is around [~1.04kB](https://bundlephobia.com/result?p=@minthesize/futurism@0.1.3)
+
+### Browser Support
+
+- Chrome v67+ (v54+ via Polyfill)
+- Firefox v63+
+- Edge v79+
+- Safari v10.1+ via Polyfill
+- iOS Safari & Chrome v10.3+ via Polyfill
+
+[Caniuse](https://www.caniuse.com/#search=custom%20elements)
+
 ## Usage
 with a helper in your template
 
 ```erb
-<%= futurize @posts %>
+<%= futurize @posts, extends: :div do %>
+  <!-- placeholder -->
+<% end %>
 ```
 
-custom `<futurism-elements>` (in the form of a `<div>` or a `<tr is="futurism-table-row">` are rendered. Those custom elements have an `IntersectionObserver` attached that will send the `dom_id` to an ActionCable channel (`FuturismChannel`) which will then replace the placeholders with the actual resource partial.
+custom `<futurism-element>`s (in the form of a `<div>` or a `<tr is="futurism-table-row">` are rendered. Those custom elements have an `IntersectionObserver` attached that will send a signed global id to an ActionCable channel (`FuturismChannel`) which will then replace the placeholders with the actual resource partial.
 
 With that method, you could lazy load every class that has to_partial_path defined (ActiveModel has by default).
 
 You can pass the placeholder as a block:
 
 ```erb
-<%= futurize @posts do %>
+<%= futurize @posts, extends: :tr do %>
+  <td class="placeholder"></td>
+<% end %>
+```
+
+![aa601dec1930151f71dbf0d6b02b61c9](https://user-images.githubusercontent.com/4352208/87131629-f768a480-c294-11ea-89a9-ea0a76ee06ef.gif)
+
+## API
+
+Currently there are two ways to call `futurize`, designed to wrap `render`'s behavior:
+
+### Resource
+
+You can pass a single `ActiveRecord` or an `ActiveRecord::Relation` to `futurize`, just as you would call `render`:
+
+```erb
+<%= futurize @posts, extends: :tr do %>
   <td class="placeholder"></td>
 <% end %>
 ```
 
+#### Partial Path
+
+Remember that you can override the partial path in you models, like so:
+
+```rb
+class Post < ApplicationRecord
+  def to_partial_path
+    "home/post"
+  end
+end
+```
+
+That way you get maximal flexibility when just specifying a single resource.
+
+### Explicit Partial
+
+Call `futurize` with a `partial` keyword:
+
+```erb
+<%= futurize partial: "items/card", locals: {card: @card}, extends: :div do %>
+  <div class="spinner"></div>
+<% end %>
+```
+
+You can also use the shorthand syntax:
+
+```erb
+<%= futurize "items/card", card: @card, extends: :div do %>
+  <div class="spinner"></div>
+<% end %>
+```
+
+#### Collections
+
+Collection rendering is also possible:
+
+```erb
+<%= futurize partial: "items/card", collection: @cards, extends: :div do %>
+  <div class="spinner"></div>
+<% end %>
+```
+
 ## Installation
 Add this line to your application's Gemfile:
 
@@ -38,8 +118,51 @@ To copy over the javascript files to your application, run
 $ bin/rails futurism:install
 ```
 
+**! Note that the installer will run `yarn add @minthesize/futurism` for you !**
+
+### Manual Installation
+After `bundle`, install the Javascript library:
+
+```bash
+$ bin/yarn add @minthesize/futurism
+```
+
+In your `app/javascript/channels/index.js`, add the following
+
+```js
+import * as Futurism
+
+import consumer from './consumer'
+
+Futurism.initializeElements()
+Futurism.createSubscription(consumer)
+```
 
 ## Contributing
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="http://www.julianrubisch.at"><img src="https://avatars0.githubusercontent.com/u/4352208?v=4" width="100px;" alt=""/><br /><sub><b>Julian Rubisch</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=julianrubisch" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/darkrubyist"><img src="https://avatars2.githubusercontent.com/u/11207292?v=4" width="100px;" alt=""/><br /><sub><b>darkrubyist</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=darkrubyist" title="Code">💻</a> <a href="https://github.com/julianrubisch/futurism/commits?author=darkrubyist" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://ParamagicDev.github.io/portfolio"><img src="https://avatars2.githubusercontent.com/u/26425882?v=4" width="100px;" alt=""/><br /><sub><b>Konnor Rogers</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=ParamagicDev" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.andrewm.codes"><img src="https://avatars1.githubusercontent.com/u/18423853?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Mason</b></sub></a><br /><a href="#maintenance-andrewmcodes" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="http://gorails.com"><img src="https://avatars1.githubusercontent.com/u/67093?v=4" width="100px;" alt=""/><br /><sub><b>Chris Oliver</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=excid3" title="Code">💻</a> <a href="https://github.com/julianrubisch/futurism/pulls?q=is%3Apr+reviewed-by%3Aexcid3" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/leastbad"><img src="https://avatars2.githubusercontent.com/u/38150464?v=4" width="100px;" alt=""/><br /><sub><b>leastbad</b></sub></a><br /><a href="https://github.com/julianrubisch/futurism/commits?author=leastbad" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

data/lib/futurism.rb

@@ -6,6 +6,10 @@ require "futurism/channel"
 require "futurism/helpers"
 
 module Futurism
+  extend ActiveSupport::Autoload
+
+  autoload :Helpers, "futurism/helpers"
+
   ActiveSupport.on_load(:action_view) {
     include Futurism::Helpers
   }

data/lib/futurism/channel.rb

@@ -7,13 +7,15 @@ module Futurism
     end
 
     def receive(data)
-      resources = data["sgids"].map { |sgid|
-        [sgid, GlobalID::Locator.locate_signed(sgid)]
+      resources = data["signed_params"].map { |signed_params|
+        [signed_params, Rails.application.message_verifier("futurism").verify(signed_params)]
       }
 
-      resources.each do |sgid, resource|
+      ApplicationController.renderer.instance_variable_set(:@env, connection.env)
+
+      resources.each do |signed_params, resource|
         cable_ready["Futurism::Channel"].outer_html(
-          selector: "[data-sgid='#{sgid}']",
+          selector: "[data-signed-params='#{signed_params}']",
           html: ApplicationController.render(resource)
         )
       end

data/lib/futurism/helpers.rb

@@ -1,15 +1,46 @@
 module Futurism
   module Helpers
-    def futurize(records, extends: :tr, &block)
+    def futurize(records_or_string = nil, extends:, **options, &block)
       placeholder = capture(&block)
+
+      if records_or_string.is_a?(ActiveRecord::Base) || records_or_string.is_a?(ActiveRecord::Relation)
+        futurize_active_record(records_or_string, extends: extends, placeholder: placeholder)
+      elsif records_or_string.is_a?(String)
+        futurize_with_options(extends: extends, partial: records_or_string, locals: options, placeholder: placeholder)
+      else
+        futurize_with_options(extends: extends, placeholder: placeholder, **options)
+      end
+    end
+
+    def futurize_with_options(extends:, placeholder:, **options)
+      collection = options.delete(:collection)
+      if collection.nil?
+        render_element(extends: extends, placeholder: placeholder, options: options)
+      else
+        collection_class_name = collection.first.class.name
+        collection.map { |record|
+          render_element(extends: extends, placeholder: placeholder, options: options.merge(locals: {collection_class_name.downcase.to_sym => record}))
+        }.join.html_safe
+      end
+    end
+
+    def futurize_active_record(records, extends:, placeholder:)
       Array(records).map { |record|
-        case extends
-        when :tr
-          content_tag :tr, placeholder, data: {sgid: record.to_sgid.to_s}, is: "futurism-table-row"
-        else
-          content_tag :"futurism-element", placeholder, data: {sgid: record.to_sgid.to_s}
-        end
+        render_element(extends: extends, placeholder: placeholder, options: record)
       }.join.html_safe
     end
+
+    def render_element(extends:, options:, placeholder:)
+      case extends
+      when :tr
+        content_tag :tr, placeholder, data: {signed_params: futurism_signed_params(options)}, is: "futurism-table-row"
+      else
+        content_tag :"futurism-element", placeholder, data: {signed_params: futurism_signed_params(options)}
+      end
+    end
+
+    def futurism_signed_params(params)
+      Rails.application.message_verifier("futurism").generate(params)
+    end
   end
 end

data/lib/futurism/version.rb

@@ -1,3 +1,3 @@
 module Futurism
-  VERSION = "0.1.0"
+  VERSION = "0.3.0"
 end

data/lib/tasks/futurism_tasks.rake

@@ -3,17 +3,11 @@ require "fileutils"
 namespace :futurism do
   desc "Let's look into a brighter future with futurism and CableReady"
   task install: :environment do
-    system "yarn add cable_ready"
-
-    app_path_part = Webpacker && Rails ? Webpacker.config.source_path.relative_path_from(Rails.root) : "app/javascript"
-
-    FileUtils.mkdir_p "./#{app_path_part}/channels"
-    FileUtils.mkdir_p "./#{app_path_part}/elements"
-
-    FileUtils.cp File.expand_path("../templates/futurism_channel.js", __dir__), "./#{app_path_part}/channels"
-    FileUtils.cp_r File.expand_path("../templates/elements", __dir__), "./#{app_path_part}"
+    system "yarn add @minthesize/futurism"
 
     filepath = %w[
+      app/javascript/channels/index.js
+      app/javascript/channels/index.ts
       app/javascript/packs/application.js
       app/javascript/packs/application.ts
     ]
@@ -24,7 +18,21 @@ namespace :futurism do
     puts "Updating #{filepath}"
     lines = File.open(filepath, "r") { |f| f.readlines }
 
-    lines << "\nimport 'elements'"
+    unless lines.find { |line| line.start_with?("import * as Futurism") }
+      matches = lines.select { |line| line =~ /\A(require|import)/ }
+      lines.insert lines.index(matches.last).to_i + 1, "import * as Futurism from '@minthesize/futurism'\n"
+    end
+
+    unless lines.find { |line| line.start_with?("import consumer") }
+      matches = lines.select { |line| line =~ /\A(require|import)/ }
+      lines.insert lines.index(matches.last).to_i + 1, "import consumer from '../channels/consumer'\n"
+    end
+
+    initialize_line = lines.find { |line| line.start_with?("Futurism.initializeElements") }
+    lines << "Futurism.initializeElements()\n" unless initialize_line
+
+    subscribe_line = lines.find { |line| line.start_with?("Futurism.createSubscription") }
+    lines << "Futurism.createSubscription(consumer)\n" unless subscribe_line
 
     File.open(filepath, "w") { |f| f.write lines.join }
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: futurism
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Julian Rubisch
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-07-09 00:00:00.000000000 Z
+date: 2020-07-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -52,6 +52,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.12.2
+- !ruby/object:Gem::Dependency
+  name: nokogiri
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: standardrb
   requirement: !ruby/object:Gem::Requirement
@@ -66,6 +80,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: spy
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rack
   requirement: !ruby/object:Gem::Requirement
@@ -84,9 +126,6 @@ dependencies:
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '5.2'
     - - ">="
       - !ruby/object:Gem::Version
         version: '6'
@@ -94,9 +133,6 @@ dependencies:
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '5.2'
     - - ">="
       - !ruby/object:Gem::Version
         version: '6'
@@ -137,13 +173,6 @@ files:
 - lib/futurism/version.rb
 - lib/tasks/futurism_tasks.rake
 - lib/tasks/futurism_tasks.rake~
-- lib/templates/elements/futurism_element.js
-- lib/templates/elements/futurism_table_row.js
-- lib/templates/elements/index.js
-- lib/templates/futurism_channel.js
-- lib/templates/futurism_element.js~
-- lib/templates/futurism_table_row.js~
-- lib/templates/index.js~
 homepage: https://github.com/julianrubisch/futurism
 licenses:
 - MIT

data/lib/templates/elements/futurism_element.js

@@ -1,39 +0,0 @@
-class FuturismElement extends HTMLElement {
-  connectedCallback () {
-    const options = {}
-
-    this.observer = new IntersectionObserver((entries, observer) => {
-      entries.forEach(
-        (entry => {
-          if (entry.isIntersecting) {
-            this.dispatchAppearEvent(entry, observer)
-          }
-        }).bind(this)
-      )
-    }, options)
-
-    this.observer.observe(this)
-  }
-
-  dispatchAppearEvent (entry, observer) {
-    if (window.Futurism) {
-      const evt = new CustomEvent('futurism:appear', {
-        bubbles: true,
-        detail: {
-          target: entry.target,
-          observer
-        }
-      })
-      this.dispatchEvent(evt)
-    } else {
-      setTimeout(
-        (() => {
-          this.dispatchAppearEvent(entry, observer)
-        }).bind(this),
-        1
-      )
-    }
-  }
-}
-
-customElements.define('futurism-element', FuturismElement)

data/lib/templates/elements/futurism_table_row.js

@@ -1,41 +0,0 @@
-class FuturismTableRow extends HTMLTableRowElement {
-  connectedCallback () {
-    const options = {}
-
-    this.observer = new IntersectionObserver((entries, observer) => {
-      entries.forEach(
-        (entry => {
-          if (entry.isIntersecting) {
-            this.dispatchAppearEvent(entry, observer)
-          }
-        }).bind(this)
-      )
-    }, options)
-
-    this.observer.observe(this)
-  }
-
-  dispatchAppearEvent (entry, observer) {
-    if (window.Futurism) {
-      const evt = new CustomEvent('futurism:appear', {
-        bubbles: true,
-        detail: {
-          target: entry.target,
-          observer
-        }
-      })
-      this.dispatchEvent(evt)
-    } else {
-      setTimeout(
-        (() => {
-          this.dispatchAppearEvent(entry, observer)
-        }).bind(this),
-        1
-      )
-    }
-  }
-}
-
-customElements.define('futurism-table-row', FuturismTableRow, {
-  extends: 'tr'
-})

data/lib/templates/elements/index.js

@@ -1,4 +0,0 @@
-import FuturismElement from './futurism_element'
-import FuturismTableRow from './futurism_table_row'
-
-export { FuturismElement, FuturismTableRow }

data/lib/templates/futurism_channel.js

@@ -1,38 +0,0 @@
-import consumer from './consumer'
-import CableReady from 'cable_ready'
-
-const debounceEvents = (callback, delay = 250) => {
-  let timeoutId
-  let events = []
-  return (...args) => {
-    clearTimeout(timeoutId)
-    events = [...events, ...args]
-    timeoutId = setTimeout(() => {
-      timeoutId = null
-      callback(events)
-      events = []
-    }, delay)
-  }
-}
-
-consumer.subscriptions.create('Futurism::Channel', {
-  connected () {
-    window.Futurism = this
-    document.addEventListener(
-      'futurism:appear',
-      debounceEvents(
-        (events => {
-          this.send({ sgids: events.map(e => e.target.dataset.sgid) })
-        }).bind(this)
-      )
-    )
-  },
-
-  received (data) {
-    if (data.cableReady) {
-      CableReady.perform(data.operations, {
-        emitMissingElementWarnings: false
-      })
-    }
-  }
-})

data/lib/templates/futurism_element.js~

@@ -1,40 +0,0 @@
-class FuturismElement extends HTMLElement {
-  connectedCallback() {
-    console.log("connected");
-    const options = {};
-
-    this.observer = new IntersectionObserver((entries, observer) => {
-      entries.forEach(
-        (entry => {
-          if (entry.isIntersecting) {
-            this.dispatchAppearEvent(entry, observer);
-          }
-        }).bind(this)
-      );
-    }, options);
-
-    this.observer.observe(this);
-  }
-
-  dispatchAppearEvent(entry, observer) {
-    if (window.Futurism) {
-      const evt = new CustomEvent("futurism:appear", {
-        bubbles: true,
-        detail: {
-          target: entry.target,
-          observer
-        }
-      });
-      this.dispatchEvent(evt);
-    } else {
-      setTimeout(
-        (() => {
-          this.dispatchAppearEvent(entry, observer);
-        }).bind(this),
-        1
-      );
-    }
-  }
-}
-
-customElements.define("futurism-element", FuturismElement);

data/lib/templates/futurism_table_row.js~

@@ -1,40 +0,0 @@
-class FuturismElement extends HTMLElement {
-  connectedCallback() {
-    console.log("connected");
-    const options = {};
-
-    this.observer = new IntersectionObserver((entries, observer) => {
-      entries.forEach(
-        (entry => {
-          if (entry.isIntersecting) {
-            this.dispatchAppearEvent(entry, observer);
-          }
-        }).bind(this)
-      );
-    }, options);
-
-    this.observer.observe(this);
-  }
-
-  dispatchAppearEvent(entry, observer) {
-    if (window.Futurism) {
-      const evt = new CustomEvent("futurism:appear", {
-        bubbles: true,
-        detail: {
-          target: entry.target,
-          observer
-        }
-      });
-      this.dispatchEvent(evt);
-    } else {
-      setTimeout(
-        (() => {
-          this.dispatchAppearEvent(entry, observer);
-        }).bind(this),
-        1
-      );
-    }
-  }
-}
-
-customElements.define("futurism-element", FuturismElement);

data/lib/templates/index.js~

@@ -1,3 +0,0 @@
-import FuturismElement from "./futurism_element";
-
-export { FuturismElement };