Virtual File Systems & Shopify Liquid VS Code extension for Web

.changeset/curly-books-end.md

@@ -0,0 +1,15 @@
+---
+'@shopify/theme-check-common': major
+'@shopify/theme-language-server-common': major
+---
+
+[Breaking] Replace absolute path concerns with URIs
+
+This implies a couple of changes:
+- `Config` now holds a `rootUri` instead of `root` path.
+- `loadConfig` injections needs to change their return value accordingly
+- In checks,
+   - The context helper `absolutePath` has been replaced by `toUri`
+   - The context helper `relativePath` has been replaced by `toRelativePath`
+- `SourceCode` objects now hold a `uri` instead of a `path`
+- `toSourceCode` now accepts a `uri` instead of a `path`

.changeset/dry-adults-jump.md

@@ -0,0 +1,5 @@
+---
+'@shopify/codemirror-language-client': minor
+---
+
+Expose language client in CodeMirrorLanguageClient

.changeset/hungry-cups-fry.md

@@ -0,0 +1,21 @@
+---
+'@shopify/theme-check-browser': major
+'@shopify/theme-check-common': major
+'@shopify/theme-check-node': major
+---
+
+[Breaking] Replace fs-based dependency injections with AbstractFileSystem injection
+
+```diff
+runChecks(theme, {
+- getDefaultTranslations,
+- getDefaultLocale,
+- getDefaultSchemaLocale,
+- getDefaultSchemaTranslations,
+- fileExists,
+- fileSize,
++ fs: new FileSystemImpl(),
+  themeDocset,
+  jsonValidationSet,
+})
+```

.changeset/light-ways-sin.md

@@ -0,0 +1,10 @@
+---
+'theme-check-vscode': major
+---
+
+Add support for virtual file systems
+
+The Shopify Liquid VS Code extension now works in a large set of new environments:
+- Remote files
+- Git backed files
+- VS Code for the Web

.changeset/moody-turkeys-switch.md

@@ -0,0 +1,29 @@
+---
+'@shopify/theme-language-server-browser': major
+'@shopify/theme-language-server-common': major
+'@shopify/theme-language-server-node': major
+---
+
+[Breaking] Replace fs-based dependency injection by an AbstractFileSystem injection
+
+```diff
++ class FileSystemImpl implements AbstractFileSystem {
++   /* ... */
++ }
+
+startServer(worker, {
+- findRootURI,
+- fileExists,
+- fileSize,
+- getDefaultTranslationsFactory,
+- getDefaultLocaleFactory,
+- getDefaultSchemaTranslationsFactory,
+- getDefaultSchemaLocaleFactory,
+- getThemeSettingsSchemaForRootURI,
++ fs: new FileSystemImpl(),
+  loadConfig,
+  log,
+  themeDocset,
+  jsonValidationSet,
+})
+```

.changeset/silent-comics-reflect.md

@@ -0,0 +1,5 @@
+---
+'theme-check-vscode': major
+---
+
+[BREAKING] Remove support for ruby language server

.changeset/stale-swans-draw.md

@@ -0,0 +1,26 @@
+---
+'@shopify/theme-language-server-browser': major
+'@shopify/theme-language-server-node': major
+---
+
+Expose language server connection in Public API
+
+This lets you send non-standard LSP messages to the client.
+
+```ts
+import { getConnection, startServer, AbstractFileSystem } from '@shopify/theme-language-server-browser'
+
+class MainThreadFileSystem implements AbstractFileSystem {
+  constructor(private connection) {}
+  readFile(uri) { return this.connection.sendRequest('fs/readFile', uri); }
+  readDirectory(uri) { return this.connection.sendRequest('fs/readDirectory', uri); }
+  readFile(uri) { return this.connection.sendRequest('fs/stat', uri); }
+}
+
+const worker = self as any as Worker;
+const connection = getConnection(worker);
+const fs = new MainThreadFileSystem(connection);
+const dependencies = { /* ... */ };
+
+startServer(worker, dependencies, connection);
+```

.gitignore

@@ -20,3 +20,4 @@ package-lock.json
 .npmrc
 packages/theme-check-docs-updater/data
 packages/lang-jsonc/src/parser.*
+.vscode-test-web

.vscode/launch.json

@@ -8,15 +8,15 @@
     {
       "type": "extensionHost",
       "request": "launch",
-      "name": "Launch Client",
+      "name": "Debug Node Extension",
       "runtimeExecutable": "${execPath}",
       "args": [
         "--extensionDevelopmentPath=${workspaceRoot}/packages/vscode-extension"
       ],
       "autoAttachChildProcesses": true,
       "sourceMaps": true,
       "outFiles": [
-        "${workspaceRoot}/packages/vscode-extension/dist/**/*.js",
+        "${workspaceRoot}/packages/vscode-extension/dist/node/**/*.js",
         "${workspaceRoot}/packages/theme-language-server-common/dist/**/*.js",
         "${workspaceRoot}/packages/theme-language-server-node/dist/**/*.js",
         "${workspaceRoot}/packages/theme-check-common/dist/**/*.js",
@@ -27,10 +27,38 @@
       ],
       "preLaunchTask": "vscode dev"
     },
+    {
+      "name": "Debug Web Extension",
+      "type": "extensionHost",
+      "debugWebWorkerHost": true,
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/packages/vscode-extension",
+        "--extensionDevelopmentKind=web"
+      ],
+      "sourceMaps": true,
+      "outFiles": [
+        "${workspaceRoot}/packages/vscode-extension/dist/browser/**/*.js",
+        "${workspaceRoot}/packages/theme-language-server-common/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-language-server-browser/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-check-common/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-check-browser/dist/**/*.js",
+        "${workspaceRoot}/packages/prettier-plugin-liquid/dist/**/*.js",
+        "${workspaceRoot}/packages/liquid-html-parser/dist/**/*.js",
+      ],
+      "preLaunchTask": "vscode dev"
+    },
+    {
+      "name": "Debug Web Extension in Chromium",
+      "type": "chrome",
+      "request": "attach",
+      "url": "http://localhost:3000",
+      "preLaunchTask": "vscode-test-web"
+    },
     {
       "type": "chrome",
       "request": "launch",
-      "name": "Debug playground",
+      "name": "Debug CodeMirror playground",
       "url": "http://localhost:8080",
       "webRoot": "${workspaceFolder}/packages/codemirror-language-client/playground",
       "outFiles": [

.vscode/tasks.json

@@ -35,6 +35,13 @@
       "command": "yarn playground",
       "isBackground": true,
       "problemMatcher": "$ts-webpack-watch"
+    },
+    {
+      "label": "vscode-test-web",
+      "type": "shell",
+      "command": "yarn dev:web",
+      "isBackground": true,
+      "problemMatcher": "$ts-webpack-watch"
     }
   ],
 }

docs/contributing.md

@@ -58,6 +58,22 @@ Run the following command to start a browser instance that runs `@shopify/theme-
 yarn playground
 ```
 
+### Developing for VS Code for Web
+
+#### In Chrome
+
+Run the following command to start a `@vscode/test-web` instance in Chrome with the Shopify Liquid extension loaded.
+
+```bash
+yarn dev:web
+```
+
+#### In the desktop app
+
+Because the Chrome version doesn't have great debugging, you can also use the `Run Web Extension` Launch configuration to debug the extension.
+
+This starts a Extension Host window like the normal `F5` flow, but instead of running the node extension, it's running the browser extension.
+
 ### Testing JSON Schema changes on Shopify/theme-liquid-docs
 
 If ever you want to see how the VS Code extension or playground would behave before merging a PR to Shopify/theme-liquid-docs, you can do the following:

package.json

@@ -23,6 +23,7 @@
     "build": "yarn workspaces run build",
     "build:ci": "yarn workspaces run build:ci",
     "build:ts": "yarn workspaces run build:ts",
+    "dev:web": "yarn --cwd packages/vscode-extension dev:web",
     "format": "prettier --write \"packages/*/src/**/*.ts\"",
     "format:check": "prettier --check --ignore-unknown \"packages/*/src/**/*.ts\"",
     "playground": "yarn --cwd packages/codemirror-language-client run dev:playground",

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

@@ -1,6 +1,13 @@
-import { Dependencies, allChecks, startServer } from '@shopify/theme-language-server-browser';
-import { URI } from 'vscode-languageserver-types';
-import { isDependencyInjectionMessage } from './messages';
+import {
+  Dependencies,
+  allChecks,
+  getConnection,
+  startServer,
+  AbstractFileSystem,
+  FileTuple,
+  FileStat,
+} from '@shopify/theme-language-server-browser';
+import { Connection } from 'vscode-languageserver';
 
 /**
  * These are replaced at build time by the contents of
@@ -22,74 +29,52 @@ const schemas = WEBPACK_SCHEMAS;
 
 const worker = self as any as Worker;
 
-// The file tree is provided from the main thread as an array of strings.
-// The default translations are provided from the main thread.
-let files: Set<string>;
-let defaultTranslations: any = {};
-worker.addEventListener('message', (ev) => {
-  const message = ev.data;
-  if (!isDependencyInjectionMessage(message)) return;
-
-  switch (message.method) {
-    case 'shopify/setDefaultTranslations': {
-      return (defaultTranslations = message.params);
-    }
-    case 'shopify/setFileTree': {
-      return (files = new Set(message.params));
-    }
-  }
+const loadConfig: Dependencies['loadConfig'] = async (_uri, fileExists) => ({
+  context: 'theme',
+  settings: {},
+  checks: allChecks,
+  rootUri: 'browser:/',
 });
 
-async function fileExists(path: string) {
-  return files && files.has(path);
-}
+const connection = getConnection(worker);
 
-function getDefaultTranslationsFactory(_uri: string) {
-  return async () => defaultTranslations as any;
-}
+class MainThreadFileSystem implements AbstractFileSystem {
+  constructor(private connection: Connection) {
+    this.connection = connection;
+  }
 
-// pretending they are the same :upside_down_smile:
-function getDefaultSchemaTranslationsFactory(_uri: string) {
-  return async () => defaultTranslations as any;
-}
+  async readFile(uri: string) {
+    return this.connection.sendRequest('fs/readFile', uri) as Promise<string>;
+  }
 
-function getThemeSettingsSchemaForRootURI(_rootURI: URI) {
-  return [] as any;
-}
+  async readDirectory(uri: string) {
+    return this.connection.sendRequest('fs/readDirectory', uri) as Promise<FileTuple[]>;
+  }
 
-async function findRootURI(_uri: string) {
-  return 'browser:/';
+  async stat(uri: string) {
+    return this.connection.sendRequest('fs/stat', uri) as Promise<FileStat>;
+  }
 }
 
-const loadConfig: Dependencies['loadConfig'] = async (_uri) => ({
-  context: 'theme',
-  settings: {},
-  checks: allChecks,
-  root: '/',
-});
-
-startServer(worker, {
-  fileSize: async (_: string) => 42,
-  fileExists,
-  findRootURI,
-  getDefaultTranslationsFactory,
-  getDefaultSchemaTranslationsFactory,
-  getThemeSettingsSchemaForRootURI,
-  getDefaultLocaleFactory: (_: string) => async () => 'en',
-  getDefaultSchemaLocaleFactory: (_: string) => async () => 'en',
-  themeDocset: {
-    filters: async () => filters,
-    tags: async () => tags,
-    objects: async () => objects,
-    systemTranslations: async () => systemTranslations,
-  },
-  jsonValidationSet: {
-    schemas: async () => schemas,
+startServer(
+  worker,
+  {
+    fs: new MainThreadFileSystem(connection),
+    themeDocset: {
+      filters: async () => filters,
+      tags: async () => tags,
+      objects: async () => objects,
+      systemTranslations: async () => systemTranslations,
+    },
+    jsonValidationSet: {
+      schemas: async () => schemas,
+    },
+    loadConfig,
+    log(message) {
+      console.info(message);
+    },
   },
-  loadConfig,
-  log(message) {
-    console.info(message);
-  },
-});
+  connection,
+);
 
 export {};