feat: Move react-virtual into vendored dependencies (#2071)

.eslintrc.js

@@ -174,6 +174,11 @@ module.exports = {
                 message:
                   '`d3-scale` gets shipped as a bundled dependency. Use `src/internal/vendor/d3-scale` as import source.',
               },
+              {
+                group: ['react-virtual', '!**/vendor/react-virtual'],
+                message:
+                  '`react-virtual` gets shipped as a bundled dependency. Use `src/internal/vendor/react-virtual` as import source.',
+              },
             ],
           },
         ],

.gitignore

@@ -9,4 +9,4 @@ src/index.ts
 src/test-utils/dom/index.ts
 src/test-utils/selectors
 src/internal/generated/custom-css-properties/index.*
-vendor/generated-third-party-licenses.txt
+vendor/generated-*.txt

package.json

@@ -43,7 +43,6 @@
     "mnth": "^2.0.0",
     "react-keyed-flatten-children": "^1.3.0",
     "react-transition-group": "^4.4.2",
-    "react-virtual": "^2.8.2",
     "tslib": "^2.4.0",
     "weekstart": "^1.1.0"
   },
@@ -120,6 +119,7 @@
     "react-dom": "^16.14.0",
     "react-router-dom": "^5.3.0",
     "react-test-renderer": "^16.14.0",
+    "react-virtual": "^2.8.2",
     "replace-in-files": "^3.0.0",
     "rimraf": "^5.0.5",
     "rollup": "^3.5.1",

src/area-chart/__tests__/area-chart-model-utils.test.ts

@@ -1,15 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';
-import { ChartModel } from '../model';
+import { ChartScale, NumericChartScale } from '../../../lib/components/internal/components/cartesian-chart/scales';
+import { ChartModel } from '../../../lib/components/area-chart/model';
 import {
   computeDomainX,
   computeDomainY,
   computePlotPoints,
   findClosest,
   circleIndex,
   isSeriesValid,
-} from '../model/utils';
+} from '../../../lib/components/area-chart/model/utils';
 
 function getPointIndices(matrix: ChartModel.PlotPoint<number>[][]) {
   const indices = [];

src/area-chart/__tests__/area-chart-use-chart-model.test.tsx

@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState, useImperativeHandle, useRef } from 'react';
 
-import useChartModel, { UseChartModelProps } from '../model/use-chart-model';
+import useChartModel, { UseChartModelProps } from '../../../lib/components/area-chart/model/use-chart-model';
 import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
-import { ChartDataTypes } from '../../internal/components/cartesian-chart/interfaces';
+import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
+import { ChartDataTypes } from '../../../lib/components/internal/components/cartesian-chart/interfaces';
 import { act, render, fireEvent } from '@testing-library/react';
-import { AreaChartProps } from '../interfaces';
-import { KeyCode } from '../../internal/keycode';
-import { useReaction } from '../async-store';
-import { ChartModel } from '../model';
+import { AreaChartProps } from '../../../lib/components/area-chart/interfaces';
+import { useReaction } from '../../../lib/components/area-chart/async-store';
+import { ChartModel } from '../../../lib/components/area-chart/model';
 import PlotPoint = ChartModel.PlotPoint;
 
 class UseChartModelWrapper extends ElementWrapper {

src/internal/hooks/use-virtual/index.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useMemo, useRef } from 'react';
-import { useVirtual as useVirtualDefault, VirtualItem } from 'react-virtual';
+import { useVirtual as useVirtualDefault, VirtualItem } from '../../vendor/react-virtual';
 
 const MAX_ITEM_MOUNTS = 100;
 

src/internal/vendor/__tests__/__snapshots__/d3-scale-third-party-licences.test.ts.snap → src/internal/vendor/__tests__/__snapshots__/third-party-licences.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`d3-scale-third-party-licenses.txt content stays unchanged without any d3-scale version changes 1`] = `
+exports[`Vendor licenses attribution for d3-scale 1`] = `
 "Name: d3-array
 Version: 3.2.1
 License: ISC
@@ -222,3 +222,38 @@ OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
 TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
 THIS SOFTWARE."
 `;
+
+exports[`Vendor licenses attribution for react-virtual 1`] = `
+"Name: react-virtual
+Version: 2.10.4
+License: MIT
+Private: false
+Description: Hooks for virtualizing scrollable elements in React
+Repository: undefined
+Homepage: https://github.com/tannerlinsley/react-virtual#readme
+Author: tannerlinsley
+License Copyright:
+===
+
+MIT License
+
+Copyright (c) 2019 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the \\"Software\\"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED \\"AS IS\\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE."
+`;

src/internal/vendor/__tests__/third-party-licences.test.ts

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import path from 'path';
+import fs from 'fs';
+
+const licensesDir = path.resolve(__dirname, '../../../../vendor/');
+
+describe('Vendor licenses attribution', () => {
+  test('for d3-scale', () => {
+    const content = fs.readFileSync(path.join(licensesDir, 'generated-third-party-licenses-d3-scale.txt'), 'utf8');
+    expect(content).toMatchSnapshot();
+  });
+  test('for react-virtual', () => {
+    const content = fs.readFileSync(path.join(licensesDir, 'generated-third-party-licenses-react-virtual.txt'), 'utf8');
+    expect(content).toMatchSnapshot();
+  });
+});

src/internal/vendor/d3-scale.js

@@ -0,0 +1,9 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// This file is only for the compiler. The artifacts will contain the generated bundle instead.
+// `d3-scale` and its transitive dependencies are using ESM format which causes
+// issues during unit tests at clients using jest and do not have the associated
+// jest-preset package installed.
+// eslint-disable-next-line no-restricted-imports
+export { scaleLinear, scaleLog, scaleTime, scaleBand } from 'd3-scale';

src/internal/vendor/react-virtual.d.ts

@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// eslint-disable-next-line no-restricted-imports
+export { useVirtual, VirtualItem } from 'react-virtual';

src/internal/vendor/react-virtual.js

@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// eslint-disable-next-line no-restricted-imports
+export { useVirtual } from 'react-virtual';

src/select/utils/render-options.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { VirtualItem } from 'react-virtual';
+import { VirtualItem } from '../../internal/vendor/react-virtual';
 import Item from '../parts/item';
 import MutliselectItem from '../parts/multiselect-item';
 import { DropdownOption } from '../../internal/components/option/interfaces';

tsconfig.json

@@ -20,7 +20,6 @@
     "src/test-utils/**",
     "**/__integ__/**",
     "**/__a11y__/**",
-    "**/__motion__/**",
-    "src/internal/vendor/**"
+    "**/__motion__/**"
   ]
 }

vendor/rollup.config.mjs

@@ -6,59 +6,42 @@ import * as path from 'path';
 import { fileURLToPath } from 'url';
 import commenting from 'commenting';
 import { readFileSync } from 'fs';
-import { sync as rimrafSync } from 'rimraf';
 
 const dirName = path.dirname(fileURLToPath(import.meta.url));
-
-const vendorFileName = 'd3-scale.js';
 const vendorFolder = path.join(dirName, '../lib/components/internal/vendor');
-const vendorFile = path.join(vendorFolder, vendorFileName);
-const d3LicencesFile = path.join(dirName, 'generated-third-party-licenses.txt');
+const licensesFile = path.join(dirName, 'generated-third-party-licenses.txt');
 
-export default {
-  input: vendorFile,
+export default ['d3-scale', 'react-virtual'].map(entry => ({
+  input: `./src/internal/vendor/${entry}.js`,
   output: {
-    file: vendorFile,
+    dir: vendorFolder,
     format: 'es',
   },
+  external: ['react', 'react-dom'],
   plugins: [
     resolve({
       extensions: ['.js'],
     }),
     license({
       thirdParty: {
         output: {
-          file: d3LicencesFile,
+          file: path.join(dirName, `generated-third-party-licenses-${entry}.txt`),
           encoding: 'utf-8',
         },
       },
     }),
-    attach3rdPartyLicenses(),
-    removeVendorFolder(),
+    attach3rdPartyLicenses(entry),
   ],
-};
-
-function removeVendorFolder() {
-  return {
-    name: 'remove-vendor-folder',
-    generateBundle: {
-      sequential: true,
-      order: 'pre',
-      handler() {
-        rimrafSync(vendorFolder);
-      },
-    },
-  };
-}
+}));
 
 // Rollup plugin which prepends the generated 3rd party licences content to the bundled code before writing the file.
-function attach3rdPartyLicenses() {
+function attach3rdPartyLicenses(entry) {
   return {
     name: 'attach-3rd-party-licences',
     generateBundle(_options, bundle) {
-      const content = readFileSync(d3LicencesFile, 'utf8');
+      const content = readFileSync(path.join(dirName, `generated-third-party-licenses-${entry}.txt`), 'utf8');
       const comment = commenting(content, { extension: '.js' });
-      bundle[vendorFileName].code = `${comment}${bundle[vendorFileName].code}`;
+      bundle[`${entry}.js`].code = `${comment}${bundle[`${entry}.js`].code}`;
     },
   };
 }