From 8fad380fe8fb38eff61e28fcca3f23c481326914 Mon Sep 17 00:00:00 2001 From: Evan Krause Date: Tue, 18 Jun 2024 09:21:53 -0700 Subject: [PATCH] Remove vscode-webview-ui-toolkit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: We no longer need this dependency! Also remove some vestigial remains If we compare production builds before and after (not on this diff but actually comparing the last diff that included any of vscode-webview-ui-toolkit): ## Before ``` $ yarn build ... build/assets/index-qm3bXTUa.js 913.69 kB │ gzip: 264.20 kB ``` ## After ``` $ yarn build ... build/assets/index-DOWvZMsB.js 732.80 kB │ gzip: 219.89 kB ``` That's **-20% build size** (-15% gzip'd) for the main bundle (some other ui-containing bundles are also smaller) Admittedly the before is also counting the other components we had to add to make this migration, however those components are quite simple, and I really doubt they take up anywhere near 20% of the app. In fact, the isl/components folder has a mere 1,279 lines of code, compared to 83k LOC for isl (excluding isl-server/), so I'd expect it's more like 1-2% of the bundle size. Reviewed By: quark-zju Differential Revision: D58702152 fbshipit-source-id: 575e29bf1efd88a7ad9231ed489b2479f25aba54 --- addons/isl/package.json | 1 - addons/isl/src/UncommittedChanges.tsx | 1 - addons/isl/src/VSCodeCheckbox.tsx | 48 ------------------------ addons/yarn.lock | 54 --------------------------- 4 files changed, 104 deletions(-) delete mode 100644 addons/isl/src/VSCodeCheckbox.tsx diff --git a/addons/isl/package.json b/addons/isl/package.json index 5704541cad014..d48d188de144e 100644 --- a/addons/isl/package.json +++ b/addons/isl/package.json @@ -12,7 +12,6 @@ "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.2.1", - "@vscode/webview-ui-toolkit": "1.2.2", "diff": "^5.0.0", "fast-deep-equal": "^3.1.3", "immutable": "^4.3.0", diff --git a/addons/isl/src/UncommittedChanges.tsx b/addons/isl/src/UncommittedChanges.tsx index aae3c2177fbf6..3cba6bb442cf0 100644 --- a/addons/isl/src/UncommittedChanges.tsx +++ b/addons/isl/src/UncommittedChanges.tsx @@ -80,7 +80,6 @@ import {selectedCommits} from './selection'; import {latestHeadCommit, uncommittedChangesFetchError} from './serverAPIState'; import {GeneratedStatus} from './types'; import * as stylex from '@stylexjs/stylex'; -import {VSCodeButton} from '@vscode/webview-ui-toolkit/react'; import {useAtom, useAtomValue} from 'jotai'; import React, {useCallback, useMemo, useEffect, useRef, useState} from 'react'; import {ComparisonType} from 'shared/Comparison'; diff --git a/addons/isl/src/VSCodeCheckbox.tsx b/addons/isl/src/VSCodeCheckbox.tsx deleted file mode 100644 index b5a6dc396eb91..0000000000000 --- a/addons/isl/src/VSCodeCheckbox.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import type {Constructable} from '@microsoft/fast-element'; - -import * as OriginalToolkit from '@vscode/webview-ui-toolkit/react'; -import {useRef} from 'react'; - -/** - * A patched version of VSCodeCheckbox. Do not trigger `onChange` if `checked` - * is managed and changed by other places. - * - * See https://github.com/microsoft/vscode-webview-ui-toolkit/issues/408. - */ -export function VSCodeCheckbox(props: VSCodeCheckboxProps) { - // props.checked from the last render. - const ignoreChecked = useRef(null); - if (ignoreChecked.current !== props.checked && props.checked != null) { - ignoreChecked.current = props.checked; - } - - // Replace onChange handler to ignore managed 'checked' changed by re-render. - const onChange: VSCodeCheckboxProps['onChange'] = - props.onChange == null - ? undefined - : (...args) => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const checked = (args[0].target as any).checked; - if (ignoreChecked.current == checked) { - return; - } - // This seems obviously correct yet tsc cannot type check it. - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - return props.onChange(...args); - }; - - return ; -} - -type ExtractProps = T extends Constructable> - ? P - : never; -type VSCodeCheckboxProps = ExtractProps; diff --git a/addons/yarn.lock b/addons/yarn.lock index 9b336a6141c29..cb71e96594633 100644 --- a/addons/yarn.lock +++ b/addons/yarn.lock @@ -1782,36 +1782,6 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@microsoft/fast-element@^1.10.4", "@microsoft/fast-element@^1.6.2", "@microsoft/fast-element@^1.9.0": - version "1.10.4" - resolved "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.10.4.tgz" - integrity sha512-SD0L3Kt++VSTqdkmGupB5tNaSLboEB7H/rh70a4eECpzCQewEzjd85jVNpgab1A8n5d3N9sPwZGIyfiUN6x4hg== - -"@microsoft/fast-foundation@^2.38.0", "@microsoft/fast-foundation@^2.41.1": - version "2.46.11" - resolved "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.46.11.tgz" - integrity sha512-5ehg6l2g/PsAR+90EEWSR7QAiAKsdscAnP6upE2ysp2U1luER4tAVDIP2wGQneLhaHq2i4Htnb4t+K1dcrw6AQ== - dependencies: - "@microsoft/fast-element" "^1.10.4" - "@microsoft/fast-web-utilities" "^5.4.1" - tabbable "^5.2.0" - tslib "^1.13.0" - -"@microsoft/fast-react-wrapper@^0.1.18": - version "0.1.48" - resolved "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.48.tgz" - integrity sha512-9NvEjru9Kn5ZKjomAMX6v+eF0DR+eDkxKDwDfi+Wb73kTbrNzcnmlwd4diN15ygH97kldgj2+lpvI4CKLQQWLg== - dependencies: - "@microsoft/fast-element" "^1.9.0" - "@microsoft/fast-foundation" "^2.41.1" - -"@microsoft/fast-web-utilities@^5.4.1": - version "5.4.1" - resolved "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz" - integrity sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg== - dependencies: - exenv-es6 "^1.1.1" - "@n1ru4l/graphql-live-query@^0.9.0": version "0.9.0" resolved "https://registry.npmjs.org/@n1ru4l/graphql-live-query/-/graphql-live-query-0.9.0.tgz" @@ -2516,15 +2486,6 @@ resolved "https://registry.yarnpkg.com/@vscode/codicons/-/codicons-0.0.33.tgz#a56243ab5492801fff04e53c0aab0d18a6521751" integrity sha512-VdgpnD75swH9hpXjd34VBgQ2w2quK63WljodlUcOoJDPKiV+rPjHrcUc2sjLCNKxhl6oKqmsZgwOWcDAY2GKKQ== -"@vscode/webview-ui-toolkit@1.2.2": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.2.2.tgz#f071ec7434b2733d1c724fa874341ec20998f930" - integrity sha512-xIQoF4FC3Xh6d7KNKIoIezSiFWYFuf6gQMdDyKueKBFGeKwaHWEn+dY2g3makvvEsNMEDji/woEwvg9QSbuUsw== - dependencies: - "@microsoft/fast-element" "^1.6.2" - "@microsoft/fast-foundation" "^2.38.0" - "@microsoft/fast-react-wrapper" "^0.1.18" - "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz" @@ -4183,11 +4144,6 @@ execa@5.1.1, execa@^5.0.0: signal-exit "^3.0.3" strip-final-newline "^2.0.0" -exenv-es6@^1.1.1: - version "1.1.1" - resolved "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz" - integrity sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ== - exit@^0.1.2: version "0.1.2" resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz" @@ -7221,11 +7177,6 @@ sync-fetch@0.4.1, sync-fetch@^0.4.0: buffer "^5.7.1" node-fetch "^2.6.1" -tabbable@^5.2.0: - version "5.3.3" - resolved "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz" - integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA== - tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz" @@ -7432,11 +7383,6 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.13.0: - version "1.14.1" - resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz" - integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== - tslib@^2, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@~2.4.0: version "2.4.0" resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"