結論
mainに入ってるけどまだリリースされてないだけだった。
リリースちゃんと読もう。
TypeScriptでPuppeteerガンガン使いましょう。
経緯
Puppeteerはv6でTypeScriptの型がビルドインになり、@types/puppeteerが必要なくなりました・・・だと良かったんですがリリースノートに書いてあるとおり、まだ型周りの問題、改善点が山積みのようです。
下記の趣味レポジトリ、Puppeteerを使ったPDFサーバーでも型エラーが出るようになりました。
型 Viewport がexportされていなかったようなので下記Issueを立てたら、
[7.0.4] Can't import type Viewport · Issue #6876 · puppeteer/puppeteer · GitHub
下記プルリクで対応されました。
fix: expose `Viewport` type by jackfranklin · Pull Request #6881 · puppeteer/puppeteer · GitHub
v7.1.0がリリースされたので試してみたところ、別のエラーが出るようになりました。
src/types/hc-pdf-server.d.ts:1:10 - error TS2459: Module '"../../node_modules/puppeteer/lib/types"' declares 'Viewport' locally, but it is not exported.
v7.1.0で型宣言ファイルを確認すると、上記プルリクでexportが増えたものの、相変わらずexportされておらず問題になっているようです。
↓ namespaceの入れ子になってるのでこっちは関係ないかも
node_modules/puppeteer/lib/types.d.ts:15996
/**
* Viewport for capturing screenshot.
*/
export interface Viewport {
/**
* X offset in device independent pixels (dip).
*/
x: number;
/**
* Y offset in device independent pixels (dip).
*/
y: number;
/**
* Rectangle width in device independent pixels (dip).
*/
width: number;
/**
* Rectangle height in device independent pixels (dip).
*/
height: number;
/**
* Page scale factor.
*/
scale: number;
}node_modules/puppeteer/lib/types.d.ts:24286
declare interface Viewport {
width: number;
height: number;
deviceScaleFactor?: number;
isMobile?: boolean;
isLandscape?: boolean;
hasTouch?: boolean;
}またIssueを立てる前に、なぜこんなことが起きてるか知りたいので調査することにしました。
上記のtypes.d.tsは、レポジトリには入っておらず、出どころがわからなかったので、ローカルにclone
git clone https://github.com/puppeteer/puppeteer.git
単純に2箇所でexportしてるのかなぁと疑ったけど、検索した感じ上記Issueの場所以外では見つからず。
package.jsonを見るとこんだけscriptsが。
"scripts": {
"test-browser": "wtr",
"test-browser-watch": "wtr --watch",
"unit": "npm run tsc-cjs && mocha --config mocha-config/puppeteer-unit-tests.js",
"unit-debug": "npm run tsc-cjs && mocha --inspect-brk --config mocha-config/puppeteer-unit-tests.js",
"unit-with-coverage": "cross-env COVERAGE=1 npm run unit",
"assert-unit-coverage": "cross-env COVERAGE=1 mocha --config mocha-config/coverage-tests.js",
"funit": "PUPPETEER_PRODUCT=firefox npm run unit",
"test": "npm run tsc && npm run lint --silent && npm run unit-with-coverage && npm run test-browser",
"prepare": "node typescript-if-required.js",
"prepublishOnly": "npm run build",
"dev-install": "npm run tsc && node install.js",
"install": "node install.js",
"eslint": "([ \"$CI\" = true ] && eslint --ext js --ext ts --quiet -f codeframe . || eslint --ext js --ext ts .)",
"eslint-fix": "eslint --ext js --ext ts --fix .",
"commitlint": "commitlint --from=HEAD~1",
"lint": "npm run eslint && npm run build && npm run doc && npm run commitlint",
"doc": "node utils/doclint/cli.js",
"clean-lib": "rm -rf lib",
"build": "npm run tsc && npm run generate-d-ts",
"tsc": "npm run clean-lib && tsc --version && npm run tsc-cjs && npm run tsc-esm",
"tsc-cjs": "tsc -b src/tsconfig.cjs.json",
"tsc-esm": "tsc -b src/tsconfig.esm.json",
"apply-next-version": "node utils/apply_next_version.js",
"test-install": "scripts/test-install.sh",
"generate-d-ts": "api-extractor run --local --verbose",
"generate-docs": "npm run generate-d-ts && api-documenter markdown -i temp -o new-docs",
"ensure-correct-devtools-protocol-revision": "ts-node -s scripts/ensure-correct-devtools-protocol-package",
"test-types-file": "ts-node -s scripts/test-ts-definition-files.ts",
"release": "node utils/remove_version_suffix.js && standard-version --commit-all"
},buildでTypeScript周りのファイルが作られそうです。
問題のlib/types.d.tsファイルはgenerate-d-tsの
"generate-d-ts": "api-extractor run --local --verbose",
api-extractorを使っている模様。
api-extractorってなんだろ。
Microsoftのツールでした。よくわからん。
よくわからないので出力されたtypes.d.tsを見てみると・・・
lib/types.d.ts:24291
export declare interface Viewport {あれ！？exportされてる。どういうこっちゃ・・・。
ローカルの古いファイルとかキャッシュの問題かと思ったけどGitHub Actions上でも再現してるし、実際rm -rf node_modulesは何度もやってる。
おかしいぞと念の為git logを確認したところ
$ git log
commit be7c22933c1dcf5eee797d61463171bd0ef44582 (HEAD -> main, origin/main, origin/HEAD)
Author: Jack Franklin <jacktfranklin@chromium.org>
Date: Fri Feb 12 12:32:27 2021 +0000
fix: expose `Viewport` type (#6881)
Also includes drive-by when I subbed `@default` (not valid) to
`@defaultValue` (valid!) in a few places and exposed types from
`Coverage.ts` so they get exposed too.
Date: Fri Feb 12 12:32:27 2021 +0000
fix: expose `Viewport` type (#6881)
Also includes drive-by when I subbed `@default` (not valid) to
`@defaultValue` (valid!) in a few places and exposed types from
`Coverage.ts` so they get exposed too.
Fixes 6876.
commit 29c059427e377f1e3772b182363b93b484b06ace
Author: Jack Franklin <jacktfranklin@chromium.org>
Date: Fri Feb 12 11:19:06 2021 +0000
chore: bump to 7.1.0-post (#6880)
commit a681aac7e3b7326dc41ecfc895068c30549d8b4d (tag: v7.1.0)
Author: Jack Franklin <jacktfranklin@chromium.org>
Date: Fri Feb 12 10:51:43 2021 +0000
chore(release): mark v7.1.0 (#6879)
commit a5e174f696eb192c541db64a603ea5cdf385a643
Author: Jack Franklin <jacktfranklin@chromium.org>
Date: Thu Feb 11 15:44:56 2021 +0000
fix: expose puppeteer.Permission type (#6856)
* fix: expose puppeteer.Permission type
A regression in our own types when compared to @types/puppeteer - we
needed to expose the permissons.
commit ad5935738d869cfce386a0d28b4bc6131457f962
Author: Alex Rudenko <OrKoN@users.noreply.github.com>
Date: Thu Feb 11 14:59:50 2021 +0100
feat(page): add color-gamut support to Page.emulateMediaFeatures (#6857)修正した
fix: expose `Viewport` type (#6881)
が
chore(release): mark v7.1.0 (#6879)
より後に入ってる・・・。
というわけで結論に戻りつつも、いろいろ勉強になりましたとさ。
プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発
- 作者:Boris Cherny
- 発売日: 2020/03/16
- メディア: 単行本（ソフトカバー）
