Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: migrate addStyleTag #8879

Merged
merged 5 commits into from Sep 1, 2022
Merged

chore: migrate addStyleTag #8879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f35349
chore: remove unnecessary type signature
jrandolf Sep 1, 2022
9098580
chore: fix tests
jrandolf Sep 1, 2022
b37ce10
chore: migrate `addStyleTag`
jrandolf Sep 1, 2022
d08abd9
chore: fix tests
jrandolf Sep 1, 2022
819832b
chore: fix tests
jrandolf Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/api/puppeteer.frame.addstyletag.md
View file
Open in desktop
Expand Up @@ -4,26 +4,26 @@ sidebar_label: Frame.addStyleTag

# Frame.addStyleTag() method

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

**Signature:**

```typescript
class Frame {
addStyleTag(
options: FrameAddStyleTagOptions
): Promise<ElementHandle<HTMLStyleElement | HTMLLinkElement>>;
options: Omit<FrameAddStyleTagOptions, 'url'>
): Promise<ElementHandle<HTMLStyleElement>>;
}
```

## Parameters

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

**Returns:**

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

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.
An [element handle](./puppeteer.elementhandle.md) to the loaded `<link>` or `<style>` element.
25 changes: 25 additions & 0 deletions docs/api/puppeteer.frame.addstyletag_1.md
View file
Open in desktop
@@ -0,0 +1,25 @@
---
sidebar_label: Frame.addStyleTag_1
jrandolf marked this conversation as resolved.
Show resolved Hide resolved
---

# Frame.addStyleTag() method

**Signature:**

```typescript
class Frame {
addStyleTag(
options: FrameAddStyleTagOptions
): Promise<ElementHandle<HTMLLinkElement>>;
}
```

## Parameters

| Parameter | Type | Description |
| --------- | ----------------------------------------------------------------- | ----------- |
| options | [FrameAddStyleTagOptions](./puppeteer.frameaddstyletagoptions.md) | |

**Returns:**

Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;HTMLLinkElement&gt;&gt;
3 changes: 2 additions & 1 deletion docs/api/puppeteer.frame.md
View file
Open in desktop
Expand Up @@ -69,7 +69,8 @@ console.log(text);
| [$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> |
| [$x(expression)](./puppeteer.frame._x.md) | | |
| [addScriptTag(options)](./puppeteer.frame.addscripttag.md) | | Adds a <code>&lt;script&gt;</code> tag into the page with the desired url or content. |
| [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. |
| [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. |
| [addStyleTag(options)](./puppeteer.frame.addstyletag_1.md) | | |
| [childFrames()](./puppeteer.frame.childframes.md) | | |
| [click(selector, options)](./puppeteer.frame.click.md) | | Clicks the first element found that matches <code>selector</code>. |
| [content()](./puppeteer.frame.content.md) | | |
Expand Down
20 changes: 10 additions & 10 deletions docs/api/puppeteer.page.addstyletag.md
View file
Open in desktop
Expand Up @@ -6,26 +6,26 @@ sidebar_label: Page.addStyleTag

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

Shortcut for .

**Signature:**

```typescript
class Page {
addStyleTag(options: {
url?: string;
path?: string;
content?: string;
}): Promise<ElementHandle<Node>>;
addStyleTag(
options: Omit<FrameAddStyleTagOptions, 'url'>
): Promise<ElementHandle<HTMLStyleElement>>;
}
```

## Parameters

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

**Returns:**

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

Promise which resolves to the added tag when the stylesheet's onload fires or when the CSS content was injected into frame.
An [element handle](./puppeteer.elementhandle.md) to the injected `<link>` or `<style>` element.
25 changes: 25 additions & 0 deletions docs/api/puppeteer.page.addstyletag_1.md
View file
Open in desktop
@@ -0,0 +1,25 @@
---
sidebar_label: Page.addStyleTag_1
---

# Page.addStyleTag() method

**Signature:**

```typescript
class Page {
addStyleTag(
options: FrameAddStyleTagOptions
): Promise<ElementHandle<HTMLLinkElement>>;
}
```

## Parameters

| Parameter | Type | Description |
| --------- | ----------------------------------------------------------------- | ----------- |
| options | [FrameAddStyleTagOptions](./puppeteer.frameaddstyletagoptions.md) | |

**Returns:**

Promise&lt;[ElementHandle](./puppeteer.elementhandle.md)&lt;HTMLLinkElement&gt;&gt;
3 changes: 2 additions & 1 deletion docs/api/puppeteer.page.md
View file
Open in desktop
Expand Up @@ -82,7 +82,8 @@ page.off('request', logRequest);
| [$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>. |
| [$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. |
| [addScriptTag(options)](./puppeteer.page.addscripttag.md) | | Adds a <code>&lt;script&gt;</code> tag into the page with the desired URL or content. |
| [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. |
| [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> |
| [addStyleTag(options)](./puppeteer.page.addstyletag_1.md) | | |
| [authenticate(credentials)](./puppeteer.page.authenticate.md) | | Provide credentials for <code>HTTP authentication</code>. |
| [bringToFront()](./puppeteer.page.bringtofront.md) | | Brings page to front (activates tab). |
| [browser()](./puppeteer.page.browser.md) | | Get the browser the page belongs to. |
Expand Down
90 changes: 82 additions & 8 deletions src/common/Frame.ts
View file
Open in desktop
Expand Up @@ -18,6 +18,7 @@ import {LifecycleWatcher, PuppeteerLifeCycleEvent} from './LifecycleWatcher.js';
import {Page} from './Page.js';
import {getQueryHandlerAndSelector} from './QueryHandler.js';
import {EvaluateFunc, HandleFor, NodeFor} from './types.js';
import {importFS} from './util.js';

/**
* @public
Expand Down Expand Up @@ -751,7 +752,7 @@ export class Frame {
const {path} = options;
if (+!!options.url + +!!path + +!!content !== 1) {
throw new Error(
'Exactly one of `url`, `path`, or `content` may be specified.'
'Exactly one of `url`, `path`, or `content` must be specified.'
);
}

Expand Down Expand Up @@ -795,7 +796,11 @@ export class Frame {
script.addEventListener(
'error',
event => {
rej(event.message ?? 'Could not load script');
let message = 'Could not load script';
if (event instanceof ErrorEvent) {
message = event.message ?? message;
}
rej(message);
},
{once: true}
);
Expand All @@ -813,18 +818,87 @@ export class Frame {
}

/**
* Adds a `<link rel="stylesheet">` tag into the page with the desired url or
* Adds a `<link rel="stylesheet">` tag into the page with the desired URL or
* a `<style type="text/css">` tag with the content.
*
* @param options - Options for the style link.
* @returns 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.
* @returns An {@link ElementHandle | element handle} to the loaded `<link>`
* or `<style>` element.
*/
async addStyleTag(
options: Omit<FrameAddStyleTagOptions, 'url'>
): Promise<ElementHandle<HTMLStyleElement>>;
async addStyleTag(
options: FrameAddStyleTagOptions
): Promise<ElementHandle<HTMLLinkElement>>;
async addStyleTag(
options: FrameAddStyleTagOptions
): Promise<ElementHandle<HTMLStyleElement | HTMLLinkElement>> {
return this.worlds[MAIN_WORLD].addStyleTag(options);
let {content = ''} = options;
const {path} = options;
if (+!!options.url + +!!path + +!!content !== 1) {
throw new Error(
'Exactly one of `url`, `path`, or `content` must be specified.'
);
}

if (path) {
let fs: typeof import('fs').promises;
try {
fs = (await importFS()).promises;
} catch (error) {
if (error instanceof TypeError) {
throw new Error(
'Can only pass a file path in a Node-like environment.'
);
}
throw error;
}

content = await fs.readFile(path, 'utf8');
content += '/*# sourceURL=' + path.replace(/\n/g, '') + '*/';
options.content = content;
}

return this.worlds[MAIN_WORLD].transferHandle(
await this.worlds[PUPPETEER_WORLD].evaluateHandle(
async ({url, content}) => {
if (!url) {
const style = document.createElement('style');
style.appendChild(document.createTextNode(content!));
const promise = new Promise((res, rej) => {
style.addEventListener('load', res, {once: true});
style.addEventListener(
'error',
event => {
rej(event.message ?? 'Could not load style');
},
{once: true}
);
});
document.head.appendChild(style);
await promise;
return style;
}
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
const promise = new Promise((res, rej) => {
link.addEventListener('load', res, {once: true});
link.addEventListener(
'error',
event => {
rej(event.message ?? 'Could not load style');
},
{once: true}
);
});
document.head.appendChild(link);
await promise;
return link;
},
options
)
);
}

/**
Expand Down