theme-check 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.rubocop.yml +6 -0
- data/CHANGELOG.md +10 -0
- data/CONTRIBUTING.md +5 -2
- data/README.md +9 -2
- data/RELEASING.md +1 -1
- data/config/default.yml +6 -0
- data/data/shopify_liquid/tags.yml +1 -0
- data/docs/checks/CHECK_DOCS_TEMPLATE.md +47 -0
- data/docs/checks/asset_size_javascript.md +79 -0
- data/docs/checks/convert_include_to_render.md +48 -0
- data/docs/checks/default_locale.md +46 -0
- data/docs/checks/deprecated_filter.md +46 -0
- data/docs/checks/liquid_tag.md +65 -0
- data/docs/checks/matching_schema_translations.md +93 -0
- data/docs/checks/matching_translations.md +72 -0
- data/docs/checks/missing_enable_comment.md +50 -0
- data/docs/checks/missing_required_template_files.md +26 -0
- data/docs/checks/missing_template.md +40 -0
- data/docs/checks/nested_snippet.md +69 -0
- data/docs/checks/parser_blocking_javascript.md +97 -0
- data/docs/checks/required_directories.md +25 -0
- data/docs/checks/required_layout_theme_object.md +28 -0
- data/docs/checks/space_inside_braces.md +63 -0
- data/docs/checks/syntax_error.md +49 -0
- data/docs/checks/template_length.md +50 -0
- data/docs/checks/translation_key_exists.md +63 -0
- data/docs/checks/undefined_object.md +53 -0
- data/docs/checks/unknown_filter.md +45 -0
- data/docs/checks/unused_assign.md +47 -0
- data/docs/checks/unused_snippet.md +32 -0
- data/docs/checks/valid_html_translation.md +53 -0
- data/docs/checks/valid_json.md +60 -0
- data/docs/checks/valid_schema.md +50 -0
- data/lib/theme_check.rb +3 -0
- data/lib/theme_check/asset_file.rb +34 -0
- data/lib/theme_check/check.rb +19 -9
- data/lib/theme_check/checks/asset_size_javascript.rb +74 -0
- data/lib/theme_check/checks/convert_include_to_render.rb +1 -1
- data/lib/theme_check/checks/default_locale.rb +1 -0
- data/lib/theme_check/checks/deprecated_filter.rb +1 -1
- data/lib/theme_check/checks/liquid_tag.rb +3 -3
- data/lib/theme_check/checks/matching_schema_translations.rb +1 -0
- data/lib/theme_check/checks/matching_translations.rb +1 -0
- data/lib/theme_check/checks/missing_enable_comment.rb +1 -0
- data/lib/theme_check/checks/missing_required_template_files.rb +1 -2
- data/lib/theme_check/checks/missing_template.rb +1 -0
- data/lib/theme_check/checks/nested_snippet.rb +1 -0
- data/lib/theme_check/checks/parser_blocking_javascript.rb +2 -1
- data/lib/theme_check/checks/required_directories.rb +1 -1
- data/lib/theme_check/checks/required_layout_theme_object.rb +1 -1
- data/lib/theme_check/checks/space_inside_braces.rb +1 -0
- data/lib/theme_check/checks/syntax_error.rb +1 -0
- data/lib/theme_check/checks/template_length.rb +1 -0
- data/lib/theme_check/checks/translation_key_exists.rb +1 -0
- data/lib/theme_check/checks/undefined_object.rb +10 -4
- data/lib/theme_check/checks/unknown_filter.rb +1 -0
- data/lib/theme_check/checks/unused_assign.rb +1 -0
- data/lib/theme_check/checks/unused_snippet.rb +1 -0
- data/lib/theme_check/checks/valid_html_translation.rb +1 -0
- data/lib/theme_check/checks/valid_json.rb +1 -0
- data/lib/theme_check/checks/valid_schema.rb +1 -0
- data/lib/theme_check/config.rb +2 -2
- data/lib/theme_check/language_server/completion_helper.rb +0 -10
- data/lib/theme_check/language_server/completion_provider.rb +1 -0
- data/lib/theme_check/language_server/handler.rb +11 -3
- data/lib/theme_check/language_server/server.rb +6 -1
- data/lib/theme_check/regex_helpers.rb +15 -0
- data/lib/theme_check/remote_asset_file.rb +44 -0
- data/lib/theme_check/theme.rb +7 -1
- data/lib/theme_check/version.rb +1 -1
- metadata +32 -2
@@ -0,0 +1,93 @@
|
|
1
|
+
# Spot errors in schema translations (`MatchingSchemaTranslations`)
|
2
|
+
|
3
|
+
Validates translations in schema tags (`{% schema %}`).
|
4
|
+
|
5
|
+
## Check Details
|
6
|
+
|
7
|
+
Add checks for eliminating translations mistakes in schema tags.
|
8
|
+
|
9
|
+
:-1: Examples of **incorrect** code for this check:
|
10
|
+
|
11
|
+
```liquid
|
12
|
+
{% comment %}
|
13
|
+
- fr.missing is missing
|
14
|
+
- fr.extra is not in the default locale
|
15
|
+
{% endcomment %}
|
16
|
+
{% schema %}
|
17
|
+
{
|
18
|
+
"locales": {
|
19
|
+
"en": {
|
20
|
+
"title": "Welcome",
|
21
|
+
"missing": "Product"
|
22
|
+
},
|
23
|
+
"fr": {
|
24
|
+
"title": "Bienvenue",
|
25
|
+
"extra": "Extra"
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
{% endschema %}
|
30
|
+
|
31
|
+
{% comment %}
|
32
|
+
- The French product label is missing.
|
33
|
+
{% endcomment %}
|
34
|
+
{% schema %}
|
35
|
+
{
|
36
|
+
"name": {
|
37
|
+
"en": "Hello",
|
38
|
+
"fr": "Bonjour"
|
39
|
+
},
|
40
|
+
"settings": [
|
41
|
+
{
|
42
|
+
"id": "product",
|
43
|
+
"label": {
|
44
|
+
"en": "Product"
|
45
|
+
}
|
46
|
+
}
|
47
|
+
]
|
48
|
+
}
|
49
|
+
{% endschema %}
|
50
|
+
```
|
51
|
+
|
52
|
+
:+1: Examples of **correct** code for this check:
|
53
|
+
|
54
|
+
```liquid
|
55
|
+
{% schema %}
|
56
|
+
{
|
57
|
+
"name": {
|
58
|
+
"en": "Hello",
|
59
|
+
"fr": "Bonjour"
|
60
|
+
},
|
61
|
+
"settings": [
|
62
|
+
{
|
63
|
+
"id": "product",
|
64
|
+
"label": {
|
65
|
+
"en": "Product",
|
66
|
+
"fr": "Produit"
|
67
|
+
}
|
68
|
+
}
|
69
|
+
]
|
70
|
+
}
|
71
|
+
{% endschema %}
|
72
|
+
```
|
73
|
+
|
74
|
+
## Check Options
|
75
|
+
|
76
|
+
The default configuration for this check is the following:
|
77
|
+
|
78
|
+
```yaml
|
79
|
+
MatchingSchemaTranslations:
|
80
|
+
enabled: true
|
81
|
+
```
|
82
|
+
|
83
|
+
## Version
|
84
|
+
|
85
|
+
This check has been introduced in Theme Check 0.1.0.
|
86
|
+
|
87
|
+
## Resources
|
88
|
+
|
89
|
+
- [Rule Source][codesource]
|
90
|
+
- [Documentation Source][docsource]
|
91
|
+
|
92
|
+
[codesource]: /lib/theme_check/checks/matching_schema_translations.rb
|
93
|
+
[docsource]: /docs/checks/matching_schema_translations.md
|
@@ -0,0 +1,72 @@
|
|
1
|
+
# Prevent mismatching translations (`MatchingTranslations`)
|
2
|
+
|
3
|
+
This check exists to prevent missing and superfluous translations in locale files.
|
4
|
+
|
5
|
+
## Check Details
|
6
|
+
|
7
|
+
This check warns against missing translations in locale files.
|
8
|
+
|
9
|
+
:-1: Examples of **incorrect** code for this check:
|
10
|
+
|
11
|
+
```js
|
12
|
+
// en.default.json
|
13
|
+
{
|
14
|
+
"greeting": "Hello, world",
|
15
|
+
"goodbye": "Bye, world"
|
16
|
+
}
|
17
|
+
|
18
|
+
// fr.json - missing `greeting` and `goodbye`
|
19
|
+
{
|
20
|
+
}
|
21
|
+
|
22
|
+
// fr.json - missing `greeting` and superfluous `goodby`
|
23
|
+
{
|
24
|
+
"greeting": "Bonjour, monde"
|
25
|
+
"goodby": "Au revoir, monde"
|
26
|
+
}
|
27
|
+
```
|
28
|
+
|
29
|
+
:+1: Example of **correct** code for this check:
|
30
|
+
|
31
|
+
```liquid
|
32
|
+
// en.default.json
|
33
|
+
{
|
34
|
+
"greeting": "Hello, world",
|
35
|
+
"goodbye": "Bye, world"
|
36
|
+
"pluralized_greeting": {
|
37
|
+
"one": "Hello, you",
|
38
|
+
"other": "Hello, y'all",
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// fr.json
|
43
|
+
{
|
44
|
+
"greeting": "Bonjour, monde"
|
45
|
+
"goodbye": "Au revoir, monde"
|
46
|
+
"pluralized_greeting": {
|
47
|
+
"zero": "Je suis seul :(",
|
48
|
+
"few": "Salut, groupe!"
|
49
|
+
}
|
50
|
+
}
|
51
|
+
```
|
52
|
+
|
53
|
+
## Check Options
|
54
|
+
|
55
|
+
The default configuration for this check is the following:
|
56
|
+
|
57
|
+
```yaml
|
58
|
+
MatchingTranslations:
|
59
|
+
enabled: true
|
60
|
+
```
|
61
|
+
|
62
|
+
## Version
|
63
|
+
|
64
|
+
This check has been introduced in Theme Check 0.1.0.
|
65
|
+
|
66
|
+
## Resources
|
67
|
+
|
68
|
+
- [Rule Source][codesource]
|
69
|
+
- [Documentation Source][docsource]
|
70
|
+
|
71
|
+
[codesource]: /lib/theme_check/checks/matching_translations.rb
|
72
|
+
[docsource]: /docs/checks/matching_translations.md
|
@@ -0,0 +1,50 @@
|
|
1
|
+
# Prevent missing theme-check-enable comments (`MissingEnableComment`)
|
2
|
+
|
3
|
+
When `theme-check-disable` is used in the middle of a template, the corresponding `theme-check-enable` comment should also be included.
|
4
|
+
|
5
|
+
## Check Details
|
6
|
+
|
7
|
+
This check aims at eliminating missing `theme-check-enable` comments.
|
8
|
+
|
9
|
+
:-1: Example of **incorrect** code for this check:
|
10
|
+
|
11
|
+
```liquid
|
12
|
+
<!doctype html>
|
13
|
+
<html>
|
14
|
+
<head>
|
15
|
+
{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
|
16
|
+
<script src="https://cdnjs.com/jquery.min.js"></script>
|
17
|
+
</head>
|
18
|
+
<body>
|
19
|
+
<!-- ... -->
|
20
|
+
</body>
|
21
|
+
</html>
|
22
|
+
```
|
23
|
+
|
24
|
+
:+1: Example of **correct** code for this check:
|
25
|
+
|
26
|
+
```liquid
|
27
|
+
<!doctype html>
|
28
|
+
<html>
|
29
|
+
<head>
|
30
|
+
{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
|
31
|
+
<script src="https://cdnjs.com/jquery.min.js"></script>
|
32
|
+
{% comment %}theme-check-enable ParserBlockingJavaScript{% endcomment %}
|
33
|
+
</head>
|
34
|
+
<body>
|
35
|
+
<!-- ... -->
|
36
|
+
</body>
|
37
|
+
</html>
|
38
|
+
```
|
39
|
+
|
40
|
+
## Version
|
41
|
+
|
42
|
+
This check has been introduced in Theme Check 0.3.0.
|
43
|
+
|
44
|
+
## Resources
|
45
|
+
|
46
|
+
- [Rule Source][codesource]
|
47
|
+
- [Documentation Source][docsource]
|
48
|
+
|
49
|
+
[codesource]: /lib/theme_check/checks/missing_enable_comment.rb
|
50
|
+
[docsource]: /docs/checks/missing_enable_comment.md
|
@@ -0,0 +1,26 @@
|
|
1
|
+
# Prevent missing required theme files (`MissingRequiredTemplateFiles`)
|
2
|
+
|
3
|
+
Makes sure all the required template files in a theme are present.
|
4
|
+
|
5
|
+
## Check Options
|
6
|
+
|
7
|
+
The default configuration for this check is the following:
|
8
|
+
|
9
|
+
```yaml
|
10
|
+
MissingRequiredTemplateFiles:
|
11
|
+
enabled: true
|
12
|
+
```
|
13
|
+
|
14
|
+
## Version
|
15
|
+
|
16
|
+
This check has been introduced in Theme Check 0.1.0.
|
17
|
+
|
18
|
+
## Resources
|
19
|
+
|
20
|
+
- [Theme Requirements](https://shopify.dev/tutorials/review-theme-store-requirements-files)
|
21
|
+
- [Theme Templates](https://shopify.dev/docs/themes/theme-templates)
|
22
|
+
- [Rule Source][codesource]
|
23
|
+
- [Documentation Source][docsource]
|
24
|
+
|
25
|
+
[codesource]: /lib/theme_check/checks/missing_required_template_files.rb
|
26
|
+
[docsource]: /docs/checks/missing_required_template_files.md
|
@@ -0,0 +1,40 @@
|
|
1
|
+
# Prevent missing templates (`MissingTemplate`)
|
2
|
+
|
3
|
+
This check exists to prevent rendering resources with the `render` tag, `section` tag (and the deprecated `include` tag) that do not exist.
|
4
|
+
|
5
|
+
## Check Details
|
6
|
+
|
7
|
+
This check is aimed at preventing liquid rendering errors.
|
8
|
+
|
9
|
+
:-1: Example of **incorrect** code for this check:
|
10
|
+
|
11
|
+
```liquid
|
12
|
+
{% render 'snippet-that-does-not-exist' %}
|
13
|
+
```
|
14
|
+
|
15
|
+
:+1: Example of **correct** code for this check:
|
16
|
+
|
17
|
+
```liquid
|
18
|
+
{% render 'article-card' %}
|
19
|
+
```
|
20
|
+
|
21
|
+
## Check Options
|
22
|
+
|
23
|
+
The default configuration for this check is the following:
|
24
|
+
|
25
|
+
```yaml
|
26
|
+
MissingTemplate:
|
27
|
+
enabled: true
|
28
|
+
```
|
29
|
+
|
30
|
+
## Version
|
31
|
+
|
32
|
+
This check has been introduced in Theme Check 0.1.0.
|
33
|
+
|
34
|
+
## Resources
|
35
|
+
|
36
|
+
- [Rule Source][codesource]
|
37
|
+
- [Documentation Source][docsource]
|
38
|
+
|
39
|
+
[codesource]: /lib/theme_check/checks/missing_template.rb
|
40
|
+
[docsource]: /docs/checks/missing_template.md
|
@@ -0,0 +1,69 @@
|
|
1
|
+
# Prevent deeply nested snippets (`NestedSnippet`)
|
2
|
+
|
3
|
+
Reports deeply nested `render` tags (or deprecated `include` tags).
|
4
|
+
|
5
|
+
## Check Details
|
6
|
+
|
7
|
+
This check is aimed at eliminating excessive nesting of snippets.
|
8
|
+
|
9
|
+
:-1: Examples of **incorrect** code for this check:
|
10
|
+
|
11
|
+
```liquid
|
12
|
+
{% comment %}templates/index.liquid{% endcomment %}
|
13
|
+
{% render 'one' %}
|
14
|
+
|
15
|
+
{% comment %}snippets/one.liquid{% endcomment %}
|
16
|
+
{% render 'two' %}
|
17
|
+
|
18
|
+
{% comment %}snippets/two.liquid{% endcomment %}
|
19
|
+
{% render 'three' %}
|
20
|
+
|
21
|
+
{% comment %}snippets/three.liquid{% endcomment %}
|
22
|
+
{% render 'four' %}
|
23
|
+
|
24
|
+
{% comment %}snippets/four.liquid{% endcomment %}
|
25
|
+
ok
|
26
|
+
```
|
27
|
+
|
28
|
+
:+1: Examples of **correct** code for this check:
|
29
|
+
|
30
|
+
```liquid
|
31
|
+
{% comment %}templates/index.liquid{% endcomment %}
|
32
|
+
{% render 'one' %}
|
33
|
+
|
34
|
+
{% comment %}snippets/one.liquid{% endcomment %}
|
35
|
+
{% render 'two' %}
|
36
|
+
|
37
|
+
{% comment %}snippets/two.liquid{% endcomment %}
|
38
|
+
ok
|
39
|
+
```
|
40
|
+
|
41
|
+
## Check Options
|
42
|
+
|
43
|
+
The default configuration for this check is the following:
|
44
|
+
|
45
|
+
```yaml
|
46
|
+
NestedSnippet:
|
47
|
+
enabled: true
|
48
|
+
max_nesting_level: 2
|
49
|
+
```
|
50
|
+
|
51
|
+
### `max_nesting_level`
|
52
|
+
|
53
|
+
The `max_nesting_level` option (Default: `2`) determines the maximum depth of snippets rendering snippets.
|
54
|
+
|
55
|
+
## When Not To Use It
|
56
|
+
|
57
|
+
It's safe to disable this rule.
|
58
|
+
|
59
|
+
## Version
|
60
|
+
|
61
|
+
This check has been introduced in Theme Check 0.1.0.
|
62
|
+
|
63
|
+
## Resources
|
64
|
+
|
65
|
+
- [Rule Source][codesource]
|
66
|
+
- [Documentation Source][docsource]
|
67
|
+
|
68
|
+
[codesource]: /lib/theme_check/checks/nested_snippet.rb
|
69
|
+
[docsource]: /docs/checks/nested_snippet.md
|
@@ -0,0 +1,97 @@
|
|
1
|
+
# Discourage use of parser-blocking JavaScript (`ParserBlockingJavaScript`)
|
2
|
+
|
3
|
+
The `defer` or `async` attributes are extremely important on script tags. When neither of those attributes are used, a script tag will block the construction and rendering of the DOM until the script is _loaded_, _parsed_ and _executed_. It also creates congestion on the Network, messes with the resource priorities and significantly delays the rendering of the page.
|
4
|
+
|
5
|
+
Considering that JavaScript on Shopify themes should always be used to progressively _enhance_ the experience of the site, themes should never make use of parser-blocking script tags.
|
6
|
+
|
7
|
+
As a general rule, use `defer` if the order of execution matters, `async` otherwise. When in doubt, choose either one and get 80/20 of the benefits.
|
8
|
+
|
9
|
+
## Check Details
|
10
|
+
|
11
|
+
This check is aimed at eliminating parser-blocking JavaScript on themes.
|
12
|
+
|
13
|
+
:-1: Examples of **incorrect** code for this check:
|
14
|
+
|
15
|
+
```liquid
|
16
|
+
<!-- The script_tag filter outputs a parser-blocking script -->
|
17
|
+
{{ 'app-code.js' | asset_url | script_tag }}
|
18
|
+
|
19
|
+
<!-- jQuery is typically loaded synchronously because inline scripts depend on $, don't do that. -->
|
20
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
21
|
+
...
|
22
|
+
<button id="thing">Click me!</button>
|
23
|
+
<script>
|
24
|
+
$('#thing').click(() => {
|
25
|
+
alert('Oh. Hi Mark!');
|
26
|
+
});
|
27
|
+
</script>
|
28
|
+
```
|
29
|
+
|
30
|
+
:+1: Examples of **correct** code for this check:
|
31
|
+
|
32
|
+
```liquid
|
33
|
+
<!-- Good. Using the asset_url filter + defer -->
|
34
|
+
<script src="{{ 'theme.js' | asset_url }}" defer><script>
|
35
|
+
|
36
|
+
<!-- Also good. Using the asset_url filter + async -->
|
37
|
+
<script src="{{ 'theme.js' | asset_url }}" async><script>
|
38
|
+
|
39
|
+
<!-- Better than synchronous jQuery -->
|
40
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer><script>
|
41
|
+
...
|
42
|
+
<button id="thing">Click me!</button>
|
43
|
+
<script>
|
44
|
+
// Because we're using `defer`, jQuery is guaranteed to
|
45
|
+
// be loaded when DOMContentLoaded fires. This technique
|
46
|
+
// could be used as a first step to refactor an old theme
|
47
|
+
// that inline depends on jQuery.
|
48
|
+
document.addEventListener('DOMContentLoaded', () => {
|
49
|
+
$('#thing').click(() => {
|
50
|
+
alert('Oh. Hi Mark!');
|
51
|
+
});
|
52
|
+
});
|
53
|
+
</script>
|
54
|
+
|
55
|
+
<!-- Even better. Web Native (no jQuery). -->
|
56
|
+
<button id="thing">Click Me</button>
|
57
|
+
<script>
|
58
|
+
const button = document.getElementById('thing');
|
59
|
+
button.addEventListener('click', () => {
|
60
|
+
alert('Oh. Hi Mark!');
|
61
|
+
});
|
62
|
+
</script>
|
63
|
+
|
64
|
+
<!-- Best -->
|
65
|
+
<script src="{{ 'theme.js' | asset_url }}" defer></script>
|
66
|
+
...
|
67
|
+
<button id="thing">Click Me</button>
|
68
|
+
```
|
69
|
+
|
70
|
+
## Check Options
|
71
|
+
|
72
|
+
The default configuration for this check is the following:
|
73
|
+
|
74
|
+
```yaml
|
75
|
+
ParserBlockingJavaScript:
|
76
|
+
enabled: true
|
77
|
+
```
|
78
|
+
|
79
|
+
## When Not To Use It
|
80
|
+
|
81
|
+
This should only be turned off with the `theme-check-disable` comment when there's no better way to accomplish what you're doing than with a parser-blocking script.
|
82
|
+
|
83
|
+
It is discouraged to turn this rule off.
|
84
|
+
|
85
|
+
## Version
|
86
|
+
|
87
|
+
This check has been introduced in Theme Check 0.3.0.
|
88
|
+
|
89
|
+
## Resources
|
90
|
+
|
91
|
+
- [Lighthouse Render-Blocking Resources Audit][render-blocking]
|
92
|
+
- [Rule Source][codesource]
|
93
|
+
- [Documentation Source][docsource]
|
94
|
+
|
95
|
+
[render-blocking]: https://web.dev/render-blocking-resources/
|
96
|
+
[codesource]: /lib/theme_check/checks/parser_blocking_javascript.rb
|
97
|
+
[docsource]: /docs/checks/parser_blocking_javascript.md
|