theme-check 1.8.0 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e8f59cffd194662dc9f66474d70310caeec0a713a3029c92efaefbf605ee69bc
-  data.tar.gz: 7bc65dd34a4b387c13cb0395d3d1cec4d60095a7ba2c3e6fa8fc5fa50bea2df8
+  metadata.gz: e8c77dfef7eb85a2d0f29abb2b133af2988b5ecfde756a8a976c704844b522fb
+  data.tar.gz: 4acf2c7d7ec6e36282fee4e5fac6d22b28067566579e82bb14bf32bfc6bdb0d3
 SHA512:
-  metadata.gz: 2ed214b8d5abb83dd3b9ede347fc52f6ed4cce4ddc42b2e0879c24e54b21c0ff30055b5ac8b3e45c3fa5da9efc5da5343c168c6cd818af863d5a73e4841b796b
-  data.tar.gz: 8777e953d57ae33ce11c8bd527e061567ddc179dad28c612d1c7e6f80dd8a5d2534e786b86d5f55d944695c10c08f34b3aeb26057700b50b7b6642fbf8007290
+  metadata.gz: 78f577b16e6759aaa0f9ce1165c7eda732f15b1a4c2d67c4fb383773020614f9062badd8d71c946925152026f73b5655b1060c1460910ec91faeaac18f6c0c51
+  data.tar.gz: 110e8010b5a34cc44365b6c4b231afdb0951c49bf6b22b97b28ac12b51c84eef9b1ce0fb84bb69cf75a49aa4c3fe6a40ad00fd9fdf0ee0403e38db1fe1af2045

data/.gitignore

@@ -13,3 +13,4 @@ Gemfile.lock
 .rubocop-https---shopify-github-io-ruby-style-guide-rubocop-yml
 packaging/builds
 .vscode
+*.DS_Store

data/CHANGELOG.md

@@ -1,4 +1,25 @@
 
+v1.9.0 / 2021-12-01
+===================
+
+## Features
+
+  * Add Corrections as Code Actions in Language Server (quickfix + source.fixAll) (#471)
+  * Add SchemaJsonFormat check ([#512](https://github.com/shopify/theme-check/issues/512))
+  * Add checkOn{Open,Change,Save} Language Server Configurations ([#511](https://github.com/shopify/theme-check/issues/511))
+  * Add support for new filters `image_tag` + `image_url`
+    * Add autocorrection to `img_url` to ease migration
+  * Deprecate `img_tag`, `img_url`
+
+## Fixes
+
+  * Fix missing null check in ValidHTMLTranslation ([#517](https://github.com/shopify/theme-check/issues/517))
+  * Fix MatchingTranslations check + corrections ([#515](https://github.com/shopify/theme-check/issues/515))
+  * Fix RemoteAsset false positive from settings variables ([#516](https://github.com/shopify/theme-check/issues/516))
+  * Make SpaceInsideBraces work for missing cases ([#509](https://github.com/shopify/theme-check/issues/509))
+  * Fix Liquid in HTML parsing
+  * Make TranslationKeyExists also check section translations
+
 v1.8.0 / 2021-11-09
 ===================
 

data/README.md

@@ -180,3 +180,13 @@ DeprecateLazysizes:
   enabled: true
   severity: error
 ```
+
+## Language Server Configurations
+
+- `themeCheck.checkOnOpen` (default: `true`) makes it so theme check runs on file open.
+- `themeCheck.checkOnChange` (default: `true`) makes it so theme check runs on file change.
+- `themeCheck.checkOnSave` (default: `true`) makes it so theme check runs on file save.
+
+⚠️ **Note:** Quickfixes only work on a freshly checked file. If any of those configurations are turned off, you will need to rerun theme-check in order to apply quickfixes.
+
+In VS Code, these can be set directly in your `settings.json`.

data/RELEASING.md

@@ -24,6 +24,19 @@
 
 6. On [Shipit](https://shipit.shopify.io/shopify/theme-check/rubygems), deploy your commit.
 
+7. [Create a GitHub release](https://github.com/Shopify/theme-check/releases/new) for the change.
+
+   ```
+   VERSION=v1.X.Y
+   git fetch origin
+   git fetch origin --tags
+   git reset origin $VERSION
+   gh release create -t $VERSION
+   ```
+
+   (It's a good idea to copy parts of the CHANGELOG in there)
+
+
 ## Homebrew Release Process
 
 1. Release `theme-check` on RubyGems by following the steps in the previous section.

data/config/default.yml

@@ -191,3 +191,8 @@ PaginationSize:
 
 DeprecatedGlobalAppBlockType:
   enabled: true
+
+SchemaJsonFormat:
+  enabled: true
+  start_level: 0
+  indent: '  '

data/data/shopify_liquid/deprecated_filters.yml

@@ -4,6 +4,10 @@ Liquid::ColorFilter:
     - color_to_rgb
     - color_modify
 Liquid::UrlFilter:
+  img_url:
+    - image_url
+  img_tag:
+    - image_tag
   collection_img_url:
     - img_url
   product_img_url:

data/data/shopify_liquid/filters.yml

@@ -63,10 +63,11 @@ I18nFilter:
 - sentence
 - time_tag
 UrlFilter:
-- image_url
 - stylesheet_tag
 - script_tag
 - img_tag
+- image_tag
+- image_url
 - shopify_asset_url
 - payment_type_img_url
 - payment_type_svg_tag

data/docs/checks/schema_json_format.md

@@ -0,0 +1,76 @@
+# Prevent unformatted schema tags (`SchemaJsonFormat`)
+
+_Version 1.9.0+_
+
+This check exists to ensure the JSON in your schemas is pretty.
+
+It exists as a facilitator for its auto-correction. This way you can right-click fix the problem.
+
+## Examples
+
+The following examples contain code snippets that either fail or pass this check.
+
+### ✗ Fail
+
+```liquid
+{% schema %}
+{
+  "locales": {
+"en": {
+  "title": "Welcome", "product": "Product"
+},
+          "fr": { "title": "Bienvenue", "produit": "Produit" }
+  }
+}
+{% endschema %}
+```
+
+### ✓ Pass
+
+```liquid
+{% schema %}
+{
+  "locales": {
+    "en": {
+      "title": "Welcome",
+      "missing": "Product"
+    },
+    "fr": {
+      "title": "Bienvenue",
+      "missing": "TODO"
+    }
+  }
+}
+{% endschema %}
+```
+
+## Options
+
+The following example contains the default configuration for this check:
+
+```yaml
+SchemaJsonFormat:
+  enabled: true
+  severity: style
+  start_level: 0
+  indent: '  '
+```
+
+| Parameter | Description |
+| --- | --- |
+| enabled | Whether the check is enabled. |
+| severity | The [severity](https://shopify.developers/themes/tools/theme-check/configuration#check-severity) of the check. |
+| start_level | The indentation level. If you prefer an indented schema, set this to 1. |
+| indent | The character(s) used for indentation levels. |
+
+## Disabling this check
+
+ This check is safe to disable. You might want to disable this check if you do not care about the visual appearance of your schema tags.
+
+## Resources
+
+- [Rule source][codesource]
+- [Documentation source][docsource]
+
+[codesource]: /lib/theme_check/checks/schema_json_format.rb
+[docsource]: /docs/checks/schema_json_format.md

data/docs/language_server/how_to_correct_code_with_code_actions_and_execute_command.md

@@ -0,0 +1,197 @@
+# How to correct code with Code Actions, Commands and Workspace Edits
+
+The [Language Server Protocol (LSP)][lsp] empowers Language Server developers to offer refactorings, quick fixes and the execution of commands to their users. In Theme Check, we take advantage of this to offer quick fixes and autocorrection to users.
+
+This document exists to give you an overview of how that works.
+
+## Overview
+
+It goes like this:
+
+1. The Client (VS Code, vim, etc.) asks the Server for [Code Actions](#code-actions) at a character position, and the server responds with available `quickfix` and `source.fixAll` code actions.
+2. The User _may_ select one of the code actions by interacting with the UI (see [visual examples](#code-actions)). The selection triggers the Client to asks the Server to execute a `correction` [Command](#Commands) for certain [Diagnostics](#diagnostic) on behalf of the user.
+3. The Server asks the Client to apply a [Workspace Edit](#workspace-edits) to fix the diagnostics.
+
+## Sequence Diagram
+
+<img src="code-action-flow.png" width="700">
+
+<details>
+<summary>Sequence Diagram Explanation</summary>
+
+1. The Client asks the Server for [code actions](#code-actions) for the current file and character range.
+2. The Server responds with a list of code actions that can be applied for this location and character range. (`quickfix` and `source.fixAll`)
+3. ...Wait for user input...
+4. The User selects one of the code actions
+5. The Client sends a `workspace/executeCommand` request to the Server for this code action.
+6. The Server figures out the [workspace edit](#workspace-edits) for the command and arguments.
+7. The Server sends a `workspace/applyEdit` request for the file modifications that would fix the diagnostics.
+8. The Client responds with the status of the `applyEdit`.
+9. The Server cleans up its internal representation of the diagnostics and updates the client with the latest diagnostics.
+11. The Server responds to the `workspace/executeCommand` request.
+
+</details>
+
+## What it's like in the code
+
+We handle two Client->Server LSP requests:
+
+1. On `textDocument/codeAction`, our `CodeActionEngine` returns the results obtained from all `CodeActionProvider`.
+2. On `workspace/executeCommand`, our `ExecuteCommandEngine` dispatches the command and arguments to appropriate `ExecuteCommandProvider`.
+
+We define providers:
+
+- Two `CodeActionProvider`:
+  1. [`QuickFixCodeActionProvider`](/lib/theme_check/language_server/code_action_providers/quickfix_code_action_provider.rb) - This one provides code actions that fix _one_ diagnostic.
+  2. [`SourceFixAllCodeActionProvider`](/lib/theme_check/language_server/code_action_providers/source_fix_all_code_action_provider.rb) - This one provides code actions that fix _all diagnostics in the current file_.
+- One `ExecuteCommandProvider`:
+  1. [`CorrectionExecuteCommandProvider`](/lib/theme_check/language_server/execute_command_providers/correction_execute_command_provider.rb) - This one takes a list of diagnostics as arguments, turns them into a [WorkspaceEdit](#workspace-edit) and tries to apply them with the server->client `workspace/applyEdit` request.
+
+We define a [`DocumentChangeCorrector`](/lib/theme_check/language_server/document_change_corrector.rb) (an LSP analog to our [`Corrector`](/lib/theme_check/corrector.rb) class). This class turns corrector calls into document changes supported by the LSP. For more details, see the [LSP reference on resource changes][lspresourcechange].
+
+## Definitions
+
+### Code Actions
+
+A [CodeAction][lspcodeaction] is the Language Server Protocol construct for "stuff you might want to do on the code."
+
+Think refactoring, running tests, fixing lint errors, etc.
+
+The client figures out which one it can run by executing the client->server `textDocument/codeAction` request.
+
+<details>
+<summary>Visual Examples</summary>
+
+In VS Code, code actions of different kinds have special meanings and are mapped to multiple places in the UI.
+
+* `Quick Fix...` button on diagnostic hover
+
+  <img src="code-action-quickfix.png" width=500>
+
+* Diagnostic right click in the problems tab
+
+  <img src="code-action-problem.png" width=500>
+
+* Command palette `Quick Fix...` and `Fix All`
+
+  <img src="code-action-command-palette.png" width=500>
+
+* Keyboard shortcuts
+
+  <img src="code-action-keyboard.png" width=700>
+</details>
+
+<details>
+  <summary>TypeScript Interface</summary>
+
+  ```ts
+  interface CodeAction {
+    title: string; // UI string, human readable for the action
+    kind?: CodeActionKind; // OPTIONAL, for filtering
+    diagnostics?: Diagnostic[]; // The diagnostics that the action SOLVES.
+    isPreferred?: boolean; // Are used by auto fix and can be targetted by keybindings.
+    // Shown as faded out in the code action menu when the user request a more specific type of code action
+    disabled?: {
+      reason: string;
+    },
+
+    // if both edit and command are present, edit is run first then command.
+    // I think edit is used so the client performs the change, wheras the command
+    // would be done by the server
+    edit?: WorkspaceEdit; // what this action does ??!!
+    command?: Command; // the command that it executes
+    data?: any; // sent from the CodeAction to the codeAction/resolve.
+  }
+
+  interface Command {
+    title: string; // Title of the command, like `save`
+    command: string; // id
+    arguments?: any[]
+  }
+  ```
+</details>
+
+---
+
+### Commands
+
+A [Command][lspcommand] is the Language Server Protocol representation of a command that can be executed by the Server.
+
+Think of them as data representation of function calls that can be made by the Client.
+
+Typically, a command is associated with a Code Action. If the Client wants to perform this Code Action, it will make a Client->Server `workspace/executeCommand` request.
+
+<details>
+  <summary>TypeScript Interface</summary>
+
+  ```ts
+  interface Command {
+    title: string; // Title of the command, like `save`
+    command: string; // id
+    arguments?: any[]
+  }
+  ```
+</details>
+
+---
+
+### Workspace Edits
+
+A [WorkspaceEdit][lspworkspaceedit] is the Language Server Protocol construct that abstracts code changes as data.
+
+Think edit file, create file, delete file but as data.
+
+<details>
+  <summary>TypeScript Interface</summary>
+
+  ```ts
+  interface WorkspaceEdit {
+    changes?: { uri: TextEdit[] ];
+    documentChanges: (TextDocumentEdit | CreateFile | RenameFile | DeleteFile|)[];
+    changeAnnotations?: { [id: string]: ChangeAnnotation }
+  }
+
+  // see https://microsoft.github.io/language-server-protocol/specifications/specification-current/#resourceChanges
+  interface CreateFile {
+    kind: 'create';
+    uri: DocumentUri;
+    options?: CreateFileOptions;
+    annotationId?: ChangeAnnotationIdentifier;
+  }
+
+  interface TextEdit {
+    range: Range;
+    newText: string; // can be empty to delete
+  }
+
+  interface TextDocumentEdit {
+    textDocument: OptionalVersionedTextDocumentIdentifier;
+    edits: (TextEdit | AnnotatedTextEdit)[]
+  }
+
+  interface OptionalVersionedTextDocumentIdentifier {
+    uri: TextDocumentURI;
+    // null is for when the file wasn't open from the client
+    // integer is for when you know what it was.
+    version: integer | null;
+  }
+  ```
+</details>
+
+---
+
+### Diagnostic
+
+A [Diagnostic][lspdiagnostic] is the Language Server Protocol construct for errors, warnings and information bubbles.
+
+In our case, diagnostics are Theme Check offenses.
+
+They appear in the Problems tab and in the gutter of the editor.
+
+[lsp]: https://microsoft.github.io/language-server-protocol/specification
+[lspcodeaction]: https://microsoft.github.io/language-server-protocol/specification#textDocument_codeAction
+[lspcommand]: https://microsoft.github.io/language-server-protocol/specification#command
+[lspexecutecommand]: https://microsoft.github.io/language-server-protocol/specification#workspace_executeCommand
+[lspworkspaceedit]: https://microsoft.github.io/language-server-protocol/specification#workspaceEdit
+[lspdiagnostic]: https://microsoft.github.io/language-server-protocol/specifications/specification-3-17/#diagnostic
+[lspresourcechange]: https://microsoft.github.io/language-server-protocol/specifications/specification-current/#resourceChanges

data/lib/theme_check/checks/asset_size_app_block_css.rb

@@ -18,7 +18,8 @@ module ThemeCheck
     end
 
     def on_schema(node)
-      schema = JSON.parse(node.value.nodelist.join)
+      schema = node.inner_json
+      return if schema.nil?
 
       if (stylesheet = schema["stylesheet"])
         size = asset_size(stylesheet)
@@ -29,8 +30,6 @@ module ThemeCheck
           )
         end
       end
-    rescue JSON::ParserError
-      # Ignored, handled in ValidSchema.
     end
 
     private

data/lib/theme_check/checks/asset_size_app_block_javascript.rb

@@ -18,7 +18,8 @@ module ThemeCheck
     end
 
     def on_schema(node)
-      schema = JSON.parse(node.value.nodelist.join)
+      schema = node.inner_json
+      return if schema.nil?
 
       if (javascript = schema["javascript"])
         size = asset_size(javascript)
@@ -29,8 +30,6 @@ module ThemeCheck
           )
         end
       end
-    rescue JSON::ParserError
-      # Ignored, handled in ValidSchema.
     end
 
     private

data/lib/theme_check/checks/asset_url_filters.rb

@@ -8,6 +8,7 @@ module ThemeCheck
     HTML_FILTERS = [
       'stylesheet_tag',
       'script_tag',
+      'image_tag',
       'img_tag',
     ]
     ASSET_URL_FILTERS = [
@@ -16,6 +17,7 @@ module ThemeCheck
       'file_img_url',
       'file_url',
       'global_asset_url',
+      'image_url',
       'img_url',
       'payment_type_img_url',
       'shopify_asset_url',

data/lib/theme_check/checks/default_locale.rb

@@ -8,7 +8,7 @@ module ThemeCheck
     def on_end
       return if @theme.default_locale_json
       add_offense("Default translation file not found (for example locales/en.default.json)") do |corrector|
-        corrector.create_default_locale_json(@theme)
+        corrector.create_file(@theme.storage, "locales/#{theme.default_locale}.default.json", "{}")
       end
     end
   end

data/lib/theme_check/checks/deprecated_filter.rb

@@ -5,18 +5,93 @@ module ThemeCheck
     category :liquid
     severity :suggestion
 
+    # The image_url filter does not accept width or height values
+    # greater than this numbr.
+    MAX_SIZE = 5760
+
     def on_variable(node)
       used_filters = node.value.filters.map { |name, *_rest| name }
       used_filters.each do |filter|
         alternatives = ShopifyLiquid::DeprecatedFilter.alternatives(filter)
         next unless alternatives
 
-        alternatives = alternatives.map { |alt| "`#{alt}`" }
-        add_offense(
-          "Deprecated filter `#{filter}`, consider using an alternative: #{alternatives.join(', ')}",
-          node: node,
+        case filter
+        when 'img_url'
+          add_img_url_offense(node)
+        else
+          add_default_offense(node, filter, alternatives)
+        end
+      end
+    end
+
+    def add_default_offense(node, filter, alternatives)
+      alternatives = alternatives.map { |alt| "`#{alt}`" }
+      add_offense(
+        "Deprecated filter `#{filter}`, consider using an alternative: #{alternatives.join(', ')}",
+        node: node,
+      )
+    end
+
+    def add_img_url_offense(node)
+      img_url_filter = node.value.filters.find { |filter| filter[0] == "img_url" }
+      _name, img_url_filter_size, img_url_filter_props = img_url_filter
+      size_spec = img_url_filter_size&.dig(0)
+      scale = img_url_filter_props&.delete("scale")
+
+      # Can't correct those.
+      return add_default_offense(node, 'img_url', ['image_url']) unless
+       (size_spec.nil? || size_spec.is_a?(String)) &&
+       (scale.nil? || scale.is_a?(Numeric)) &&
+       size_spec != 'small'
+
+      node_source = node.markup
+      node_start_index = node.start_index
+      match = node_source.match(/img_url[^|]*/)
+      img_url_character_range =
+        (node_start_index + match.begin(0))...(node_start_index + match.end(0))
+
+      scale = (scale || 1).to_i
+      width, height = (size_spec&.split('x') || [100, 100])
+        .map { |v| v.to_i * scale }
+
+      image_url_filter_params = [
+        width && width > 0 ? "width: #{[width, MAX_SIZE].min}" : nil,
+        height && height > 0 ? "height: #{[height, MAX_SIZE].min}" : nil,
+      ]
+      image_url_filter_params += (img_url_filter_props || {})
+        .map do |k, v|
+          case v
+          when Liquid::VariableLookup
+            "#{k}: #{v.name}"
+          else
+            "#{k}: #{v}"
+          end
+        end
+      image_url_filter_params = image_url_filter_params
+        .reject(&:nil?)
+        .join(", ")
+
+      trailing_whitespace = match[0].match(/\s*\Z/)[0]
+
+      image_url_filter = "image_url"
+      image_url_filter += ": " + image_url_filter_params unless image_url_filter_params.empty?
+      image_url_filter += trailing_whitespace
+
+      add_offense(
+        "Deprecated filter `img_url`, consider using `image_url`",
+        node: node,
+        markup: match[0]
+      ) do |corrector|
+        corrector.replace(
+          node,
+          image_url_filter,
+          img_url_character_range,
         )
       end
+
+    # If anything goes wrong, fail gracefully by returning the default offense.
+    rescue
+      add_default_offense(node, 'img_url', ['image_url'])
     end
   end
 end

data/lib/theme_check/checks/deprecated_global_app_block_type.rb

@@ -9,7 +9,8 @@ module ThemeCheck
     VALID_GLOBAL_APP_BLOCK_TYPE = "@app"
 
     def on_schema(node)
-      schema = JSON.parse(node.value.nodelist.join)
+      schema = node.inner_json
+      return if schema.nil?
 
       if block_types_from(schema).include?(INVALID_GLOBAL_APP_BLOCK_TYPE)
         add_offense(
@@ -17,8 +18,6 @@ module ThemeCheck
           node: node
         )
       end
-    rescue JSON::ParserError
-      # Ignored, handled in ValidSchema.
     end
 
     def on_case(node)

data/lib/theme_check/checks/matching_schema_translations.rb

@@ -6,7 +6,8 @@ module ThemeCheck
     doc docs_url(__FILE__)
 
     def on_schema(node)
-      schema = JSON.parse(node.value.nodelist.join)
+      schema = node.inner_json
+      return if schema.nil?
       # Get all locales used in the schema
       used_locales = Set.new([theme.default_locale])
       visit_object(schema) do |_, locales|
@@ -21,17 +22,14 @@ module ThemeCheck
           add_offense("#{key} missing translations for #{missing.join(', ')}", node: node) do |corrector|
             key = key.split(".")
             missing.each do |language|
-              corrector.schema_corrector(schema, key + [language], "TODO")
+              SchemaHelper.schema_corrector(schema, key + [language], "TODO")
             end
-            corrector.replace_block_body(node, schema)
+            corrector.replace_inner_json(node, schema)
           end
         end
       end
 
       check_locales(schema, node: node)
-
-    rescue JSON::ParserError
-      # Ignored, handled in ValidSchema.
     end
 
     private

data/lib/theme_check/checks/matching_translations.rb

@@ -13,6 +13,7 @@ module ThemeCheck
     def on_file(file)
       return unless file.name.start_with?("locales/")
       return unless file.content.is_a?(Hash)
+      return if file.name =~ /\.schema$/
       return if file.name == @theme.default_locale_json&.name
 
       @files << file

data/lib/theme_check/checks/missing_required_template_files.rb

@@ -25,15 +25,15 @@ module ThemeCheck
     def on_end
       (REQUIRED_LIQUID_FILES - theme.liquid.map(&:name)).each do |file|
         add_offense("'#{file}.liquid' is missing") do |corrector|
-          corrector.create(@theme, "#{file}.liquid", "")
+          corrector.create_file(@theme.storage, "#{file}.liquid", "")
         end
       end
       (REQUIRED_TEMPLATE_FILES - (theme.liquid + theme.json).map(&:name)).each do |file|
         add_offense("'#{file}.liquid' or '#{file}.json' is missing") do |corrector|
           if REQUIRED_LIQUID_TEMPLATE_FILES.include?(file)
-            corrector.create(@theme, "#{file}.liquid", "")
+            corrector.create_file(@theme.storage, "#{file}.liquid", "")
           else
-            corrector.create(@theme, "#{file}.json", "")
+            corrector.create_file(@theme.storage, "#{file}.json", "")
           end
         end
       end

data/lib/theme_check/checks/missing_template.rb

@@ -35,7 +35,7 @@ module ThemeCheck
       path = "#{name}.liquid"
       unless ignore?(path) || theme[name]
         add_offense("'#{path}' is not found", node: node) do |corrector|
-          corrector.create(@theme, "#{name}.liquid", "")
+          corrector.create_file(@theme.storage, "#{name}.liquid", "")
         end
       end
     end

data/lib/theme_check/checks/pagination_size.rb

@@ -27,13 +27,12 @@ module ThemeCheck
     end
 
     def on_schema(node)
-      schema = JSON.parse(node.value.nodelist.join)
+      schema = node.inner_json
+      return if schema.nil?
 
       if (settings = schema["settings"])
         @schema_settings = settings
       end
-    rescue JSON::ParserError
-      # Ignored, handled in ValidSchema.
     end
 
     ##