futurism 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0c74426f9853a4805efb25ac42eebc0304d463146910b29c0508475be67b972b
+  data.tar.gz: ed5d1b2cc4f493d9bf01806d57ca6b3b1e428f949b5c9b652bae9a5e9348f5ca
+SHA512:
+  metadata.gz: eff8b1b73bf954eade8ebf3ff3883cb9d4e64b9b0144331a2229cc886de71b75235697c8ea06a7379b4fa480df973e9c7cc143b58c8c6d8e979e41b7c0d98f4a
+  data.tar.gz: a2295457e258a9de0b2061fe4ed3b86e0944a99783ea0a7da2367148a8b488a43c0b8ea174711b79720162865fcf80f8d206839bf44e29f2f061274f284bdf85

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2020 Julian Rubisch
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,45 @@
+# Futurism
+Lazy-load Rails partials via CableReady
+
+## Usage
+with a helper in your template
+
+```erb
+<%= futurize @posts %>
+```
+
+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.
+
+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 %>
+  <td class="placeholder"></td>
+<% end %>
+```
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'futurism'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+To copy over the javascript files to your application, run
+
+```bash
+$ bin/rails futurism:install
+```
+
+
+## Contributing
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,29 @@
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+require "rdoc/task"
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title = "Futurism"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.md")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
+  t.verbose = false
+end
+
+task default: :test

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/futurism.rb

@@ -0,0 +1,12 @@
+require "rails"
+require "action_cable"
+require "cable_ready"
+require "futurism/engine"
+require "futurism/channel"
+require "futurism/helpers"
+
+module Futurism
+  ActiveSupport.on_load(:action_view) {
+    include Futurism::Helpers
+  }
+end

data/lib/futurism.rb~

@@ -0,0 +1,5 @@
+require "futurism/engine"
+
+module Futurism
+  # Your code goes here...
+end

data/lib/futurism/channel.rb

@@ -0,0 +1,24 @@
+module Futurism
+  class Channel < ActionCable::Channel::Base
+    include CableReady::Broadcaster
+
+    def subscribed
+      stream_from "Futurism::Channel"
+    end
+
+    def receive(data)
+      resources = data["sgids"].map { |sgid|
+        [sgid, GlobalID::Locator.locate_signed(sgid)]
+      }
+
+      resources.each do |sgid, resource|
+        cable_ready["Futurism::Channel"].outer_html(
+          selector: "[data-sgid='#{sgid}']",
+          html: ApplicationController.render(resource)
+        )
+      end
+
+      cable_ready.broadcast
+    end
+  end
+end

data/lib/futurism/channel.rb~

@@ -0,0 +1,22 @@
+class FuturismChannel < ApplicationCable::Channel
+  include CableReady::Broadcaster
+
+  def subscribed
+    stream_from "FuturismChannel"
+  end
+
+  def receive(data)
+    resources = data["sgids"].map { |sgid|
+      [sgid, GlobalID::Locator.locate_signed(sgid)]
+    }
+
+    resources.each do |sgid, resource|
+      cable_ready["FuturismChannel"].outer_html(
+        selector: "[data-sgid='#{sgid}']",
+        html: ApplicationController.render(resource)
+      )
+    end
+
+    cable_ready.broadcast
+  end
+end

data/lib/futurism/engine.rb

@@ -0,0 +1,4 @@
+module Futurism
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/futurism/helpers.rb

@@ -0,0 +1,15 @@
+module Futurism
+  module Helpers
+    def futurize(records, extends: :tr, &block)
+      placeholder = capture(&block)
+      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
+      }.join.html_safe
+    end
+  end
+end

data/lib/futurism/helpers.rb~

@@ -0,0 +1,13 @@
+module FuturismHelper
+  def futurize(records, extends: :tr, &block)
+    placeholder = capture(&block)
+    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
+    }.join.html_safe
+  end
+end

data/lib/futurism/version.rb

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

data/lib/tasks/futurism_tasks.rake

@@ -0,0 +1,31 @@
+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}"
+
+    filepath = %w[
+      app/javascript/packs/application.js
+      app/javascript/packs/application.ts
+    ]
+      .select { |path| File.exist?(path) }
+      .map { |path| Rails.root.join(path) }
+      .first
+
+    puts "Updating #{filepath}"
+    lines = File.open(filepath, "r") { |f| f.readlines }
+
+    lines << "\nimport 'elements'"
+
+    File.open(filepath, "w") { |f| f.write lines.join }
+  end
+end

data/lib/tasks/futurism_tasks.rake~

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :futurism do
+#   # Task goes here
+# end

data/lib/templates/elements/futurism_element.js

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,41 @@
+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

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

data/lib/templates/futurism_channel.js

@@ -0,0 +1,38 @@
+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~

@@ -0,0 +1,40 @@
+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~

@@ -0,0 +1,40 @@
+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~

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

metadata

@@ -0,0 +1,170 @@
+--- !ruby/object:Gem::Specification
+name: futurism
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Julian Rubisch
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2020-07-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: pry
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+- !ruby/object:Gem::Dependency
+  name: standardrb
+  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
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.2'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.2'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6'
+- !ruby/object:Gem::Dependency
+  name: cable_ready
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4'
+description: Uses custom html elements with attached IntersectionObserver to automatically
+  lazy load partials via websockets
+email:
+- julian@julianrubisch.at
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/futurism_manifest.js
+- config/routes.rb
+- lib/futurism.rb
+- lib/futurism.rb~
+- lib/futurism/channel.rb
+- lib/futurism/channel.rb~
+- lib/futurism/engine.rb
+- lib/futurism/helpers.rb
+- lib/futurism/helpers.rb~
+- 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
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.4
+signing_key:
+specification_version: 4
+summary: Lazy-load Rails partials via CableReady
+test_files: []