stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
232 stars 22 forks source link

A small refresh button in the preview tab #248

Closed noam-honig closed 1 week ago

noam-honig commented 4 weeks ago

Is your feature request related to a problem?

There are cases where I want my student to be able to manually hit refresh on the preview window to reload it - this is espcially useful with the new pathname option for previews.

Describe the solution you'd like.

A small refresh button :) it can be optional and determined for each preview - in the previews config

Describe alternatives you've considered.

I created my own "virutal" tabs and added my own refresh buttons, but it's not as cool

Additional context

No response

AriPerkkio commented 4 weeks ago

Cool idea!

Here's some quick testing with just re-setting the iframe.src. This seems to work fine on Chromium-based browser. We'll need to check other browsers as well.

  function onRefresh() {
    if (iframe.ref) {
      iframe.ref.src = iframe.ref.src;
    }
  }

  ...

  return <button onClick={onRefresh}>

https://github.com/stackblitz/tutorialkit/blob/9c1b55abd0967053782458db4ee41180f26d6c5d/packages/components/react/src/Panels/PreviewPanel.tsx#L148-L193

preview-refresh.webm