theme-check 0.3.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a07597b217b1f596cd5e777726950e396934726f3572bc7660129bec2b3b30c8
-  data.tar.gz: 80e54966286e332f3308021b9347feb4cdb683497991b9bb451dcf58f138a2df
+  metadata.gz: 7beb3a827afcd22a262b82b436ed03a7130a1237ab11351bf4e1b36769c62d1a
+  data.tar.gz: a92529eac6dcaa689b708ecfda3e53a6b132e61ae01f26ae3ebb0bf3ec03e962
 SHA512:
-  metadata.gz: 4c7a1c159dd1b688618c95e1e5fb943a133b606878f57c91b12e5793b07022325c5cfb2e81c49cb45ea484cb3688c6f7c2b75af1b2a50f13da6db2ba0e8b0bb3
-  data.tar.gz: 83fe6a74375ecf2b58f14681c99bc672a710cd6bbc70cb5f58ff06332d4123171544f6cf73c6e7f5f750c1a870d17de0ce3bd3e1f9cbfca6e1bdc7fceb767b80
+  metadata.gz: dd4554837884b203c2bca10cdbd09e29d0f485d814c8aff72d8680d1d7f44e82e8bef74b192953aba8a61622434ff3f466a24109f6eb3bee83500585f462672f
+  data.tar.gz: 75ece7d25c463748ae1d810920b488e732e50602988f3dd40bccb25a649af4d9336d4a3dc12310dbb1b53e1492728f8900da1050759e43e826457991f0bf6a11

data/.rubocop.yml

@@ -7,6 +7,7 @@ AllCops:
   TargetRubyVersion: 2.7
   Exclude:
     - 'vendor/bundle/**/*'
+    - 'packaging/builds/**/*'
 
 Metrics/MethodLength:
   Enabled: false
@@ -16,3 +17,9 @@ Layout/LineLength:
 
 Lint/MissingSuper:
   Enabled: false
+
+Style/StringLiterals:
+  Enabled: false
+
+Style/StringLiteralsInInterpolation:
+  Enabled: false

data/CHANGELOG.md

@@ -0,0 +1,50 @@
+
+0.5.0 / 2021-03-12
+==================
+
+  * Add [AssetSizeJavaScript](/docs/checks/asset_size_javascript.md) check ([#194](https://github.com/Shopify/theme-check/pull/194))
+  * Add [documentation for all checks](/docs/checks)
+  * Make documentation for checks mandatory
+  * Add link to documentation from within the editor (via `codeDescription` in the Language Server) (![Demo](https://screenshot.click/10-29-cjx7r-4asor.mp4))
+  * Allow checks to have multiple categories
+  * Fix multiple occurrences of UndefinedObject not being reported ([#192](https://github.com/shopify/theme-check/issues/192))
+
+v0.4.0 / 2021-02-25
+==================
+
+  * Add Completion Engine ([#161](https://github.com/shopify/theme-check/issues/161))
+  * Add init command to CLI ([#174](https://github.com/shopify/theme-check/issues/174))
+  * Refactor start and end Position logic ([#172](https://github.com/shopify/theme-check/issues/172))
+
+v0.3.3 / 2021-02-18
+==================
+
+  * Fix column_end issues ([#164](https://github.com/Shopify/theme-check/issues/164))
+  * Fix stack overflow in UndefinedObject + UnusedAssign when snippets renders itself ([#165](https://github.com/Shopify/theme-check/issues/165))
+
+v0.3.2 / 2021-02-17
+==================
+
+  * Ignore snippets in UndefinedObject check
+
+v0.3.1 / 2021-02-16
+===================
+
+  * Fixup version flag
+
+v0.3.0 / 2021-02-16
+===================
+
+  * Add ParserBlockingJavaScript Check ([#78](https://github.com/Shopify/theme-check/issues/78), [#146](https://github.com/Shopify/theme-check/issues/146))
+  * Internal refactor to enable running theme-check in servers ([#145](https://github.com/Shopify/theme-check/issues/145), [#148](https://github.com/Shopify/theme-check/issues/148))
+  * Add -v, --version flag ([#126](https://github.com/Shopify/theme-check/issues/126))
+  * Exclude content of {% schema %} in line count for TemplateLength ([#140](https://github.com/Shopify/theme-check/issues/140))
+  * Fix Language Server removed files bug ([#136](https://github.com/Shopify/theme-check/issues/136))
+  * Add ignore config ([#147](https://github.com/Shopify/theme-check/issues/147))
+  * Add ability to disable checks with comments ([#79](https://github.com/Shopify/theme-check/issues/79))
+  * Adding checks for shopify plus objects in checkout ([#121](https://github.com/Shopify/theme-check/issues/121))
+
+v0.2.2 / 2021-01-22
+===================
+
+  * [Language Server] Send empty dianogstics to flush errors

data/CONTRIBUTING.md

@@ -44,7 +44,6 @@ module ThemeCheck
   # NOTE: inherit from JsonCheck to implement a JSON based check.
   class MyCheckName < LiquidCheck
     severity :suggestion # :error or :style
-    doc "https://..."    # Optional link to doc
 
     def on_document(node)
       # Called with the root node of all templates
@@ -122,7 +121,7 @@ module ThemeCheck
 end
 ```
 
-Add the new check to `config/default.yml` to enable it.
+Add the new check to `config/default.yml` to enable it. If the check is configurable, the `initialize` argument name and default values should also be duplicated inside `config/default.yml`.
 
 ```yaml
 MyCheckName:
@@ -131,4 +130,8 @@ MyCheckName:
 
 Add a corresponding test file under `test/checks`.
 
+Add a documentation file in `docs/checks/#{name_of_check}.md` based off of the [check documentation template][doctemplate].
+
 When done, run the tests with `dev test`.
+
+[doctemplate]: /docs/checks/CHECK_DOCS_TEMPLATE.md

data/README.md

@@ -8,8 +8,6 @@ Theme Check is also available [inside some code editors](https://github.com/Shop
 
 ![](docs/preview.png)
 
-_Disclaimer: This tool is not supported as part of the Partners program._
-
 ## Supported Checks
 
 Theme Check currently checks for the following:
@@ -34,7 +32,14 @@ Theme Check currently checks for the following:
 ✅ Deprecated filters  
 ✅ Missing `theme-check-enable` comment  
 
-And many more to come! Suggestions welcome ([create an issue](https://github.com/Shopify/theme-check/issues)).
+As well as checks that prevent easy to spot performance problems:
+
+✅ Use of [parser-blocking](/docs/checks/parser_blocking_javascript.md) JavaScript  
+✅ [Too much JavaScript](/docs/checks/asset_size_javascript.md)  
+
+For detailed descriptions and configuration options, [take a look at the complete list.](/docs/checks/)
+
+With more to come! Suggestions welcome ([create an issue](https://github.com/Shopify/theme-check/issues)).
 
 ## Requirements
 
@@ -89,7 +94,7 @@ TemplateLength:
   enabled: false
   # Or configure options
   max_length: 300
-  
+
 # Enable a custom check
 MyCustomCheck
   enabled: true

data/RELEASING.md

@@ -2,7 +2,7 @@
 
 1. Check the Semantic Versioning page for info on how to version the new release: http://semver.org
 
-2. Create a PR to update the version in `lib/theme_check/version.rb`
+2. Create a PR to update the version in `lib/theme_check/version.rb` and replace the `THEME_CHECK_VERSION` placeholder in the documentation for new rules.
 
 3. Merge your PR to master
 
@@ -22,7 +22,7 @@
 
    ```bash
    VERSION=X.X.X
-   cp packaging/builds/$VERSION/theme-check ../homebrew-shopify
+   cp packaging/builds/$VERSION/theme-check.rb ../homebrew-shopify
    ```
 
 4. Create a branch + a commit on the [`homebrew-shopify`](https://github.com/Shopify/homebrew-shopify) repository.

data/config/default.yml

@@ -10,12 +10,14 @@ ConvertIncludeToRender:
 
 LiquidTag:
   enabled: true
+  min_consecutive_statements: 4
 
 MissingTemplate:
   enabled: true
 
 NestedSnippet:
   enabled: true
+  max_nesting_level: 2
 
 RequiredLayoutThemeObject:
   enabled: true
@@ -67,6 +69,7 @@ MissingRequiredTemplateFiles:
 
 UndefinedObject:
   enabled: true
+  exclude_snippets: true
 
 RequiredDirectories:
   enabled: true
@@ -79,3 +82,7 @@ MissingEnableComment:
 
 ParserBlockingJavaScript:
   enabled: true
+
+AssetSizeJavaScript:
+  enabled: false
+  threshold_in_bytes: 10000

data/data/shopify_liquid/tags.yml

@@ -0,0 +1,27 @@
+---
+- assign
+- break
+- capture
+- case
+- comment
+- continue
+- cycle
+- decrement
+- echo
+- for
+- form
+- if
+- ifchanged
+- increment
+- javascript
+- layout
+- liquid
+- paginate
+- raw
+- render
+- schema
+- section
+- style
+- stylesheet
+- tablerow
+- unless

data/docs/checks/CHECK_DOCS_TEMPLATE.md

@@ -0,0 +1,47 @@
+# Check Title (`CheckClassName`)
+
+A brief paragraph explaining why the check exists.
+
+## Check Details
+
+This check is aimed at eliminating ...
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+CheckClassName:
+  enabled: true
+  some_option: 10
+```
+
+### `some_option`
+
+The `some_option` option (Default: `10`) determines ...
+
+## When Not To Use It
+
+If you don't want to ..., then it's safe to disable this rule.
+
+## Version
+
+This check has been introduced in Theme Check X.X.X.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/check_class_name.rb
+[docsource]: /docs/checks/check_class_name.md

data/docs/checks/asset_size_javascript.md

@@ -0,0 +1,79 @@
+# Prevent JavaScript Abuse on Server Rendered Themes (`AssetSizeJavaScript`)
+
+For server rendered pages, it is an anti-pattern to execute large JavaScript bundles on every navigation.
+
+This doesn't mean they don't have a reason to exist. For instance, chat widgets are mini applications embedded inside web pages. Designing such an app with server rendered updates would be absurd. However, if only 10% of the users interact with the chat widget, the other 90% should not have to execute the entire bundle on every page load.
+
+The natural solution to this problem is to implement the chat widget using the [Import on Interaction Pattern][ioip].
+
+## Check Details
+
+This rule disallows the use of theme JavaScript files and external scripts to have a compressed size greater than a configured `threshold_in_bytes`.
+
+:-1: Examples of **incorrect** code for this check:
+```liquid
+<!-- Here assets/chat-widget.js is more than 10KB gzipped. -->
+<script src="{{ 'chat-widget.js' | asset_url }}" defer></script>
+
+<!-- The use of jQuery is discouraged in themes -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
+```
+
+:+1: Example of **correct** code for this check:
+```liquid
+<script>
+  const chatWidgetButton = document.getElementById('#chat-widget')
+
+  chatWidgetButton.addEventListener('click', e => {
+    e.preventDefault();
+    import("{{ 'chat-widget.js' | asset_url }}")
+      .then(module => module.default)
+      .then(ChatWidget => ChatWidget.init())
+      .catch(err => {
+        console.error(err);
+      });
+  });
+</script>
+```
+
+## Check Options
+
+The default configuration is the following.
+
+```yaml
+AssetSizeJavaScript:
+  enabled: false
+  threshold_in_bytes: 10000
+```
+
+### `threshold_in_bytes`
+
+The `threshold_in_bytes` option (default: `10000`) determines the maximum allowed compressed size in bytes that a single JavaScript file can take.
+
+This includes theme and remote scripts.
+
+## When Not To Use It
+
+When you can't do anything about it, it is preferable to disable this rule using the comment syntax:
+
+```
+{% comment %}theme-check-disable AssetSizeJavaScript{% endcomment %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
+{% comment %}theme-check-enable AssetSizeJavaScript{% endcomment %}
+```
+
+This makes disabling the rule an explicit affair and shows that the code is smelly.
+
+## Version
+
+This check has been introduced in Theme Check 0.5.0.
+
+## Resources
+
+- [The Import On Interaction Pattern][ioip]
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[ioip]: https://addyosmani.com/blog/import-on-interaction/
+[codesource]: /lib/theme_check/checks/asset_size_javascript.rb
+[docsource]: /docs/checks/asset_size_javascript.md

data/docs/checks/convert_include_to_render.md

@@ -0,0 +1,48 @@
+# Discourage the use of `include` (`ConvertIncludeToRender`)
+
+The `include` tag is [deprecated][deprecated]. This tag exists to enforce the use of the `render` tag instead of `include`.
+
+The `include` tag works similarly to the `render` tag, but it lets the code inside of the snippet to access and overwrite the variables within its parent template. The `include` tag has been deprecated because the way that it handles variables reduces performance and makes theme code harder to both read and maintain.
+
+## Check Details
+
+This check is aimed at eliminating the use of `include` tags.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+{% include 'snippet' %}
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+{% render 'snippet' %}
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+ConvertIncludeToRender:
+  enabled: true
+```
+
+## When Not To Use It
+
+It is discouraged to disable this rule.
+
+## Version
+
+This check has been introduced in Theme Check 0.1.0.
+
+## Resources
+
+- [Deprecated Tags Reference][deprecated]
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[deprecated]: https://shopify.dev/docs/themes/liquid/reference/tags/deprecated-tags#include
+[codesource]: /lib/theme_check/checks/convert_include_to_render.rb
+[docsource]: /docs/checks/convert_include_to_render.md

data/docs/checks/default_locale.md

@@ -0,0 +1,46 @@
+# Ensure theme has a default locale (`DefaultLocale`)
+
+This check makes sure the theme has a default translation file.
+
+## Check Details
+
+This check makes sure a theme has a default locale.
+
+:-1: Example of **incorrect** theme for this check:
+
+```
+locales/
+├── en.json
+├── fr.json
+└── zh-TW.json
+```
+
+:+1: Example of **correct** theme for this check:
+
+```
+locales/
+├── en.default.json  # a default translation file is required
+├── fr.json
+└── zh-TW.json
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+DefaultLocale:
+  enabled: true
+```
+
+## Version
+
+This check has been introduced in Theme Check 0.1.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/default_locale.rb
+[docsource]: /docs/checks/default_locale.md