# Futurism [![Twitter follow](https://img.shields.io/twitter/follow/julian_rubisch?style=social)](https://twitter.com/julian_rubisch) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-) Lazy-load Rails partials via CableReady ## 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 %> ``` custom ``s (in the form of a `
` or a `` 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, extends: :tr do %> <% end %> ``` ![aa601dec1930151f71dbf0d6b02b61c9](https://user-images.githubusercontent.com/4352208/87131629-f768a480-c294-11ea-89a9-ea0a76ee06ef.gif) ### 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. ## 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 ``` ** ! Note that the installer will run `yarn install @minthesize/futurism` for you ! ** ### Manual Installation After `bundle`, install the Javascript library: ```bash $ bin/yarn install @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)):

Julian Rubisch

💻

darkrubyist

💻 📖

Konnor Rogers

💻

Andrew Mason

🚧

Chris Oliver

💻 👀
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!