Class: ThemeCheck::AssetSizeJavaScript

Inherits:
HtmlCheck show all
Includes:
RegexHelpers
Defined in:
lib/theme_check/checks/asset_size_javascript.rb

Overview

Reports errors when trying to use too much JavaScript on page load Encourages the use of the Import on Interaction pattern [1]. [1]: addyosmani.com/blog/import-on-interaction/

Constant Summary

Constants included from RegexHelpers

RegexHelpers::START_OR_END_QUOTE, RegexHelpers::VARIABLE

Constants inherited from HtmlCheck

HtmlCheck::START_OR_END_QUOTE, HtmlCheck::VARIABLE

Constants inherited from Check

Check::CATEGORIES, Check::SEVERITIES, Check::SEVERITY_VALUES

Instance Attribute Summary collapse

Attributes inherited from Check

#ignored_patterns, #offenses, #options, #theme

Instance Method Summary collapse

Methods included from RegexHelpers

#href_to_file_size, #matches

Methods included from ChecksTracking

#inherited

Methods inherited from Check

#==, #add_offense, all, can_disable, #can_disable?, categories, #categories, category, #code_name, doc, #doc, docs_url, #ignore!, #ignored?, #severity, severity, #severity=, #severity_value, severity_value, single_file, #single_file?, #to_s, #whole_theme?

Methods included from JsonHelpers

#format_json_parse_error

Constructor Details

#initialize(threshold_in_bytes: 10000) ⇒ AssetSizeJavaScript

Returns a new instance of AssetSizeJavaScript.



14
15
16
 
# File 'lib/theme_check/checks/asset_size_javascript.rb', line 14

def initialize(threshold_in_bytes: 10000)
  @threshold_in_bytes = threshold_in_bytes
end

Instance Attribute Details

#threshold_in_bytes ⇒ Object (readonly)

Returns the value of attribute threshold_in_bytes.



12
13
14
 
# File 'lib/theme_check/checks/asset_size_javascript.rb', line 12

def threshold_in_bytes
  @threshold_in_bytes
end

Instance Method Details

#on_script(node) ⇒ Object 



18
19
20
21
22
23
24
25
26
 
# File 'lib/theme_check/checks/asset_size_javascript.rb', line 18

def on_script(node)
  file_size = src_to_file_size(node.attributes['src']&.value)
  return if file_size.nil?
  return if file_size <= threshold_in_bytes
  add_offense(
    "JavaScript on every page load exceeds compressed size threshold (#{threshold_in_bytes} Bytes), consider using the import on interaction pattern.",
    node: node
  )
end

#src_to_file_size(src) ⇒ Object 



28
29
30
31
32
33
34
35
36
37
38
39
40
 
# File 'lib/theme_check/checks/asset_size_javascript.rb', line 28

def src_to_file_size(src)
  # We're kind of intentionally only looking at {{ 'asset' | asset_url }} or full urls in here.
  # More complicated liquid statements are not in scope.
  if src =~ /^#{VARIABLE}$/o && src =~ /asset_url/ && src =~ Liquid::QuotedString
    asset_id = Regexp.last_match(0).gsub(START_OR_END_QUOTE, "")
    asset = @theme.assets.find { |a| a.name.end_with?("/" + asset_id) }
    return if asset.nil?
    asset.gzipped_size
  elsif src =~ %r{^(https?:)?//}
    asset = RemoteAssetFile.from_src(src)
    asset.gzipped_size
  end
end