Remove downlevel-dts and legacy type support (#8203)

### WHY are these changes introduced?

Polaris currently supports multiple TypeScript versions by building our
types twice. This breaking change in v11 removes this functionality and
we will only support the current version in the library.

This used to be required to build the props table on
legacy.polaris.shopify.com. This is no longer a requirement with
@martenbjork brilliant work.

### WHAT is this pull request doing?

Removes legacy type support for the library.

---------

Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com>
Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>

Author: 3 people

documentation/guides/migrating-from-v10-to-v11.md

@@ -14,6 +14,14 @@ Polaris v11.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 NodeJS version 14 is no longer supported. NodeJS 18 is recommended and 16 is the minimum supported version.
 
+## TypeScript
+
+Built types in `@shopify/polaris` have moved from `build/ts/latest` to `build/ts`.
+
+**Legacy TypeScript Support**
+
+Polaris no longer supports multiple versions of TypeScript with downlevel-dts. Polaris only builds one set of types based on the current version of TypeScript in the project.
+
 ## Components
 
 ### Removed deprecated Collapsible argument

package.json

@@ -69,7 +69,6 @@
     "@types/jest": "^27.5.1",
     "@types/node": "^18.11.18",
     "babel-loader": "^9.1.2",
-    "downlevel-dts": "^0.6.0",
     "eslint": "^8.3.0",
     "execa": "^5.0.0",
     "jest": "^27.5.1",
@@ -85,7 +84,7 @@
     "stylelint": "^14.15.0",
     "ts-node": "^10.7.0",
     "turbo": "^1.2.8",
-    "typescript": "^4.6.3"
+    "typescript": "^4.9.3"
   },
   "prettier": "@shopify/prettier-config",
   "size-limit": [

polaris-cli/package.json

@@ -26,9 +26,6 @@
     "@oclif/core": "^1.13.10",
     "@shopify/polaris-migrator": "^0.11.3"
   },
-  "devDependencies": {
-    "typescript": "^4.7.4"
-  },
   "engine-strict": true,
   "engines": {
     "node": "^16.13.0 || >=18.12.0"

polaris-react/package.json

@@ -39,18 +39,10 @@
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
   "esnext": "build/esnext/index.esnext",
-  "types": "build/ts/latest/src/index.d.ts",
-  "typesVersions": {
-    "<4.0": {
-      "build/types/latest/*": [
-        "build/ts/3.4/*"
-      ]
-    }
-  },
+  "types": "build/ts/src/index.d.ts",
   "scripts": {
-    "build": "run-s build:types build:types-downlevel build:js build:validate",
+    "build": "run-s build:types build:js build:validate",
     "build:types": "tsc -b",
-    "build:types-downlevel": "downlevel-dts './build/ts/latest' './build/ts/3.4'",
     "build:js": "rollup -c",
     "build:validate": "node scripts/build-validate.js",
     "dev": "yarn run storybook",

polaris-react/scripts/build-validate.js

@@ -82,9 +82,7 @@ function validateEsNextBuild() {
 }
 
 function validateAncillaryOutput() {
-  assert.ok(fs.existsSync('./build/ts/latest/src/index.d.ts'));
-  // Downleveled for consumers on older TypeScript versions
-  assert.ok(fs.existsSync('./build/ts/3.4/src/index.d.ts'));
+  assert.ok(fs.existsSync('./build/ts/src/index.d.ts'));
 }
 
 function validateVersionReplacement() {

polaris-react/src/components/OptionList/tests/OptionList.test.tsx

@@ -539,12 +539,8 @@ function firstOption(
   options?: OptionDescriptor[],
   sections?: OptionListProps['sections'],
 ): string {
-  const firstOptionsValue =
-    options == null || options === [] ? '' : options[0].value;
-  const firstSectionOptionsValue =
-    sections == null || sections === [] || sections[0].options === []
-      ? ''
-      : sections[0].options[0].value;
+  const firstOptionsValue = options?.[0]?.value ?? '';
+  const firstSectionOptionsValue = sections?.[0]?.options?.[0]?.value ?? '';
   return firstOptionsValue || firstSectionOptionsValue;
 }
 

polaris-react/src/components/ResourceList/ResourceList.tsx

@@ -1,5 +1,4 @@
 import React, {
-  ReactElement,
   useCallback,
   useEffect,
   useReducer,
@@ -41,7 +40,11 @@ import styles from './ResourceList.scss';
 const SMALL_SPINNER_HEIGHT = 28;
 const LARGE_SPINNER_HEIGHT = 45;
 
-function getAllItemsOnPage<TItemType>(
+interface ResourceListItemData {
+  [data: string]: any;
+}
+
+function getAllItemsOnPage<TItemType extends ResourceListItemData>(
   items: TItemType[],
   idForItem: (item: TItemType, index: number) => string,
 ) {
@@ -57,16 +60,16 @@ const isBreakpointsXS = () => {
         parseFloat(toPx(tokens.breakpoints['breakpoints-sm']) ?? '');
 };
 
-function defaultIdForItem<TItemType extends {id?: any}>(
+function defaultIdForItem<TItemType extends ResourceListItemData>(
   item: TItemType,
   index: number,
-) {
-  return Object.prototype.hasOwnProperty.call(item, 'id')
-    ? item.id
-    : index.toString();
+): string {
+  return 'id' in item ? item.id : index.toString();
 }
 
-export interface ResourceListProps<TItemType = any> {
+export interface ResourceListProps<
+  TItemType extends ResourceListItemData = ResourceListItemData,
+> {
   /** Item data; each item is passed to renderItem */
   items: TItemType[];
   filterControl?: React.ReactNode;
@@ -119,13 +122,7 @@ export interface ResourceListProps<TItemType = any> {
   resolveItemId?(item: TItemType): string;
 }
 
-type ResourceListType = (<TItemType>(
-  value: ResourceListProps<TItemType>,
-) => ReactElement) & {
-  Item: typeof ResourceItem;
-};
-
-export const ResourceList: ResourceListType = function ResourceList<TItemType>({
+export function ResourceList<TItemType extends ResourceListItemData>({
   items,
   filterControl,
   emptyState,
@@ -767,6 +764,6 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
       <div ref={bulkActionsIntersectionRef} />
     </ResourceListContext.Provider>
   );
-};
+}
 
 ResourceList.Item = ResourceItem;

polaris-react/src/utilities/merge.ts

@@ -30,7 +30,7 @@ export function merge<TSource1, TSource2, TSource3, TSource4, TSource5>(
   let final = {};
 
   for (const obj of objs) {
-    final = mergeRecursively(final, obj);
+    final = mergeRecursively(final, obj as any);
   }
 
   return final;

polaris-react/tsconfig.json

@@ -4,7 +4,7 @@
     "composite": true,
     "emitDeclarationOnly": true,
     "importsNotUsedAsValues": "error",
-    "outDir": "build/ts/latest",
+    "outDir": "build/ts",
     "rootDir": "./",
     "strictFunctionTypes": false,
     "paths": {

polaris.shopify.com/package.json

@@ -70,6 +70,6 @@
     "rehype-raw": "^6.1.1",
     "sass": "^1.49.9",
     "style-loader": "^3.3.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.3"
   }
 }