Skip to content

Commit 8c121b1

Browse files
aasimkhan30aasimkhan30
authored
Removing resources out of bundled js file (#17986)
* Removing resources out of js file * fixing gulp file * fixing message * Fixing markdown message * Fixing markdown formatting * Adding fail check for bundle js file * Fixing colored text * escaping chars * Fixing color markdown * Escaping % * Adding missing copy * Fixing color * Fixing spacing in markdown * Fixing icons for execution plan
1 parent 913d211 commit 8c121b1

File tree

6 files changed

+96
-20
lines changed

6 files changed

+96
-20
lines changed

‎.github/workflows/file-size-check.yml

+32-2
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,26 @@ jobs:
7575
echo "pr_webview_bundle_size=$pr_file" >> $GITHUB_ENV
7676
echo "webview_size_diff=$size_diff" >> $GITHUB_ENV
7777
echo "webview_bundle_percentage_change=$percentage_change" >> $GITHUB_ENV
78+
webview_text_color=$(if [ $percentage_change -gt 0 ]; then echo "red"; else echo "green"; fi)
79+
echo "webview_text_color=$webview_text_color" >> $GITHUB_ENV
80+
main_js_file=$(find ./main/out/src/reactviews/assets -name "*.js")
81+
pr_js_file=$(find ./pr/out/src/reactviews/assets -name "*.js")
82+
main_js_size=$(stat -c%s "$main_js_file")
83+
pr_js_size=$(stat -c%s "$pr_js_file")
84+
main_js_size=$((main_js_size / 1024))
85+
pr_js_size=$((pr_js_size / 1024))
86+
js_size_diff=$((pr_js_size - main_js_size))
87+
js_percentage_change=$((100 * js_size_diff / main_js_size))
88+
echo "Main branch JS bundle size: $main_js_size KB"
89+
echo "PR branch JS bundle size: $pr_js_size KB"
90+
echo "JS Size difference: $js_size_diff bytes"
91+
echo "JS Percentage change: $js_percentage_change%"
92+
echo "main_js_size=$main_js_size" >> $GITHUB_ENV
93+
echo "pr_js_size=$pr_js_size" >> $GITHUB_ENV
94+
echo "js_size_diff=$js_size_diff" >> $GITHUB_ENV
95+
echo "js_percentage_change=$js_percentage_change" >> $GITHUB_ENV
96+
js_text_color=$(if [ $js_percentage_change -gt 0 ]; then echo "red"; else echo "green"; fi)
97+
echo "js_text_color=$js_text_color" >> $GITHUB_ENV
7898
7999
- name: Calculate vsix file sizes
80100
run: |
@@ -94,17 +114,23 @@ jobs:
94114
echo "pr_vsix_size=$pr_size" >> $GITHUB_ENV
95115
echo "vsix_size_diff=$size_diff" >> $GITHUB_ENV
96116
echo "vsix_percentage_change=$percentage_change" >> $GITHUB_ENV
117+
vsix_text_color=$(if [ $percentage_change -gt 0 ]; then echo "red"; else echo "green"; fi)
118+
echo "vsix_text_color=$vsix_text_color" >> $GITHUB_ENV
97119
98120
- name: Write results as Markdown file
99121
run: |
100122
echo "### VSIX Size Comparison" > results.md
101123
echo "- **Main branch VSIX size**: ${{ env.main_vsix_size }} KB" >> results.md
102124
echo "- **PR branch VSIX size**: ${{ env.pr_vsix_size }} KB" >> results.md
103-
echo "- **Size difference**: ${{ env.vsix_size_diff }} KB (${{ env.vsix_percentage_change }}%)" >> results.md
125+
echo "- **Size difference**: ${{ '\$\${\color{' }}${{env.vsix_text_color}}} ${{ env.vsix_size_diff }} KB \space (${{ env.vsix_percentage_change }}\\\\%) ${{ '}\$\$' }} " >> results.md
104126
echo "### React Webview Bundle Size Comparison" >> results.md
105127
echo "- **Main branch bundle size**: ${{ env.main_webview_bundle_size }} KB" >> results.md
106128
echo "- **PR branch bundle size**: ${{ env.pr_webview_bundle_size }} KB" >> results.md
107-
echo "- **Size difference**: ${{ env.webview_size_diff }} KB (${{ env.webview_bundle_percentage_change }}%)" >> results.md
129+
echo "- **Size difference**: ${{ '\$\${\color{' }}${{env.webview_text_color}}} ${{ env.webview_size_diff }} KB \space (${{ env.webview_bundle_percentage_change }}\\\\%) ${{ '}\$\$' }} " >> results.md
130+
echo "### React Webview JS Size Comparison" >> results.md
131+
echo "- **Main branch JS size**: ${{ env.main_js_size }} KB" >> results.md
132+
echo "- **PR branch JS size**: ${{ env.pr_js_size }} KB" >> results.md
133+
echo "- **Size difference**: ${{ '\$\${\color{' }}${{env.js_text_color}}} ${{ env.js_size_diff }} KB \space (${{ env.js_percentage_change }}\\\\%) ${{ '}\$\$' }} " >> results.md
108134
109135
- name: Find comment
110136
uses: peter-evans/find-comment@v3
@@ -140,6 +166,10 @@ jobs:
140166
if: ${{ env.webview_bundle_percentage_change > 5 }}
141167
run: exit 1
142168

169+
- name: Fail if JS bundle size is increased by 5%
170+
if: ${{ env.js_percentage_change > 5 }}
171+
run: exit 1
172+
143173

144174

145175

‎gulpfile.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -229,10 +229,10 @@ async function generateReactWebviewsBundle() {
229229
'.tsx': 'tsx',
230230
'.ts': 'ts',
231231
'.css': 'css',
232-
'.svg': 'dataurl',
232+
'.svg': 'file',
233233
'.js': 'js',
234-
'.png': 'dataurl',
235-
'.gif': 'dataurl',
234+
'.png': 'file',
235+
'.gif': 'file',
236236
},
237237
tsconfig: './tsconfig.react.json',
238238
plugins: [

‎src/controllers/reactWebviewBaseController.ts

+8
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@ export abstract class ReactWebviewBaseController<State, Reducers> implements vsc
8181
</head>
8282
<body>
8383
<div id="root"></div>
84+
<script>
85+
const assetPathVscodeUri = "${this.resourceUrl(['']).toString()}";
86+
</script>
8487
<script nonce="${nonce}" src="${scriptUri}"></script>
8588
</body>
8689
</html>
@@ -126,6 +129,11 @@ export abstract class ReactWebviewBaseController<State, Reducers> implements vsc
126129
this._isFirstLoad = false;
127130
}
128131
};
132+
this._webViewRequestHandlers['getUri'] = async (path: string) => {
133+
path = path.replace('./', '');
134+
const result = this.resourceUrl([path]).toString();
135+
return result;
136+
};
129137
}
130138

131139
private resourceUrl(path: string[]) {

‎src/reactviews/common/loadImage.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
declare const assetPathVscodeUri: string;
7+
8+
export function loadImage(path: string): string {
9+
const loadPath = assetPathVscodeUri + '/' + path;
10+
return loadPath;
11+
}

‎src/reactviews/pages/ConnectionDialog/connectionHeader.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { useContext } from "react";
77
import { Text, Image, webLightTheme } from "@fluentui/react-components";
88
import { ConnectionDialogContext } from "./connectionDialogStateProvider";
9+
import { loadImage } from "../../common/loadImage";
910

1011
const sqlServerImage = require('../../../../media/sqlServer.svg');
1112
const sqlServerImageDark = require('../../../../media/sqlServer_inverse.svg');
@@ -26,7 +27,7 @@ export const ConnectionHeader = () => {
2627
padding: '10px',
2728
}
2829
}
29-
src={connectionDialogContext?.theme === webLightTheme ? sqlServerImage : sqlServerImageDark} alt='SQL Server' height={60} width={60} />
30+
src={connectionDialogContext?.theme === webLightTheme ? loadImage(sqlServerImage) : loadImage(sqlServerImageDark)} alt='SQL Server' height={60} width={60} />
3031
<Text size={500} style={
3132
{
3233
lineHeight: '60px'

‎src/reactviews/pages/ExecutionPlan/queryPlanSetup.ts

+40-14
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55

6+
import { loadImage } from "../../common/loadImage";
7+
68
const iterator_catch_all = require('./icons/iterator_catch_all.png');
79
const cursor_catch_all = require('./icons/cursor_catch_all.png');
810
const language_construct_catch_all = require('./icons/language_construct_catch_all.png');
@@ -133,7 +135,7 @@ const collapseButton = require('./icons/collapse.svg');
133135

134136
export function getIconPaths() {
135137

136-
var iconPaths =
138+
var iconPaths: Record<string, string> =
137139
{
138140
// generic icons
139141
iteratorCatchAll: iterator_catch_all,
@@ -378,69 +380,93 @@ export function getIconPaths() {
378380
unionAll: unionAll
379381
};
380382

383+
Object.keys(iconPaths).forEach(function (key) {
384+
iconPaths[key] = loadImage(iconPaths[key]);
385+
});
381386
return iconPaths;
382387
}
383388

384389
export function getBadgePaths() {
385-
return {
390+
const badgePaths: Record<string, string> = {
386391
warning: warning,
387392

388393
criticalWarning: criticalWarning,
389394

390395
parallelism: parallelismBadge
391396
};
397+
398+
Object.keys(badgePaths).forEach(function (key) {
399+
badgePaths[key] = loadImage(badgePaths[key]);
400+
});
401+
return badgePaths;
392402
}
393403

394404
export function getCollapseExpandPaths() {
395-
return {
405+
const buttonIcons: Record<string, string> = {
396406
expand: expandButton,
397407

398408
collapse: collapseButton
399409
};
410+
411+
Object.keys(buttonIcons).forEach(function (key) {
412+
buttonIcons[key] = loadImage(buttonIcons[key]);
413+
});
414+
return buttonIcons;
400415
}
401416

402417
export const save = (theme: string) => {
403-
return theme === "dark" ? require('./icons/saveDark.svg') : require('./icons/save.svg');
418+
const saveIcon = theme === "dark" ? require('./icons/saveDark.svg') : require('./icons/save.svg');
419+
return loadImage(saveIcon);
404420
};
405421

406422
export const openPlanFile = (theme: string) => {
407-
return theme === "dark" ? require('./icons/openPlanFileDark.svg') : require('./icons/openPlanFile.svg');
423+
const openPlanFileIcon = theme === "dark" ? require('./icons/openPlanFileDark.svg') : require('./icons/openPlanFile.svg');
424+
return loadImage(openPlanFileIcon);
408425
};
409426

410427
export const openQuery = (theme: string) => {
411-
return theme === "dark" ? require('./icons/openQueryDark.svg') : require('./icons/openQuery.svg');
428+
const openQueryIcon = theme === "dark" ? require('./icons/openQueryDark.svg') : require('./icons/openQuery.svg');
429+
return loadImage(openQueryIcon);
412430
};
413431

414432
export const zoomIn = (theme: string) => {
415-
return theme === "dark" ? require('./icons/zoomInDark.svg') : require('./icons/zoomIn.svg');
433+
const zoomInIcon = theme === "dark" ? require('./icons/zoomInDark.svg') : require('./icons/zoomIn.svg');
434+
return loadImage(zoomInIcon);
416435
};
417436

418437
export const zoomOut = (theme: string) => {
419-
return theme === "dark" ? require('./icons/zoomOutDark.svg') : require('./icons/zoomOut.svg');
438+
const zoomOutIcon = theme === "dark" ? require('./icons/zoomOutDark.svg') : require('./icons/zoomOut.svg');
439+
return loadImage(zoomOutIcon);
420440
};
421441

422442
export const zoomToFit = (theme: string) => {
423-
return theme === "dark" ? require('./icons/zoomToFitDark.svg') : require('./icons/zoomToFit.svg');
443+
const zoomToFitIcon = theme === "dark" ? require('./icons/zoomToFitDark.svg') : require('./icons/zoomToFit.svg');
444+
return loadImage(zoomToFitIcon);
424445
};
425446

426447
export const customZoom = (theme: string) => {
427-
return theme === "dark" ? require('./icons/customZoomDark.svg') : require('./icons/customZoom.svg');
448+
const customZoomIcon = theme === "dark" ? require('./icons/customZoomDark.svg') : require('./icons/customZoom.svg');
449+
return loadImage(customZoomIcon);
428450
};
429451

430452
export const search = (theme: string) => {
431-
return theme === "dark" ? require('./icons/searchDark.svg') : require('./icons/search.svg');
453+
const searchIcon = theme === "dark" ? require('./icons/searchDark.svg') : require('./icons/search.svg');
454+
return loadImage(searchIcon);
432455
};
433456

434457
export const highlightOps = (theme: string) => {
435-
return theme === "dark" ? require('./icons/highlightExpensiveOperationDark.svg') : require('./icons/highlightExpensiveOperation.svg');
458+
const highlightOpsIcon = theme === "dark" ? require('./icons/highlightExpensiveOperationDark.svg') : require('./icons/highlightExpensiveOperation.svg');
459+
return loadImage(highlightOpsIcon);
436460
};
437461

438462
export const enableTooltip = (theme: string) => {
439-
return theme === "dark" ? require('./icons/enableTooltipDark.svg') : require('./icons/enableTooltip.svg');
463+
const enableTooltipIcon = theme === "dark" ? require('./icons/enableTooltipDark.svg') : require('./icons/enableTooltip.svg');
464+
return loadImage(enableTooltipIcon);
440465
};
441466

442467
export const disableTooltip = (theme: string) => {
443-
return theme === "dark" ? require('./icons/disableTooltipDark.svg') : require('./icons/disableTooltip.svg');
468+
const disableTooltipIcon = theme === "dark" ? require('./icons/disableTooltipDark.svg') : require('./icons/disableTooltip.svg');
469+
return loadImage(disableTooltipIcon);
444470
};
445471

446472

0 commit comments

Comments
 (0)