Pass fragments/query parameters to the preview iframe

[AndrewLeedham]

In order to test JavaScript code that uses fragments e.g. #heading or query parameters e.g. ?param=value it is currently fairly tedious, you have to inspect the preview iframe and manually update the src, then reload the frame. These changes aren't stored either so refreshing the page loses them.

Steps to Reproduce

1. Open a component that uses a hash e.g. <script>console.log(window.location.hash);</script>
2. Add a hash to the page URL: nothing is logged.
3. Add the hash to the src attribute on the preview iframe: the hash is logged. But:
4. Refresh the page, and it will disappear.

Expected behavior: The hash to be passed through to the preview iframe.

Actual behavior: It is not passed through.

Versions

• What version of Fractal are you running? 1.2.0
• What version of Node.js are you running? 10.16.3

Additional Information

The simple solution to this would be to just pass hashes/query parameters forward, but a possible additional nicety would be to allow defaults to be set via component/variant properties. So you could provide a hash/query in the config e.g.

{
  "context": {},
  "hash": "heading",
  "query": "param1=value&param2=other"
}

Notes

Original raised on the core fractal repo: #516

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[AndrewLeedham]

Still relevant