-1

Given the code below, how do I do to have access to ImmutableJS content after the execution of loadscript function?

import immutableJsStaticResource from 
'@salesforce/resourceUrl/immutable_3_8_2';
import { loadScript } from 'lightning/platformResourceLoader';
.
.
.
loadScript(lwcComponent, immutableJsStaticResource).then(
    () => {
    // How do I do to access { List } from Immutable JS here?
    }
);
0

From the documentation of immutableJS you have to use Immutable.List

import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import { LightningElement } from 'lwc';
import immutablejs from '@salesforce/resourceUrl/immu';
export default class Thirdparrtydemo extends LightningElement {

    isImmutableJSInitialized = false;
    renderedCallback() {
        if(this.isImmutableJSInitialized){
            return;
        }
        this.isImmutableJSInitialized = true;
         Promise.all([
                    loadScript(this, immutablejs )
            ]).then(() => {

                     const list1 = Immutable.List([ 1, 2 ]);
                     const list2 = list1.push(3, 4, 5);
                     const list3 = list2.unshift(0);
                     const list4 = list1.concat(list2, list3);
                     console.log(list1.size);
        })
    }
}
0

You can do it like this.

  • First load platformResourceLoader module.

    import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

  • Import your third party library from Static resource.

    import D3 from '@salesforce/resourceUrl/yourResource';

  • Call loadscript in renderedcallback using Promise.all.

See below how D3 js is being loaded.

// libsD3.js
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import D3 from '@salesforce/resourceUrl/d3';
import DATA from './data';

export default class LibsD3 extends LightningElement {
    svgWidth = 400;
    svgHeight = 400;

    d3Initialized = false;

    renderedCallback() {
        if (this.d3Initialized) {
            return;
        }
        this.d3Initialized = true;

        Promise.all([
            loadScript(this, D3 + '/d3.v5.min.js'),
            // you can call multiple here.
        ])
            .then(() => {
                // this block is executed on successful loading.
                // do your stuff here.
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading D3',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }
}

Refer the Doc

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.