chore: Added VSCode debug support

Author: edgardmessias

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  // Use o IntelliSense para saber mais sobre os atributos possíveis.
+  // Focalizar para exibir as descrições dos atributos existentes.
+  // Para obter mais informações, acesse: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "attach",
+      "name": "Launch local",
+      "address": "127.0.0.1",
+      "port": 9222,
+      "webRoot": "${workspaceFolder}",
+      "pathMapping": {
+        "/dist": "${workspaceFolder}/dist",
+        "/": "${workspaceFolder}/wa-source"
+      },
+      "preLaunchTask": "npm: watch",
+      "timeout": 30000,
+      "restart": true,
+      "server": {
+        "command": "npm run launch:local \"--\" \"--remote-debugging-port=9222\""
+      }
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,37 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "Webpack (Dev, Continuous)",
+        "severity": "error",
+        "fileLocation": "absolute",
+        "source": "webpack-typescript",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "assets by path|building|sealing",
+          "endsPattern": "webpack [\\d.]+ compiled"
+        },
+        "pattern": [
+          {
+            "regexp": "ERROR in ([^\\(]*)\\((\\d+),(\\d+)\\):",
+            "file": 1,
+            "line": 2,
+            "column": 2
+          },
+          {
+            "regexp": "([A-Za-z0-9-]+):(.*)",
+            "message": 2,
+            "code": 1
+          }
+        ]
+      },
+      "label": "npm: watch",
+      "detail": "webpack watch"
+    }
+  ]
+}

package.json

@@ -32,7 +32,7 @@
     "wa-source:download": "ts-node ./src/tools/extractWhatsappSource.ts",
     "wa-source:format": "prettier --write ./wa-source",
     "wa-source": "npm run wa-source:clean && npm run wa-source:download && npm run wa-source:format",
-    "watch": "webpack --watch --devtool inline-source-map --mode development"
+    "watch": "webpack watch --devtool inline-source-map --mode development --progress"
   },
   "dependencies": {},
   "devDependencies": {

src/tools/browser.ts

@@ -18,12 +18,15 @@ import * as waVersion from '@wppconnect/wa-version';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as playwright from 'playwright';
-import { LaunchOptions } from 'playwright';
 
 export const URL = 'https://web.whatsapp.com/';
 export const WA_DIR = path.resolve(__dirname, '../../wa-source');
 
-export async function getPage(options?: LaunchOptions) {
+type LaunchArguments = Parameters<
+  typeof playwright.chromium.launchPersistentContext
+>;
+
+export async function getPage(options?: LaunchArguments[1]) {
   const browser = await playwright.chromium.launchPersistentContext(
     path.resolve(__dirname, '../../userDataDir'),
     options
@@ -43,13 +46,26 @@ export async function getPage(options?: LaunchOptions) {
     }
 
     const fileName = path.basename(request.url());
-    const filePath = path.join(WA_DIR, fileName);
+    const filePathDist = path.join(
+      path.resolve(__dirname, '../../dist/'),
+      fileName
+    );
+
+    if (request.url().includes('dist') && fs.existsSync(filePathDist)) {
+      return route.fulfill({
+        status: 200,
+        contentType: 'text/javascript; charset=UTF-8',
+        body: fs.readFileSync(filePathDist, { encoding: 'utf8' }),
+      });
+    }
+
+    const filePathSource = path.join(WA_DIR, fileName);
 
-    if (fs.existsSync(filePath)) {
+    if (fs.existsSync(filePathSource)) {
       return route.fulfill({
         status: 200,
         contentType: 'text/javascript; charset=UTF-8',
-        body: fs.readFileSync(filePath, { encoding: 'utf8' }),
+        body: fs.readFileSync(filePathSource, { encoding: 'utf8' }),
       });
     }
 
@@ -76,7 +92,7 @@ export async function getPage(options?: LaunchOptions) {
 
   page.on('domcontentloaded', async () => {
     await page.addScriptTag({
-      path: path.resolve(__dirname, '../../dist/wppconnect-wa.js'),
+      url: `${URL}dist/wppconnect-wa.js`,
     });
   });
 

src/tools/launchLocal.ts

@@ -17,9 +17,13 @@
 import { getPage } from './browser';
 
 async function start() {
+  const args = process.argv.slice(2);
+
   await getPage({
     headless: false,
-    devtools: true,
+    devtools: !args.some((m) => m.includes('--remote-debugging-port')),
+    viewport: null,
+    args,
   });
 }
 start();

tsconfig.json

@@ -11,6 +11,7 @@
     "removeComments": false,
     "resolveJsonModule": true,
     "skipLibCheck": true,
+    "sourceMap": true,
     "strict": true,
     "target": "ES2017"
   },