Commit Graph

4 Commits

Author SHA1 Message Date
Jack Franklin
ea2b0d1f62
chore: improve type inference of evaluate (#7267)
This commit updates the JSHandle class to take a generic representing
the underlying object that it's wrapping. We can then define
`ElementHandle` as a class that extends `JSHandle<Element>` and begin
to get better type inference.

Prior to this commit the following code would have `d` set to `any`:

```
const div: page.$<HTMLDivElement>('div')
const text = await div.evaluate(d => d.innerText)
```

You could work around this in two ways:

```
const text = await div.evaluate<(d: HTMLDivElement) => string>(d => d.innerText)
const text = await div.evaluate((d: HTMLDivElement) => d.innerText)
```

But both of these have two issues:

1. Requires the user to type extra information.
2. There's no type checking: in the code above I could type `d` as
   `number` and TS would be happy.

With the change here to `evaluate` the user can now type the original
code:

```
const div: page.$<HTMLDivElement>('div')
const text = await div.evaluate(d => d.innerText)
```

And TypeScript will know that `d` is an `HTMLDivElement`.

This change brings us inline with the approach that @types/puppeteer
takes. If we land this and it works, we can do the same with
`evaluateHandle` to hopefully make a similar improvement there.

BREAKING: because this changes the types, which were previously `any`,
this is technically a breaking change as users using TS could start
getting errors after this change is released.
2021-05-26 13:46:17 +00:00
Jack Franklin
866d34ee11
fix: type page event listeners correctly (#6891)
This PR fixes the fact that currently if you have:

```ts
page.on('request', request => {

})
```

Then `request` will be typed as `any`. We can fix this by defining an
interface of event name => callback argument type, and looking that up
when you call `page.on`.

Also includes a drive-by fix to ensure we convert response headers to
strings, and updates the types accordingly.
2021-03-25 11:26:35 +00:00
Jack Franklin
641ffc2a20
chore: improve TS automated type tests (#6860)
This PR:

1. Makes sure we remove and freshly install Puppeteer before testing our
   type defs, to avoid running on stale files.
2. Makes the tests run off `puppeteer.tgz` to avoid having version
   numbers in the file name and therefore having to update it when we
   bump versions.
2021-02-11 10:34:44 +00:00
Jack Franklin
6a0eb7841f
fix: wider compat TS types and CI checks to ensure correct type defs (#6855)
* fix: wider compat TS types and CI checks to ensure correct type defs

This PR improves our TS types further to make sure they are usable in a
TS environment where ES Modules are the target output. Our use of
`export =` is problematic this environment as TypeScript does not allow
`export =` to be used and it errors.

The fix for the type issues to avoid `export =` is to instead define the
functions that you gain access to when you import Puppeteer as top level
functions in our `types.d.ts` file. We can do this by declaring them
explicitly in `src/node.ts`. These are then rolled into `lib/types.d.ts`
at build time. The downside to this is that we have to keep those
declarations in sync with the Puppeteer API; should we add a new method
to the `Puppeteer` class, we must add it to the `nodes.ts` declarations.
However, this could easily be automated by a small script that walks the
AST and generates these. I will do that in a follow-up PR, but I
consider this low risk given how rarely the very top level API of
Puppeteer changes. The nice thing about this approach is we no longer
need our script that hacks on changes to `lib/types.d.ts`.

To avoid yet more releases to fix issues in one particular TS
environment, this PR also includes a suite of example setups that we
test on each CI run. Each sample folder contains `good.ts`, which should
have no TS errors, and `bad.ts`, which should have some errors. The test
first packs Puppeteer into a tar, and then installs it from that tar
into each project. This should replicate how the published package
behaves when it is installed. We then check that we get no errors on
`good.ts`, and the expected errors on `bad.ts`.

We have a variety of test projects that cover both TS and JS source
code, and CJS and ESM imports and outputs.
2021-02-10 12:04:36 +00:00