Pitch: explore a single examples app for all react + svelte examples.

[hayleigh-dot-dev]

Our current approach to developing examples for reactflow and svelteflow is less than ideal. We take different approaches for each framework, with react examples being nested deep in the site's source under the example-viewer component and svelte examples being an entirely separate SvelteKit app. It makes authoring examples quite challenging, and then making sure examples are kept broadly in-sync across frameworks is another challenge on top.

This PR seeks to address that by unifying the way we develop and serve examples under one roof.

• We have a new unified examples-app application that is a multi-page Vite app that (theoretical) contains every example.
• At build-time each example is statically generated, with shared chunks (eg dependencies) between them. We also generate a source.json file that contains a map for the example's source files and any of its dependencies.
• The react flow site has a new IframeViewer component that works similarly to the svelte example viewer, connecting to this examples app and rendering an iframe preview or the source from source.json.

There are still some todos:

• HMR seems to be broken in the example-apps dev server? I can see logs in both the server and client that HMR is triggering but there is no refresh.
• Open in stackblitz button is currently disabled in the react flow example viewer
• At this point we could port the viewer back into xy-ui now that we're using the same approach for both.
• The build and serve scripts have some duplicated code that could be refactored potentially.
• Some examples have folders (tutorials/webaudio) which are currently not supported but skipped by the vite plugin - we need to handle those cases and add the folders and files to the source.json
• Deploy example apps on vercel and adjust ENV vars
• Remove unused ExampleViewer components

---

Porting our existing examples is out of scope for this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
example-apps	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 8, 2024 0:25am
xyflow-svelte-examples	❌ Failed (Inspect)			Oct 8, 2024 0:25am

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
reactflow-website	⬜️ Ignored (Inspect)	Visit Preview		Oct 8, 2024 0:25am
svelteflow-website	⬜️ Ignored (Inspect)	Visit Preview		Oct 8, 2024 0:25am
xyflow-website	⬜️ Ignored (Inspect)	Visit Preview		Oct 8, 2024 0:25am

[hayleigh-dot-dev]

Went through to make sure everywhere that has an example / uses the code viewer works. Here's the issues I found.

React Flow:

• Investigate broken elkjs example in layouting guide.
• Many examples seem zoomed out on initial load.
• Tailwind example does not load:
  ReferenceError: Can't find variable: tailwind

Svelte Flow:

• Base style example 404s.