Use typescript for the VS Code language config

.vscode/tasks.json

@@ -8,6 +8,7 @@
       "label": "vscode dev watch",
       "dependsOrder": "parallel",
       "dependsOn": [
+        "language-config",
         "parser pre build",
         "theme check build"
       ],
@@ -17,6 +18,11 @@
       "type": "shell",
       "command": "yarn --cwd packages/liquid-html-parser prebuild:ts"
     },
+    {
+      "label": "language-config",
+      "type": "shell",
+      "command": "yarn --cwd packages/vscode-extension build:language-config"
+    },
     {
       "label": "theme check build",
       "type": "shell",

packages/vscode-extension/package.json

@@ -34,7 +34,7 @@
     "build:ci": "yarn build:extension && yarn build:language-config && yarn build:syntax",
     "build:extension": "webpack --mode production",
     "build:extension:dev": "webpack --mode development",
-    "build:language-config": "node scripts/make-language-configuration",
+    "build:language-config": "ts-node scripts/make-language-configuration.ts",
     "build:syntax": "yarn --cwd ./syntaxes build",
     "build:ts": "true",
     "dev": "rimraf dist && yarn dev:watch",
@@ -66,6 +66,7 @@
     "vscode-languageclient": "^8.1.0"
   },
   "devDependencies": {
+    "@shopify/theme-check-docs-updater": "^1.18.2",
     "@types/glob": "^8.0.0",
     "@types/node": "16.x",
     "@types/prettier": "^2.4.2",

packages/vscode-extension/src/constants.js → packages/vscode-extension/scripts/constants.ts

@@ -1,5 +1,5 @@
 // These HTML elements do not require to be closed (either via </tag> or <tag />)
-exports.voidElements = [
+export const voidElements = [
   'area',
   'base',
   'br',
@@ -18,12 +18,4 @@ exports.voidElements = [
   'wbr',
 ];
 
-exports.openingLiquidTags = [
-  'if',
-  'form',
-  'comment',
-  'case',
-  'when',
-  'for',
-  'unless',
-];
+export const openingLiquidTags = ['if', 'form', 'comment', 'case', 'when', 'for', 'unless'];

packages/vscode-extension/src/indentation-rules.js → packages/vscode-extension/scripts/indentation-rules.ts

@@ -1,7 +1,12 @@
-const { voidElements, openingLiquidTags } = require('./constants');
+import { voidElements, openingLiquidTags } from './constants';
 
 const closingLiquidTags = openingLiquidTags.map((name) => `end${name}`);
 
+export interface IndentationRulesJSON {
+  increaseIndentPattern: string;
+  decreaseIndentPattern: string;
+}
+
 // https://regex101.com/r/G4OYnb/1
 function increaseIndentPattern() {
   const patterns = [
@@ -73,9 +78,9 @@ function decreaseIndentPattern() {
   return String.raw`^\s*(${patterns.join('|')})`;
 }
 
-const indentationRules = {
-  increaseIndentPattern: increaseIndentPattern(),
-  decreaseIndentPattern: decreaseIndentPattern(),
-};
-
-module.exports = indentationRules;
+export async function indentationRules(): Promise<IndentationRulesJSON> {
+  return {
+    increaseIndentPattern: increaseIndentPattern(),
+    decreaseIndentPattern: decreaseIndentPattern(),
+  };
+}

packages/vscode-extension/scripts/language-configuration.ts

@@ -0,0 +1,53 @@
+import { LanguageConfiguration } from 'vscode';
+import { indentationRules, IndentationRulesJSON } from './indentation-rules';
+import { onEnterRules, OnEnterRuleJSON } from './on-enter-actions';
+
+// interface LanguageConfigurationJSON
+//   extends Omit<LanguageConfiguration, 'onEnterRules' | 'indentationRules'> {
+//   onEnterRules?: OnEnterRuleJSON[];
+//   indentationRules?: IndentationRulesJSON;
+// }
+
+export async function makeConfig(): Promise<any> {
+  return {
+    comments: {
+      blockComment: ['{% comment %}', '{% endcomment %}'],
+    },
+    brackets: [
+      ['<', '>'],
+      ['{{-', '-}}'],
+      ['{{-', '}}'],
+      ['{{', '-}}'],
+      ['{{', '}}'],
+      ['{%-', '-%}'],
+      ['{%-', '%}'],
+      ['{%', '-%}'],
+      ['{%', '%}'],
+      ['[', ']'],
+      ['(', ')'],
+    ],
+    autoClosingPairs: [
+      ['{', '}'],
+      ['{{', '}}'],
+      ['{%', '%}'],
+      ['[', ']'],
+      ['(', ')'],
+      ['"', '"'],
+      ["'", "'"],
+      ['<', '>'],
+    ],
+    autoCloseBefore: '%-:.,=}])>\'"` \n\t',
+    surroundingPairs: [
+      ['-', '-'],
+      ['<', '>'],
+      ['{', '}'],
+      ['[', ']'],
+      ['(', ')'],
+      ["'", "'"],
+      ['"', '"'],
+      ['`', '`'],
+    ],
+    onEnterRules: await onEnterRules(),
+    indentationRules: await indentationRules(),
+  };
+}

packages/vscode-extension/scripts/make-language-configuration.ts

@@ -0,0 +1,19 @@
+#!/usr/bin/env ts-node
+import { makeConfig } from './language-configuration';
+import * as fs from 'fs/promises';
+
+async function main() {
+  try {
+    await fs.writeFile(
+      './language-configuration.json',
+      JSON.stringify(await makeConfig(), null, 2),
+      'utf8',
+    );
+  } catch (_) {
+    process.exit(1);
+  }
+
+  process.exit(0);
+}
+
+main();

packages/vscode-extension/scripts/on-enter-actions.ts

@@ -0,0 +1,13 @@
+import { EnterAction, OnEnterRule } from 'vscode';
+
+export interface OnEnterRuleJSON extends Omit<OnEnterRule, 'action'> {
+  action: EnterActionJSON;
+}
+
+export interface EnterActionJSON extends Omit<EnterAction, 'indentAction'> {
+  indent: 'indent' | 'indentOutdent' | 'outdent' | 'none';
+}
+
+export async function onEnterRules(): Promise<OnEnterRuleJSON[]> {
+  return [];
+}

packages/vscode-extension/scripts/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noEmit": true,
+    "rootDir": "../../..",
+    "resolveJsonModule": true,
+    "composite": true,
+    "declarationDir": "/tmp/vscode-extension-useless-declarations",
+    "paths": {
+      "@shopify/theme-check-docs-updater": ["../../theme-check-docs-updater/src"]
+    }
+  },
+  "include": ["**/*.ts"],
+  "references": [
+    { "path": "../../theme-check-docs-updater/tsconfig.build.json" }
+  ]
+}

packages/vscode-extension/tsconfig.json

@@ -7,6 +7,8 @@
     "rootDir": "src",
     "strict": true,
     "resolveJsonModule": true,
+    "composite": true,
+    "noImplicitAny": false,
     "paths": {
       "@shopify/theme-language-server-node": ["../../theme-language-server-node/src"],
       "@shopify/prettier-plugin-liquid": ["../../prettier-plugin-liquid/src"],