svelte-society / recipes-mvp Goto Github PK

Hi! We've accumulated a longish list of todos' right about now, so right now we kind of need to converge rather than diverge.

I'm particularly interested in scoping down of a small set of recipes that we can get published soon. That gives us a small win that can help us get contributors and momentum for the next round.

This involves defining project goals and principles. Here's my thoughts - lets take a week for people to give input and then I'll help execute on whatever we agree on.

External Inspiration

• https://vuejs.org/v2/cookbook/index.html
• https://github.com/markerikson/react-redux-links
• anything else?

High level Objectives

• Fast Self Service support for frequently asked questions
• Help Svelte adopters make high quality experiences thru best practices
• Teach idiomatic/creative use of Svelte features to solve problems
• Highlight notable community projects beyond the main docs

Principles we follow

• Consider SEO in Naming
  • Essential for self service goal
  • Build link equity to encourage people to contribute, and link to their own domains and blogpost
  • This is why we don't call this a "Cookbook" - just easier to use plural "Recipes"
• Beginner friendly but Showing Best Practice
  • It is ok to duplicate main docs but not too much
  • Start simple, progress up to advanced
• "How" First, "Why" Later
  • Working examples to copy & paste for initial success.
  • Link to REPL if possible.
  • Explain why/principles for subsequent success

V1 candidates

Let's "go to market" with 5 recipes:

• Using Fetch to Consume APIs with Svelte
• Form Validation with Svelte
• Using SASS and TypeScript with Svelte Preprocessors
• Routing with Svelte
• authentication patterns https://antony.github.io/svelte-meetup-talk-oct-2019/#6

Open Questions for discussion

• What do we NOT include?
• How do we differ from just being a very wordy Svelte Tutorial?
• "Maintainers" for each Recipe? ownership => quality

I'm trying my best to understand the idiomatic way to create an Invoice-like form with Svelte 3.

My REPL is here: https://svelte.dev/repl/7aca36569aea49bba38e5fb8b1b0835b?version=3.24.1.

QUESTIONS:

1. Is this a good way to do it? Should I use a store perhaps?

2. Is there a way to update amountDue when I change qty and price of my rows? (I know I can do it with rows = rows but it seems to me a bit not-idiomatic way, am I wrong?)

This is a tracking issue to bring some of the original proposed cookbook entries(half-written or not written at in some cases) across to this repo. This is made up of the originals from this issue and some that aren't but I started on. There will an accompanying PR with placeholders and sometimes content.

You can keep the issue open until the work is done or close it when. the placeholders are in, up to you.

Things I was definitely gonna do (and can still do):

• Reactivity: how it works, common problems/solutions, caveats.
• stores: deep dive into stores, the store contract, store wrappers, kinda custom stores, really custom stores, etc.
• CSS: "Something that demonstrates css-vars, 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. 🙏 (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 to add their own (or even write their own) preprocessor.
• 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 times recently. A good example implementation with a popular routing library or a 'blessed' Svelte one would be cool.

Other requested things:

• async data flow:

I'm currently building an app that loads settings from IndexedDB using localForage. And I'm having trouble finding out how to organize my code to make it work. My problems are that top-level-await is not supported and the store's update and set functions don't really support async functions either. My next idea is to write an async init or load function and call it from main.js or the root component.

• animations:

As an additional suggestion, how about showing how to achieve commonly used UX in svelte? As an example, how to achieve the animated sorting list shown in react-flip-move - this should fit quite well with how to use the FLIP technique. Another interesting one is a grid component like this old (and dodgy) implementation at svelte-animated-list.

• GraphQL:

Documenting working with GraphQL would also be useful. Noticed this question in Stack Overflow https://stackoverflow.com/questions/56065845/how-to-do-graphql-and-graphql-subscriptions-with-svelte?r=SearchResults

• async reactive declarations

Proposed Recipe

Using a combination of Rollup and file extensions.

Custom Element components get the extension .wc.svelte. Rollup then sets the customElement config depending on the file extension.

svelte({ customElement: true, include: /\.wc\.svelte$/ }),
svelte({ customElement: false, exclude: /\.wc\.svelte$/ }),

This works smoothly with local and NPM imported components.

Demo: https://jawish.github.io/svelte-customelement-rollup/

Originally posted by @jawish in sveltejs/svelte#3594 (comment)

This pattern is also pretty handy for creating other preprocessed files such as rich text markdown using something like MDsveX.

Eg:

svelte({ preprocess: markdown(), include: /\.md\.svelte$/ }),
svelte({ exclude: /\.md\.svelte$/ }),

Proposed Recipe

You should add...

Here's 10 that might be interesting :)

1. Scroll snap: https://svelte.dev/repl/218a65f83c2b4b4c8f10a253587d6c1b?version=3.24.0
2. Cart pricing using derived store: https://svelte.dev/repl/b94f6bb5024546939aafa98bcc8a92f5?version=3.24.0
3. Image carousel: https://svelte.dev/repl/a21734100eb04e24a560ccabf2a51bad?version=3.24.0
4. Radial selector: https://svelte.dev/repl/4607fe6b180e4ca1acb698c7fced6d55?version=3.24.0
5. Responsive slider: https://svelte.dev/repl/0add35f59c6148cc8e5a415b2e38c83a?version=3.24.0
6. Region selector Belgium: https://svelte.dev/repl/034bd1009d354178a9da6e58cb66d512?version=3.24.0
7. Tooltip with Svelte actions: https://svelte.dev/repl/6c686b6123114d408a2b445c309ef06f?version=3.24.0
8. Tree walking (usage of svelte:self to recursively walk a tree): https://svelte.dev/repl/ca275c2cd5324d4e86a5521c38e600de?version=3.24.0
9. Svelte feather icons usage: https://svelte.dev/repl/7ac8045ba71a4633beab2b743346e21d?version=3.24.0
10. Figma stickers https://svelte.dev/repl/f8d4fd8ef91b4ea6a8544dcb68d37827?version=3.24.0
11. D3 powered crossfade https://svelte.dev/repl/c4c8181fbccc451692fed6205afb1b6f?version=3.24.0
12. Chart.js implementation https://svelte.dev/repl/1daa247f8df74c47906e97f7e344a14e?version=3.24.0
13. Click outside div as action https://svelte.dev/repl/be28f7392e8c49b29ccfea944f428fd8?version=3.24.0
14. JS data import - get data from a JS file https://svelte.dev/repl/1f9757cab0c44af6ae2daea617478256?version=3.24.0
15. Drawing with code - Circle SVG pattern - https://svelte.dev/repl/bbb3c084fff54797acc4482a44390c56?version=3.24.0
16. Drawing with code - Waveform pattern (not an actual real waveform) https://svelte.dev/repl/bd38e6816b7f49a68150570090fa9e6e?version=3.24.0
17. Rolling words https://svelte.dev/repl/96b6813054ab4ddfb63bd8dcfad7ee49?version=3.24.0
    18;. Card flipper https://svelte.dev/repl/9c5a422b0dfd4c43a7cd7fd807cdbb1c?version=3.24.0
18. Tween click modified (by amelia wattenberger also see https://svelte.recipes/ ) https://svelte.dev/repl/b2f92cc9c8624b5397ea2d70f37a85dc?version=3.24.0
    20.Drag and drop https://svelte.dev/repl/f0823379afef4d249358cf969519c1b8?version=3.24.0

Defining dependencies with compound statements

In Svelte you can declare reactive compound statements with the following syntax:

$: {
  statement1;
  statement2:
  [...]
}

The solution stated in https://github.com/svelte-society/recipes-mvp/blob/master/language.md#defining-dependencies to declare multiple dependencies won't work with compund statements:

given example (works ok):

let one;
let two;
let three;

const someFunc = () => sideEffect();

$: one, two, three, someFunc();

with compound statements (does not work):

let one;
let two;
let three;

$: one, two, three, {
  sideEffect1();
  sideEffect2();
}

It gives an unexpected token error

The solution I found:

let one;
let two;
let three;

const someFunc = () => sideEffect();

$: {
  one, two, three   // dependencies
  sideEffect1();
  sideEffect2():

Question: should I add a pr to the recipe to add this workaround? Or shall I file a bug in Svelte so that it can support $: one, two, three, { syntax???

I'm reading the section about reactivity and the way svelte handles it inside each blocks.

this is the example to show how svelte does NOT update the referenced array when items are primitive values:

<script>
  let list = [1, 2, 3];
</script>

{#each list as item}
  <button on:click={() => item *= 2 }>{ item }</button>
{/each}

this is a possible workaround that could be added to the recipe: (check the repl)

<script>
  let list = [1, 2, 3];
  const updateList = (index) => list[index] *=2
</script>

{#each list as item, index}
  <button on:click={() => updateList(index) }>{ item }</button>
{/each}

Moreover, doing some tests I found a strange beahviour regarding svelte and arrays with primitive values. If I try to assign an item which is a primitive value from inside an each block, just like the example above, the array reactivity is broken, it seems like it changes the array reference to something else.

Here's is a repl reproducing this behaviour. As soon as you click one button of the first group, the array will no longer be updated.

I guess that svelte should try to issue a warning when this happens, updating an item which is a primitive value from an each block should not be allowed if it carries this nasty side effect. Do you think I should create an issue at svelte for such a thing?

BTW: great initiative this recipes repo, it's really bery useful, and the reactivity section was very much needed indeed.

A recipe that show how to integrate an existing CSS framework (Tailwind, Semantic, Bulma ...) could be nice as this is also an often requested topic on the discord servers.

Things to include

[ ] How to do it
[ ] 'Treeshaking' to eliminate unused CSS

https://github.com/svelte-society/recipes-mvp/blob/master/docs#svelte_store link gives me a 404 error. I accessed this from here https://github.com/svelte-society/recipes-mvp/blob/master/README.md#svelte-store-recipes

I would be very interested in reading more documentation on stores, as I am writing a simple To Do app where I wish to click a link and change the state of a task to Done or Open.
I am yet to see an example of how to update the state for a particular row in a data structure.

A number of code blocks in the recipes don't have a language assigned to them or are incorrectly labeled, like JS instead of Svelte/HTML.

On GitHub it looks like "```svelte" works, probably as an alias of HTML. Is it safe to assume that will work for the final published versions of the rendered markdown?

<script>
  const one = 1;
  console.log('pretty colors?! somewhat.');
</script>

<div>neat</div>

<style>
  div {
    color: red;
  }
</style>

Anyone want to go into a trance and update everything? I'm volunteering too.

Example https://svelte.dev/repl/a3552021701e4b3f919b8523af618900?version=3.18.2

Hey guys, not sure with is allowed, but, recently I saw a post in a blog about form validation, so, since this recipe is empty, I think this may help as a resource.

Codechips Article

Reading the code on this amazing Modal example: https://svelte.dev/examples#modal I'm trying to understand what's the difference in terms of performances/bundle size/other if I use:

1. createEventDispatcher() with directive like on:close={()=> doSomething()} or
2. simply pass the function as a value like action={doSomething}.

Also in the first case I can't use on:close={...} on the slots, right?

If I try it gives me this error: [!] (plugin svelte) ValidationError: <slot> cannot have directives

What do you recommend to use?

Proposed Recipe

• Embedding Svelte components in existing apps

sveltejs/svelte#4783

Proposed Recipe

as above

might want to use https://github.com/russellgoldenberg/enter-view/blob/master/enter-view.js

might want to recreate this with svelte https://pudding.cool/process/scrollytelling-sticky/

or @kevmodrome might have something already

Proposed Recipe

How to configure svelte with babel with the bundler:

• webpack
• rollup

Proposed Recipe

Recipe should be a simple contact form that has a Google recaptcha element to it.
The form should also use validation (e.g. yup) and show how the g-recaptcha element is passed in the values to the downstream process (e.g. google/azure/aws function)

sveltejs/template#129

Reactivity: each blocks

Reactivity recipe, each blocks section says the following:

Only assignments to array items that are objects or arrays result in the array itself updating. If the array items are primitives, the change is not traced back to the original array. This is because Svelte only reassigns the actual array items and primitives are passed by value in javascript, not by reference.

From svelte version 3.23.1 this is no loger true:

See this repl running on svelte 3.23.1, where the issue has been fixed

And this one running on svelte 3.23.0 where the issue still applies

For context see svelte issue 4744

Proposed modification:

Add a note stating that this section only applies to svelte version lower than 3.23.1 (if you agree with this I can send a pull request)

I was motivated by the great fetch recipes and this tweet from Dan Abramov to look into some of Svelte's behavior for async/await/promises and unmounted components. Everything (minus a potential bug) seemed expected to me, so any bugs are probably the developer's responsibility. Maybe you disagree? I think this is all out of scope for these recipes but it may be useful for later ones.

tldr: if a component is unmounted while a promise is pending:

• its reactive assignments and reactive statements with stores are disabled
• its await blocks do what you'd expect and don't render their content (but I think there's a bug with :then content being rendered while pending?)
• its events are still triggered
• it can still call callbacks

Here's the REPL with several examples and discussion.

Any thoughts? Any examples or improvements I could add?

In future recipes, it might be helpful to demonstrate some common errors and good patterns and abstractions to fix them. I think Svelte provides all of the tools to do this, so it's mostly about clarifying the pitfalls and their simplest and most ergonomic solutions.

edit: not sure what's up with the assignment to swyx, mabye cause I started with the question template? Also it's not really a question.