added 14 characters in body

Source Link

edited May 4, 2019 at 15:25

17.8k
13
82
191

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/AContSimpleTableCont.getColumnsAndData';
export default class SimpleTable extends LightningElement {
    @api a;
    @api b;
    @api c;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({a:this.a, b:this.b.split(','), c: this.c }).then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    
    // Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        var primer = (data && data.length && data[0].Origin) ? (x, field)=>x.Origin[field] : null;
        data.sort(this.sortBy(fieldName, reverse, primer))
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x,field)} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }
}

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/BContTableCont.getColumnsAndData';
import {updateColumnSorting} from 'c/simpleTable';
import SimpleTable from 'c/simpleTable';
export default class DataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;
    @api d;
    @api e;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({ a:this.a, b:this.b.split(',')
            , c: this.c, d: JSON.parse(this.d.replace(/'/g, '"'))
            , e: JSON.parse(this.e.replace(/'/g, '"')) })
        .then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    updateColumnSorting(e) {
        new SimpleTable().updateColumnSorting(e);
    }
    /*// Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        data.sort(this.sortBy(fieldName, reverse));
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }*/
}

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/ACont.getColumnsAndData';
export default class SimpleTable extends LightningElement {
    @api a;
    @api b;
    @api c;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({a:this.a, b:this.b.split(','), c: this.c }).then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    
    // Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        var primer = (data && data.length && data[0].Origin) ? (x, field)=>x.Origin[field] : null;
        data.sort(this.sortBy(fieldName, reverse, primer))
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x,field)} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }
}

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/BCont.getColumnsAndData';
import {updateColumnSorting} from 'c/simpleTable';
import SimpleTable from 'c/simpleTable';
export default class DataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;
    @api d;
    @api e;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({ a:this.a, b:this.b.split(',')
            , c: this.c, d: JSON.parse(this.d.replace(/'/g, '"'))
            , e: JSON.parse(this.e.replace(/'/g, '"')) })
        .then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    updateColumnSorting(e) {
        new SimpleTable().updateColumnSorting(e);
    }
    /*// Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        data.sort(this.sortBy(fieldName, reverse));
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }*/
}

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/SimpleTableCont.getColumnsAndData';
export default class SimpleTable extends LightningElement {
    @api a;
    @api b;
    @api c;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({a:this.a, b:this.b.split(','), c: this.c }).then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    
    // Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        var primer = (data && data.length && data[0].Origin) ? (x, field)=>x.Origin[field] : null;
        data.sort(this.sortBy(fieldName, reverse, primer))
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x,field)} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }
}

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/TableCont.getColumnsAndData';
import {updateColumnSorting} from 'c/simpleTable';
import SimpleTable from 'c/simpleTable';
export default class DataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;
    @api d;
    @api e;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({ a:this.a, b:this.b.split(',')
            , c: this.c, d: JSON.parse(this.d.replace(/'/g, '"'))
            , e: JSON.parse(this.e.replace(/'/g, '"')) })
        .then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    updateColumnSorting(e) {
        new SimpleTable().updateColumnSorting(e);
    }
    /*// Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        data.sort(this.sortBy(fieldName, reverse));
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }*/
}

added 2020 characters in body

Source Link

edited May 4, 2019 at 15:12

Patlatus

17.8k
13
82
191

[Documentation][1]Documentation sounds very unclear how to implement that.

Listing of asimpleTable.html

Listing of asimpleTable.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/ACont.getColumnsAndData';
export default class SimpleDataTableLWCSimpleTable extends LightningElement {
    @api a;
    @api b;
    @api c;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({a:this.a, b:this.b.split(','), c: this.c }).then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    
    // Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        var primer = (data && data.length && data[0].Origin) ? (x, field)=>x.Origin[field] : null;
        data.sort(this.sortBy(fieldName, reverse, primer))
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x,field)} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }
}

Listing of bTable.html

Listing of bTable.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/BCont.getColumnsAndData';
import {updateColumnSorting} from 'c/a';simpleTable';
import aSimpleTable from 'c/a';simpleTable';
export default class DataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;
    @api d;
    @api e;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({ a:this.a, b:this.b.split(',')
            , c: this.c, d: JSON.parse(this.d.replace(/'/g, '"'))
            , e: JSON.parse(this.e.replace(/'/g, '"')) })
        .then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    updateColumnSorting(e) {
        updateColumnSortingnew SimpleTable(e);
        a.updateColumnSorting(e);
    }
    /*// Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        data.sort(this.sortBy(fieldName, reverse));
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }*/
}

import {updateColumnSorting} from 'c/a';SimpleTable';

import a from 'c/a';SimpleTable';

aSimpleTable.updateColumnSorting(e);

Uncaught TypeError: aSimpleTable.updateColumnSorting is not a function throws at /auraFW/javascript/pxtF0ZdGYF-z00XsmRUcGQ/aura_proddebug.js:6146:17

export * from a;SimpleTable;

to the end of aSimpleTable.js file but it didn't compile.

How do I reuse Javascript code from one LWC in another LWC?

I tried to follow @muenzpraeger suggestion and try again to use suggestion from this article

import SimpleTable from 'c/SimpleTable';
updateColumnSorting(e) {
    new SimpleTable().updateColumnSorting(e); 
}

so I changed line

SimpleTable.updateColumnSorting(e);

to

new SimpleTable().updateColumnSorting(e);

However, it still throws me an exception [1]

Uncaught ReferenceError throws at https://velocity-nosoftware-4149-dev-ed.lightning.force.com/auraFW/javascript/0Rz6fp7Oruhim-Qzw_AgRQ/aura_proddebug.js:8235:21

Looks like the problem is that I am unable to skip execution of parent constructor of BaseLightningElement() which checks some local variable vmBeingConstructed which I am not able to set or override at line 7195 of aura_proddebug.js

function BaseLightningElement() {
    if (isNull(vmBeingConstructed)) {
        throw new ReferenceError();
    }

Looks like this complication is made intentional, there are some strange comments in the internal LWC code:

// interaction hooks
// We are intentionally hiding this argument from the formal API of LWCElement because
// we don't want folks to know about it just yet.

When I try to avoid execution of inherited constructor by defining a constructor at SimpleTable

constructor() {
    //super();
}

which doesn't call https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_javascript_share_codesuper(), I receive another error

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor throws at https://velocity-nosoftware-4149-dev-ed.lightning.force.com/auraFW/javascript/0Rz6fp7Oruhim-Qzw_AgRQ/aura_proddebug.js:8235:21

[Documentation][1] sounds very unclear how to implement that.

Listing of a.html

Listing of a.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/ACont.getColumnsAndData';
export default class SimpleDataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({a:this.a, b:this.b.split(','), c: this.c }).then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    
    // Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        var primer = (data && data.length && data[0].Origin) ? (x, field)=>x.Origin[field] : null;
        data.sort(this.sortBy(fieldName, reverse, primer))
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x,field)} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }
}

Listing of b.html

Listing of b.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/BCont.getColumnsAndData';
import {updateColumnSorting} from 'c/a';
import a from 'c/a';
export default class DataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;
    @api d;
    @api e;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({ a:this.a, b:this.b.split(',')
            , c: this.c, d: JSON.parse(this.d.replace(/'/g, '"'))
            , e: JSON.parse(this.e.replace(/'/g, '"')) })
        .then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    updateColumnSorting(e) {
        updateColumnSorting(e);
        a.updateColumnSorting(e);
    }
    /*// Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        data.sort(this.sortBy(fieldName, reverse));
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }*/
}

import {updateColumnSorting} from 'c/a';

import a from 'c/a';

a.updateColumnSorting(e);

Uncaught TypeError: a.updateColumnSorting is not a function throws at /auraFW/javascript/pxtF0ZdGYF-z00XsmRUcGQ/aura_proddebug.js:6146:17

export * from a;

to the end of a.js file but it didn't compile.

How do I reuse Javascript code from one LWC in another LWC? [1]: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_javascript_share_code

Documentation sounds very unclear how to implement that.

Listing of simpleTable.html

Listing of simpleTable.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/ACont.getColumnsAndData';
export default class SimpleTable extends LightningElement {
    @api a;
    @api b;
    @api c;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({a:this.a, b:this.b.split(','), c: this.c }).then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    
    // Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        var primer = (data && data.length && data[0].Origin) ? (x, field)=>x.Origin[field] : null;
        data.sort(this.sortBy(fieldName, reverse, primer))
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x,field)} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }
}

Listing of Table.html

Listing of Table.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/BCont.getColumnsAndData';
import {updateColumnSorting} from 'c/simpleTable';
import SimpleTable from 'c/simpleTable';
export default class DataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;
    @api d;
    @api e;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({ a:this.a, b:this.b.split(',')
            , c: this.c, d: JSON.parse(this.d.replace(/'/g, '"'))
            , e: JSON.parse(this.e.replace(/'/g, '"')) })
        .then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    updateColumnSorting(e) {
        new SimpleTable().updateColumnSorting(e);
    }
    /*// Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        data.sort(this.sortBy(fieldName, reverse));
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }*/
}

import {updateColumnSorting} from 'c/SimpleTable';

import a from 'c/SimpleTable';

SimpleTable.updateColumnSorting(e);

Uncaught TypeError: SimpleTable.updateColumnSorting is not a function throws at /auraFW/javascript/pxtF0ZdGYF-z00XsmRUcGQ/aura_proddebug.js:6146:17

export * from SimpleTable;

to the end of SimpleTable.js file but it didn't compile.

How do I reuse Javascript code from one LWC in another LWC?

I tried to follow @muenzpraeger suggestion and try again to use suggestion from this article

import SimpleTable from 'c/SimpleTable';
updateColumnSorting(e) {
    new SimpleTable().updateColumnSorting(e); 
}

so I changed line

SimpleTable.updateColumnSorting(e);

to

new SimpleTable().updateColumnSorting(e);

However, it still throws me an exception

Uncaught ReferenceError throws at https://velocity-nosoftware-4149-dev-ed.lightning.force.com/auraFW/javascript/0Rz6fp7Oruhim-Qzw_AgRQ/aura_proddebug.js:8235:21

Looks like the problem is that I am unable to skip execution of parent constructor of BaseLightningElement() which checks some local variable vmBeingConstructed which I am not able to set or override at line 7195 of aura_proddebug.js

function BaseLightningElement() {
    if (isNull(vmBeingConstructed)) {
        throw new ReferenceError();
    }

Looks like this complication is made intentional, there are some strange comments in the internal LWC code:

// interaction hooks
// We are intentionally hiding this argument from the formal API of LWCElement because
// we don't want folks to know about it just yet.

When I try to avoid execution of inherited constructor by defining a constructor at SimpleTable

constructor() {
    //super();
}

which doesn't call super(), I receive another error

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor throws at https://velocity-nosoftware-4149-dev-ed.lightning.force.com/auraFW/javascript/0Rz6fp7Oruhim-Qzw_AgRQ/aura_proddebug.js:8235:21

Source Link

asked May 1, 2019 at 21:00

Patlatus

17.8k
13
82
191

Unable to reuse code from component A in component B

I have two almost identical Lightning Web Components with only difference that they use two different Apex Controller with two different Apex method to get data, the first component uses version with three parameters and the other component uses version with five parameters. I would like to follow the DRY principle (Don't Repeat Yourself) and to remove duplicate code for sorting datatable but I can't.

[Documentation][1] sounds very unclear how to implement that.

Listing of a.html

<template>
    <template if:true={error}>
        <template if:true={error.body}>
            {error.body.message}
        </template>
    </template>
    <lightning-datatable data={data} columns={columns} key-field="id"  hide-checkbox-column 
        onsort={updateColumnSorting}></lightning-datatable>
</template>

Listing of a.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/ACont.getColumnsAndData';
export default class SimpleDataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({a:this.a, b:this.b.split(','), c: this.c }).then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    
    // Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        var primer = (data && data.length && data[0].Origin) ? (x, field)=>x.Origin[field] : null;
        data.sort(this.sortBy(fieldName, reverse, primer))
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x,field)} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }
}

Listing of b.html

<template>
    <template if:true={error}>
        <template if:true={error.body}>
            {error.body.message}
        </template>
    </template>
    <lightning-datatable data={data} columns={columns} key-field="id"  hide-checkbox-column 
        onsort={updateColumnSorting}></lightning-datatable>
</template>

Listing of b.js

import { LightningElement, track, api } from 'lwc';
import getColumnsAndData from '@salesforce/apex/BCont.getColumnsAndData';
import {updateColumnSorting} from 'c/a';
import a from 'c/a';
export default class DataTableLWC extends LightningElement {
    @api a;
    @api b;
    @api c;
    @api d;
    @api e;

    @track data;
    @track columns;
    @track error;
    //@track sortedBy;
    //@track sortDirection;
    connectedCallback() {
        getColumnsAndData({ a:this.a, b:this.b.split(',')
            , c: this.c, d: JSON.parse(this.d.replace(/'/g, '"'))
            , e: JSON.parse(this.e.replace(/'/g, '"')) })
        .then(result=>{
            this.data = result.data;
            this.columns = result.columns;
        }).catch(error => {
            this.error = error;
        });
    }
    updateColumnSorting(e) {
        updateColumnSorting(e);
        a.updateColumnSorting(e);
    }
    /*// Client-side controller called by the onsort event handler
    updateColumnSorting(e) {
        //this.sortedBy = e.detail.fieldName;
        //this.sortDirection = e.detail.sortDirection;
        e.srcElement.sortedBy = e.detail.fieldName;
        e.srcElement.sortDirection = e.detail.sortDirection;
        this.sortData(e.detail.fieldName, e.detail.sortDirection);
    }

    sortData(fieldName, sortDirection) {
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        var data = this.data;
        data.sort(this.sortBy(fieldName, reverse));
        this.data = JSON.parse(JSON.stringify(data)) ;
    }
    sortBy(field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        }
    }*/
}

I would like to remove commented code from B.js and reuse the same method from A.js. However, both when I try to use

import {updateColumnSorting} from 'c/a';

and

updateColumnSorting(e);

and when I try to use

import a from 'c/a';

and

a.updateColumnSorting(e);

I receive an error

Uncaught TypeError: a.updateColumnSorting is not a function throws at /auraFW/javascript/pxtF0ZdGYF-z00XsmRUcGQ/aura_proddebug.js:6146:17

I even tried to add line

export * from a;

to the end of a.js file but it didn't compile.

How do I reuse Javascript code from one LWC in another LWC? [1]: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_javascript_share_code

lightning-web-components

Stack Exchange Network

Return to Question

Unable to reuse code from component A in component B