@platformos/platformos-language-server-common 0.0.2

package/src/json/completions/JSONCompletionProvider.ts

@@ -0,0 +1,33 @@
+import { LiquidHtmlNode, LiquidRawTag } from '@platformos/liquid-html-parser';
+import { JSONNode } from '@platformos/platformos-check-common';
+import { CompletionItem, JSONPath } from 'vscode-json-languageservice';
+import {
+  AugmentedJsonSourceCode,
+  AugmentedLiquidSourceCode,
+  AugmentedSourceCode,
+} from '../../documents';
+import { RequestContext } from '../RequestContext';
+
+export type HoverContext = {
+  doc: AugmentedSourceCode;
+  schema?: LiquidRawTag;
+  parsed?: any | Error;
+};
+
+export type LiquidHoverContext = {
+  doc: Omit<AugmentedLiquidSourceCode, 'ast'> & { ast: LiquidHtmlNode };
+  schema: LiquidRawTag;
+  parsed: any;
+};
+
+export type JSONHoverContext = {
+  doc: Omit<AugmentedJsonSourceCode, 'ast'> & { ast: JSONNode };
+};
+
+/** For some reason, json-languageservice requires it. */
+export type JSONCompletionItem = CompletionItem & { insertText: string };
+
+export interface JSONCompletionProvider {
+  completeProperty?(context: RequestContext, path: JSONPath): Promise<JSONCompletionItem[]>;
+  completeValue?(context: RequestContext, path: JSONPath): Promise<JSONCompletionItem[]>;
+}

package/src/json/completions/providers/BlockSettingsPropertyCompletionProvider.spec.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect, assert, beforeEach } from 'vitest';
+import { JSONLanguageService } from '../../JSONLanguageService';
+import { DocumentManager } from '../../../documents';
+import {
+  getRequestParams,
+  isCompletionList,
+  mockJSONLanguageService,
+} from '../../test/test-helpers';
+
+describe('Unit: BlockSettingsPropertyCompletionProvider', () => {
+  const rootUri = 'file:///root/';
+  let jsonLanguageService: JSONLanguageService;
+  let documentManager: DocumentManager;
+
+  beforeEach(async () => {
+    documentManager = new DocumentManager(
+      undefined, // don't need a fs
+      undefined, // don't need a connection
+      undefined, // don't need client capabilities
+      async () => 'theme', // 'theme' mode
+      async () => false, // schema is invalid for tests
+    );
+    jsonLanguageService = mockJSONLanguageService(
+      rootUri,
+      documentManager,
+      async (_uri: string) => ({
+        general: {
+          fake: 'Fake Setting',
+        },
+      }),
+    );
+
+    await jsonLanguageService.setup({
+      textDocument: {
+        completion: {
+          contextSupport: true,
+          completionItem: {
+            snippetSupport: true,
+            commitCharactersSupport: true,
+            documentationFormat: ['markdown'],
+            deprecatedSupport: true,
+            preselectSupport: true,
+          },
+        },
+      },
+    });
+  });
+
+  describe('section file with valid schema', () => {
+    const tests = [
+      {
+        label: 'presets',
+        schemaTemplate: (referencedBlock: object) => {
+          return {
+            presets: [
+              {
+                blocks: [referencedBlock],
+              },
+            ],
+          };
+        },
+      },
+      {
+        label: 'default',
+        schemaTemplate: (referencedBlock: object) => {
+          return {
+            default: {
+              blocks: [referencedBlock],
+            },
+          };
+        },
+      },
+    ];
+
+    for (const test of tests) {
+      describe(`${test.label} block settings`, () => {
+        beforeEach(() => {
+          const testBlockSchema = {
+            settings: [
+              { id: 'custom-setting', label: 'Custom Setting' },
+              { id: 'fake-setting', label: 't:general.fake' },
+              { id: 'no-label' },
+              { nope: 'no-id' },
+            ],
+          };
+          documentManager.open(`${rootUri}/blocks/test-block.liquid`, toSource(testBlockSchema), 1);
+          documentManager.open(`${rootUri}/blocks/no-settings-block.liquid`, toSource({}), 1);
+        });
+
+        it(`completes ${test.label} block settings property when settings exist`, async () => {
+          const schema = {
+            ...test.schemaTemplate({
+              type: 'test-block',
+              settings: {
+                '█': '',
+              },
+            }),
+          };
+          const params = getRequestParams(
+            documentManager,
+            'sections/section.liquid',
+            toSource(schema),
+          );
+          const completions = await jsonLanguageService.completions(params);
+
+          assert(isCompletionList(completions));
+          expect(completions.items).to.have.lengthOf(3);
+          expect(completions.items).toContainEqual(
+            expect.objectContaining({
+              insertText: `"custom-setting"`,
+              documentation: expect.objectContaining({
+                value: 'Custom Setting',
+              }),
+            }),
+          );
+          expect(completions.items).toContainEqual(
+            expect.objectContaining({
+              insertText: `"fake-setting"`,
+              documentation: expect.objectContaining({
+                value: 'Fake Setting',
+              }),
+            }),
+          );
+          expect(completions.items).toContainEqual(
+            expect.objectContaining({
+              insertText: `"no-label"`,
+              documentation: expect.objectContaining({
+                value: '',
+              }),
+            }),
+          );
+        });
+
+        it(`offers no suggestions for ${test.label} block settings property when there are no settings`, async () => {
+          const schema = {
+            ...test.schemaTemplate({
+              type: 'no-settings-block',
+              settings: {
+                '█': '',
+              },
+            }),
+          };
+          const source = `
+            {% schema %}
+              ${JSON.stringify(schema)}
+            {% endschema %}
+          `;
+          const params = getRequestParams(documentManager, 'sections/section.liquid', source);
+          const completions = await jsonLanguageService.completions(params);
+
+          assert(isCompletionList(completions));
+          expect(completions.items).to.have.lengthOf(0);
+        });
+      });
+    }
+  });
+});
+
+function toSource(schema: object) {
+  return `{% schema %}
+  ${JSON.stringify(schema)}
+{% endschema %}`;
+}

package/src/json/completions/providers/BlockSettingsPropertyCompletionProvider.ts

@@ -0,0 +1,121 @@
+import { JSONPath } from 'vscode-json-languageservice';
+import { GetThemeBlockSchema } from '../../JSONContributions';
+import { RequestContext } from '../../RequestContext';
+import { JSONCompletionItem, JSONCompletionProvider } from '../JSONCompletionProvider';
+import { isBlockFile, isSectionFile } from '../../utils';
+import { deepGet, isError, SourceCodeType } from '@platformos/platformos-check-common';
+import { isSectionOrBlockSchema } from './BlockTypeCompletionProvider';
+import { GetTranslationsForURI } from '../../../translations';
+import { getSectionBlockByName, schemaSettingsPropertyCompletionItems } from '../../schemaSettings';
+
+/**
+ * The BlockSettingsPropertyCompletionProvider offers value completions of the
+ * `presets.[].(recursive blocks.[]).settings` keys and `defaults.blocks.[].settings` keys inside
+ * `{% schema %}` tags.
+ *
+ * @example
+ * {% schema %}
+ * {
+ *   "presets": [
+ *     {
+ *       "blocks": [
+ *         {
+ *           "type": "block-type",
+ *           "settings": {
+ *             "█"
+ *           }
+ *         },
+ *       ]
+ *     },
+ *   ],
+ *   "default": {
+ *     "blocks": [
+ *       {
+ *         "type": "block-type",
+ *         "settings": {
+ *           "█"
+ *         }
+ *       },
+ *     ]
+ *   }
+ * }
+ * {% endschema %}
+ */
+export class BlockSettingsPropertyCompletionProvider implements JSONCompletionProvider {
+  constructor(
+    private getDefaultSchemaTranslations: GetTranslationsForURI,
+    private getThemeBlockSchema: GetThemeBlockSchema,
+  ) {}
+
+  async completeProperty(context: RequestContext, path: JSONPath): Promise<JSONCompletionItem[]> {
+    const { doc } = context;
+
+    if (doc.type !== SourceCodeType.LiquidHtml) return [];
+
+    // section files can have schemas with `presets` and `default`
+    // block files can have schemas with `presets` only
+    if (
+      !(
+        isSectionFile(doc.uri) &&
+        (isPresetsBlocksSettingsPath(path) || isDefaultBlocksSettingsPath(path))
+      ) &&
+      !(isBlockFile(doc.uri) && isPresetsBlocksSettingsPath(path))
+    ) {
+      return [];
+    }
+
+    const schema = await doc.getSchema();
+
+    if (!schema || !isSectionOrBlockSchema(schema) || isError(schema.parsed)) {
+      return [];
+    }
+
+    const blockType: string = deepGet(schema.parsed, [...path.slice(0, -1), 'type']);
+
+    if (!blockType) {
+      return [];
+    }
+
+    const translations = await this.getDefaultSchemaTranslations(doc.textDocument.uri);
+
+    const localBlock = getSectionBlockByName(schema.parsed, blockType);
+
+    if (localBlock) {
+      if (localBlock.settings) {
+        return schemaSettingsPropertyCompletionItems(localBlock.settings, translations);
+      }
+    } else {
+      const blockOriginSchema = await this.getThemeBlockSchema(doc.uri, blockType);
+
+      if (
+        !blockOriginSchema ||
+        isError(blockOriginSchema.parsed) ||
+        !isSectionOrBlockSchema(blockOriginSchema)
+      ) {
+        return [];
+      }
+
+      if (
+        !blockOriginSchema.parsed?.settings ||
+        !Array.isArray(blockOriginSchema.parsed?.settings)
+      ) {
+        return [];
+      }
+
+      return schemaSettingsPropertyCompletionItems(blockOriginSchema.parsed.settings, translations);
+    }
+
+    return [];
+  }
+}
+
+// `blocks` can be nested within other `blocks`
+// We need to ensure the last leg of the path is { "blocks": [{ "settings": { "█" } }] }
+function isPresetsBlocksSettingsPath(path: JSONPath) {
+  return path.at(0) === 'presets' && path.at(-3) === 'blocks' && path.at(-1) === 'settings';
+}
+
+// `blocks` inside `default` can't be nested within other `blocks`
+function isDefaultBlocksSettingsPath(path: JSONPath) {
+  return path.at(0) === 'default' && path.at(1) === 'blocks' && path.at(3) === 'settings';
+}

package/src/json/completions/providers/BlockTypeCompletionProvider.spec.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect, assert, beforeEach } from 'vitest';
+import { JSONLanguageService } from '../../JSONLanguageService';
+import { DocumentManager } from '../../../documents';
+import { getRequestParams, isCompletionList } from '../../test/test-helpers';
+
+/**
+ * We only need this because I want to show in the test that @theme and @app are
+ * completed by the schema... If you write a test that doesn't have a JOIN on
+ * the completions, feel free to not copy paste this...
+ */
+const simplifiedBlockSchema = JSON.stringify({
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    blocks: {
+      type: 'array',
+      items: {
+        type: 'object',
+        required: ['type'],
+        properties: {
+          type: {
+            oneOf: [
+              // blocks[].type is @app, @theme or a string
+              { const: '@app' },
+              { const: '@theme' },
+              {
+                if: { not: { enum: ['@theme', '@app'] } },
+                then: { type: 'string' },
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+});
+
+describe('Unit: BlockTypeCompletionProvider', () => {
+  let jsonLanguageService: JSONLanguageService;
+  let documentManager: DocumentManager;
+  const blockNames = ['block-1', 'block-2', 'custom-block'];
+
+  beforeEach(async () => {
+    documentManager = new DocumentManager(
+      undefined, // don't need a fs
+      undefined, // don't need a connection
+      undefined, // don't need client capabilities
+      async () => 'theme', // 'theme' mode
+      async () => false, // schema is invalid for tests
+    );
+    jsonLanguageService = new JSONLanguageService(
+      documentManager,
+      {
+        schemas: async () => [
+          {
+            uri: 'https://shopify.dev/block-schema.json',
+            schema: simplifiedBlockSchema,
+            fileMatch: ['**/{blocks,sections}/*.liquid'], // cheating a little here...
+          },
+        ],
+      },
+      async () => ({}),
+      async () => 'theme',
+      async () => blockNames,
+      async () => undefined,
+      async () => 'file:///test-root',
+    );
+
+    await jsonLanguageService.setup({
+      textDocument: {
+        completion: {
+          contextSupport: true,
+          completionItem: {
+            snippetSupport: true,
+            commitCharactersSupport: true,
+            documentationFormat: ['markdown'],
+            deprecatedSupport: true,
+            preselectSupport: true,
+          },
+        },
+      },
+    });
+  });
+
+  describe('when there are no local blocks', () => {
+    it('completes theme block names', async () => {
+      const source = `
+      hello world
+      {% schema %}
+      {
+        "blocks": [
+          { "type": "█" }
+        ]
+      }
+      {% endschema %}
+      `;
+      const params = getRequestParams(documentManager, 'sections/section.liquid', source);
+
+      const completions = await jsonLanguageService.completions(params);
+
+      assert(isCompletionList(completions));
+      // @app & @theme come from the JSON schema. There's no way to not include them.
+      expect(completions.items).to.have.lengthOf(blockNames.length + ['@app', '@theme'].length);
+      expect(completions.items.map((item) => item.label)).to.include.members([
+        '"@app"',
+        '"@theme"',
+        ...blockNames.map((x) => `"${x}"`),
+      ]);
+    });
+  });
+
+  describe('when there are local blocks', () => {
+    it('does not completes theme block names', async () => {
+      const source = `
+      hello world
+      {% schema %}
+      {
+        "blocks": [
+          { "type": "user-defined", "name": "user defined" }
+          { "type": "█" }
+        ]
+      }
+      {% endschema %}
+      `;
+      const params = getRequestParams(documentManager, 'sections/section.liquid', source);
+
+      const completions = await jsonLanguageService.completions(params);
+
+      assert(isCompletionList(completions));
+      expect(completions.items).to.have.lengthOf(['@app', '@theme'].length);
+      expect(completions.items.map((item) => item.label)).not.to.include.members([
+        ...blockNames.map((x) => `"${x}"`),
+      ]);
+    });
+  });
+});

package/src/json/completions/providers/BlockTypeCompletionProvider.ts

@@ -0,0 +1,108 @@
+import {
+  AppBlockSchema,
+  deepGet,
+  isError,
+  SectionSchema,
+  ThemeBlockSchema,
+  ThemeSchemaType,
+} from '@platformos/platformos-check-common';
+import { JSONPath } from 'vscode-json-languageservice';
+import { JSONCompletionItem } from 'vscode-json-languageservice/lib/umd/jsonContributions';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import { isLiquidRequestContext, RequestContext } from '../../RequestContext';
+import { isSectionOrBlockFile } from '../../utils';
+import { JSONCompletionProvider } from '../JSONCompletionProvider';
+import { GetThemeBlockNames } from '../../JSONContributions';
+
+/**
+ * The BlockTypeCompletionProvider offers value completions of the
+ * `blocks.[].type` property inside section and theme block `{% schema %}` tags.
+ *
+ * @example
+ * {% schema %}
+ * {
+ *   "blocks": [
+ *     { "type": "█" },
+ *   ]
+ * }
+ * {% endschema %}
+ */
+export class BlockTypeCompletionProvider implements JSONCompletionProvider {
+  constructor(private getThemeBlockNames: GetThemeBlockNames) {}
+
+  async completeValue(context: RequestContext, path: JSONPath): Promise<JSONCompletionItem[]> {
+    if (
+      !isSectionOrBlockFile(context.doc.uri) ||
+      !isLiquidRequestContext(context) ||
+      !isBlockDefinitionPath(path)
+    ) {
+      return [];
+    }
+    const { doc } = context;
+    const schema = await doc.getSchema();
+
+    // Can't complete if we can't parse the schema
+    if (!schema || isError(schema.parsed) || !isSectionOrBlockSchema(schema)) {
+      return [];
+    }
+
+    // Local blocks have their type defined in the schema, there's nothing to complete
+    if (hasLocalBlockDefinitions(schema)) return [];
+
+    const blockNames = await this.getThemeBlockNames(doc.uri, true);
+
+    return createBlockNameCompletionItems(blockNames);
+  }
+}
+
+export function createBlockNameCompletionItems(blockNames: string[]) {
+  return blockNames.map((name) => ({
+    kind: CompletionItemKind.Value,
+    label: `"${name}"`,
+    insertText: `"${name}"`,
+  }));
+}
+
+export function isBlockDefinitionPath(path: JSONPath) {
+  return path.at(0) === 'blocks';
+}
+
+export function isPresetBlockPath(path: JSONPath) {
+  return path.at(0) === 'presets';
+}
+
+export function isBlockTypePath(path: JSONPath) {
+  // We have these cases to support:
+  // - top level blocks.[].type
+  // - presets.[](recursive .blocks.[].type)
+  // - presets.[](recursive .blocks.{}.type)
+  const topLevel = path.at(0);
+  if (topLevel !== 'blocks' && topLevel !== 'presets') return false;
+  if (path.length < 4) return false; // minimum path length
+  const [shouldBeBlocks, _idOrIndex, shouldBeType] = path.slice(-3);
+  return shouldBeBlocks === 'blocks' && shouldBeType === 'type';
+}
+
+export function hasLocalBlockDefinitions(schema: SectionSchema | ThemeBlockSchema) {
+  if (schema.type !== ThemeSchemaType.Section || isError(schema.parsed)) return false;
+  const blocks = deepGet(schema.parsed, ['blocks']);
+  if (!blocks || !Array.isArray(blocks)) return false;
+  return blocks.some((block) => block && block.name !== undefined);
+}
+
+export function isLocalBlockDefinition(
+  schema: ThemeBlockSchema | SectionSchema,
+  blockTypePath: JSONPath,
+) {
+  if (schema.type !== ThemeSchemaType.Section) return false;
+  const blockNamePath = [...blockTypePath.slice(0, -1), 'name'];
+  const name = deepGet(schema.parsed, blockNamePath);
+  return name !== undefined;
+}
+
+const SectionOrBlockSchemaTypes = [ThemeSchemaType.Section, ThemeSchemaType.Block];
+export function isSectionOrBlockSchema(
+  schema: SectionSchema | ThemeBlockSchema | AppBlockSchema,
+): schema is SectionSchema | ThemeBlockSchema {
+  return SectionOrBlockSchemaTypes.includes(schema.type);
+}

package/src/json/completions/providers/ReferencedBlockTypeCompletionProvider.spec.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect, assert, beforeEach } from 'vitest';
+import { JSONLanguageService } from '../../JSONLanguageService';
+import { DocumentManager } from '../../../documents';
+import {
+  getRequestParams,
+  isCompletionList,
+  mockJSONLanguageService,
+} from '../../test/test-helpers';
+
+describe('Unit: ReferencedBlockTypeCompletionProvider', () => {
+  const rootUri = 'file:///root/';
+  let jsonLanguageService: JSONLanguageService;
+  let documentManager: DocumentManager;
+
+  beforeEach(async () => {
+    documentManager = new DocumentManager(
+      undefined, // don't need a fs
+      undefined, // don't need a connection
+      undefined, // don't need client capabilities
+      async () => 'theme', // 'theme' mode
+      async () => false, // schema is invalid for tests
+    );
+    jsonLanguageService = mockJSONLanguageService(rootUri, documentManager, undefined, async () => [
+      'block-1',
+      'block-2',
+      'custom-block',
+    ]);
+
+    await jsonLanguageService.setup({
+      textDocument: {
+        completion: {
+          contextSupport: true,
+          completionItem: {
+            snippetSupport: true,
+            commitCharactersSupport: true,
+            documentationFormat: ['markdown'],
+            deprecatedSupport: true,
+            preselectSupport: true,
+          },
+        },
+      },
+    });
+  });
+
+  const tests = [
+    {
+      description: 'select blocks',
+      configured: [{ type: 'block-1' }],
+      expected: [`"block-1"`],
+    },
+    {
+      description: '@theme block',
+      configured: [{ type: '@theme' }],
+      expected: [`"block-1"`, `"block-2"`, `"custom-block"`],
+    },
+    {
+      description: '@app block',
+      configured: [{ type: '@app' }],
+      expected: [],
+    },
+    {
+      description: 'no blocks',
+      configured: [],
+      expected: [],
+    },
+  ];
+
+  describe('top-level preset blocks', () => {
+    for (const test of tests) {
+      it(`completes preset block type when allowed ${test.description}`, async () => {
+        const source = `
+          {% schema %}
+          {
+            "blocks": ${JSON.stringify(test.configured)},
+            "presets": [{
+              "blocks": [
+                { "type": "█" },
+              ]
+            }]
+          }
+          {% endschema %}
+        `;
+
+        const params = getRequestParams(documentManager, 'sections/section.liquid', source);
+        const completions = await jsonLanguageService.completions(params);
+
+        assert(isCompletionList(completions));
+        expect(completions.items).to.have.lengthOf(test.expected.length);
+        expect(completions.items.map((item) => item.label)).to.include.members(test.expected);
+      });
+    }
+  });
+
+  describe('nested preset blocks', () => {
+    for (const test of tests) {
+      it(`completes preset block type when parent block allows ${test.description}`, async () => {
+        const source = `
+          {% schema %}
+          {
+            "blocks": [{"type": "custom-block"}],
+            "presets": [{
+              "blocks": [
+                {
+                  "type": "custom-block",
+                  "blocks": [{"type": "█"}],
+                },
+              ]
+            }]
+          }
+          {% endschema %}
+        `;
+
+        documentManager.open(
+          `${rootUri}/blocks/custom-block.liquid`,
+          `{% schema %}
+            {
+              "blocks": ${JSON.stringify(test.configured)}
+            }
+          {% endschema %}`,
+          1,
+        );
+
+        const params = getRequestParams(documentManager, 'sections/section.liquid', source);
+        const completions = await jsonLanguageService.completions(params);
+
+        assert(isCompletionList(completions));
+        expect(completions.items).to.have.lengthOf(test.expected.length);
+        expect(completions.items.map((item) => item.label)).to.include.members(test.expected);
+      });
+    }
+  });
+});