How to use lwc - 10 common examples
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 / integration-tests / scripts / build.js View on Github 
const rollupReplacePlugin = require('rollup-plugin-replace');
const compatPolyfills = require('compat-polyfills');
const { getModulePath } = require('lwc');
// -- Build Config -------------------------------------------
const mode = process.env.MODE || 'compat';
const isCompat = /compat/.test(mode);
const isProd = /prod/.test(mode);
const engineModeFile = getModulePath(
'engine',
'iife',
isCompat ? 'es5' : 'es2017',
isProd ? 'prod' : 'dev'
);
const shadowModeFile = getModulePath(
'synthetic-shadow',
'iife',
isCompat ? 'es5' : 'es2017',
isProd ? 'prod' : 'dev'
);
const wireServicePath = getModulePath(
'wire-service',
'iife',
isCompat ? 'es5' : 'es2017',
isProd ? 'prod' : 'dev'
);
const todoPath = path.join(require.resolve('../src/shared/todo.js'));
const testSufix = '.test.js';
const testPrefix = 'test-';z = _objectSpread({
x
}, y);
z = {
x,
w: _objectSpread({}, y)
}; // babel-plugin-transform-class-properties
// https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-class-properties/test/fixtures/loose/instance/actual.js
class Bar {
constructor() {
this.bar = "foo";
}
}
registerDecorators(Bar, {
fields: ["bar"]
});
export { Bar, Test, literal, obj1, obj2, t, test };num = __callKey2(Math, "pow", num, 2);
__callKey1(console, "log", num); // babel-plugin-transform-object-rest-spread
// https://github.com/babel/babel/blob/6.x/packages/babel-plugin-transform-object-rest-spread/test/fixtures/object-spread/assignment/actual.js
z = _objectSpread({
x: x
}, y);
z = {
x: x,
w: _objectSpread({}, y)
}; // babel-plugin-transform-class-properties
// https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-class-properties/test/fixtures/loose/instance/actual.js
var Bar = function Bar() {
_classCallCheck(this, Bar);
__setKey(this, "bar", "foo");
};
registerDecorators(Bar, {
fields: ["bar"]
});
export { Bar, Test, literal, obj1, obj2, t, test };@wire(KnowledgeRecordTypes)
wiredRecordTypes({error, data}) {
if (data) {
this.rtList = data;
console.log('data', data);
this.error = undefined;
}
if (error) {
this.error = error;
console.log('data error', error);
this.rtList = undefined;
}
};
@wire(KnowledgeArticles, {input : '$article', cat : '$rt'})
wiredArticles({error, data}) {
if (data) {
this.articleList = [];
for (let article of data) {
let myArticle = {};
myArticle.data = article;
// Get article url
this.KnowledgePageRef = {
type: "standard__recordPage",
attributes: {
"recordId": article.Id,
"objectApiName": "Knowledge__kav",
"actionName": "view"
}setPage(tagName, component, props = {}) {
const el = createElement(tagName, {
is: component,
fallback: false,
});
Object.assign(el, props);
// Remove previous components from the container if necessary
const container = this.template.querySelector('.container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(el);
}
});
this._scenarios.push(
new ChangeClosedScenario(
new ScenarioLayout(
'Select Closed {0}',
'Change Closed {0}',
token
)
)
);
}
/* ========== WIRED METHODS ========== */
@wire(getRecordUi, {
recordIds: '$recordId',
layoutTypes: 'Full',
modes: 'View'
})
wiredRecordUI({ error, data }) {
if (error) {
this.errorMsg = error.body.message;
}
if (data && data.records[this.recordId]) {
// set the record
this.record = data.records[this.recordId];
// set the object info
this.objectInfo = data.objectInfos[this.objectApiName];{type: 'button', initialWidth: 155,
typeAttributes: {label: 'Update Address', name: 'update_address', title: 'Click to open modal to update Mailing Address'}},
];
export default class LwcContactDatatable extends LightningElement {
@api
get recordId() {
return this._recordId;
}
set recordId(value) {
this._accountId = value;
this._recordId = value;
}
@track columns = TABLE_COLUMNS;
@wire(CurrentPageReference)pageRef;
@wire(wireContactsByAccountId, { accountId: '$_accountId' })
contacts;
// private
_accountId; // app flexipages
_recordId; // record flexipage
connectedCallback() {
registerListener('accountSelected', this.handleAccountSelected, this);
registerListener('forceRefreshView', this.reloadTable, this);
registerListener('clearTable', this.handleClearTable, this);
}
disconnectedCallback() {
unregisterAllListeners(this);/*
* 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(() => {
