1.0 Roadmap

[bluwy]

• Polish JSX extraction within blocks
• Show source SSR support
• Remove hardcoded framework logic
• Support Webpack
  • Next.js
  • Docusaurus
• Abstract code extraction logic
  • Preprocessor API
  • Allow customize and trim unneeded code
  • Shared between Vite and Webpack
• Ecosystem for additional iframe UI
  • Story controls
  • Story logs
  • Observe if a metaframework is desirable
• Support default src for all frameworks
  • VitePress
  • Astro
  • Nuxt

[jacob-8]

I have been working on prototyping/documentation tool very similar to Svench (since that currently is broken w/ SvelteKit) called Kitbook (very much WIP) where I need the ability to use iFrames. Your tool is just what I need and I'll be watching very closely for when the "Story controls" feature is released as that's essential before I can use whyframe. Please let me know if you'd like testing of that feature when you get to working on it. I'd love to help!

[jacob-8]

That all makes sense. I can understand better how the whyframe approach is useful in a wide variety of situations where you don't want to conditionally turn off all the outside strappings.

We can use a new layout to avoid the issues

In my tool, I just use +page.svelte route files as views on which to add documentation and display stories. I don't do any processing/re-using/moving of story files and such, as Storybook/Histoire do. Given my goal of keeping my tool simple do you know of any way to display the same +page.svelte file contents using two different layouts depending on the url? For example ui/button would use the default layout, but (isolate)/ui/button would use a clean and empty layout. I don't find anything in SvelteKit's advanced layouts docs. I guess that would be called "mirrored" routes.

Also, I would be very interested in code examples for how to use whyframe's createIframeRpc method available presently, as well as good examples of how to use postMessage and structuredClone when/if you come to that.

Thanks for a thorough reply to what I hope didn't come across too negative! It was meant as curiosity not criticism and trying to understand the pros and cons of each approach.

P.S. Please update your SvelteKit Stackblitz link here to match the repo structure. It's broken because you have a hyphen "svelte-kit" in your repo structure.

[bluwy]

Given my goal of keeping my tool simple do you know of any way to display the same +page.svelte file contents using two different layouts depending on the url? For example ui/button would use the default layout, but (isolate)/ui/button would use a clean and empty layout. I don't find anything in SvelteKit's advanced layouts docs. I guess that would be called "mirrored" routes.

In the main layout for ui/button, you could have the +layout.svelte switch between a normal layout and empty layout based on a query param for example. Might be the easiest way with the current layout support.

Also, I would be very interested in code examples for how to use whyframe's createIframeRpc method available presently, as well as good examples of how to use postMessage and structuredClone when/if you come to that.

The link to the createIframeRpc docs already has examples, but let me know if something isn't clear about it 😬 postMessage is being used by createIframeRpc under-the-hood too, and postMessage in turn uses structuredClone internally. Ideally state preservation should use this implementation internally so you don't have to deal with it, unless you're doing something custom.

P.S. Please update your SvelteKit Stackblitz link here to match the repo structure. It's broken because you have a hyphen "svelte-kit" in your repo structure.

Fixed. Thanks!

[jacob-8]

The link to the createIframeRpc docs already has examples

I don't understand where to put the "In the iframe" part as your example repos don't use it. Do you use like this?

<script>
  import { createIframeRpc } from '@whyframe/core/utils'

  const rpc = createIframeRpc()

  rpc.on('update', (data) => {
    stage = data.msg
  })

  let stage = 1;
</script>

<iframe data-why>
  <button on:click={() => rpc.send('notify', {  msg: `Stage ${stage}`})}>{stage}</button>
</iframe>

[jacob-8]

But that doesn't look right to me as then the rpc.on('update'... event listener will get registered in both the parent and the iframe but it's just for the iframe.

[bluwy]

Ah you'd need a custom HTML source, like <iframe data-why src="/frames/custom">. where it maps to src/routes/frames/custom/+page.svelte. And inside the Svelte file is the "inside of iframe" part, where you can add the rpc.on handler. (/frames routes is only a convention)

Thanks for bringing this up. I'll update the docs to clarify it.

[bluwy]

I've been drafting plans for iframe control support and published it at #20. Appreciate any feedback from the DX side of things!