futurism 0.1.2 → 0.1.4

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1d1c3294580dbbd5e9a52e891b639201f10e9731c7485229da9c739480d39dab
4
- data.tar.gz: 91ce7571e8a406c820845f55d3bdb3eb83d905b8fd030242adfac73eba6d9f25
3
+ metadata.gz: 92467463ea6f80379a1dc26c85afe18564cd5cf2c6b92be207fe68d74f50b674
4
+ data.tar.gz: 7e5934d6194107a7d3b7ba39af4f38f0731ba8caa67fb706afeac5220ae46d85
5
5
  SHA512:
6
- metadata.gz: b6da86985c57394373be9cac152629ed42d8ff85de888e30e49f48dcffadd2dd21e67e5906e8b295c4e2d3d1c1dec90a26880f36dffc006254d347476a134743
7
- data.tar.gz: 0d683568af28890339ccaea473e9b7eede53006597ccf00223be42558e4ee162db39e9e1c192ef725ceeefcbf588c667006dc2ddc294ffbf0bf8fb70e21bc38a
6
+ metadata.gz: a6514295bff471bc75f02186eb0446166a14d4dfdf1993b481ce6f0df737b863a90c33d4eef5ae09b0ad5007d66fb4dda9639debdedfc3a6ce6cc0613a9d0c29
7
+ data.tar.gz: 5aedb6c88925314d27a46d933b243113006be0b49d0f20fb91d4b767426deecbc73ce78d99e3148e09ca2a8219bf61a510f12dc57d0c6d846e6149a85301e852
data/README.md CHANGED
@@ -1,9 +1,24 @@
1
1
  # Futurism
2
+ [![Twitter follow](https://img.shields.io/twitter/follow/julian_rubisch?style=social)](https://twitter.com/julian_rubisch)
2
3
  <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
3
- [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
4
+ [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
4
5
  <!-- ALL-CONTRIBUTORS-BADGE:END -->
5
6
  Lazy-load Rails partials via CableReady
6
7
 
8
+ ## Facts
9
+ - only one dependency: CableReady
10
+ - bundle size (without CableReady) is around [~1.04kB](https://bundlephobia.com/result?p=@minthesize/futurism@0.1.3)
11
+
12
+ ### Browser Support
13
+
14
+ - Chrome v67+ (v54+ via Polyfill)
15
+ - Firefox v63+
16
+ - Edge v79+
17
+ - Safari v10.1+ via Polyfill
18
+ - iOS Safari & Chrome v10.3+ via Polyfill
19
+
20
+ [Caniuse](https://www.caniuse.com/#search=custom%20elements)
21
+
7
22
  ## Usage
8
23
  with a helper in your template
9
24
 
@@ -57,6 +72,25 @@ To copy over the javascript files to your application, run
57
72
  $ bin/rails futurism:install
58
73
  ```
59
74
 
75
+ ** ! Note that the installer will run `yarn install @minthesize/futurism` for you ! **
76
+
77
+ ### Manual Installation
78
+ After `bundle`, install the Javascript library:
79
+
80
+ ```bash
81
+ $ bin/yarn install @minthesize/futurism
82
+ ```
83
+
84
+ In your `app/javascript/channels/index.js`, add the following
85
+
86
+ ```js
87
+ import * as Futurism
88
+
89
+ import consumer from './consumer'
90
+
91
+ Futurism.initializeElements()
92
+ Futurism.createSubscription(consumer)
93
+ ```
60
94
 
61
95
  ## Contributing
62
96
 
@@ -75,6 +109,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
75
109
  <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>
76
110
  <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>
77
111
  <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>
112
+ <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>
113
+ <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>
78
114
  </tr>
79
115
  </table>
80
116
 
@@ -82,4 +118,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
82
118
  <!-- prettier-ignore-end -->
83
119
  <!-- ALL-CONTRIBUTORS-LIST:END -->
84
120
 
85
- This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
121
+ This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
@@ -1,3 +1,3 @@
1
1
  module Futurism
2
- VERSION = "0.1.2"
2
+ VERSION = "0.1.4"
3
3
  end
@@ -3,17 +3,11 @@ require "fileutils"
3
3
  namespace :futurism do
4
4
  desc "Let's look into a brighter future with futurism and CableReady"
5
5
  task install: :environment do
6
- system "yarn add cable_ready"
7
-
8
- app_path_part = Webpacker && Rails ? Webpacker.config.source_path.relative_path_from(Rails.root) : "app/javascript"
9
-
10
- FileUtils.mkdir_p "./#{app_path_part}/channels"
11
- FileUtils.mkdir_p "./#{app_path_part}/elements"
12
-
13
- FileUtils.cp File.expand_path("../templates/futurism_channel.js", __dir__), "./#{app_path_part}/channels"
14
- FileUtils.cp_r File.expand_path("../templates/elements", __dir__), "./#{app_path_part}"
6
+ system "yarn add @minthesize/futurism"
15
7
 
16
8
  filepath = %w[
9
+ app/javascript/channels/index.js
10
+ app/javascript/channels/index.ts
17
11
  app/javascript/packs/application.js
18
12
  app/javascript/packs/application.ts
19
13
  ]
@@ -24,7 +18,21 @@ namespace :futurism do
24
18
  puts "Updating #{filepath}"
25
19
  lines = File.open(filepath, "r") { |f| f.readlines }
26
20
 
27
- lines << "\nimport 'elements'"
21
+ unless lines.find { |line| line.start_with?("import * as Futurism") }
22
+ matches = lines.select { |line| line =~ /\A(require|import)/ }
23
+ lines.insert lines.index(matches.last).to_i + 1, "import * as Futurism from '@minthesize/futurism'\n"
24
+ end
25
+
26
+ unless lines.find { |line| line.start_with?("import consumer") }
27
+ matches = lines.select { |line| line =~ /\A(require|import)/ }
28
+ lines.insert lines.index(matches.last).to_i + 1, "import consumer from '../channels/consumer'\n"
29
+ end
30
+
31
+ initialize_line = lines.find { |line| line.start_with?("Futurism.initializeElements") }
32
+ lines << "Futurism.initializeElements()\n" unless initialize_line
33
+
34
+ subscribe_line = lines.find { |line| line.start_with?("Futurism.createSubscription") }
35
+ lines << "Futurism.createSubscription(consumer)\n" unless subscribe_line
28
36
 
29
37
  File.open(filepath, "w") { |f| f.write lines.join }
30
38
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: futurism
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 0.1.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Julian Rubisch
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-07-12 00:00:00.000000000 Z
11
+ date: 2020-07-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -159,14 +159,6 @@ files:
159
159
  - lib/futurism/version.rb
160
160
  - lib/tasks/futurism_tasks.rake
161
161
  - lib/tasks/futurism_tasks.rake~
162
- - lib/templates/elements/futurism_element.js
163
- - lib/templates/elements/futurism_table_row.js
164
- - lib/templates/elements/futurism_utils.js
165
- - lib/templates/elements/index.js
166
- - lib/templates/futurism_channel.js
167
- - lib/templates/futurism_element.js~
168
- - lib/templates/futurism_table_row.js~
169
- - lib/templates/index.js~
170
162
  homepage: https://github.com/julianrubisch/futurism
171
163
  licenses:
172
164
  - MIT
@@ -1,9 +0,0 @@
1
- /* global HTMLElement */
2
-
3
- import { extendElementWithIntersectionObserver } from './futurism_utils'
4
-
5
- export default class FuturismElement extends HTMLElement {
6
- connectedCallback () {
7
- extendElementWithIntersectionObserver(this)
8
- }
9
- }
@@ -1,9 +0,0 @@
1
- /* global HTMLTableRowElement */
2
-
3
- import { extendElementWithIntersectionObserver } from './futurism_utils'
4
-
5
- export default class FuturismTableRow extends HTMLTableRowElement {
6
- connectedCallback () {
7
- extendElementWithIntersectionObserver(this)
8
- }
9
- }
@@ -1,33 +0,0 @@
1
- /* global IntersectionObserver, CustomEvent, setTimeout */
2
-
3
- const dispatchAppearEvent = (entry, observer) => {
4
- if (!window.Futurism) {
5
- setTimeout(() => dispatchAppearEvent(entry, observer), 1)
6
- return
7
- }
8
-
9
- const evt = new CustomEvent('futurism:appear', {
10
- bubbles: true,
11
- detail: {
12
- target: entry.target,
13
- observer
14
- }
15
- })
16
-
17
- entry.target.dispatchEvent(evt)
18
- }
19
-
20
- const observerCallback = (entries, observer) => {
21
- entries.forEach(entry => {
22
- if (!entry.isIntersecting) return
23
- dispatchAppearEvent(entry, observer)
24
- })
25
- }
26
-
27
- export const extendElementWithIntersectionObserver = element => {
28
- Object.assign(element, {
29
- observer: new IntersectionObserver(observerCallback.bind(element), {})
30
- })
31
-
32
- element.observer.observe(element)
33
- }
@@ -1,7 +0,0 @@
1
- /* global customElements */
2
-
3
- import FuturismElement from './futurism_element'
4
- import FuturismTableRow from './futurism_table_row'
5
-
6
- customElements.define('futurism-element', FuturismElement)
7
- customElements.define('futurism-table-row', FuturismTableRow, { extends: 'tr' })
@@ -1,36 +0,0 @@
1
- import consumer from './consumer'
2
- import CableReady from 'cable_ready'
3
-
4
- const debounceEvents = (callback, delay = 250) => {
5
- let timeoutId
6
- let events = []
7
- return (...args) => {
8
- clearTimeout(timeoutId)
9
- events = [...events, ...args]
10
- timeoutId = setTimeout(() => {
11
- timeoutId = null
12
- callback(events)
13
- events = []
14
- }, delay)
15
- }
16
- }
17
-
18
- consumer.subscriptions.create('Futurism::Channel', {
19
- connected () {
20
- window.Futurism = this
21
- document.addEventListener(
22
- 'futurism:appear',
23
- debounceEvents(events => {
24
- this.send({ sgids: events.map(e => e.target.dataset.sgid) })
25
- })
26
- )
27
- },
28
-
29
- received (data) {
30
- if (data.cableReady) {
31
- CableReady.perform(data.operations, {
32
- emitMissingElementWarnings: false
33
- })
34
- }
35
- }
36
- })
@@ -1,40 +0,0 @@
1
- class FuturismElement extends HTMLElement {
2
- connectedCallback() {
3
- console.log("connected");
4
- const options = {};
5
-
6
- this.observer = new IntersectionObserver((entries, observer) => {
7
- entries.forEach(
8
- (entry => {
9
- if (entry.isIntersecting) {
10
- this.dispatchAppearEvent(entry, observer);
11
- }
12
- }).bind(this)
13
- );
14
- }, options);
15
-
16
- this.observer.observe(this);
17
- }
18
-
19
- dispatchAppearEvent(entry, observer) {
20
- if (window.Futurism) {
21
- const evt = new CustomEvent("futurism:appear", {
22
- bubbles: true,
23
- detail: {
24
- target: entry.target,
25
- observer
26
- }
27
- });
28
- this.dispatchEvent(evt);
29
- } else {
30
- setTimeout(
31
- (() => {
32
- this.dispatchAppearEvent(entry, observer);
33
- }).bind(this),
34
- 1
35
- );
36
- }
37
- }
38
- }
39
-
40
- customElements.define("futurism-element", FuturismElement);
@@ -1,40 +0,0 @@
1
- class FuturismElement extends HTMLElement {
2
- connectedCallback() {
3
- console.log("connected");
4
- const options = {};
5
-
6
- this.observer = new IntersectionObserver((entries, observer) => {
7
- entries.forEach(
8
- (entry => {
9
- if (entry.isIntersecting) {
10
- this.dispatchAppearEvent(entry, observer);
11
- }
12
- }).bind(this)
13
- );
14
- }, options);
15
-
16
- this.observer.observe(this);
17
- }
18
-
19
- dispatchAppearEvent(entry, observer) {
20
- if (window.Futurism) {
21
- const evt = new CustomEvent("futurism:appear", {
22
- bubbles: true,
23
- detail: {
24
- target: entry.target,
25
- observer
26
- }
27
- });
28
- this.dispatchEvent(evt);
29
- } else {
30
- setTimeout(
31
- (() => {
32
- this.dispatchAppearEvent(entry, observer);
33
- }).bind(this),
34
- 1
35
- );
36
- }
37
- }
38
- }
39
-
40
- customElements.define("futurism-element", FuturismElement);
@@ -1,3 +0,0 @@
1
- import FuturismElement from "./futurism_element";
2
-
3
- export { FuturismElement };