From 585e3321bdef6406c94cb95df78de6fab9f6547b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Sep 2020 01:08:05 -0400 Subject: [PATCH 1/3] add inline components RFC --- text/0000-inline-components.md | 176 +++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 text/0000-inline-components.md diff --git a/text/0000-inline-components.md b/text/0000-inline-components.md new file mode 100644 index 0000000..2230db5 --- /dev/null +++ b/text/0000-inline-components.md @@ -0,0 +1,176 @@ +- Start Date: 2020-09-09 +- RFC PR: (leave this empty) +- Svelte Issue: (leave this empty) + +# Inline components + +## Summary + +A new `` element that defines an inline logic-less component. + +## Motivation + +In some frameworks, a module can contain multiple components, some of which need not be exported (and are therefore effectively private). In Svelte, there is a strict one-component-per-file rule. + +This is nice and simple to understand and explain (not to mention implement), but it does have drawbacks. Users sometimes complain that it causes a proliferation of `.svelte` files, many of which contain very simple components that would be better declared inline. + +The alternative is to duplicate markup inline: + +```svelte +{#each images as image} + {#if image.link} + +

+ + {:else} +

+ {/if} +{/each} +``` + +Neither is ideal. + +## Detailed design + +With `` (🐃), combined with new functionality for `` in which a string `this` attribute is taken to refer to an inline component, we can avoid both the problems articulated above: + +```svelte + +

+ + +{#each images as image} + {#if image.link} + + + + {:else} + + {/if} +{/each} +``` + +Together with the RFCs for [local scoped styles](https://github.com/sveltejs/rfcs/blob/local-styles/text/0000-local-styles.md) and [constants in markup](https://github.com/sveltejs/rfcs/blob/markup-constants/text/0000-markup-constants.md), this gives us everything we need to create self-contained logic-less components, even including slotted content: + +```svelte + + {@const danger = dangerousness > 5} + + + + + +``` + +(At the point at which it *does* make sense to turn this into a separate `Tooltip.svelte` component, the extraction is a completely mechanical process that could even be automated by tooling.) + + +### No ` + + + + + +``` + +I think this would be a mistake: lifecycle and scope would get tricky for component authors to reason about, and (not that this should be an overriding consideration) I would expect it to result in a significant increase in implementation complexity. + + +### Change to `` + +At present, the `this` attribute of a `` must be either a component constructor or a falsy value. In order to make it work with inline components, we allow `this` to be a string instead. In many cases this could be optimised to be a direct reference to the locally defined constructor, though in the case of a dynamic `this`... + +```svelte + +``` + +...it would be necessary to maintain a mapping of names to constructors instead. + +## How we teach this + +'Inline component' is an obvious term, though it doesn't quite explain ``. In other template language contexts, the word 'partial' is sometimes used to mean something similar. + +Accepting this proposal would mean adding new documentation, and updating the `` documentation to accommodate `this="string"`. + +## Drawbacks + +As ever, the concern is that this increases the amount of stuff to learn, and the amount of stuff to implement and maintain. + +In a similar vein to ([#33](https://github.com/sveltejs/rfcs/blob/markup-constants/text/0000-markup-constants.md#drawbacks)), it *is* arguably just something that compensates for the lack of power in the template language relative to JavaScript. + +## Alternatives + +Instead of a new special element, we could use syntax: + +```svelte +{#template "image" { image }} +

+{/template} + +{#each images as image} + {#if image.link} + + {@partial "image" {image}} + + {:else} + {@partial "image" {image}} + {/if} +{/each} +``` + +I think this is more confusing than the special element proposal, and doesn't make effective use of existing concepts (`let:`, slots, etc). + +## Unresolved questions + +* Is `` right? (What if there was a prop called `name`? Should we use `this` instead, or is that confusing?) +* Can templates be scoped, or must their names be unique within the component? Must they be defined at the top level of the component, or can they be defined anywhere (and inherit context and styles that apply to their subtrees)? \ No newline at end of file From 90ade6f295898afe4202938c10f588b86cc56c81 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Sep 2020 01:09:29 -0400 Subject: [PATCH 2/3] link to PR --- text/0000-inline-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/text/0000-inline-components.md b/text/0000-inline-components.md index 2230db5..10432c9 100644 --- a/text/0000-inline-components.md +++ b/text/0000-inline-components.md @@ -1,5 +1,5 @@ - Start Date: 2020-09-09 -- RFC PR: (leave this empty) +- RFC PR: ([#34](https://github.com/sveltejs/rfcs/pull/34)) - Svelte Issue: (leave this empty) # Inline components @@ -42,7 +42,7 @@ Neither is ideal. ## Detailed design -With `` (🐃), combined with new functionality for `` in which a string `this` attribute is taken to refer to an inline component, we can avoid both the problems articulated above: +With `` (🐃), combined with new functionality for `` — in which a string `this` attribute is taken to refer to an inline component — we can avoid both the problems articulated above: ```svelte From adbf486f31eacef3b8b3f00ddd646658221c5b45 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Sep 2020 09:33:54 -0400 Subject: [PATCH 3/3] doh, that doesn't apply here --- text/0000-inline-components.md | 1 - 1 file changed, 1 deletion(-) diff --git a/text/0000-inline-components.md b/text/0000-inline-components.md index 10432c9..1cc8317 100644 --- a/text/0000-inline-components.md +++ b/text/0000-inline-components.md @@ -172,5 +172,4 @@ I think this is more confusing than the special element proposal, and doesn't ma ## Unresolved questions -* Is `` right? (What if there was a prop called `name`? Should we use `this` instead, or is that confusing?) * Can templates be scoped, or must their names be unique within the component? Must they be defined at the top level of the component, or can they be defined anywhere (and inherit context and styles that apply to their subtrees)? \ No newline at end of file pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: