feat: support heap snapshots

packages/vscode-js-profile-core/package.json

@@ -14,6 +14,7 @@
     "watch:css": "npm run compile:css && chokidar \"src/**/*.css\" -c \"cpy --parents --cwd=src '**/*.css' ../out/esm\""
   },
   "dependencies": {
-    "@vscode/codicons": "^0.0.35"
+    "@vscode/codicons": "^0.0.35",
+    "@vscode/v8-heap-parser": "^0.1.0"
   }
 }

packages/vscode-js-profile-core/src/client/filter.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { h, FunctionComponent, ComponentChild } from 'preact';
+import { ComponentChild, FunctionComponent, h } from 'preact';
 import { useCallback } from 'preact/hooks';
 import styles from './filter.css';
 
@@ -11,10 +11,12 @@ import styles from './filter.css';
  */
 export const Filter: FunctionComponent<{
   value: string;
+  type?: string;
+  min?: number;
   onChange: (value: string) => void;
   placeholder?: string;
   foot?: ComponentChild;
-}> = ({ value, onChange, placeholder = 'Filter for function', foot }) => {
+}> = ({ value, min, type, onChange, placeholder = 'Filter for function', foot }) => {
   const onChangeRaw = useCallback(
     (evt: Event) => {
       onChange((evt.target as HTMLInputElement).value);
@@ -24,7 +26,14 @@ export const Filter: FunctionComponent<{
 
   return (
     <div className={styles.wrapper}>
-      <input value={value} placeholder={placeholder} onPaste={onChangeRaw} onKeyUp={onChangeRaw} />
+      <input
+        type={type}
+        min={min}
+        value={value}
+        placeholder={placeholder}
+        onPaste={onChangeRaw}
+        onKeyUp={onChangeRaw}
+      />
       {foot}
     </div>
   );

packages/vscode-js-profile-core/src/client/filterBar.tsx

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { FunctionComponent, h } from 'preact';
+import styles from './filterBar.css';
+
+export const FilterBar: FunctionComponent = ({ children }) => (
+  <div className={styles.f}>{children}</div>
+);

packages/vscode-js-profile-core/src/client/pageLoader.css

@@ -0,0 +1,29 @@
+.progress {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 2px;
+	pointer-events: none;
+	overflow: hidden;
+	z-index: 1;
+}
+
+.progress::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	width: 2%;
+	animation-name: progress;
+	animation-duration: 4s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	transform: translate3d(0px, 0px, 0px);
+	background: var(--vscode-progressBar-background);
+}
+
+@keyframes progress {
+	from { transform: translateX(0%) scaleX(1) }
+	50% { transform: translateX(2500%) scaleX(3) }
+	to { transform: translateX(4900%) scaleX(1) }
+}

packages/vscode-js-profile-core/src/client/pageLoader.tsx

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { FunctionComponent, h } from 'preact';
+import style from './pageLoader.css';
+
+export const PageLoader: FunctionComponent = () => <div className={style.progress} />;

packages/vscode-js-profile-core/src/client/rich-filter.tsx

@@ -8,6 +8,7 @@ import { ComponentChild, Fragment, FunctionComponent, h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import { IDataSource, IQueryResults, evaluate } from '../ql';
 import { Filter } from './filter';
+import { FilterBar } from './filterBar';
 import styles from './rich-filter.css';
 import { ToggleButton } from './toggle-button';
 import { usePersistedState } from './usePersistedState';
@@ -70,7 +71,7 @@ export const richFilter =
     }, [regex, caseSensitive, text, data]);
 
     return (
-      <div className={styles.f}>
+      <FilterBar>
         <Filter
           value={text}
           placeholder={placeholder}
@@ -94,6 +95,6 @@ export const richFilter =
         />
         {error && <div className={styles.error}>{error}</div>}
         {foot}
-      </div>
+      </FilterBar>
     );
   };

packages/vscode-js-profile-core/src/client/vscodeApi.tsx

@@ -15,10 +15,12 @@ export interface IVscodeApi<T = unknown> {
 
 declare const acquireVsCodeApi: () => IVscodeApi;
 
+export const vscodeApi = acquireVsCodeApi();
+
 /**
  * Context key for the VS Code API object.
  */
-export const VsCodeApi = createContext(acquireVsCodeApi());
+export const VsCodeApi = createContext(vscodeApi);
 
 /**
  * Parses the vscode CSS variables from the document.