Skip to content

Commit 6b4a99f

Browse files
jrandolfjrandolf
authored
chore: migrate addStyleTag (#8879)
* chore: remove unnecessary type signature * chore: fix tests * chore: migrate `addStyleTag` * chore: fix tests * chore: fix tests
1 parent 8f11237 commit 6b4a99f

10 files changed

Lines changed: 180 additions & 129 deletions

‎docs/api/puppeteer.frame.addstyletag.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,26 @@ sidebar_label: Frame.addStyleTag
44

55
# Frame.addStyleTag() method
66

7-
Adds a `<link rel="stylesheet">` tag into the page with the desired url or a `<style type="text/css">` tag with the content.
7+
Adds a `<link rel="stylesheet">` tag into the page with the desired URL or a `<style type="text/css">` tag with the content.
88

99
**Signature:**
1010

1111
```typescript
1212
class Frame {
1313
addStyleTag(
14-
options: FrameAddStyleTagOptions
15-
): Promise<ElementHandle<HTMLStyleElement | HTMLLinkElement>>;
14+
options: Omit<FrameAddStyleTagOptions, 'url'>
15+
): Promise<ElementHandle<HTMLStyleElement>>;
1616
}
1717
```
1818

1919
## Parameters
2020

21-
| Parameter | Type | Description |
22-
| --------- | ----------------------------------------------------------------- | --------------------------- |
23-
| options | [FrameAddStyleTagOptions](./puppeteer.frameaddstyletagoptions.md) | Options for the style link. |
21+
| Parameter | Type | Description |
22+
| --------- | ------------------------------------------------------------------------------------ | ----------- |
23+
| options | Omit&lt;[FrameAddStyleTagOptions](./puppeteer.frameaddstyletagoptions.md), 'url'&gt; | |
2424

2525
**Returns:**
2626

27-
Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;HTMLStyleElement \| HTMLLinkElement&gt;&gt;
27+
Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;HTMLStyleElement&gt;&gt;
2828

29-
a promise that resolves to the added tag when the stylesheets's `onload` event fires or when the CSS content was injected into the frame.
29+
An [element handle](./puppeteer.elementhandle.md) to the loaded `<link>` or `<style>` element.

‎docs/api/puppeteer.frame.addstyletag_1.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
sidebar_label: Frame.addStyleTag_1
3+
---
4+
5+
# Frame.addStyleTag() method
6+
7+
**Signature:**
8+
9+
```typescript
10+
class Frame {
11+
addStyleTag(
12+
options: FrameAddStyleTagOptions
13+
): Promise<ElementHandle<HTMLLinkElement>>;
14+
}
15+
```
16+
17+
## Parameters
18+
19+
| Parameter | Type | Description |
20+
| --------- | ----------------------------------------------------------------- | ----------- |
21+
| options | [FrameAddStyleTagOptions](./puppeteer.frameaddstyletagoptions.md) | |
22+
23+
**Returns:**
24+
25+
Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;HTMLLinkElement&gt;&gt;

‎docs/api/puppeteer.frame.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ console.log(text);
6969
| [$eval(selector, pageFunction, args)](./puppeteer.frame._eval.md) | | <p>Runs the given function on the first element matching the given selector in the frame.</p><p>If the given function returns a promise, then this method will wait till the promise resolves.</p> |
7070
| [$x(expression)](./puppeteer.frame._x.md) | | |
7171
| [addScriptTag(options)](./puppeteer.frame.addscripttag.md) | | Adds a <code>&lt;script&gt;</code> tag into the page with the desired url or content. |
72-
| [addStyleTag(options)](./puppeteer.frame.addstyletag.md) | | Adds a <code>&lt;link rel=&quot;stylesheet&quot;&gt;</code> tag into the page with the desired url or a <code>&lt;style type=&quot;text/css&quot;&gt;</code> tag with the content. |
72+
| [addStyleTag(options)](./puppeteer.frame.addstyletag.md) | | Adds a <code>&lt;link rel=&quot;stylesheet&quot;&gt;</code> tag into the page with the desired URL or a <code>&lt;style type=&quot;text/css&quot;&gt;</code> tag with the content. |
73+
| [addStyleTag(options)](./puppeteer.frame.addstyletag_1.md) | | |
7374
| [childFrames()](./puppeteer.frame.childframes.md) | | |
7475
| [click(selector, options)](./puppeteer.frame.click.md) | | Clicks the first element found that matches <code>selector</code>. |
7576
| [content()](./puppeteer.frame.content.md) | | |

‎docs/api/puppeteer.page.addstyletag.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,26 @@ sidebar_label: Page.addStyleTag
66

77
Adds a `<link rel="stylesheet">` tag into the page with the desired URL or a `<style type="text/css">` tag with the content.
88

9+
Shortcut for .
10+
911
**Signature:**
1012

1113
```typescript
1214
class Page {
13-
addStyleTag(options: {
14-
url?: string;
15-
path?: string;
16-
content?: string;
17-
}): Promise<ElementHandle<Node>>;
15+
addStyleTag(
16+
options: Omit<FrameAddStyleTagOptions, 'url'>
17+
): Promise<ElementHandle<HTMLStyleElement>>;
1818
}
1919
```
2020

2121
## Parameters
2222

23-
| Parameter | Type | Description |
24-
| --------- | -------------------------------------------------- | ----------- |
25-
| options | { url?: string; path?: string; content?: string; } | |
23+
| Parameter | Type | Description |
24+
| --------- | ------------------------------------------------------------------------------------ | ----------- |
25+
| options | Omit&lt;[FrameAddStyleTagOptions](./puppeteer.frameaddstyletagoptions.md), 'url'&gt; | |
2626

2727
**Returns:**
2828

29-
Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;Node&gt;&gt;
29+
Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;HTMLStyleElement&gt;&gt;
3030

31-
Promise which resolves to the added tag when the stylesheet's onload fires or when the CSS content was injected into frame.
31+
An [element handle](./puppeteer.elementhandle.md) to the injected `<link>` or `<style>` element.

‎docs/api/puppeteer.page.addstyletag_1.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
sidebar_label: Page.addStyleTag_1
3+
---
4+
5+
# Page.addStyleTag() method
6+
7+
**Signature:**
8+
9+
```typescript
10+
class Page {
11+
addStyleTag(
12+
options: FrameAddStyleTagOptions
13+
): Promise<ElementHandle<HTMLLinkElement>>;
14+
}
15+
```
16+
17+
## Parameters
18+
19+
| Parameter | Type | Description |
20+
| --------- | ----------------------------------------------------------------- | ----------- |
21+
| options | [FrameAddStyleTagOptions](./puppeteer.frameaddstyletagoptions.md) | |
22+
23+
**Returns:**
24+
25+
Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;HTMLLinkElement&gt;&gt;

‎docs/api/puppeteer.page.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,8 @@ page.off('request', logRequest);
8282
| [$eval(selector, pageFunction, args)](./puppeteer.page._eval.md) | | This method runs <code>document.querySelector</code> within the page and passes the result as the first argument to the <code>pageFunction</code>. |
8383
| [$x(expression)](./puppeteer.page._x.md) | | The method evaluates the XPath expression relative to the page document as its context node. If there are no such elements, the method resolves to an empty array. |
8484
| [addScriptTag(options)](./puppeteer.page.addscripttag.md) | | Adds a <code>&lt;script&gt;</code> tag into the page with the desired URL or content. |
85-
| [addStyleTag(options)](./puppeteer.page.addstyletag.md) | | Adds a <code>&lt;link rel=&quot;stylesheet&quot;&gt;</code> tag into the page with the desired URL or a <code>&lt;style type=&quot;text/css&quot;&gt;</code> tag with the content. |
85+
| [addStyleTag(options)](./puppeteer.page.addstyletag.md) | | <p>Adds a <code>&lt;link rel=&quot;stylesheet&quot;&gt;</code> tag into the page with the desired URL or a <code>&lt;style type=&quot;text/css&quot;&gt;</code> tag with the content.</p><p>Shortcut for .</p> |
86+
| [addStyleTag(options)](./puppeteer.page.addstyletag_1.md) | | |
8687
| [authenticate(credentials)](./puppeteer.page.authenticate.md) | | Provide credentials for <code>HTTP authentication</code>. |
8788
| [bringToFront()](./puppeteer.page.bringtofront.md) | | Brings page to front (activates tab). |
8889
| [browser()](./puppeteer.page.browser.md) | | Get the browser the page belongs to. |

‎src/common/Frame.ts‎

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {LifecycleWatcher, PuppeteerLifeCycleEvent} from './LifecycleWatcher.js';
1818
import {Page} from './Page.js';
1919
import {getQueryHandlerAndSelector} from './QueryHandler.js';
2020
import {EvaluateFunc, HandleFor, NodeFor} from './types.js';
21+
import {importFS} from './util.js';
2122

2223
/**
2324
* @public
@@ -751,7 +752,7 @@ export class Frame {
751752
const {path} = options;
752753
if (+!!options.url + +!!path + +!!content !== 1) {
753754
throw new Error(
754-
'Exactly one of `url`, `path`, or `content` may be specified.'
755+
'Exactly one of `url`, `path`, or `content` must be specified.'
755756
);
756757
}
757758

@@ -795,7 +796,11 @@ export class Frame {
795796
script.addEventListener(
796797
'error',
797798
event => {
798-
rej(event.message ?? 'Could not load script');
799+
let message = 'Could not load script';
800+
if (event instanceof ErrorEvent) {
801+
message = event.message ?? message;
802+
}
803+
rej(message);
799804
},
800805
{once: true}
801806
);
@@ -813,18 +818,87 @@ export class Frame {
813818
}
814819

815820
/**
816-
* Adds a `<link rel="stylesheet">` tag into the page with the desired url or
821+
* Adds a `<link rel="stylesheet">` tag into the page with the desired URL or
817822
* a `<style type="text/css">` tag with the content.
818823
*
819-
* @param options - Options for the style link.
820-
* @returns a promise that resolves to the added tag when the stylesheets's
821-
* `onload` event fires or when the CSS content was injected into the
822-
* frame.
824+
* @returns An {@link ElementHandle | element handle} to the loaded `<link>`
825+
* or `<style>` element.
823826
*/
827+
async addStyleTag(
828+
options: Omit<FrameAddStyleTagOptions, 'url'>
829+
): Promise<ElementHandle<HTMLStyleElement>>;
830+
async addStyleTag(
831+
options: FrameAddStyleTagOptions
832+
): Promise<ElementHandle<HTMLLinkElement>>;
824833
async addStyleTag(
825834
options: FrameAddStyleTagOptions
826835
): Promise<ElementHandle<HTMLStyleElement | HTMLLinkElement>> {
827-
return this.worlds[MAIN_WORLD].addStyleTag(options);
836+
let {content = ''} = options;
837+
const {path} = options;
838+
if (+!!options.url + +!!path + +!!content !== 1) {
839+
throw new Error(
840+
'Exactly one of `url`, `path`, or `content` must be specified.'
841+
);
842+
}
843+
844+
if (path) {
845+
let fs: typeof import('fs').promises;
846+
try {
847+
fs = (await importFS()).promises;
848+
} catch (error) {
849+
if (error instanceof TypeError) {
850+
throw new Error(
851+
'Can only pass a file path in a Node-like environment.'
852+
);
853+
}
854+
throw error;
855+
}
856+
857+
content = await fs.readFile(path, 'utf8');
858+
content += '/*# sourceURL=' + path.replace(/\n/g, '') + '*/';
859+
options.content = content;
860+
}
861+
862+
return this.worlds[MAIN_WORLD].transferHandle(
863+
await this.worlds[PUPPETEER_WORLD].evaluateHandle(
864+
async ({url, content}) => {
865+
if (!url) {
866+
const style = document.createElement('style');
867+
style.appendChild(document.createTextNode(content!));
868+
const promise = new Promise((res, rej) => {
869+
style.addEventListener('load', res, {once: true});
870+
style.addEventListener(
871+
'error',
872+
event => {
873+
rej(event.message ?? 'Could not load style');
874+
},
875+
{once: true}
876+
);
877+
});
878+
document.head.appendChild(style);
879+
await promise;
880+
return style;
881+
}
882+
const link = document.createElement('link');
883+
link.rel = 'stylesheet';
884+
link.href = url;
885+
const promise = new Promise((res, rej) => {
886+
link.addEventListener('load', res, {once: true});
887+
link.addEventListener(
888+
'error',
889+
event => {
890+
rej(event.message ?? 'Could not load style');
891+
},
892+
{once: true}
893+
);
894+
});
895+
document.head.appendChild(link);
896+
await promise;
897+
return link;
898+
},
899+
options
900+
)
901+
);
828902
}
829903

830904
/**

0 commit comments

Comments
 (0)