izi_lightup 0.0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 130b95a322e27bff9b2b60080ca086f90d9a1a391d7cace27e479f78b9291585
+  data.tar.gz: b090a0d62203d7f4338c53eda32db9c64191686e0871d2bd59b14d075681d167
+SHA512:
+  metadata.gz: 46424c06388df9af3110d69e781e4453713bb6d85dc3326e80fe8cab868152da360a0cd75c44088a12163040a7400677b96190f0f5879b8ce2797439bbd77f04
+  data.tar.gz: bc4da804bc238a6a158003362814c4aff7e2249b8c9ba2e0dfbcb967d5d6b064c63aa0cf8c8153873ff3d59aab955c5ea33d533e282d2dc57b1e389cd3969129

data/README.rdoc

@@ -0,0 +1,3 @@
+# Izi Lightup
+
+Utils to speed up page load by using critical css & deferred scripts initialization

data/app/assets/javascripts/crit-utils/active_emit.js.coffee

@@ -0,0 +1,73 @@
+((window, document) -> (
+  EVENT_TYPE = window.__activeEventName || 'Activity'
+  MAX_TIMEOUT = window.__activeTimeout || 5000
+  TRACK_MARKING = window.__activeMark || '_real_track=true'
+
+  if custom_mt = /^\?(\d+)$/.exec(window.location.search)
+    MAX_TIMEOUT = parseInt(custom_mt[1], 10)
+
+  window.activeReady = false
+  sent = false
+  window.activeOn = (callback) ->
+    if sent
+      return if typeof(callback) isnt 'function'
+      return requestAnimationFrame(callback) if window?.requestAnimationFrame?
+      callback()
+
+    fn = ->
+      document.removeEventListener EVENT_TYPE, fn
+      return if typeof(callback) isnt 'function'
+      return requestAnimationFrame(callback) if window?.requestAnimationFrame?
+      callback()
+
+    document.addEventListener(EVENT_TYPE, fn, {passive: true})
+
+  cleanListeners = undefined
+
+  sendActive = ->
+    return if sent
+    sent = true
+    try
+      document.dispatchEvent(new Event(EVENT_TYPE))
+    catch
+      oldEvt = document.createEvent('CustomEvent')
+      oldEvt.initCustomEvent(EVENT_TYPE, true, true, {})
+      document.dispatchEvent(oldEvt)
+
+    window.activeReady = true
+
+  activeForUser = ->
+    document.cookie = "#{TRACK_MARKING};path=/;max-age:31536000;samesite"
+    cleanListeners?()
+    sendActive()
+
+  untrack = ->
+    expTime = new Date()
+    expTime.setTime(0)
+    document.cookie = "#{TRACK_MARKING};expires=#{expTime.toGMTString()}"
+
+  if document.cookie.indexOf(TRACK_MARKING) isnt -1
+    setTimeout sendActive, 10
+
+    window.activeOn.untrack = untrack
+    return
+
+  document.addEventListener 'DOMContentLoaded', ->
+    body = document.body
+    lEvents = [
+      [body, 'mousemove'],
+      [body, 'scroll'],
+      [body, 'keydown'],
+      [body, 'click'],
+      [body, 'touchstart'],
+      [window, 'blur'],
+      [window, 'focus'],
+    ];
+    cleanListeners = ->
+      evt[0].removeEventListener(evt[1], activeForUser) for evt in lEvents
+
+    for evt in lEvents
+      evt[0].addEventListener(evt[1], activeForUser, {passive: true})
+
+    setTimeout(sendActive, MAX_TIMEOUT, {passive: true})
+))(window, document)

data/app/assets/javascripts/crit-utils/bundle.js

@@ -0,0 +1,3 @@
+//= require ./active_emit
+//= require ./mini_require
+//= require ./wait_for

data/app/assets/javascripts/crit-utils/measure.js

@@ -0,0 +1 @@
+//= require ./measure/cls

data/app/assets/javascripts/crit-utils/measure/cls.js.coffee

@@ -0,0 +1,64 @@
+((window) -> (
+  # LCS COUNTER
+  LCS_OK = 0.1
+  LCS_BAD = 0.25
+
+  TTL_TIMEOUT = 2000
+  MAX_TIMEOUT = 15000
+
+  __print = (msg, value) ->
+    info_css = 'color: silver;'
+
+    if value >= LCS_BAD
+      result_css = 'color: red; font-weight: bold;'
+      tag_css = 'color: red; font-weight: bold;'
+      tag = 'ERROR'
+    else if value >= LCS_OK
+      result_css = 'color: orange; font-style: italic;'
+      tag_css = 'color: orange; font-weight: bold;'
+      tag = 'WARN'
+    else
+      result_css = 'color: green;'
+      tag_css = 'color: green; font-weight: bold;'
+      tag = 'OK'
+
+    console.debug '%cMEASURE: %c<%s> %c%s', info_css, tag_css, tag, result_css, msg
+
+  __ttlTimeout = undefined
+  __lcs = ->
+    clsValue = 0
+    __unsub = undefined
+    __finTimeout = undefined
+
+    performanceObserver = new PerformanceObserver (performanceEntryList) ->
+      performanceEntries = performanceEntryList.getEntries()
+
+      clearTimeout(__ttlTimeout) if __ttlTimeout?
+      __ttlTimeout = setTimeout __unsub, TTL_TIMEOUT
+      for entry in performanceEntries
+        if !entry.hadRecentInput
+          clsValue += entry.value
+          __print "lcs updated #{clsValue.toFixed(3)}(+#{entry.value.toFixed(3)})", clsValue
+
+    console.debug 'INIT LCS COUNTER...'
+    performanceObserver.observe
+      type: 'layout-shift'
+      buffered: true
+
+    __unsub = ->
+      performanceObserver.disconnect('layout-shift')
+      __ttlTimeout = undefined
+      if __finTimeout?
+        clearTimeout(__finTimeout)
+        __finTimeout = undefined
+      __print "result #{clsValue.toFixed(3)}", clsValue
+
+    __finTimeout = setTimeout __unsub, MAX_TIMEOUT
+
+  __check_offset = ->
+    if window.scrollY <= 300
+      # init LCS counter
+      setTimeout __lcs, 1
+
+  setTimeout __check_offset, 1
+))(window)

data/app/assets/javascripts/crit-utils/mini_require.js.coffee

@@ -0,0 +1,56 @@
+((window, document) -> (
+  window.__required ||= {}
+
+  _onload = (id) ->
+    return if typeof(__required[id]) is 'undefined' || __required[id].loaded
+
+    __required[id].loaded = true
+    callbacks = __required[id].callbacks
+    return unless Array.isArray(callbacks)
+
+    while callbacks.length > 0
+      callback = callbacks.shift()
+      callback.call(window) if typeof(callback) is 'function'
+
+  _buildSubscriptions = (id, node) ->
+    data = __required[id]
+    return if data.loaded
+    data.callbacks ||= []
+
+    callback = node.onload
+    node.onload = -> _onload(id)
+    node.addEventListener('load', -> _onload(id)) if typeof(node.addEventListener) is 'function'
+    node.attachEvent('load', -> _onload(id)) if typeof(node.attachEvent) is 'function'
+
+    data.callbacks.push(callback) if typeof(callback) is 'function'
+
+  _subscribe = (id, callback) ->
+    return if typeof(__required[id]) is 'undefined'
+
+    data = __required[id]
+    return setTimeout(callback, 0) if data.loaded
+
+    data.callbacks.push(callback) if typeof(callback) is 'function'
+
+  window.miniRequire ||= (key, source_url, callback = undefined) ->
+    id = "source_#{key.replace(/[^a-z0-9_\-]+/ig, '_')}"
+
+    # subscribe only if already attached
+    return _subscribe(id, callback) if __required[id]?
+
+    __required[id] = {loaded: false, callbacks: []}
+    # subscribe only if no source
+    return _subscribe(id, callback) unless source_url?
+
+    # attach script
+    src = document.createElement('script')
+    src.id = id
+    src.async = true
+    src.defer = true
+    src.src = source_url
+    _buildSubscriptions(id, src)
+    _subscribe(id, callback)
+
+    document.body.appendChild(src)
+    true
+))(window, document)

data/app/assets/javascripts/crit-utils/wait_for.js.coffee

@@ -0,0 +1,28 @@
+((window) -> (
+  window.waitFor ||= (key, deepCheck, interval) ->
+    (callback) ->
+      _timer = null
+      _called = false
+      setTimeout (->
+          unless _called
+            console.warn "not loaded component [#{key}] in #{waitFor.timeout}", typeof window[key]
+        ), waitFor.timeout
+      checker = ->
+        return if _called || typeof window[key] is 'undefined'
+
+        if typeof deepCheck is 'function'
+          return unless deepCheck.call(window[key])
+
+        clearInterval(_timer)
+        _called = true
+        return unless typeof callback is 'function'
+        callback.call(window[key], window[key])
+
+      _timer = setInterval(checker, interval || waitFor.tick)
+
+      checker()
+      null
+
+  window.waitFor.timeout ||= 30000
+  window.waitFor.tick ||= 100
+))(window)

data/app/helpers/critical_helper.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module CriticalHelper
+  def css_preload(name)
+    link = content_tag :link, '', rel: 'preload', href: stylesheet_path(name), as: 'style', onload: 'this.rel="stylesheet"'
+    noscript = content_tag :noscript do
+      content_tag :link, '', rel: 'stylesheet', href: stylesheet_path(name)
+    end
+
+    link + noscript
+  end
+
+  def inline_js(name)
+    IziLightup::InlineAsset.inline_js(name).html_safe
+  end
+
+  def inline_css(name)
+    raw = IziLightup::InlineAsset.inline_css(name).html_safe
+    raw = "<!-- CRIT CSS: #{name} -->".html_safe + raw if Rails.env.development?
+    raw
+  end
+
+  def critical_js
+    inline_js('crit-utils/bundle.js').presence || '<!-- CRIT JS NOT FOUND! -->'.html_safe
+  end
+
+  def critical_css
+    name = find_scoped_css('critical')
+    return '<!-- CRIT CSS NOT FOUND! -->'.html_safe if name.blank?
+
+    return inline_css(name) if Rails.env.production?
+
+    # inject measure js for development
+    inline_css(name) + inline_js('utils/measure.js')
+  end
+
+  def smart_picture(object, fields = %i[picture], versions = [], params = {})
+    return '' if object.blank?
+
+    IziLightup::SmartPicture.render(object, fields, versions, params)
+  end
+
+  private
+
+  def find_scoped_css(scope_name)
+    [
+      File.join(scope_name, "#{controller_path}_#{action_name}.css"),
+      File.join(scope_name, "#{controller_path}.css"),
+      File.join(scope_name, "#{controller_name}_#{action_name}.css"),
+      File.join(scope_name, "#{controller_name}.css"),
+      "#{scope_name}.css"
+    ].detect { |n| asset_exist?(n) }
+  end
+
+  def fetch_items(object, fields)
+    Array.wrap(fields).map do |name|
+      object.respond_to?(name) ? object.public_send(name) : nil
+    end.compact
+  end
+
+  def asset_exist?(name)
+    Rails.application.assets_manifest.find_sources(name)&.first&.present?
+  end
+end

data/lib/izi_lightup.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require 'izi_lightup/version'
+require 'pathname'
+
+module IziLightup
+  class << self
+    def configure
+      yield self
+    end
+  end
+
+  autoload :InlineAsset, 'izi_lightup/inline_asset'
+  autoload :SmartPicture, 'izi_lightup/smart_picture'
+
+  class << self
+    def root_path
+      @root_path ||= Pathname.new(File.dirname(File.expand_path(__dir__)))
+    end
+  end
+end
+
+require 'izi_lightup/engine'

data/lib/izi_lightup/engine.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module IziLightup
+  class Engine < ::Rails::Engine
+    engine_name 'izi_lightup'
+
+    require_relative 'extentions/autoload_paths'
+
+    config.assets.precompile += %w[
+      crit-utils/measure.js
+      crit-utils/bundle.js
+
+      loadCSS.js
+      cssrelpreload.js
+    ]
+  end
+end

data/lib/izi_lightup/extentions/autoload_paths.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+# isolate_namespace IziLightup
+IziLightup::Engine.config.autoload_paths += %W[
+  #{IziLightup.root_path}/app/helpers
+]

data/lib/izi_lightup/inline_asset.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module IziLightup
+  module InlineAsset
+    class << self
+      def inline_file(paths, format = nil)
+        Array.wrap(paths).map do |asset_path|
+          raw_source(with_ext(asset_path, format))
+        end.join("\n" * 3)
+      end
+
+      def inline_js(paths = [])
+        return '' if paths.blank?
+
+        "<script type='text/javascript'>#{inline_file(paths, :js)}</script>"
+      end
+
+      def inline_css(paths = [])
+        return '' if paths.blank?
+
+        "<style type='text/css'>#{inline_file(paths, :css)}</style>"
+      end
+
+      private
+
+      def with_ext(path, format = nil)
+        return path if format.nil?
+
+        ext = File.extname(path)
+        return path if ext.present?
+
+        "#{path}.#{format}"
+      end
+
+      def raw_source(asset_path)
+        manifest.find_sources(asset_path).first&.html_safe
+      end
+
+      def manifest
+        @manifest ||= Rails.application.assets_manifest
+      end
+    end
+  end
+end

data/lib/izi_lightup/smart_picture.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module IziLightup
+  module SmartPicture
+    include ActionView::Helpers::AssetTagHelper
+
+    class << self
+      def render(object, fields = %i[picture], versions = [], params = {})
+        return '' if object.blank?
+
+        items = fetch_items(object, fields)
+        return '' if items.blank?
+
+        versions = Array.wrap(versions)
+        items.each do |item|
+          next unless item.respond_to?(:data)
+
+          versions.each do |version_name|
+            next unless version_name == :default || item.data.respond_to?(version_name)
+
+            version = version_name == :default ? item.data : item.data.public_send(version_name)
+            next if version&.url&.blank?
+
+            url = version.url
+            params.merge!(%i[width height].zip(version.dimensions).to_h)
+            return image_tag(url, params) unless block_given?
+
+            yield(url, params)
+            return ''
+          end
+        end
+
+        ''
+      end
+    end
+  end
+end

data/lib/izi_lightup/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module IziLightup
+  VERSION = '0.0.0.1'
+end

data/vendor/assets/javascripts/cssrelpreload.js

@@ -0,0 +1,43 @@
+/*! CSS rel=preload polyfill. Depends on loadCSS function. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT  */
+(function( w ){
+  // rel=preload support test
+  if( !w.loadCSS ){
+    return;
+  }
+  var rp = loadCSS.relpreload = {};
+  rp.support = function(){
+    try {
+      return w.document.createElement( "link" ).relList.supports( "preload" );
+    } catch (e) {
+      return false;
+    }
+  };
+
+  // loop preload links and fetch using loadCSS
+  rp.poly = function(){
+    var links = w.document.getElementsByTagName( "link" );
+    for( var i = 0; i < links.length; i++ ){
+      var link = links[ i ];
+      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" ){
+        w.loadCSS( link.href, link );
+        link.rel = null;
+      }
+    }
+  };
+
+  // if link[rel=preload] is not supported, we must fetch the CSS manually using loadCSS
+  if( !rp.support() ){
+    rp.poly();
+    var run = w.setInterval( rp.poly, 300 );
+    if( w.addEventListener ){
+      w.addEventListener( "load", function(){
+        w.clearInterval( run );
+      } );
+    }
+    if( w.attachEvent ){
+      w.attachEvent( "onload", function(){
+        w.clearInterval( run );
+      } )
+    }
+  }
+}( this ));

data/vendor/assets/javascripts/loadCSS.js

@@ -0,0 +1,79 @@
+/*! loadCSS: load a CSS file asynchronously. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT */
+(function(w){
+  "use strict";
+  /* exported loadCSS */
+  var loadCSS = function( href, before, media ){
+    // Arguments explained:
+    // `href` [REQUIRED] is the URL for your CSS file.
+    // `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
+      // By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
+    // `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
+    var doc = w.document;
+    var ss = doc.createElement( "link" );
+    var ref;
+    if( before ){
+      ref = before;
+    }
+    else {
+      var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
+      ref = refs[ refs.length - 1];
+    }
+
+    var sheets = doc.styleSheets;
+    ss.rel = "stylesheet";
+    ss.href = href;
+    // temporarily set media to something inapplicable to ensure it'll fetch without blocking render
+    ss.media = "only x";
+
+    // wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
+    function ready( cb ){
+      if( doc.body ){
+        return cb();
+      }
+      setTimeout(function(){
+        ready( cb );
+      });
+    }
+    // Inject link
+      // Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
+      // Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
+    ready( function(){
+      ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
+    });
+    // A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
+    var onloadcssdefined = function( cb ){
+      var resolvedHref = ss.href;
+      var i = sheets.length;
+      while( i-- ){
+        if( sheets[ i ].href === resolvedHref ){
+          return cb();
+        }
+      }
+      setTimeout(function() {
+        onloadcssdefined( cb );
+      });
+    };
+
+    function loadCB(){
+      if( ss.addEventListener ){
+        ss.removeEventListener( "load", loadCB );
+      }
+      ss.media = media || "all";
+    }
+
+    // once loaded, set link's media back to `all` so that the stylesheet applies once it loads
+    if( ss.addEventListener ){
+      ss.addEventListener( "load", loadCB);
+    }
+    ss.onloadcssdefined = onloadcssdefined;
+    onloadcssdefined( loadCB );
+    return ss;
+  };
+  // commonjs
+  if( typeof exports !== "undefined" ){
+    exports.loadCSS = loadCSS;
+  }
+  else {
+    w.loadCSS = loadCSS;
+  }
+}( typeof global !== "undefined" ? global : this ));

metadata

@@ -0,0 +1,59 @@
+--- !ruby/object:Gem::Specification
+name: izi_lightup
+version: !ruby/object:Gem::Version
+  version: 0.0.0.1
+platform: ruby
+authors:
+- IzikAJ
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-08-31 00:00:00.000000000 Z
+dependencies: []
+description: |-
+  Utils to speed up page load by using critical css &
+                    deferred scripts initialization
+email: izikaj@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.rdoc
+- app/assets/javascripts/crit-utils/active_emit.js.coffee
+- app/assets/javascripts/crit-utils/bundle.js
+- app/assets/javascripts/crit-utils/measure.js
+- app/assets/javascripts/crit-utils/measure/cls.js.coffee
+- app/assets/javascripts/crit-utils/mini_require.js.coffee
+- app/assets/javascripts/crit-utils/wait_for.js.coffee
+- app/helpers/critical_helper.rb
+- lib/izi_lightup.rb
+- lib/izi_lightup/engine.rb
+- lib/izi_lightup/extentions/autoload_paths.rb
+- lib/izi_lightup/inline_asset.rb
+- lib/izi_lightup/smart_picture.rb
+- lib/izi_lightup/version.rb
+- vendor/assets/javascripts/cssrelpreload.js
+- vendor/assets/javascripts/loadCSS.js
+homepage: https://bitbucket.org/netfixllc/izi_lightup
+licenses: []
+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.0.3
+signing_key: 
+specification_version: 4
+summary: Izi Lightup
+test_files: []