Skip to content

Commit 6b4a99f

Browse files
jrandolf-2jrandolf-2
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

+180
-129
lines changed

‎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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy