feat(perf): hydrateComponent perf tests

packages/perf-benchmarks/src/__benchmarks__/engine-hydrate/table-hydrate-1k.benchmark.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { renderComponent } from '@lwc/engine-server';
+import { hydrateComponent } from '@lwc/engine-dom';
+
+import Table from 'perf-benchmarks-components/dist/server/benchmark/cardComponent/cardComponent.js';
+import Store from 'perf-benchmarks-components/dist/server/benchmark/store/store.js';
+
+import TableClient from 'perf-benchmarks-components/dist/dom/benchmark/cardComponent/cardComponent.js';
+import { benchmark, run, before } from '../../utils/benchmark-framework.js';
+import { insertComponent } from '../../utils/utils';
+
+benchmark(`benchmark-table/hydrate/1k`, () => {
+    let tableElement;
+    let props;
+
+    before(async () => {
+        const store = new Store();
+        store.run();
+
+        props = {
+            title: 'table hydrate 1k',
+            rows: store.data,
+        };
+
+        const ssrHtml = renderComponent('benchmark-table', Table, props);
+
+        const fragment = new DOMParser().parseFromString(ssrHtml, 'text/html', {
+            includeShadowRoots: true,
+        });
+
+        tableElement = fragment.querySelector('benchmark-table');
+
+        await insertComponent(tableElement);
+    });
+
+    run(() => {
+        hydrateComponent(tableElement, TableClient, props);
+    });
+});

packages/perf-benchmarks/src/__benchmarks__/engine-hydrate/tablecmp-hydrate-1k.benchmark.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { renderComponent } from '@lwc/engine-server';
+import { hydrateComponent } from '@lwc/engine-dom';
+
+import Table from 'perf-benchmarks-components/dist/server/benchmark/tableComponent/tableComponent.js';
+import TableClient from 'perf-benchmarks-components/dist/dom/benchmark/tableComponent/tableComponent.js';
+
+import Store from 'perf-benchmarks-components/dist/server/benchmark/store/store.js';
+import { benchmark, run, before } from '../../utils/benchmark-framework.js';
+import { insertComponent } from '../../utils/utils';
+
+benchmark(`benchmark-table-component/hydrate/1k`, () => {
+    let props;
+    let tableElement;
+
+    before(async () => {
+        const store = new Store();
+        store.run();
+
+        props = {
+            rows: store.data,
+        };
+
+        const ssrHtml = renderComponent('benchmark-table', Table, props);
+
+        const fragment = new DOMParser().parseFromString(ssrHtml, 'text/html', {
+            includeShadowRoots: true,
+        });
+
+        tableElement = fragment.querySelector('benchmark-table');
+
+        await insertComponent(tableElement);
+    });
+
+    run(() => {
+        hydrateComponent(tableElement, TableClient, props);
+    });
+});