Add section schema and translation file completion and hover

.changeset/afraid-apes-impress.md

@@ -0,0 +1,17 @@
+---
+'@shopify/theme-language-server-browser': minor
+'@shopify/theme-language-server-common': minor
+'@shopify/theme-language-server-node': minor
+'@shopify/theme-check-docs-updater': minor
+'@shopify/theme-check-browser': minor
+'@shopify/theme-check-common': minor
+'@shopify/theme-check-node': minor
+'@shopify/codemirror-language-client': patch
+'release-orchestrator': patch
+---
+
+Breaking: internal rename of `schemaValidators` to `jsonValidationSet`
+
+This breaks the browser dependencies public API (for `startServer` and `runChecks`) and will thus require some code changes in those contexts.
+
+The node packages absorb the dependency injection and are not breaking.

.changeset/small-ants-complain.md

@@ -0,0 +1,16 @@
+---
+'@shopify/theme-language-server-common': minor
+'@shopify/theme-language-server-node': minor
+'@shopify/theme-language-server-browser': minor
+'theme-check-vscode': minor
+---
+
+Add section schema and translation file JSON completion and hover support
+
+JSON object authoring and editing should be better in the following contexts:
+- `sections/*.liquid` `{% schema %}` bodies
+- `locales/*.json` files
+
+Hovering over any key in any translation file will show the path of the translation key (for easy copy and paste).
+
+Pluralized strings and `_html` support is baked into the feature.

.github/workflows/ci.yml

@@ -33,6 +33,9 @@ jobs:
         env:
           NODE_ENV: production
 
+      - name: Type check (for tests)
+        run: yarn type-check
+
       - name: Check formatting
         run: yarn format:check
 

packages/codemirror-language-client/playground/src/language-server-worker.ts

@@ -75,8 +75,10 @@ startServer(worker, {
     objects: async () => objects,
     systemTranslations: async () => systemTranslations,
   },
-  schemaValidators: {
+  jsonValidationSet: {
     validateSectionSchema: async () => () => true,
+    sectionSchema: async () => '{}',
+    translationSchema: async () => '{}',
   },
   loadConfig,
   log(message) {

packages/liquid-html-parser/src/stage-2-ast.ts

@@ -1916,8 +1916,6 @@ function toTextNode(node: ConcreteTextNode): TextNode {
   };
 }
 
-const MAX_NUMBER_OF_SIBLING_DANGLING_NODES = 2;
-
 function isAcceptableDanglingMarkerClose(
   builder: ASTBuilder,
   cst: LiquidHtmlCST,

packages/release-orchestrator/package.json

@@ -10,6 +10,7 @@
     "build": "yarn build:ts",
     "build:ci": "yarn build",
     "build:ts": "tsc -b tsconfig.build.json",
-    "start": "yarn build && node dist/index.js"
+    "start": "yarn build && node dist/index.js",
+    "type-check": "tsc --noEmit"
   }
 }

packages/release-orchestrator/src/generate-markdown.spec.ts

@@ -1,16 +1,25 @@
 import { expect, it, describe } from 'vitest';
 import { generateMarkdown } from './generate-markdown';
+import { ChangesetStatus } from './types';
 
 describe('generateMarkdown', () => {
   it('should generate a markdown string detailing the changes made in each release', () => {
-    const status = {
+    const status: ChangesetStatus = {
       releases: [
         { name: 'package1', type: 'patch', oldVersion: '1.0.0', newVersion: '1.0.1' },
         { name: 'package2', type: 'minor', oldVersion: '2.0.0', newVersion: '2.1.0' },
       ],
       changesets: [
-        { summary: 'Fixed a bug in package1', releases: [{ name: 'package1', type: 'patch' }] },
-        { summary: 'Added a feature to package2', releases: [{ name: 'package2', type: 'minor' }] },
+        {
+          id: '0',
+          summary: 'Fixed a bug in package1',
+          releases: [{ name: 'package1', type: 'patch' }],
+        },
+        {
+          id: '1',
+          summary: 'Added a feature to package2',
+          releases: [{ name: 'package2', type: 'minor' }],
+        },
       ],
     };
 

packages/theme-check-common/src/AugmentedJsonValidationSet.ts

@@ -0,0 +1,11 @@
+import { JsonValidationSet } from './types';
+import { memo } from './utils';
+
+/** This simply memoizes the result to prevent over fetching */
+export class AugmentedJsonValidationSet implements JsonValidationSet {
+  constructor(private schemaValidators: JsonValidationSet) {}
+  public isAugmented = true;
+  sectionSchema = memo(async () => await this.schemaValidators.sectionSchema());
+  translationSchema = memo(async () => await this.schemaValidators.translationSchema());
+  validateSectionSchema = memo(async () => await this.schemaValidators.validateSectionSchema());
+}

packages/theme-check-common/src/checks/valid-schema/index.spec.ts

@@ -44,7 +44,7 @@ lodashSet(INVALID_SECTION_SCHEMA, 'disabled_on', true);
 lodashSet(INVALID_SECTION_SCHEMA, 'max_blocks', 51);
 
 const buildMockDeps = (errors?: any[]): Partial<Dependencies> => ({
-  schemaValidators: {
+  jsonValidationSet: {
     async validateSectionSchema() {
       const mockValidator: ValidateFunction = () => {
         mockValidator.errors = errors ?? [
@@ -57,6 +57,14 @@ const buildMockDeps = (errors?: any[]): Partial<Dependencies> => ({
 
       return mockValidator;
     },
+
+    async sectionSchema() {
+      return JSON.stringify(VALID_SECTION_SCHEMA);
+    },
+
+    async translationSchema() {
+      return '{}';
+    },
   },
 });
 

packages/theme-check-common/src/checks/valid-schema/index.ts

@@ -53,7 +53,7 @@ export const ValidSchema: LiquidCheckDefinition = {
           return;
         }
 
-        const validateSectionSchema = await context.schemaValidators?.validateSectionSchema();
+        const validateSectionSchema = await context.jsonValidationSet?.validateSectionSchema();
         if (!validateSectionSchema) {
           return;
         }

packages/theme-check-common/src/index.ts

@@ -25,10 +25,10 @@ import * as path from './path';
 import { getPosition } from './utils';
 import { isIgnored } from './ignore';
 import { AugmentedThemeDocset } from './AugmentedThemeDocset';
-import { AugmentedSchemaValidators } from './AugmentedSchemaValidators';
+import { AugmentedJsonValidationSet } from './AugmentedJsonValidationSet';
 
 export * from './AugmentedThemeDocset';
-export * from './AugmentedSchemaValidators';
+export * from './AugmentedJsonValidationSet';
 export * from './fixes';
 export * from './types';
 export * from './checks';
@@ -55,8 +55,8 @@ export async function check(
     dependencies.themeDocset = new AugmentedThemeDocset(dependencies.themeDocset);
   }
 
-  if (dependencies.schemaValidators && !dependencies.schemaValidators.isAugmented) {
-    dependencies.schemaValidators = new AugmentedSchemaValidators(dependencies.schemaValidators);
+  if (dependencies.jsonValidationSet && !dependencies.jsonValidationSet.isAugmented) {
+    dependencies.jsonValidationSet = new AugmentedJsonValidationSet(dependencies.jsonValidationSet);
   }
 
   for (const type of Object.values(SourceCodeType)) {

packages/theme-check-common/src/types.ts

@@ -12,7 +12,7 @@ import { Schema, Settings } from './types/schema-prop-factory';
 
 import { StringCorrector, JSONCorrector } from './fixes';
 
-import { ThemeDocset, JsonSchemaValidators } from './types/theme-liquid-docs';
+import { ThemeDocset, JsonValidationSet } from './types/theme-liquid-docs';
 
 export * from './types/theme-liquid-docs';
 export * from './types/schema-prop-factory';
@@ -261,7 +261,7 @@ export interface Dependencies {
   fileExists(absolutePath: string): Promise<boolean>;
   fileSize?(absolutePath: string): Promise<number>;
   themeDocset?: ThemeDocset;
-  schemaValidators?: JsonSchemaValidators;
+  jsonValidationSet?: JsonValidationSet;
 }
 
 type StaticContextProperties<T extends SourceCodeType> = T extends SourceCodeType

packages/theme-check-common/src/types/theme-liquid-docs.ts

@@ -23,12 +23,18 @@ export interface ThemeDocset {
 /**
  * JSON schemas resources for themes.
  */
-export interface JsonSchemaValidators {
+export interface JsonValidationSet {
   /** Whether it was augmented prior to being passed. */
   isAugmented?: boolean;
 
   /** Retrieves the JSON schema validator for theme sections. */
   validateSectionSchema(): Promise<ValidateFunction>;
+
+  /** Retrieves the JSON schema of the {% schema %} JSON blobs in sections/*.liquid files */
+  sectionSchema(): Promise<string>;
+
+  /** Retrieves the JSON schema of the locales/*.json files */
+  translationSchema(): Promise<string>;
 }
 
 /**

packages/theme-check-docs-updater/src/themeLiquidDocsDownloader.ts

@@ -8,6 +8,7 @@ export const Resources = [
   'objects',
   'tags',
   'section_schema',
+  'translations_schema',
   'shopify_system_translations',
 ] as const;
 
@@ -17,6 +18,7 @@ const THEME_LIQUID_DOCS: Record<Resource | 'latest', string> = {
   tags: 'data/tags.json',
   latest: 'data/latest.json',
   section_schema: 'schemas/theme/section_schema.json',
+  translations_schema: 'schemas/theme/translations_schema.json',
   shopify_system_translations: 'data/shopify_system_translations.json',
 };
 

packages/theme-check-docs-updater/src/themeLiquidDocsManager.spec.ts

@@ -1,6 +1,5 @@
-import { expect, describe, it, beforeEach, afterEach, vi } from 'vitest';
+import { expect, describe, it, beforeEach, afterEach, vi, assert } from 'vitest';
 import { ThemeLiquidDocsManager } from './themeLiquidDocsManager';
-import fs from 'node:fs/promises';
 import { downloadFile, Resources } from './themeLiquidDocsDownloader';
 
 vi.mock('./themeLiquidDocsDownloader', async (importOriginal) => {
@@ -132,8 +131,7 @@ describe('Module: ThemeLiquidDocsManager', async () => {
       // Conditional to satisfy typescript. This is already checked by the previous expect.
       if (validate.errors) {
         const error = validate.errors[0];
-        expect(error.keyword).toBe('required');
-        expect(error.params.missingProperty).toBe('age');
+        expect(error.message).to.match(/'age'/);
       }
     });
   });