How to use the lwc.buildCustomElementConstructor function in lwc
To help you get started, we’ve selected a few lwc examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
salesforce / lwc / packages / perf-benchmarks / src / __benchmarks__ / benchmark-table-wc / wc-create-1k.benchmark.js View on Github 
/*
* 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 { buildCustomElementConstructor } from 'lwc';
import Table from 'benchmark/tableComponent';
import Row from 'benchmark/tableComponentRow';
import Store from '../../tableStore';
import { insertTableComponent, destroyTableComponent } from '../../utils';
customElements.define('benchmark-table-component', buildCustomElementConstructor(Table));
// the row can be optionally defined, but this benchmark always do it so we know how costly it is.
customElements.define('benchmark-table-component-row', buildCustomElementConstructor(Row));
benchmark(`benchmark-table-wc/create/1k`, () => {
let tableElement;
before(() => {
tableElement = document.createElement('benchmark-table-component');
return insertTableComponent(tableElement);
});
run(() => {
const store = new Store();
store.run();
tableElement.rows = store.data;
});/*
* 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 { buildCustomElementConstructor } from 'lwc';
import Table from 'benchmark/tableComponent';
import Row from 'benchmark/tableComponentRow';
import Store from '../../tableStore';
import { insertTableComponent, destroyTableComponent } from '../../utils';
customElements.define('benchmark-table-component', buildCustomElementConstructor(Table));
// the row can be optionally defined, but this benchmark always do it so we know how costly it is.
customElements.define('benchmark-table-component-row', buildCustomElementConstructor(Row));
benchmark(`benchmark-table-wc/clear/1k`, () => {
let tableElement;
let store;
before(async () => {
tableElement = document.createElement('benchmark-table-component');
await insertTableComponent(tableElement);
store = new Store();
store.run();
// eslint-disable-next-line require-atomic-updates
tableElement.rows = store.data;
});/*
* 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 { buildCustomElementConstructor } from 'lwc';
import Table from 'benchmark/tableComponent';
import Row from 'benchmark/tableComponentRow';
import Store from '../../tableStore';
import { insertTableComponent, destroyTableComponent } from '../../utils';
customElements.define('benchmark-table-component', buildCustomElementConstructor(Table));
// the row can be optionally defined, but this benchmark always do it so we know how costly it is.
customElements.define('benchmark-table-component-row', buildCustomElementConstructor(Row));
benchmark(`benchmark-table-wc/create/1k`, () => {
let tableElement;
before(() => {
tableElement = document.createElement('benchmark-table-component');
return insertTableComponent(tableElement);
});
run(() => {
const store = new Store();
store.run();
tableElement.rows = store.data;
});
after(() => {/*
* 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 { buildCustomElementConstructor } from 'lwc';
import Table from 'benchmark/tableComponent';
import Row from 'benchmark/tableComponentRow';
import Store from '../../tableStore';
import { insertTableComponent, destroyTableComponent } from '../../utils';
customElements.define('benchmark-table-component', buildCustomElementConstructor(Table));
// the row can be optionally defined, but this benchmark always do it so we know how costly it is.
customElements.define('benchmark-table-component-row', buildCustomElementConstructor(Row));
benchmark(`benchmark-table-wc/create/10k`, () => {
let tableElement;
before(() => {
tableElement = document.createElement('benchmark-table-component');
return insertTableComponent(tableElement);
});
run(() => {
const store = new Store();
store.runLots();
tableElement.rows = store.data;
});
after(() => {/*
* 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 { buildCustomElementConstructor } from 'lwc';
import Table from 'benchmark/tableComponent';
import Row from 'benchmark/tableComponentRow';
import Store from '../../tableStore';
import { insertTableComponent, destroyTableComponent } from '../../utils';
customElements.define('benchmark-table-component', buildCustomElementConstructor(Table));
// the row can be optionally defined, but this benchmark always do it so we know how costly it is.
customElements.define('benchmark-table-component-row', buildCustomElementConstructor(Row));
benchmark(`benchmark-table-wc/create/10k`, () => {
let tableElement;
before(() => {
tableElement = document.createElement('benchmark-table-component');
return insertTableComponent(tableElement);
});
run(() => {
const store = new Store();
store.runLots();
tableElement.rows = store.data;
});/*
* 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 { buildCustomElementConstructor } from 'lwc';
import Table from 'benchmark/tableComponent';
import Row from 'benchmark/tableComponentRow';
import Store from '../../tableStore';
import { insertTableComponent, destroyTableComponent } from '../../utils';
customElements.define('benchmark-table-component', buildCustomElementConstructor(Table));
// the row can be optionally defined, but this benchmark always do it so we know how costly it is.
customElements.define('benchmark-table-component-row', buildCustomElementConstructor(Row));
benchmark(`benchmark-table-wc/update-10th/1k`, () => {
let tableElement;
let store;
before(async () => {
tableElement = document.createElement('benchmark-table-component');
await insertTableComponent(tableElement);
store = new Store();
store.run();
// eslint-disable-next-line require-atomic-updates
tableElement.rows = store.data;
});
run(() => {/*
* 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 { buildCustomElementConstructor } from 'lwc';
import Table from 'benchmark/tableComponent';
import Row from 'benchmark/tableComponentRow';
import Store from '../../tableStore';
import { insertTableComponent, destroyTableComponent } from '../../utils';
customElements.define('benchmark-table-component', buildCustomElementConstructor(Table));
// the row can be optionally defined, but this benchmark always do it so we know how costly it is.
customElements.define('benchmark-table-component-row', buildCustomElementConstructor(Row));
benchmark(`benchmark-table-wc/clear/1k`, () => {
let tableElement;
let store;
before(async () => {
tableElement = document.createElement('benchmark-table-component');
await insertTableComponent(tableElement);
store = new Store();
store.run();
// eslint-disable-next-line require-atomic-updates
tableElement.rows = store.data;
});
run(() => {renderedCallback() {
const WC = buildCustomElementConstructor(ComponentWithX);
customElements.define('x-foo', WC);
const elm = document.createElement('x-foo');
elm.setAttribute('title', 'something');
elm.setAttribute('x', 2);
this._elm = elm;
this.template.querySelector('.test').appendChild(elm);
}
@api get programmatic() {import { buildCustomElementConstructor } from 'lwc';
import MyApp from 'my/app';
customElements.define('my-app', buildCustomElementConstructor(MyApp));import { buildCustomElementConstructor } from 'lwc';
import MyApp from 'my/app';
customElements.define('my-app', buildCustomElementConstructor(MyApp));
