hubl/src/components/hubl-reactivity.js

import {
  store,
  Sib,
  StoreMixin
} from 'https://cdn.skypack.dev/@startinblox/core@0.16';

export const HublReactivity = {
  name: 'hubl-reactivity',
  use: [StoreMixin],
  attributes: {
    targetSrc: {
      type: String,
      default: '',
      callback: function () {
        this.subscribe();
      }
    },
  },
  async fetchData(value) {
    this.resourceId = null;
    if (this.nestedField) {
      const resource = store.get(value) || await store.getData(value, this.context);
      const nestedResource = await resource[this.nestedField]
      this.resourceId = nestedResource ? nestedResource['@id'] : null;
    } else {
      this.resourceId = value;
    }
    this.subscribe();
  },
  subscribe() {
    if (this.resourceId && this.targetSrc) {
      store.subscribeVirtualContainerTo(this.resourceId, this.targetSrc);
      store.subscribeVirtualContainerTo(this.targetSrc, this.resourceId);
    }
  }
}

Sib.register(HublReactivity);