Loading Ripple Function into Salesforce LWCs

[aarhaze]

Hi Dylan & Ripple Team,

Just following on from our previous conversation here, I thought I would share my progress so far and see if you have some advice for me regarding an error I am receiving. Mainly Error: TypeError: i.default.registerRplWebComponents is not a function

In LWC, I can only access 3rd party JS libraries once they have been uploaded as a Static Resource. I have used the JS file rpl-wc.umd.js found within the node_modules\@dpc-sdp\ripple-ui-core\dist\web-components folder.

I've created a service class as we will have many LWCs wanting to use Ripple, however I have had the same issues when loading and trying to call registerRplWebComponents directly from one LWC.

RippleTest LWC - rippleTest.js

Apologies for the formatting, It would not allow me to add the whole class to the code formatting

`import { loadScript } from "lightning/platformResourceLoader";
import {LightningElement} from "lwc";
import RippleSDPService from "c/rippleSDPService";
export default class RippleTest extends LightningElement {
rippleSDPServiceLoaded= false;

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

    Promise.all([
        loadScript(this, RippleSDPService)
            .then(() => {
                console.log('Loaded RippleSDPService from RippleTest');
                RippleSDPService.initRipple();
            }).catch(error => {
            console.error("Error: " + error);
        })
    ]);
}

}`

RippleSDPService LWC - rippleSDPService.js

Apologies for the formatting, It would not allow me to add the whole class to the code formatting

`import RIPPLE from '@salesforce/resourceUrl/ripple_wc';
import { loadScript } from "lightning/platformResourceLoader";
import {LightningElement} from "lwc";
export default class RippleSDPService extends LightningElement {

static initRipple() {
    Promise.all([
        loadScript(this, RIPPLE)
            .then(() => {
                console.log('Loaded RIPPLE from RippleSDPService');
                console.log('Static Resource: ' + RIPPLE);
                //RIPPLE.registerRplWebComponents();
                const { rpl } = RIPPLE;
                rpl.registerRplWebComponents();
            }).catch(error => {
            console.error("Error: " + error);
        })
    ]);
}

}`

Error Information

Seems it cannot access the Ripple JS libary. For example the code this.RIPPLE.registerRplWebComponents(); will display this error: Error: TypeError: Cannot read properties of undefined (reading 'registerRplWebComponents'). While this code: RIPPLE.registerRplWebComponents(); will display this error: Error: TypeError: i.default.registerRplWebComponents is not a function. These are changes on the service class.

Any help or advice would be much appreciated.

Resources

• Use Third-Party JavaScript Libraries
• Use Third-Party Web Components in LWC (Beta)

Thanks, Aaron

[dylankelly]

Hi Aaron,

Thanks for making the effort to raise the discussion here, the innovation network community tends to be focussed on editor experience so responses have to be understandable for that audience there.

It looks on the face of it, you are not importing the library correctly? You can see entry file for the webcomponents export here https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/web-components.ts#L213 Note it is not a default export so you will need to import it using the syntax:

import { registerRplWebComponents } from '@dpc-sdp/ripple-ui-core/webcomponents'

It's a bit hard to see if thats the only issue without a recreation environment though.

Please note however, the SDP team is not currently resourced to support non SDP projects. I think you need to consider that even if you got this working you would be using a export target we can't necessarily support you with going forward. If something were to break in a future version we couldn't support your project. Whilst a salesforce LWC version of Ripple would be a useful asset for the Victorian Government, I have not been successful in getting support for our team to support these and other (see #1001) types of non SDP projects.

If you did want to go down the route of supporting this yourself, I feel the safest course of action would be to import our stylesheets and recreate the functionality yourself. That way you have a smaller footprint for maintaining changes and could implement functionality in whatever way you see fit, I understand this is a large undertaking though. I'll let you know if there is any change as to the Department of Government Services stance on this in the future.

Cheers, Dylan.

[aarhaze]

Thanks for the reply Dylan, unfortunately I can only import the files from static resources, and am unable to directly access registerRplWebComponents within the Lightning Web Component.

If I have any breakthroughs I will let you know, for now, I'll take your advice and use the CSS to align our styling with SDP.

Thanks again, Aaron.