feat(types): autocomplete for default devices (#2198)

* feat(types): autocomplete for default devices

* don't export the extra Device type

Co-authored-by: Joel Einbinder <joel.einbinde@gmail.com>

utils/generate_types/index.js

@@ -17,7 +17,7 @@
 //@ts-check
 const path = require('path');
 const Source = require('../doclint/Source');
-const {chromium} = require('../..');
+const {chromium, devices} = require('../..');
 const Documentation = require('../doclint/check_public_api/Documentation');
 const PROJECT_DIR = path.join(__dirname, '..', '..');
 const fs = require('fs');
@@ -70,14 +70,15 @@ ${overrides}
 
 ${classes.map(classDesc => classToString(classDesc)).join('\n')}
 ${objectDefinitionsToString()}
+${generateDevicesTypes()}
 `;
   for (const [key, value] of Object.entries(exported))
     output = output.replace(new RegExp('\\b' + key + '\\b', 'g'), value);
   fs.writeFileSync(path.join(typesDir, 'types.d.ts'), output, 'utf8');
 })().catch(e => {
   console.error(e);
   process.exit(1);
-})
+});
 
 function objectDefinitionsToString() {
   let definition;
@@ -405,3 +406,14 @@ function mergeClasses(mdClass, jsClass) {
     member.templates = jsClass.members.get(member.name).templates;
   return mdClass;
 }
+
+function generateDevicesTypes() {
+  const namedDevices = 
+    Object.keys(devices)
+      .map(name => `  ${JSON.stringify(name)}: DeviceDescriptor;`)
+      .join('\n');
+  return `type Devices = {
+${namedDevices}
+  [key: string]: DeviceDescriptor;
+}`;
+}

utils/generate_types/overrides.d.ts

@@ -177,7 +177,7 @@ class TimeoutError extends Error {}
 }
 
 export const selectors: Selectors;
-export const devices: {[name: string]: DeviceDescriptor} & DeviceDescriptor[];
+export const devices: Devices & DeviceDescriptor[];
 
 // This is required to not export everything by default. See https://github.com/Microsoft/TypeScript/issues/19545#issuecomment-340490459
 export {};

utils/generate_types/test/test.ts

@@ -715,7 +715,11 @@ playwright.chromium.launch().then(async browser => {
   playwright.chromium.connect;
   playwright.errors.TimeoutError;
   {
-    const iPhone = playwright.devices['iPhone'];
+    playwright.devices['my device'] = {
+      userAgent: 'foo',
+      viewport: {height: 123, width: 456}
+    };
+    const iPhone = playwright.devices['iPhone 11'];
     const assertion: AssertType<string, typeof iPhone.userAgent> = true;
     const numberAssertion: AssertType<number, typeof iPhone.viewport.width> = true;
   }