futurism 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d1c3294580dbbd5e9a52e891b639201f10e9731c7485229da9c739480d39dab
-  data.tar.gz: 91ce7571e8a406c820845f55d3bdb3eb83d905b8fd030242adfac73eba6d9f25
+  metadata.gz: 92467463ea6f80379a1dc26c85afe18564cd5cf2c6b92be207fe68d74f50b674
+  data.tar.gz: 7e5934d6194107a7d3b7ba39af4f38f0731ba8caa67fb706afeac5220ae46d85
 SHA512:
-  metadata.gz: b6da86985c57394373be9cac152629ed42d8ff85de888e30e49f48dcffadd2dd21e67e5906e8b295c4e2d3d1c1dec90a26880f36dffc006254d347476a134743
-  data.tar.gz: 0d683568af28890339ccaea473e9b7eede53006597ccf00223be42558e4ee162db39e9e1c192ef725ceeefcbf588c667006dc2ddc294ffbf0bf8fb70e21bc38a
+  metadata.gz: a6514295bff471bc75f02186eb0446166a14d4dfdf1993b481ce6f0df737b863a90c33d4eef5ae09b0ad5007d66fb4dda9639debdedfc3a6ce6cc0613a9d0c29
+  data.tar.gz: 5aedb6c88925314d27a46d933b243113006be0b49d0f20fb91d4b767426deecbc73ce78d99e3148e09ca2a8219bf61a510f12dc57d0c6d846e6149a85301e852

data/README.md

@@ -1,9 +1,24 @@
 # 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-3-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 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
 
@@ -57,6 +72,25 @@ To copy over the javascript files to your application, run
 $ 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
 
@@ -75,6 +109,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <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>
   </tr>
 </table>
 
@@ -82,4 +118,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- 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!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

data/lib/futurism/version.rb

@@ -1,3 +1,3 @@
 module Futurism
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 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.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Julian Rubisch
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-07-12 00:00:00.000000000 Z
+date: 2020-07-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -159,14 +159,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/futurism_utils.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,9 +0,0 @@
-/* global HTMLElement */
-
-import { extendElementWithIntersectionObserver } from './futurism_utils'
-
-export default class FuturismElement extends HTMLElement {
-  connectedCallback () {
-    extendElementWithIntersectionObserver(this)
-  }
-}

data/lib/templates/elements/futurism_table_row.js

@@ -1,9 +0,0 @@
-/* global HTMLTableRowElement */
-
-import { extendElementWithIntersectionObserver } from './futurism_utils'
-
-export default class FuturismTableRow extends HTMLTableRowElement {
-  connectedCallback () {
-    extendElementWithIntersectionObserver(this)
-  }
-}

data/lib/templates/elements/futurism_utils.js

@@ -1,33 +0,0 @@
-/* global IntersectionObserver, CustomEvent, setTimeout */
-
-const dispatchAppearEvent = (entry, observer) => {
-  if (!window.Futurism) {
-    setTimeout(() => dispatchAppearEvent(entry, observer), 1)
-    return
-  }
-
-  const evt = new CustomEvent('futurism:appear', {
-    bubbles: true,
-    detail: {
-      target: entry.target,
-      observer
-    }
-  })
-
-  entry.target.dispatchEvent(evt)
-}
-
-const observerCallback = (entries, observer) => {
-  entries.forEach(entry => {
-    if (!entry.isIntersecting) return
-    dispatchAppearEvent(entry, observer)
-  })
-}
-
-export const extendElementWithIntersectionObserver = element => {
-  Object.assign(element, {
-    observer: new IntersectionObserver(observerCallback.bind(element), {})
-  })
-
-  element.observer.observe(element)
-}

data/lib/templates/elements/index.js

@@ -1,7 +0,0 @@
-/* global customElements */
-
-import FuturismElement from './futurism_element'
-import FuturismTableRow from './futurism_table_row'
-
-customElements.define('futurism-element', FuturismElement)
-customElements.define('futurism-table-row', FuturismTableRow, { extends: 'tr' })

data/lib/templates/futurism_channel.js

@@ -1,36 +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) })
-      })
-    )
-  },
-
-  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 };