Lightning Web Component use Publish-Subscribe event in Community cloud

Question

How can we use publish-subscriber event pattern in Community Cloud using lightining web component.

I have drag-and-drop two Lightining Web Component(LWC) in a community page. On click on first component I have to show some output in second component.

Same components are working in Lightning Page(Like: Account detail page) but not in Community page. I used pubsub module from the lwc-receipe for this.

Code which fires the Event:

import { LightningElement, api, wire } from 'lwc';
import {CurrentPageReference} from 'lightning/navigation';
import { fireEvent } from 'c/pubsub'
export default class LwcAccounttile extends LightningElement {
    @api name;
    @wire(CurrentPageReference) pageRef;

    tileClick() {
        fireEvent(this.pageRef, 'inputChangeEvent', this.name);
    }

}

Code which subscribe the events

import { LightningElement,track,api,wire } from 'lwc';
import { CurrentPageReference} from 'lightning/navigation';
import { registerListener, unregisterAllListeners, fireEvent } from 'c/pubsub';

export default class Lwc_AccountEventListner extends LightningElement {
    @track ac;
    @track inpVal;
    @wire(CurrentPageReference) pageRef;

    connectedCallback() {
      // subscribe to inputChangeEvent event
      registerListener('inputChangeEvent', this.handleChange, this);
    }
  disconnectedCallback() {
    // unsubscribe from inputChangeEvent event
    unregisterAllListeners(this);
  }
  handleChange(inpVal) {
    this.inpVal = inpVal;
  }    
}

During debugging I found that this.pageRef is returning undefined in the commnunity while in lightning page it is returning value.

Answer 1

The pub-sub module checks for page references when firing events, so that the event is scoped and only in the current page.

In Communities, we do support lightning-navigation as of Spring '19: http://releasenotes.docs.salesforce.com/en-us/spring19/release-notes/rn_networks_navigationchanges.htm

However, there are some limitations, currently CurrentPageReference in LWC is not supported like: @wire(CurrentPageReference)currentPageReference;, which is why you are getting undefined page references. We are currently working on supporting it, so it should be out soon!

For a temporary solution, you can just remove all the pageRef checking in pubsub :). Here's a quick example: https://gist.github.com/kmesic/262887799fb70be94707cb0b87936e7b

Also, we are soon going to be releasing a LWC sample that will work in Communities by default! This should help clear up any confusion when using LWC in Communities.