Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(TypeScript): move DeviceDescriptors to TS (#5595)
This commit moves `src/DeviceDescriptors` to be authored in TypeScript. This file was chosen due to its simplicity so that we can focus on getting a mixed JS/TS codebase playing nicely before migrating the more complex files.

The file itself was a bit odd: although the array of devices was exported via `module.exports` that was never referenced by any consumers; each device was also exported via `module.exports[name] = device` and that is how it's consumed. The Puppeteer docs suggest using it like so:

```js
puppeteer.devices['iPhone 6']
```

So instead of exporting the array and then setting a bunch of properties on that, we instead define the array and export an object of keys where each key is a device. This is a breaking change (see the footer for details).

Rather than export an object I'd much rather export a Map, but that would be a larger breaking change and I'm keen to avoid those for the time being.

Note that we have to use special TypeScript specific syntax for the export that enables it to work in a CommonJS codebase [1] but again I'd rather this than move to ESM at this time. TypeScript still outputs CommonJS into `lib/` as you would expect.

BREAKING CHANGE: We no longer export an array of devices, so any users relying on doing:

```js
puppeter.devices.forEach(...)
```

…will now see a breakage. The fix is to use `Object.{keys/entries/values}` to iterate instead.

[1]: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require
  • Loading branch information
jackfranklin committed Apr 14, 2020
1 parent 1ce4fe7 commit 88d843d
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 25 deletions.
29 changes: 26 additions & 3 deletions src/DeviceDescriptors.js → src/DeviceDescriptors.ts
Expand Up @@ -14,7 +14,20 @@
* limitations under the License.
*/

module.exports = [
interface Device {
name: string;
userAgent: string;
viewport: {
width: number;
height: number;
deviceScaleFactor: number;
isMobile: boolean;
hasTouch: boolean;
isLandscape: boolean;
};
};

const devices: Device[] = [
{
'name': 'Blackberry PlayBook',
'userAgent': 'Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+',
Expand Down Expand Up @@ -868,5 +881,15 @@ module.exports = [
}
}
];
for (const device of module.exports)
module.exports[device.name] = device;

type DevicesMap = {
[name: string]: Device;
};

const devicesMap: DevicesMap = {};

for (const device of devices) {
devicesMap[device.name] = device;
}

export = devicesMap;
3 changes: 2 additions & 1 deletion tsconfig.json
Expand Up @@ -4,7 +4,8 @@
"checkJs": true,
"outDir": "./lib",
"target": "ESNext",
"moduleResolution": "node"
"moduleResolution": "node",
"module": "CommonJS"
},
"include": [
"src"
Expand Down
40 changes: 19 additions & 21 deletions utils/doclint/cli.js
Expand Up @@ -36,31 +36,29 @@ async function run() {
let changedFiles = false;

// Documentation checks.
{
const readme = await Source.readFile(path.join(PROJECT_DIR, 'README.md'));
const contributing = await Source.readFile(path.join(PROJECT_DIR, 'CONTRIBUTING.md'));
const api = await Source.readFile(path.join(PROJECT_DIR, 'docs', 'api.md'));
const troubleshooting = await Source.readFile(path.join(PROJECT_DIR, 'docs', 'troubleshooting.md'));
const mdSources = [readme, api, troubleshooting, contributing];
const readme = await Source.readFile(path.join(PROJECT_DIR, 'README.md'));
const contributing = await Source.readFile(path.join(PROJECT_DIR, 'CONTRIBUTING.md'));
const api = await Source.readFile(path.join(PROJECT_DIR, 'docs', 'api.md'));
const troubleshooting = await Source.readFile(path.join(PROJECT_DIR, 'docs', 'troubleshooting.md'));
const mdSources = [readme, api, troubleshooting, contributing];

const preprocessor = require('./preprocessor');
messages.push(...await preprocessor.runCommands(mdSources, VERSION));
messages.push(...await preprocessor.ensureReleasedAPILinks([readme], VERSION));
const preprocessor = require('./preprocessor');
messages.push(...await preprocessor.runCommands(mdSources, VERSION));
messages.push(...await preprocessor.ensureReleasedAPILinks([readme], VERSION));

const browser = await puppeteer.launch();
const page = await browser.newPage();
const checkPublicAPI = require('./check_public_api');
const jsSources = await Source.readdir(path.join(PROJECT_DIR, 'lib'));
messages.push(...await checkPublicAPI(page, mdSources, jsSources));
const browser = await puppeteer.launch();
const page = await browser.newPage();
const checkPublicAPI = require('./check_public_api');
const jsSources = await Source.readdir(path.join(PROJECT_DIR, 'lib'));
messages.push(...await checkPublicAPI(page, mdSources, jsSources));

await browser.close();
await browser.close();

for (const source of mdSources) {
if (!source.hasUpdatedText())
continue;
await source.save();
changedFiles = true;
}
for (const source of mdSources) {
if (!source.hasUpdatedText())
continue;
await source.save();
changedFiles = true;
}

// Report results.
Expand Down

0 comments on commit 88d843d

Please sign in to comment.