// pubsub.js - a shared module imported by any component that needs it
const subscribers = {};  // { eventName: [callback1, callback2, ...] }

export function subscribe(eventName, callback) {
  if (!subscribers[eventName]) {
    subscribers[eventName] = [];
  }
  subscribers[eventName].push(callback);
}

export function unsubscribe(eventName, callback) {
  if (!subscribers[eventName]) return;
  subscribers[eventName] = subscribers[eventName].filter(cb => cb !== callback);
}

export function publish(eventName, payload) {
  if (!subscribers[eventName]) return;
  subscribers[eventName].forEach(callback => callback(payload));
}

// filterPanel.js
import { publish } from 'c/pubsub';

handleFilterChange(event) {
  publish('filterchanged', { status: event.target.value });
}

// resultsList.js
import { subscribe, unsubscribe } from 'c/pubsub';

connectedCallback() {
  subscribe('filterchanged', this.handleFilterChanged);
}
disconnectedCallback() {
  unsubscribe('filterchanged', this.handleFilterChanged);
}
handleFilterChanged = (payload) => {
  this.refreshResults(payload.status);
};

<!-- FilterChange.messageChannel-meta.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>FilterChange</masterLabel>
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <fieldName>status</fieldName>
    </lightningMessageFields>
</LightningMessageChannel>
// This file lives in the messageChannels/ folder, named FilterChange.messageChannel-meta.xml

import { LightningElement, wire } from 'lwc';
import {
  subscribe, unsubscribe, publish, createMessageContext, releaseMessageContext
} from 'lightning/messageService';
import FILTER_CHANGE_CHANNEL from '@salesforce/messageChannel/FilterChange__c';
// Note the __c suffix on the import — even though you didn't type it in the XML file name

import { LightningElement } from 'lwc';
import { publish, createMessageContext } from 'lightning/messageService';
import FILTER_CHANGE_CHANNEL from '@salesforce/messageChannel/FilterChange__c';

export default class FilterPanel extends LightningElement {
  messageContext = createMessageContext();  // created once, when the component initializes

  handleFilterChange(event) {
    const payload = { status: event.target.value };
    publish(this.messageContext, FILTER_CHANGE_CHANNEL, payload);
  }
}
// payload field names ("status") must match the lightningMessageFields defined in the channel's XML

import { LightningElement } from 'lwc';
import {
  subscribe, unsubscribe, createMessageContext, releaseMessageContext
} from 'lightning/messageService';
import FILTER_CHANGE_CHANNEL from '@salesforce/messageChannel/FilterChange__c';

export default class ResultsList extends LightningElement {
  messageContext = createMessageContext();
  subscription;

  connectedCallback() {
    this.subscription = subscribe(
      this.messageContext,
      FILTER_CHANGE_CHANNEL,
      (payload) => this.handleFilterMessage(payload)
    );
  }

  disconnectedCallback() {
    unsubscribe(this.subscription);          // stop receiving this specific subscription
    releaseMessageContext(this.messageContext); // release the context entirely
  }

  handleFilterMessage(payload) {
    this.refreshResults(payload.status);
  }
}

// Aura uses a similar but Aura-flavored syntax (lightning:messageChannel, etc.)
// The KEY point: it references the SAME Message Channel metadata component
// (FilterChange__c) that our LWC components use — that shared metadata
// definition is what makes cross-framework communication possible.

// Conceptually:
// LWC FilterPanel  --publish-->  FilterChange__c channel  --notify-->  Aura ResultsList
// Aura ResultsList  --publish-->  FilterChange__c channel  --notify-->  LWC FilterPanel
// Communication works in EITHER direction, regardless of which framework initiates it