Shopify · May 10, 2024 · May 30, 2024 · May 30, 2024 · May 30, 2024 · Jun 6, 2024
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,4 @@ yarn-error.log
 package-lock.json
 .npmrc
 packages/theme-check-docs-updater/data
+packages/lang-jsonc/src/parser.*
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ This monorepo is home of all things dev tools for Shopify themes:
 - [`@shopify/codemirror-language-client`](./packages/codemirror-language-client) — A CodeMirror Language Client (batteries not included).  
 - [`theme-check-vscode`](./packages/vscode-extension) — The VS Code extension that uses it all.
 
-These tools are also integrated in the [Online Store Code Editor](https://shopify.dev/docs/themes/tools/code-editor) and the [Shopify CLI](https://shopify.dev/docs/themes/tools/cli).
+These tools are also integrated in the [Online Store Code Editor](https://shopify.dev/docs/storefronts/themes/tools/code-editor) and the [Shopify CLI](https://shopify.dev/docs/api/shopify-cli/theme).
 
 They can be used individually or collectively, catering to varied use cases and offering flexibility in their application.
 

diff --git a/ThirdPartyNotices.txt b/ThirdPartyNotices.txt
@@ -2,7 +2,11 @@ THIRD-PARTY SOFTWARE NOTICES AND INFORMATION
 
 The theme-language-server project incorporates third party material from the projects listed below. The original copyright notice and the license under which Shopify received such third party material are set forth below. Shopify reserves all other rights not expressly granted, whether by implication, estoppel or otherwise.
 
-1.	vscode-languageserver-node (https://github.com/microsoft/vscode-languageserver-node)
+1. vscode-languageserver-node (https://github.com/microsoft/vscode-languageserver-node)
+2. @yetoapp/jsonc (https://github.com/yettoapp/lezer-jsonc)
+3. @lezer/json (https://github.com/lezer-parser/json)
+4. @codemirror/lang-json (https://github.com/codemirror/lang-json)
+5. monaco-editor (https://github.com/microsoft/monaco-editor)
 
 %% vscode-languageserver-node NOTICES, INFORMATION, AND LICENSE BEGIN HERE
 =========================================
@@ -25,3 +29,107 @@ BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CON
 OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 =========================================
 END OF vscode-languageserver-node NOTICES, INFORMATION, AND LICENSE
+
+%% yetoapp/lezer-jsonc NOTICES, INFORMATION, AND LICENSE BEGIN HERE
+=========================================
+MIT License
+
+Copyright (c) 2023 Lox Populi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+=========================================
+END OF yetoapp/lezer-jsonc NOTICES, INFORMATION, AND LICENSE
+
+%% @lezer/json NOTICES, INFORMATION, AND LICENSE BEGIN HERE
+=========================================
+MIT License
+
+Copyright (C) 2020 by Marijn Haverbeke <marijn@haverbeke.berlin>, Arun Srinivasan <rulfzid@gmail.com>, and others
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+=========================================
+END OF @lezer/json NOTICES, INFORMATION, AND LICENSE
+
+%% @codemirror/lang-json NOTICES, INFORMATION, AND LICENSE BEGIN HERE
+=========================================
+MIT License
+
+Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+=========================================
+END OF @codemirror/lang-json NOTICES, INFORMATION, AND LICENSE
+
+%% monaco-editor NOTICES, INFORMATION, AND LICENSE BEGIN HERE
+=========================================
+The MIT License (MIT)
+
+Copyright (c) 2016 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+=========================================
+END OF monaco-editor NOTICES, INFORMATION, AND LICENSE
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "license": "MIT",
   "private": true,
   "workspaces": [
+    "packages/lang-*",
     "packages/codemirror-language-client",
     "packages/liquid-html-parser",
     "packages/prettier-plugin-liquid",
@@ -45,7 +46,7 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.9.3",
-    "vitest": "^1.5.0",
+    "vitest": "^2.1.1",
     "vscode-languageserver-protocol": "^3.17.3",
     "vscode-languageserver-textdocument": "^1.0.8",
     "webpack": "^5.76.0",

diff --git a/packages/codemirror-language-client/CHANGELOG.md b/packages/codemirror-language-client/CHANGELOG.md
@@ -1,12 +1,18 @@
 # @shopify/codemirror-language-client
 
+## 0.6.0
+
+### Minor Changes
+
+- 42c76d9: Add support for LSP Document Highlight requests
+
 ## 0.5.1
 
 ### Patch Changes
 
 - 8e3c7e2: Breaking: add `getDefaultSchema{Locale,Translations}(Factory)?` dependencies
 
-  To be used to power `MatchingTranslations` for [Schema translations](https://shopify.dev/docs/themes/architecture/locales/schema-locale-files).
+  To be used to power `MatchingTranslations` for [Schema translations](https://shopify.dev/docs/storefronts/themes/architecture/locales/schema-locale-files).
 
   To be used to power Schema translations code completion and hover in section and theme block `{% schema %}` JSON blobs.
 

diff --git a/packages/codemirror-language-client/README.md b/packages/codemirror-language-client/README.md
@@ -4,7 +4,7 @@
 
 # CodeMirror Language Client
 
-[CodeMirror](https://codemirror.net/) is the open source library that powers the [Online Store Code Editor](https://shopify.dev/docs/themes/tools/code-editor).
+[CodeMirror](https://codemirror.net/) is the open source library that powers the [Online Store Code Editor](https://shopify.dev/docs/storefronts/themes/tools/code-editor).
 
 The [Language Server Protocol](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/) empowers developers to write one language server that can run in all language clients. Write a client, and you gain access to all servers; write one server, and all clients can use it.
 
@@ -13,6 +13,7 @@ This repo serves as a CodeMirror Language Client. Feed it a Language Server and
 - [x] Diagnostics (aka Linting)
 - [x] Completions
 - [x] Hover
+- [x] Document Highlights
 - [ ] Document Links
 - [ ] Workspace Edits (aka Refactorings, Quickfix, etc.)
 
@@ -84,7 +85,7 @@ main();
 
    -  [`vscode-languageserver-types`](https://github.com/microsoft/vscode-languageserver-node/tree/main/types)
 
-      This library is useful to get the types of specific parts of the Protocol. 
+      This library is useful to get the types of specific parts of the Protocol.
 
       Examples: `Diagnostic`, `URI`, `TextDocument`, `Position`, `Range`, `LocationLink`, etc.
 
diff --git a/packages/codemirror-language-client/package.json b/packages/codemirror-language-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/codemirror-language-client",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A Language Client for CodeMirror",
   "author": "CP Clermont <cp.clermont@shopify.com>",
   "homepage": "https://github.com/Shopify/theme-tools/tree/main/packages/codemirror-language-client#readme",
@@ -51,8 +51,9 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.9.2",
     "@replit/codemirror-vim": "^6.2.1",
-    "@shopify/theme-check-docs-updater": "^2.3.0",
-    "@shopify/theme-language-server-browser": "^1.9.0",
+    "@shopify/theme-check-docs-updater": "^2.9.1",
+    "@shopify/theme-language-server-browser": "^1.13.0",
+    "@shopify/lang-jsonc": "^1.0.0",
     "@types/markdown-it": "^13.0.4",
     "codemirror": "^6.0.1",
     "markdown-it": "^13.0.2"

diff --git a/packages/codemirror-language-client/playground/src/playground.ts b/packages/codemirror-language-client/playground/src/playground.ts
@@ -1,7 +1,7 @@
 import { basicSetup } from 'codemirror';
 import { EditorView, keymap } from '@codemirror/view';
 import { Compartment, EditorState } from '@codemirror/state';
-import { json } from '@codemirror/lang-json';
+import { jsonc } from '@shopify/lang-jsonc';
 import { vim } from '@replit/codemirror-vim';
 import MarkdownIt from 'markdown-it';
 // import { oneDark } from '@codemirror/theme-one-dark';
@@ -15,6 +15,7 @@ import { MarkedString, MarkupContent } from 'vscode-languageserver-protocol';
 const md = new MarkdownIt();
 
 const exampleTemplate = `{% # sections/title.liquid %}
+{% # mod-alt-v for vim mode %}
 <section>
   <h2>{{ section.settings.title }}</h2>
   {% echo 'hi' | upcase %}
@@ -163,8 +164,7 @@ async function main() {
       extensions: [
         vimConfig,
         basicSetup,
-        json(),
-        // liquidHighLightStyle,
+        jsonc(),
         // oneDark,
         client.extension('browser:/locales/en.default.json'),
       ],
@@ -192,7 +192,7 @@ async function main() {
       extensions: [
         vimConfig,
         basicSetup,
-        json(),
+        jsonc(),
         // liquidHighLightStyle,
         // oneDark,
         client.extension('browser:/locales/en.default.schema.json'),

diff --git a/packages/codemirror-language-client/playground/tsconfig.json b/packages/codemirror-language-client/playground/tsconfig.json
@@ -13,11 +13,13 @@
     "resolveJsonModule": true,
     "paths": {
       "@shopify/codemirror-language-client": ["../src"],
+      "@shopify/lang-jsonc": ["../../lang-jsonc/src"],
       "@shopify/theme-language-server-browser": ["../../theme-language-server-browser/src"]
     }
   },
   "references": [
     { "path": ".." },
+    { "path": "../../lang-jsonc" },
     { "path": "../../theme-language-server-browser" }
   ]
 }

diff --git a/packages/codemirror-language-client/src/CodeMirrorLanguageClient.ts b/packages/codemirror-language-client/src/CodeMirrorLanguageClient.ts
@@ -14,6 +14,7 @@ import {
   fileUriFacet,
   infoRendererFacet,
   lspComplete,
+  lspDocumentHighlights,
   lspHover,
   lspLinter,
   serverCapabilitiesFacet,
@@ -29,6 +30,9 @@ import { hoverRendererFacet } from './extensions/hover';
  */
 const clientCapabilities: ClientCapabilities = {
   textDocument: {
+    documentHighlight: {
+      dynamicRegistration: false,
+    },
     completion: {
       // We send the completion context to the server
       contextSupport: true,
@@ -106,6 +110,7 @@ export class CodeMirrorLanguageClient {
   private readonly linterExtension: Extension;
   private readonly hoverRenderer: HoverRenderer | undefined;
   private readonly hoverExtension: Extension;
+  private readonly documentHighlightsExtension: Extension;
 
   constructor(
     private readonly worker: Worker,
@@ -132,6 +137,8 @@ export class CodeMirrorLanguageClient {
 
     this.hoverRenderer = hoverRenderer;
     this.hoverExtension = lspHover(hoverOptions);
+
+    this.documentHighlightsExtension = lspDocumentHighlights();
   }
 
   public async start() {
@@ -162,6 +169,7 @@ export class CodeMirrorLanguageClient {
       infoRendererFacet.of(this.infoRenderer),
       diagnosticRendererFacet.of(this.diagnosticRenderer),
       hoverRendererFacet.of(this.hoverRenderer),
+      this.documentHighlightsExtension,
     ]
       .concat(shouldLint ? this.linterExtension : [])
       .concat(shouldComplete ? this.autocompleteExtension : [])