feat: expose Playwright runtime context to scratchpad.config.js (#43)

* feat: expose playwright runtime in config

* chore: added changelog

* chore: update changeset

* chore: add changeset

* core: update readme

.changeset/eight-fishes-enjoy.md

@@ -0,0 +1,20 @@
+---
+"@heymp/scratchpad": minor
+---
+
+Expose Playwright runtime context to scratchpad.config.js [#40](https://github.com/heyMP/scratchpad/issues/40)
+
+`scratchpad.config.js`
+```js
+export default /** @type {import('@heymp/scratchpad/config').Config} */ ({
+  devtools: true,
+  playwright: async (args) => {
+    const { context, page } = args;
+    // block esmodule shims
+    await context.route(/es-module-shims\.js/, async route => {
+      await route.abort();
+    });
+    await page.goto('https://ux.redhat.com');
+  }
+});
+```

.changeset/tasty-radios-rhyme.md

@@ -0,0 +1,13 @@
+---
+"@heymp/scratchpad": patch
+---
+
+Add typings for scratchpad.config.js [#37](https://github.com/heyMP/scratchpad/issues/37)
+
+```js
+export default /** @type {import('@heymp/scratchpad/config').Config} */ ({
+  devtools: true,
+  headless: true,
+  url: 'https://google.com',
+});
+```

README.md

@@ -23,8 +23,7 @@ Options:
   --headless [boolean]  specify running the browser in headless mode.
   --devtools [boolean]  open browser devtools automatically.
   --ts-write [boolean]  write the js output of the target ts file.
-  --url [string]        specify a specific url to execute the code
-                        in.
+  --url [string]        specify a specific url to execute the code in.
   -V, --version         output the version number
   -h, --help            display help for command
 ```
@@ -107,11 +106,30 @@ in your `.ts` files:
 An alternative to using the CLI flags, you can create `scratchpad.config.js`.
 
 ```js
-export default ({
+export default /** @type {import('@heymp/scratchpad/config').Config} */ ({
   devtools: true,
-  headless: false,
-  url: 'https://www.google.com'
-  tsWrite: false,
+  url: 'https://internal-rhdc-review-itmktgwsa-hklqgj.apps.int.spoke.preprod.us-west-2.aws.paas.redhat.com/en/test-page-2',
+  headless: true,
+});
+```
+
+### Playwright runtime
+
+The `scratchpad.config.js` exposes a method for altering the playwright runtime.
+This allows you to interact with the Playwright API to perform actions like blocking
+network requests or navigating to different urls.
+
+```js
+export default /** @type {import('@heymp/scratchpad/config').Config} */ ({
+  devtools: true,
+  playwright: async (args) => {
+    const { context, page } = args;
+    // block esmodule shims
+    await context.route(/es-module-shims\.js/, async route => {
+      await route.abort();
+    });
+    await page.goto('https://ux.redhat.com');
+  }
 });
 ```
 

bin/cli.js

@@ -34,6 +34,7 @@ class Processor extends EventTarget {
     this.headless = opts['headless'];
     this.devtools = opts['devtools'];
     this.tsWrite = opts['tsWrite'];
+    this.playwrightConfig = opts['playwright'];
     this._func = '';
     this.watcher();
     browser(this);

config.d.ts

@@ -0,0 +1,15 @@
+import type { Page, BrowserContext, Browser } from 'playwright';
+
+export type PlaywrightConfig = {
+  page: Page,
+  context: BrowserContext,
+  browser: Browser,
+}
+
+export type Config = {
+  headless?: boolean;
+  devtools?: boolean;
+  tsWrite?: boolean;
+  url?: string;
+  playwright?: (page: PlaywrightConfig) => Promise<void>
+}

package.json

@@ -9,6 +9,7 @@
   "files": [
     "bin/cli.js",
     "src/**",
+    "config.d.ts",
     "types.d.ts"
   ],
   "dependencies": {

src/browser.js

@@ -3,15 +3,6 @@ import util from 'node:util';
 util.inspect.defaultOptions.maxArrayLength = null;
 util.inspect.defaultOptions.depth = null;
 
-function format(value) {
-  if (value instanceof Map) {
-    ret = Array.from(value.entries())
-  } else {
-    ret = value;
-  }
-  console.log(ret);
-}
-
 function nodelog(value) {
   console.log(value);
 }
@@ -25,6 +16,11 @@ export async function browser(processor) {
   const context = await browser.newContext();
   const page = await context.newPage();
 
+  // Allow playwright config override
+  if (processor.playwrightConfig && typeof processor.playwrightConfig === 'function') {
+    await processor.playwrightConfig({ browser, context, page });
+  }
+
   // Create a page
   if (processor.url) {
     await page.goto(processor.url);