From 1c03666647dc65a86a1c9042d73ccf26e245fc2c Mon Sep 17 00:00:00 2001 From: pushkin Date: Sun, 13 Dec 2020 11:37:51 +0100 Subject: [PATCH 1/9] Create 0000-local-components.md --- text/0000-local-components.md | 88 +++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 text/0000-local-components.md diff --git a/text/0000-local-components.md b/text/0000-local-components.md new file mode 100644 index 0000000..59f03d8 --- /dev/null +++ b/text/0000-local-components.md @@ -0,0 +1,88 @@ +- Start Date: (fill me in with today's date, YYYY-MM-DD) +- RFC PR: ([#44](https://github.com/sveltejs/rfcs/pull/44)) +- Svelte Issue: (leave this empty) + +# Local Components + +## Summary + +Allow `.svelte` files to define multiple Components + +## Motivation + +Each Component requires creating a brand new `.svelte` file, but sometimes a Component necessitates its own sub-Components, this happens in the following occasions : +1. a node tree pattern is repeated several times +2. a node tree needs to be wrapped or not depending on a condition +3. a node uses completely different attributes/directives depending on a condition +4. a variable from a `let:` slot prop, an `#await` resolved promise or a `#each` value is transformed then used more than once +5. an `#each` block needs its own script for `$`subscriptions or lifecycle + +Having to spread tiny parts of a Component across several files is unfortunate as it leads to duplicate component names, cluttered folders and quite the refactoring hazard + +To solve those, @Rich-Harris has put forth a collection of RFCS: +* #32 to allow nesting styles in node trees +* #33 to allow declaring `const`s in node trees +* #34 to allow declaring reusable node trees + +Now all of those combined barely make up for a pseudocomponent, yet they introduce and bend several concepts in the framework, and issue 5) would still require an external component + +**_Each one of our issues can be and are currently solved by making a new Component_**, we just don't like spreading them across several files + +## Detailed design + +A Svelte Component is composed of a script block, a style block and a node tree + +A `.svelte` file is composed of a script context module and a Svelte Component that becomes the default export + +```xml + +