Add a client API?

[ABeltramo]

First off, thanks for this project, I love it!

I don't like a full refresh on each page change so I added barba.js in order to load the pages over AJAX instead. This obviously broke giscus, I hacked around a solution that involves changing the iframe src on page change via JS but I was wondering if there's a better way to solve this.

I don't know if that's possible but will you consider adding a JS client API so that we can programmatically load the discussion?

You can see my tiny js code here and you can see it in action at https://games-on-whales.github.io/gow/

[laymonage]

Hey @ABeltramo, thanks for the suggestion!

I added support to change giscus configuration on-the-fly using iframe.contentWindow.postMessage() in #138. You can see the guide for more details. Please try it out when you have the time and let me know if it works. Thanks!

[ABeltramo]

Hi @laymonage thank you for your work, I wasn't expecting a solution that fast!

There are a few issues though:

1. I think latest master broke something with themes: I used to use dark_dimmed but now it's rendered as light.
2. I can't use postMessage, here's the error I get on Firefox:

   Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:4000') does not match the recipient window's origin ('https://giscus.app')

Chrome seems to silently fail, I don't get the error message but content is not refreshed.

Here's the code I'm using:

let frame = document.querySelector("iframe.giscus-frame");
frame.contentWindow.postMessage({
        term: term,
        repo: "games-on-whales/gow"
    }, location.origin)

[laymonage]

Hey @ABeltramo, thanks for the report!

1. Should be fixed in Fix unchanged theme on initial load #140, let me know if it still doesn't work.
2. Whoops, that was an error in the docs. Try changing location.origin with 'https://giscus.app', does it work?

[ABeltramo]

1. Theme is fixed, thanks 👍
2. Now I don't see an error in the console but content is still not updating (same as it was in Chrome). Is passing term enough or should I pass something more? I can easily see that the requests are not made to giscus.app

Here the first two are on page load, after that, changing page seems to not trigger a load on your side.

[laymonage]

@ABeltramo Ah, I just realized: you need to wrap the object in this format:

frame.contentWindow.postMessage({
  giscus: {
    setConfig: {
      term: term,
      repo: "games-on-whales/gow",
    }
  }
}, 'https://giscus.app')

Sorry if it doesn't seem so intuitive. The reason is:

• The object is wrapped in the giscus key because other apps might also send messages to the window (e.g. browser extensions). The key ensures that the data is specifically intended for giscus.
• The config is wrapped in the setConfig key because there may be other types of messages that will be supported by giscus in the future. I could've added a property like type: 'set-config' and just put the rest of the data without wrapping it in setConfig, but I chose the current approach because it lets you namespace the data for each type of message and still be able to check the type (using if ('setConfig' in giscus)).

This is why I added a boilerplate example in the guide:

function sendMessage<T>(message: T) {
  const iframe = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame');
  if (!iframe) return;
  iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
}

sendMessage({
  setConfig: {
    theme: 'https://giscus.app/themes/custom_example.css',
    reactionsEnabled: false,
  }
});

It seems to work on my website:

(Sorry for the screen glitch, screen recording doesn't seem to work well on my linux setup.)

[ABeltramo]

Thank you for your patience, it works perfectly! 🎉
I feel dumb to have missed that, I just tried to see thru the Typescript since I'm just on plain JS and I missed those keys!

[laymonage]

@ABeltramo No problem, I admit it is quite easy to miss -- the docs were written hastily. Glad you got it sorted out! 👍