fix: replace webpack with esbuild which solved crashing (#581)

* fix: replace webpack with esbuild which solved crashing

* fix: changeset is added and minor corrections

* fix: esbuild scripts optimization

* fix: enable github action build job for pull requests

* fix: change set update

* fix: fixed server crash with trace log level, node version update for esbuild

* fix: webpack configs removed

---------

Co-authored-by: Vadim Koblov <[email protected]>

Author: marufrasully

.changeset/honest-baboons-brush.md

@@ -0,0 +1,8 @@
+---
+"vscode-ui5-language-assistant": patch
+"@ui5-language-assistant/language-server": patch
+"@ui5-language-assistant/vscode-ui5-language-assistant-bas-ext": patch
+---
+
+Switching from webpack to esbuild for bundling the code
+Fix GitHub action build job to run build and tests on pull requests to master

.github/workflows/release.yaml

@@ -12,7 +12,6 @@ env:
 
 jobs:
   build:
-    if: github.ref == 'refs/heads/master' # to filter out tag pushes
     strategy:
       matrix:
         os: [ubuntu-latest]

esbuild.js

@@ -0,0 +1,40 @@
+async function builder(options) {
+  const buildConfig = {
+    ...{
+      logLevel: "info",
+      write: true,
+      format: "cjs",
+      bundle: true,
+      metafile: true,
+      sourcemap: true, // .vscodeignore ignores .map files when bundling!!
+      mainFields: ["module", "main"], // https://stackoverflow.com/a/69352281
+      minify: true,
+      loader: {
+        ".jpg": "file",
+        ".gif": "file",
+        ".mp4": "file",
+        ".graphql": "text",
+        ".png": "file",
+        ".svg": "file",
+      },
+      platform: "node",
+      target: "node14",
+    },
+    ...options,
+  };
+
+  if (process.argv.slice(2).includes("--watch")) {
+    console.log("Applyin watch config");
+    buildConfig.watch = true;
+    buildConfig.minify = false;
+  }
+
+  require("esbuild")
+    .build(buildConfig)
+    .catch((error) => {
+      console.log(error);
+      process.exit(1);
+    });
+}
+
+module.exports = { builder };

package.json

@@ -78,8 +78,7 @@
     "sinon-chai": "3.5.0",
     "source-map-support": "0.5.19",
     "typescript": "3.9.7",
-    "webpack": "5.76.0",
-    "webpack-cli": "4.4.0"
+    "esbuild": "0.17.12"
   },
   "lint-staged": {
     "*.{js,ts,md,json}": [

packages/language-server/esbuild.js

@@ -0,0 +1,7 @@
+const { join } = require("path");
+const { builder } = require("../../esbuild");
+
+builder({
+  outfile: "dist/server.js",
+  entryPoints: [join(process.cwd(), "src/server.ts")],
+});

packages/language-server/package.json

@@ -64,6 +64,6 @@
     "test": "mocha",
     "coverage": "nyc mocha",
     "update-snapshots": "node ./scripts/update-diagnostics-snapshots",
-    "bundle": "webpack --mode production"
+    "bundle": "node esbuild.js"
   }
 }

packages/language-server/src/api.ts

@@ -2,7 +2,12 @@ import { resolve } from "path";
 import { existsSync } from "fs";
 
 // for use in productive flows
-const bundledPath = resolve(__dirname, "..", "..", "dist", "server.js");
+const bundledPath = resolve(
+  __dirname,
+  "..",
+  "node_modules/@ui5-language-assistant/language-server/dist",
+  "server.js"
+);
 
 const sourcesPath = resolve(__dirname, "server.js");
 

packages/language-server/src/logger.ts

@@ -4,11 +4,17 @@ import {
   LogLevel,
   ILogger,
 } from "@ui5-language-assistant/logic-utils";
-
+import { join } from "path";
+import { readJsonSync } from "fs-extra";
 const getPackageName = (): string => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires -- Using `require` for .json file as this gets bundled with webpack correctly.
-  const meta = require("../../package.json");
-  return meta.name;
+  let meta;
+  try {
+    // in production - ../extensions/saposs.vscode-ui5-language-assistant-4.0.6/node_modules/@ui5-language-assistant/language-server/dist
+    meta = readJsonSync(join(__dirname, "..", "package.json"));
+  } catch (error) {
+    meta = readJsonSync(join(__dirname, "..", "..", "package.json"));
+  }
+  return meta?.name;
 };
 
 const name = getPackageName();

packages/language-server/src/server.ts

@@ -292,7 +292,9 @@ connection.onDidChangeWatchedFiles(async (changeEvent) => {
 
 documents.onDidChangeContent(
   async (changeEvent): Promise<void> => {
-    getLogger().trace("`onDidChangeContent` event", { changeEvent });
+    getLogger().trace("`onDidChangeContent` event", {
+      ...changeEvent.document,
+    });
     if (
       manifestStateInitialized === undefined ||
       ui5yamlStateInitialized === undefined ||

packages/language-server/webpack.config.js

@@ -0,0 +1,10 @@
+const { join } = require("path");
+const { builder } = require("../../esbuild");
+
+builder({
+  outfile: "dist/extension.js",
+  entryPoints: [join(process.cwd(), "src/extension.ts")],
+  external: [
+    "vscode", // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+  ],
+});

packages/vscode-ui5-language-assistant/esbuild.js

@@ -96,7 +96,7 @@
     "test:unit": "mocha --config=./test/unit/.mocharc.js",
     "coverage:integration": "nyc node lib/test/run-integration-tests.js",
     "coverage:unit": "nyc mocha --config=./test/unit/.mocharc.js",
-    "bundle": "webpack --mode production",
+    "bundle": "node esbuild.js",
     "package": "node ./scripts/package-vsix"
   },
   "dependencies": {

packages/vscode-ui5-language-assistant/package.json

@@ -2,11 +2,18 @@ import {
   getLogger as logger,
   ILogger,
 } from "@ui5-language-assistant/logic-utils";
+import { join } from "path";
+import { readJsonSync } from "fs-extra";
 
 const getPackageName = (): string => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires -- Using `require` for .json file as this gets bundled with webpack correctly.
-  const meta = require("../../package.json");
-  return meta.name;
+  let meta;
+  try {
+    // in production - ../extensions/saposs.vscode-ui5-language-assistant-4.0.6/dist which equals to vscode-ui5-language-assistant/dist
+    meta = readJsonSync(join(__dirname, "..", "package.json"));
+  } catch (error) {
+    meta = readJsonSync(join(__dirname, "..", "..", "package.json"));
+  }
+  return meta?.name;
 };
 
 const name = getPackageName();