Add web support

.vscode/launch.json

@@ -13,6 +13,18 @@
             // "skipFiles": ["<node_internals>/**", "**/node_modules/**", "**/app/out/vs/**", "**/extensions/**"],
             "smartStep": true,
             "sourceMaps": true
-		}
+		},
+        {
+            "name": "Run Web Extension in VS Code",
+            "type": "pwa-extensionHost",
+            "debugWebWorkerHost": true,
+            "request": "launch",
+            "args": [
+              "--extensionDevelopmentPath=${workspaceFolder}",
+              "--extensionDevelopmentKind=web"
+            ],
+            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+            "preLaunchTask": "npm: watch"
+          }
 	]
 }

README.md

@@ -12,7 +12,6 @@
 * Adds **Virtual Workspaces** support
 * Adds **Workspace Trust** support
 * Adds **Multi-root** support
-* The **Formatter** was extracted to its own extension ([Pascal Formatter](https://github.com/alefragnani/vscode-pascal-formatter))
 
 ## Support
 
@@ -40,7 +39,6 @@ Here are some of the features that **Pascal** provides:
 
 * **Syntax highlighting** for files, forms and projects
 * A huge set of **Snippets**
-* Support for different **Code Formatters** (via [Pascal Formatter](https://github.com/alefragnani/vscode-pascal-formatter))
 * Source code **navigation** 
 
 # Features
@@ -105,10 +103,6 @@ Navigate to any language element (methods, attributes, classes, interfaces, and
 
 # Available commands
 
-## Code Formatter
-
-Check out [Pascal Formatter](https://github.com/alefragnani/vscode-pascal-formatter#available-commands) documentation.
-
 ## Code Navigation
 
 To enable **Code Navigation**, the extension depends on **GNU Global and Exuberant Tags** and for that, you must run `gtags` on the Root folder, so the tags are created. In order to make life easier, two commands where added:

package.json

@@ -47,7 +47,8 @@
             ]
         }
     },
-    "main": "./dist/extension",
+    "main": "./dist/extension-node.js",
+    "browser": "./dist/extension-web.js",
     "icon": "images/icon.png",
     "license": "SEE LICENSE IN LICENSE.md",
     "homepage": "https://github.com/alefragnani/vscode-language-pascal/blob/master/README.md",
@@ -97,12 +98,12 @@
             {
                 "command": "pascal.generateTags",
                 "title": "Pascal: Generate Tags",
-                "enablement": "isWorkspaceTrusted"
+                "enablement": "isWorkspaceTrusted && !isWeb"
             },
             {
                 "command": "pascal.updateTags",
                 "title": "Pascal: Update Tags",
-                "enablement": "isWorkspaceTrusted"
+                "enablement": "isWorkspaceTrusted && !isWeb"
             },
             {
                 "command": "pascal.whatsNew",
@@ -198,18 +199,20 @@
                     {
                         "id": "formatter",
                         "title": "Formatter",
-                        "description": "The extension uses the [Pascal Formatter](command:_pascal.installPascalFormatter) extension, which is automatically installed",
+                        "description": "Standardise your Pascal code\n[Install Pascal Formatter](command:_pascal.installPascalFormatter)",
                         "media": {
                             "markdown": "walkthrough/formatter.md"
-                        }
+                        },
+                        "when": "!isWeb"
                     },
                     {
                         "id": "codeNavigation",
                         "title": "Code Navigation",
                         "description": "The **Pascal** extension requires GNU GLobal to navigate to any language element (methods, attributes, classes, interfaces, and so on)",
                         "media": {
                             "markdown": "walkthrough/codeNavigation.md"
-                        }
+                        },
+                        "when": "!isWeb"
                     },
                     {
                         "id": "delphiLike",
@@ -238,9 +241,6 @@
         "compile": "tsc -watch -p ./",
         "lint": "eslint -c package.json --ext .ts src vscode-whats-new"
     },
-    "extensionDependencies": [
-        "alefragnani.pascal-formatter"
-    ],
     "devDependencies": {
         "@types/node": "^14.17.27",
         "@types/vscode": "^1.61.0",

src/extension-web.ts

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+*  Copyright (c) Alessandro Fragnani. All rights reserved.
+*  Licensed under the MIT License. See License.md in the project root for license information.
+*--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+
+import { Container } from './container';
+import { registerWalkthrough } from "./commands/walkthrough";
+import { registerWhatsNew } from './whats-new/commands';
+
+// this method is called when your extension is activated
+// your extension is activated the very first time the command is executed
+export async function activate(context: vscode.ExtensionContext) {
+
+    Container.context = context;
+
+    await registerWhatsNew();
+    registerWalkthrough();
+}

src/whats-new/commands.ts

@@ -8,12 +8,12 @@ import { Container } from "../container";
 import { WhatsNewManager } from "../../vscode-whats-new/src/Manager";
 import { PascalSocialMediaProvider, PascalContentProvider } from "./contentProvider";
 
-export function registerWhatsNew() {
+export async function registerWhatsNew() {
     const provider = new PascalContentProvider();
     const viewer = new WhatsNewManager(Container.context)
         .registerContentProvider("alefragnani", "pascal", provider)
         .registerSocialMediaProvider(new PascalSocialMediaProvider());
-    viewer.showPageInActivation();
+    await viewer.showPageInActivation();
     Container.context.subscriptions.push(commands.registerCommand('pascal.whatsNew', () => viewer.showPage()));
     Container.context.subscriptions.push(commands.registerCommand('_pascal.whatsNewContextMenu', () => viewer.showPage()));
 }

tsconfig.json

@@ -4,7 +4,7 @@
 		"target": "ES2020",
 		"outDir": "out",
 		"lib": [
-			"ES2020"
+			"ES2020", "DOM"
 		],
 		"sourceMap": true,
 		"rootDir": ".",

walkthrough/delphiLike.md

@@ -32,7 +32,7 @@
 <table align="center" width="85%" border="0">
   <tr>
     <td align="center">
-      <a title="Paypal" href="command:_pascal.installDelphiThemes">Install Themes</a>
+      <a title="Install Delphi Themes" href="command:_pascal.installDelphiThemes">Install Themes</a>
     </td>
   </tr>
 </table>

walkthrough/formatter.md

@@ -1 +1,16 @@
-![Formatter](./vscode-pascal-format-code.gif)
+## Pascal Formatter Extension
+
+![Pascal Formatter](./vscode-pascal-format-code.gif)
+
+Use the [Pascal Formatter](command:_pascal.installPascalFormatter) extension to format your code. 
+
+You an choose choose between **Jedi Code Format**, **FreePascal PToP** or **Embarcadero Formatter**
+
+
+<table align="center" width="85%" border="0">
+  <tr>
+    <td align="center">
+      <a title="Install Pascal Formatter" href="command:_pascal.installPascalFormatter">Install Pascal Formatter</a>
+    </td>
+  </tr>
+</table>

webpack.config.js

@@ -10,18 +10,12 @@
 
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
+const webpack = require('webpack');
+
 
 /**@type {import('webpack').Configuration}*/
 const config = {
-    target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
-
-    entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
-    output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
-        path: path.resolve(__dirname, 'dist'),
-        filename: 'extension.js',
-        libraryTarget: "commonjs2",
-        devtoolModuleFilenameTemplate: "../[resource-path]",
-    },
+    entry: "./src/extension.ts",
     optimization: {
         minimizer: [new TerserPlugin({
             parallel: true,
@@ -56,4 +50,27 @@ const config = {
     },
 }
 
-module.exports = config;
+const nodeConfig = {
+    ...config,
+    target: "node",
+    output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'extension-node.js',
+        libraryTarget: "commonjs2",
+        devtoolModuleFilenameTemplate: "../[resource-path]",
+    },
+}
+
+const webConfig = {
+    ...config,
+    entry: "./src/extension-web.ts",
+    target: "webworker",
+    output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'extension-web.js',
+        libraryTarget: "commonjs2",
+        devtoolModuleFilenameTemplate: "../[resource-path]",
+    },
+}
+
+module.exports = [webConfig,  nodeConfig];