Skip to content

Commit

Permalink
chore: migrate addStyleTag (#8879)
Browse files Browse the repository at this point in the history 
* chore: remove unnecessary type signature

* chore: fix tests

* chore: migrate `addStyleTag`

* chore: fix tests

* chore: fix tests
  • Loading branch information
@jrandolf-2
jrandolf-2 authored Sep 1, 2022
1 parent 8f11237 commit 6b4a99f
Show file tree
Hide file tree
Showing 10 changed files with 180 additions and 129 deletions.
16 changes: 8 additions & 8 deletions docs/api/puppeteer.frame.addstyletag.md
View file
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
sidebar_label: Frame.addStyleTag_1
---

# 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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Loading

0 comments on commit 6b4a99f

Please sign in to comment.