Updates dependencies & replaces FAST React w/ Lit

Author: eamodio

ThirdPartyNotices.txt

@@ -3,8 +3,8 @@ GitLens
 THIRD-PARTY SOFTWARE NOTICES AND INFORMATION
 This project incorporates components from the projects listed below.
 
-1. @microsoft/fast-element version 1.12.0 (https://github.com/Microsoft/fast)
-2. @microsoft/fast-react-wrapper version 0.3.19 (https://github.com/Microsoft/fast)
+1. @lit/react version 1.0.0 (https://github.com/lit/lit)
+2. @microsoft/fast-element version 1.12.0 (https://github.com/Microsoft/fast)
 3. @octokit/graphql version 7.0.2 (https://github.com/octokit/graphql.js)
 4. @octokit/request version 8.1.4 (https://github.com/octokit/request.js)
 5. @opentelemetry/api version 1.6.0 (https://github.com/open-telemetry/opentelemetry-js)
@@ -16,7 +16,7 @@ This project incorporates components from the projects listed below.
 11. billboard.js version 3.9.4 (https://github.com/naver/billboard.js)
 12. https-proxy-agent version 5.0.1 (https://github.com/TooTallNate/node-https-proxy-agent)
 13. iconv-lite version 0.6.3 (https://github.com/ashtuchkin/iconv-lite)
-14. lit version 2.8.0 (https://github.com/lit/lit)
+14. lit version 3.0.0 (https://github.com/lit/lit)
 15. microsoft/vscode (https://github.com/microsoft/vscode)
 16. node-fetch version 2.7.0 (https://github.com/bitinn/node-fetch)
 17. os-browserify version 0.3.0 (https://github.com/CoderPuppy/os-browserify)
@@ -27,6 +27,39 @@ This project incorporates components from the projects listed below.
 22. sindresorhus/string-width (https://github.com/sindresorhus/string-width)
 23. sortablejs version 1.15.0 (https://github.com/SortableJS/Sortable)
 
+%% @lit/react NOTICES AND INFORMATION BEGIN HERE
+=========================================
+BSD 3-Clause License
+
+Copyright (c) 2017 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+=========================================
+END OF  @lit/react NOTICES AND INFORMATION
+
 %% @microsoft/fast-element NOTICES AND INFORMATION BEGIN HERE
 =========================================
 # FAST Element
@@ -94,44 +127,6 @@ Looking for a quick guide on building components?  Check out [our Cheat Sheet](.
 =========================================
 END OF  @microsoft/fast-element NOTICES AND INFORMATION
 
-%% @microsoft/fast-react-wrapper NOTICES AND INFORMATION BEGIN HERE
-=========================================
-# FAST React Wrapper
-
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-react-wrapper.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-react-wrapper)
-
-The `fast-react-wrapper` package contains a utility that enables automatically wrapping Web Components in a React component for ease of integration into React projects.
-
-## Installation
-
-### From NPM
-
-To install the `fast-react-wrapper` library, use either `npm` or `yarn` as follows:
-
-```shell
-npm install --save @microsoft/fast-react-wrapper
-```
-
-```shell
-yarn add @microsoft/fast-react-wrapper
-```
-
-Within your JavaScript or TypeScript code, you can then and use the wrapper like this:
-
-```ts
-import React from 'react';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-
-const { wrap } = provideReactWrapper(React);
-
-const MyComponent = wrap(MyComponent);
-```
-
-For additional wrapper settings and more information on integrating with Design Systems, see [our integration docs](https://fast.design/docs/integrations/react).
-=========================================
-END OF  @microsoft/fast-react-wrapper NOTICES AND INFORMATION
-
 %% @octokit/graphql NOTICES AND INFORMATION BEGIN HERE
 =========================================
 The MIT License

package.json

@@ -14845,8 +14845,8 @@
 	"dependencies": {
 		"@gitkraken/gitkraken-components": "10.1.30",
 		"@gitkraken/shared-web-components": "0.1.1-rc.15",
+		"@lit/react": "1.0.0",
 		"@microsoft/fast-element": "1.12.0",
-		"@microsoft/fast-react-wrapper": "0.3.19",
 		"@octokit/graphql": "7.0.2",
 		"@octokit/request": "8.1.4",
 		"@opentelemetry/api": "1.6.0",
@@ -14869,14 +14869,14 @@
 	"devDependencies": {
 		"@types/mocha": "10.0.1",
 		"@types/node": "16.11.47",
-		"@types/react": "17.0.67",
+		"@types/react": "17.0.68",
 		"@types/react-dom": "17.0.21",
 		"@types/sortablejs": "1.15.3",
 		"@types/vscode": "1.80.0",
 		"@typescript-eslint/eslint-plugin": "6.7.5",
 		"@typescript-eslint/parser": "6.7.5",
 		"@vscode/test-electron": "2.3.5",
-		"@vscode/test-web": "0.0.46",
+		"@vscode/test-web": "0.0.47",
 		"@vscode/vsce": "2.21.1",
 		"circular-dependency-plugin": "5.2.2",
 		"clean-webpack-plugin": "4.0.0",
@@ -14903,12 +14903,12 @@
 		"html-loader": "4.2.0",
 		"html-webpack-plugin": "5.5.3",
 		"image-minimizer-webpack-plugin": "3.8.3",
-		"license-checker-rseidelsohn": "4.2.8",
+		"license-checker-rseidelsohn": "4.2.10",
 		"lz-string": "1.5.0",
 		"mini-css-extract-plugin": "2.7.6",
 		"mocha": "10.2.0",
 		"prettier": "3.0.3",
-		"sass": "1.69.1",
+		"sass": "1.69.3",
 		"sass-loader": "13.3.2",
 		"schema-utils": "4.2.0",
 		"sharp": "0.32.6",
@@ -14917,7 +14917,7 @@
 		"ts-loader": "9.5.0",
 		"tsc-alias": "1.8.8",
 		"typescript": "5.3.0-beta",
-		"webpack": "5.88.2",
+		"webpack": "5.89.0",
 		"webpack-bundle-analyzer": "4.9.1",
 		"webpack-cli": "5.1.4",
 		"webpack-node-externals": "3.0.0",

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -1231,8 +1231,8 @@ export function GraphWrapper({
 								errorMessage={searchResultsError?.error ?? ''}
 								resultsHidden={searchResultsHidden}
 								resultsLoaded={searchResults != null}
-								onChange={e => handleSearchInput(e as CustomEvent<SearchQuery>)}
-								onNavigate={e => handleSearchNavigation(e as CustomEvent<SearchNavigationEventDetail>)}
+								onChange={e => handleSearchInput(e)}
+								onNavigate={e => handleSearchNavigation(e)}
 								onOpenInView={() => handleSearchOpenInView()}
 							/>
 							<span>
@@ -1369,7 +1369,7 @@ export function GraphWrapper({
 					markers={minimapData?.markers}
 					searchResults={minimapSearchResults}
 					visibleDays={visibleDays}
-					onSelected={e => handleOnMinimapDaySelected(e as CustomEvent<GraphMinimapDaySelectedEventDetail>)}
+					onSelected={e => handleOnMinimapDaySelected(e)}
 				></GraphMinimap>
 			)}
 			<main id="main" className="graph-app__main" aria-hidden={!allowed}>

src/webviews/apps/plus/graph/minimap/react.tsx

@@ -1,8 +1,11 @@
+import type { EventName } from '@lit/react';
 import { reactWrapper } from '../../../shared/components/helpers/react-wrapper';
+import type { GraphMinimapDaySelectedEventDetail } from './minimap';
 import { GraphMinimap as graphMinimapComponent } from './minimap';
 
 export const GraphMinimap = reactWrapper(graphMinimapComponent, {
+	tagName: 'graph-minimap',
 	events: {
-		onSelected: 'selected',
+		onSelected: 'selected' as EventName<CustomEvent<GraphMinimapDaySelectedEventDetail>>,
 	},
 });

src/webviews/apps/shared/components/helpers/react-wrapper.ts

@@ -1,6 +1,19 @@
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+/* eslint-disable @typescript-eslint/ban-types */
+import type { EventName, Options } from '@lit/react';
+import { createComponent } from '@lit/react';
 import React from 'react';
 
-const { wrap } = provideReactWrapper(React);
+type Constructor<T> = new () => T;
+type EventNames = Record<string, EventName | string>;
+type Opts<I extends HTMLElement, E extends EventNames = {}> = Omit<Options<I, E>, 'elementClass' | 'react'>;
 
-export { wrap as reactWrapper };
+export function reactWrapper<I extends HTMLElement, E extends EventNames = {}>(
+	elementClass: Constructor<I>,
+	options: Opts<I, E>,
+) {
+	return createComponent<I, E>({
+		...options,
+		elementClass: elementClass,
+		react: React,
+	});
+}

src/webviews/apps/shared/components/menu/react.tsx

@@ -6,7 +6,7 @@ import {
 	MenuList as MenuListComponent,
 } from './index';
 
-export const MenuDivider = reactWrapper(MenuDividerComponent);
-export const MenuItem = reactWrapper(MenuItemComponent);
-export const MenuLabel = reactWrapper(MenuLabelComponent);
-export const MenuList = reactWrapper(MenuListComponent);
+export const MenuDivider = reactWrapper(MenuDividerComponent, { tagName: 'menu-divider' });
+export const MenuItem = reactWrapper(MenuItemComponent, { tagName: 'menu-item' });
+export const MenuLabel = reactWrapper(MenuLabelComponent, { tagName: 'menu-label' });
+export const MenuList = reactWrapper(MenuListComponent, { tagName: 'menu-list' });

src/webviews/apps/shared/components/overlays/pop-menu/react.tsx

@@ -1,4 +1,4 @@
 import { reactWrapper } from '../../helpers/react-wrapper';
 import { PopMenu as PopMenuComponent } from './index';
 
-export const PopMenu = reactWrapper(PopMenuComponent);
+export const PopMenu = reactWrapper(PopMenuComponent, { tagName: 'pop-menu' });

src/webviews/apps/shared/components/overlays/react.tsx

@@ -1,4 +1,4 @@
 import { reactWrapper } from '../helpers/react-wrapper';
 import { PopOver as PopOverComponent } from './pop-over';
 
-export const PopOver = reactWrapper(PopOverComponent);
+export const PopOver = reactWrapper(PopOverComponent, { tagName: 'pop-over' });

src/webviews/apps/shared/components/react/feature-gate-badge.tsx

@@ -1,7 +1,4 @@
 import { FeatureGateBadge as featureGateBadgeComponent } from '../feature-gate-badge';
 import { reactWrapper } from '../helpers/react-wrapper';
 
-export const FeatureGateBadge = reactWrapper(featureGateBadgeComponent, {
-	name: 'gk-feature-gate-badge',
-	properties: ['placement', 'subscription'],
-});
+export const FeatureGateBadge = reactWrapper(featureGateBadgeComponent, { tagName: 'gk-feature-gate-badge' });

src/webviews/apps/shared/components/react/feature-gate.tsx

@@ -1,7 +1,4 @@
 import { FeatureGate as featureGateComponent } from '../feature-gate';
 import { reactWrapper } from '../helpers/react-wrapper';
 
-export const FeatureGate = reactWrapper(featureGateComponent, {
-	name: 'gk-feature-gate',
-	properties: ['state', 'visible'],
-});
+export const FeatureGate = reactWrapper(featureGateComponent, { tagName: 'gk-feature-gate' });