web: support running as a web extension

.gitignore

@@ -1,5 +1,5 @@
 out/
 node_modules/
-.vscode-test/
+.vscode-test*/
 *.log
 *.vsix

.vscodeignore

@@ -1,6 +1,6 @@
 .github/**
 .vscode/**
-.vscode-test/**
+.vscode-test*/**
 assets/dance.afdesign
 src/**
 test/**

package.build.ts

@@ -83,7 +83,7 @@ export const pkg = (modules: Builder.ParsedModule[]) => ({
 
   name: "dance",
   description: "Kakoune-inspired key bindings, modes, menus and scripting.",
-  version: "0.5.4",
+  version: "0.5.5",
   license: "ISC",
 
   author: {
@@ -97,6 +97,7 @@ export const pkg = (modules: Builder.ParsedModule[]) => ({
   },
 
   main: "./out/src/extension.js",
+  browser: "./out/web/extension.js",
 
   engines: {
     vscode: "^1.56.0",
@@ -107,9 +108,11 @@ export const pkg = (modules: Builder.ParsedModule[]) => ({
     "format": "eslint . --fix",
     "generate": "ts-node ./meta.ts",
     "generate:watch": "ts-node ./meta.ts --watch",
-    "vscode:prepublish": "yarn run generate && yarn run compile",
+    "vscode:prepublish": "yarn run generate && yarn run compile && yarn run compile-web",
     "compile": "tsc -p ./",
     "compile:watch": "tsc -watch -p ./",
+    "compile-web": "webpack --mode production --devtool hidden-source-map --config ./webpack.web.config.js",
+    "compile-web:watch": "webpack --watch --config ./webpack.web.config.js",
     "test": "yarn run compile && node ./out/test/run.js",
     "package": "vsce package",
     "publish": "vsce publish",
@@ -128,11 +131,14 @@ export const pkg = (modules: Builder.ParsedModule[]) => ({
     "glob": "^7.1.6",
     "mocha": "^8.1.1",
     "source-map-support": "^0.5.19",
+    "ts-loader": "^9.2.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.2.4",
     "unexpected": "^12.0.0",
     "vsce": "^1.87.0",
     "vscode-test": "^1.5.2",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0",
   },
 
   // VS Code-specific properties.
@@ -145,7 +151,7 @@ export const pkg = (modules: Builder.ParsedModule[]) => ({
   icon: "assets/dance.png",
 
   activationEvents: ["*"],
-  extensionKind: ["ui", "web", "workspace"],
+  extensionKind: ["ui", "workspace"],
 
   // Dance-specific properties.
   // ==========================================================================

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dance",
   "description": "Kakoune-inspired key bindings, modes, menus and scripting.",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "license": "ISC",
   "author": {
     "name": "Grégoire Geis",
@@ -12,6 +12,7 @@
     "url": "https://github.com/71/dance.git"
   },
   "main": "./out/src/extension.js",
+  "browser": "./out/web/extension.js",
   "engines": {
     "vscode": "^1.56.0"
   },
@@ -20,9 +21,11 @@
     "format": "eslint . --fix",
     "generate": "ts-node ./meta.ts",
     "generate:watch": "ts-node ./meta.ts --watch",
-    "vscode:prepublish": "yarn run generate && yarn run compile",
+    "vscode:prepublish": "yarn run generate && yarn run compile && yarn run compile-web",
     "compile": "tsc -p ./",
     "compile:watch": "tsc -watch -p ./",
+    "compile-web": "webpack --mode production --devtool hidden-source-map --config ./webpack.web.config.js",
+    "compile-web:watch": "webpack --watch --config ./webpack.web.config.js",
     "test": "yarn run compile && node ./out/test/run.js",
     "package": "vsce package",
     "publish": "vsce publish"
@@ -40,11 +43,14 @@
     "glob": "^7.1.6",
     "mocha": "^8.1.1",
     "source-map-support": "^0.5.19",
+    "ts-loader": "^9.2.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.2.4",
     "unexpected": "^12.0.0",
     "vsce": "^1.87.0",
-    "vscode-test": "^1.5.2"
+    "vscode-test": "^1.5.2",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0"
   },
   "displayName": "Dance",
   "publisher": "gregoire",
@@ -59,7 +65,6 @@
   ],
   "extensionKind": [
     "ui",
-    "web",
     "workspace"
   ],
   "dance.disableArbitraryCodeExecution": false,

src/api/run.ts

@@ -335,13 +335,19 @@ export function execute(
   input?: string,
   cancellationToken = Context.WithoutActiveEditor.current.cancellationToken,
 ) {
+  if (process.platform as string === "web") {
+    return Context.WithoutActiveEditor.wrap(
+      Promise.reject(new Error("execution of arbitrary commands is not supported on the web")),
+    );
+  }
+
   if (!canExecuteArbitraryCommands) {
     return Context.WithoutActiveEditor.wrap(
       Promise.reject(new Error("execution of arbitrary commands is disabled")),
     );
   }
 
-  return Context.WithoutActiveEditor.wrap(import("child_process").then((cp) =>
+  const promise = import("child_process").then((cp) =>
     new Promise<string>((resolve, reject) => {
       const shell = getShell() ?? true,
             child = cp.spawn(command, { shell, stdio: "pipe" });
@@ -371,8 +377,10 @@ export function execute(
               stderr.length > 0 ? stderr.trimRight() : "<No error output>"
             }`));
       });
-    })),
+    }),
   );
+
+  return Context.WithoutActiveEditor.wrap(promise);
 }
 
 export namespace execute {

src/commands/README.md

@@ -177,12 +177,12 @@
     <tr><td><a href="./selections.ts#L665"><code>selections.faceForward</code></a></td><td>Forward selections</td><td><code>Shift+Alt+;</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
     <tr><td><a href="./selections.ts#L316"><code>selections.filter.regexp</code></a></td><td>Keep matching selections</td><td><code>Alt+K</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
     <tr><td><a href="./selections.ts#L317"><code>selections.filter.regexp.inverse</code></a></td><td>Clear matching selections</td><td><code>Shift+Alt+K</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
-    <tr><td><a href="./selections.ts#L782"><code>selections.hideIndices</code></a></td><td>Hide selection indices</td><td></td></tr>
+    <tr><td><a href="./selections.ts#L781"><code>selections.hideIndices</code></a></td><td>Hide selection indices</td><td></td></tr>
     <tr><td><a href="./selections.ts#L254"><code>selections.pipe.append</code></a></td><td>Pipe and append</td><td><code>Shift+1</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
     <tr><td><a href="./selections.ts#L255"><code>selections.pipe.prepend</code></a></td><td>Pipe and prepend</td><td><code>Shift+Alt+1</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
     <tr><td><a href="./selections.ts#L253"><code>selections.pipe.replace</code></a></td><td>Pipe and replace</td><td><code>Shift+\</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
     <tr><td><a href="./selections.ts#L584"><code>selections.reduce.edges</code></a></td><td>Reduce selections to their ends</td><td><code>Shift+Alt+S</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
-    <tr><td><a href="./selections.ts#L781"><code>selections.showIndices</code></a></td><td>Show selection indices</td><td></td></tr>
+    <tr><td><a href="./selections.ts#L780"><code>selections.showIndices</code></a></td><td>Show selection indices</td><td></td></tr>
     <tr><td><a href="#selectionssplit"><code>selections.split</code></a></td><td>Split selections</td><td><code>Shift+S</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
     <tr><td><a href="#selectionssplitLines"><code>selections.splitLines</code></a></td><td>Split selections at line boundaries</td><td><code>Alt+S</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
     <tr><td><a href="#selectionstoggleIndices"><code>selections.toggleIndices</code></a></td><td>Toggle selection indices</td><td><code>Enter</code> (<code>editorTextFocus && dance.mode == 'normal'</code>)</td></tr>
@@ -1250,7 +1250,7 @@ Merge contiguous selections.
 
 Open selected file.
 
-### [`selections.toggleIndices`](./selections.ts#L772-L789)
+### [`selections.toggleIndices`](./selections.ts#L771-L788)
 
 Toggle selection indices.
 

src/commands/selections.ts

@@ -755,13 +755,12 @@ export function merge(_: Context) {
  * Open selected file.
  */
 export async function open(_: Context) {
-  const path = await import("path"),
-        basePath = path.dirname(_.document.fileName);
+  const basePath = vscode.Uri.joinPath(_.document.uri, "..");
 
   await Promise.all(
     Selections.map((text) =>
       vscode.workspace
-        .openTextDocument(path.resolve(basePath, text))
+        .openTextDocument(vscode.Uri.joinPath(basePath, text))
         .then(vscode.window.showTextDocument),
     ),
   );

src/state/editors.ts

@@ -542,7 +542,7 @@ export class Editors implements vscode.Disposable {
     vscode.workspace.onDidCloseTextDocument(
       this._handleDidCloseTextDocument, this, this._subscriptions);
 
-    process.nextTick(() => {
+    queueMicrotask(() => {
       this._handleDidChangeVisibleTextEditors(vscode.window.visibleTextEditors);
 
       const activeTextEditor = vscode.window.activeTextEditor;

webpack.web.config.js

@@ -0,0 +1,51 @@
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+  mode: "none",
+  target: "webworker",
+  entry: {
+    extension: "./src/extension.ts",
+  },
+  output: {
+    filename: "[name].js",
+    path: path.join(__dirname, "./out/web"),
+    libraryTarget: "commonjs",
+  },
+  resolve: {
+    mainFields: ["browser", "module", "main"],
+    extensions: [".ts", ".js"],
+    alias: {
+      child_process: false,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.platform": '"web"',
+      "process.env.SHELL": "undefined",
+    }),
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+    }),
+  ],
+  externals: {
+    vscode: "commonjs vscode",
+  },
+  performance: {
+    hints: false,
+  },
+  devtool: "nosources-source-map",
+};