Extending the demo app to have parameterized routes

[johnnysprinkles]

Describe the problem

I've often wished the Sveltekit demo app was a little more full-featured. Right now it has 3 pages with fixed URLs and that's it. I wish it had a route with path params in it, and even better, links between the same route using different params, to exercise afterNavigation.

Right now I'm dealing with a bug related to afterNavigation and live reload in the dev server, and having a more complete demo app would be a nice starting point for a repro case.

Describe the proposed solution

What if each TODO had its own detail page, and links to the previous and next todo.

Alternatives considered

Maybe instead of extending the existing TODO demo app, we should add a second "kitchen sink" demo app that exercises all the features?

Importance

nice to have

Additional Information

No response

[antony]

Just reviewing the PR from @jycouet

We think the general premise this issue is working on is valid - the demo app would better serve everyone if it had a fuller demonstration of what Svelte can do, whilst retaining the simplicity of a demo app.

That being said, it would be better if we first considered the aspects of Svelte we want to showcase first, and then determining a good way to show them. Case in point - a detail page for a todo, whilst it certainly is a better demonstration of routing, isn't really a real-world use-case. It feels like a feature added just for the sake of adding a feature, when actually we are trying to demonstrate a use-case.

We do appreciate your PR @jycouet but unfortunately I think we would want to sit down and consider the wider strategy for extending the demo app before we make any changes to its functionality, so I'm going to close the PR on that basis.

[jycouet]

Thanks for the comment @antony. I thought that List/Detail (on whatever topic) was enough to demonstrate the use-case.

But I understand your concern about the "demo real life", and you are right.

If I can help, I would be happy. Do not hesitate. RIP help wanted ^^

[johnnysprinkles]

That's funny, I added a similar change to my own fork here: https://github.com/johnnysprinkles/sveltekit_after_navigate_bug/commit/53dd01ad7f4f07cd1e5cfc31fb2782048ff258d1

I plan to use this is a starting point for future bug repro cases, was thinking abou trying to merge into create-svelte but maybe these things are better outside of the Demo app.

[antony]

With a view to building a better example app, I think it's an idea to start with a list of features we want to demonstrate, and then work those back to figure out what real-world app we could build to demonstrate them.

I'm adding this list here and it will be updated as required:

Feature	Potential use-case
-	-

As prior art - here is a netflix type app which serves to demonstrate nextjs, angular, and nuxt: https://tastejs.com/movies/

[luisgabrielm]

Hello @antony , I agree with you that adding a detailed page for the TODO app might be extending the demo more than it was originally intended.

I would like to bring my point of view to the discussion of a new demo app.

IMO a good demo project has 2 goals:

• Sell the framework and have people interested in studying it further;
• Be a good starting point / tutorial / cheat sheet for new users.

So I think in the case of SvelteKit that means the demo app should:

• Showcase the main features of the framework;
• Be clear, direct and easy to understand;
• Always be compatible with the latest stable version;
• Be plug and play (not require additional config or .env set up).

List of main Svelte/Sveltekit features that we might include in the demo app (not trying to be super detailed or complete here, just bringing some ideas):

• Reactivity / bindings (bind:vale etc.)
• layouts
• filesystem routing (and dynamic routes)
• stores
• lifecycle management (onMount etc.)
• svelte file syntax (including css scopes)
• animations / transitions
• typescript support
• hooks
• events (on:hover, on:click etc.)
• SSR
• pages vs endpoints
• accessibility support

An idea for a new app that comes to mind is to: Use a public API, that doesn’t require a key, to create a “showcase” website. E.g. use Nasa, The Met, PokeAPI to create a “planet explorer”, “art catalogue” or a “Pokedex”.

I thought about these APIs because they’re easy to use, public and not directly related to any big tech player like Microsoft or Google.

The demo could have a home page showing many items and a details page using dynamic routing, utilizing SSR, animations, stores etc.

A big downside to this approach is that if any of these APIs have a major change or starting using private keys the demo would need to be redone. Even though I don’t think that’ll happen it’s a possibility.

What are your thoughts about it? Cheers ✌️

[johnnysprinkles]

I think what I actually want is a more full featured https://github.com/sveltejs/kit-sandbox, i.e. one that's more than just a skeleton and more than just the TODO demo app. I thought about https://github.com/sveltejs/realworld but that doesn't seem to work for me, I can sign up but can't create any blog postings.

I actually plan to make my own "kit-sandbox" based on a more full featured example, but that will live in my namespace independent of sveltejs. Feel free to resolve this issue.

[RocketDerp]

Nobody has commented here since May 11, but I wish to raise the issue. The recent breaking changes to routes and use of data object would have really benefited migration by having more complex examples that had git commit logs of what was migrated/syntax change. Thank you.

[dummdidumm]

Coming back to this, I'm not sure if I'd want the demo app to become more fully-featured than it is now. Where would that end? How would we add them to the demo in a way that makes sense? At what point this is just overlap with the tutorial which will touch on all these parts? I'm thinking it's better to instead update the realworld repo to the newest version once we are done with the other things, and possibly also making that movies app.

[Rich-Harris]

Agree with that, we need more examples. I'll close this