profile
viewpoint

Ask questionsSite: Svelte Cookbook/ Examples

A few people have asked to see more in-depth examples for things like CSS, and SSR.

I don't know if this would add too much noise to the docs but they might be great topics for a cookbook. Ths has been briefly discussed in the past but I couldn't find an issue for it.

Some examples of things that could be covered:

  • CSS: "Something that demonstrates cssvars, the global modifier and component scopes together would be excellent for new comers." (Quote from a fine individual on Discord)
  • SSR - "include an example of SSR with hydration on the client. :pray: (without sapper - via express if possible)" (Quote from yet another fine individual on discord).
  • Preprocess: We see a lot of questions about preprocessing, less, scss, etc. We could provide an example configuration and explanation to enable users add their own (or even write their own) preprocessors.
  • Testing: This is an obvious one. Testing framework agnostic explanations.
  • Routing: Again without sapper. We've been asked about Routing without Sapper a number of time recently. A good example implementation with a popular routing library or a 'blessed' Svelte one would be cool.

Anyone have any thought on this?

And if this is a good idea, what else should be covered?

Edit: Another request from discord.

"A couple more cookbook ideas would be RxJS and XState integration and usage. For RxJS simple API usage in Svelte is best, saw this svelte-observable repo that seems to wrap RxJS in Promises, that is a little strange seeing that RxJS is a better alternative to Promises. For XState using stores seems to be the way to go. Best would be to have a store per XState Machine and the Machine can swap in and out alternate Statecharts. Statecharts are just serializable objects that can be stored and fetched from any local or remote DB."

Edit: Another.

Had a few suggestions for a static blog deployed to netlify, with support for markdown (maybe mdx too). This might be better on the Sapper docs, and might require a custom Sapper template but is definitely a great idea.

sveltejs/svelte

Answer questions Conduitry

Another idea for the cookbook: this information about async reactive declarations. I'm not sure whether that sort of information belongs there, but I don't think it belongs in the API docs really.

useful!

Related questions

Javascript Interpolation in Styles via CSS Variables? hot 2
Svelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev hot 1
Uncaught TypeError: y.fragment.l is not a function hot 1
Increase elements when using a combination of await block and transition hot 1
Svelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev hot 1
Change body class via <svelte:body /> hot 1
Missing dependencies in svelte/compiler type definitions hot 1
Multiple components in one file - svelte hot 1
onMount Error: Function called outside component initialization hot 1
A way to see if slot prop is present hot 1
slot inside #if inside #each : TypeError cannot read property 'd' of null hot 1
unclear / difficult to import uuidv4 hot 1
Use <script type="application/ld+json"> in <svelte:head> hot 1
Error: 'default' is not exported when using babel + moment hot 1
Outros undefined when transitioning to another page hot 1
Github User Rank List