diff --git a/text/0000-local-components.md b/text/0000-local-components.md new file mode 100644 index 0000000..b8c2c13 --- /dev/null +++ b/text/0000-local-components.md @@ -0,0 +1,97 @@ +- Start Date: 2020-12-13 +- 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 +6. a Component is too large and requires to be broken down for readability sake + +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 of those issues can and is 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 + +