How to use lwc - 10 common examples

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(() => {