шо думаете ?

можно в принципе лабель на слот заменить

чтобы никаких пропсов вообще не было

чтобы это был как какой-то шаблончик просто

типа вот так

<svelte:options logicless />

<script>
  export let label = '';
</script>

<label class="input">
  <span>{label}</span><input :root />
</label>

<style>
  .input {
    display: block;
  }
</style>

А что такое :root?

<LabeledInput class="something" type="number" bind:value={somevar}>
  Label here
</LabeledInput>

ну это то куда полетят все эти классы тайпы и так далее

типа рестпропс

но по сути это даже не компонент, а просто какой-то макрос

даже вот как-то так

Рфц хз, я видел ишью на тему снижения оверхеда компонента, если у него нет тега скрипт — его ж можно по уму просто через innerHtml просто вставлять и все.
Но это все итерационные улучшения, которые почему-то редко получают любовь от мейнтейнеров.

С пропсами много не сэкономишь, нужна же реактивность для них все равно.

Ну по хорошему если нет скрипта блока, то компилер сам должен делать минимальный бойлерплейт.

:root - я уже где-то предлагал идею anchors которая бы решила много проблем, как прокидывания классов, стилей и экшенов в компонент

Моё предложение по иному принципу по добавлению классов из парента. Кроме классов в компонент наверное можно style тоже передать. А еще неплохо бы и экшены тоже. Например, сейчас ни в Малине, ни в Свелт никак не навесить экшн на элемент внутри компонента. Например захочется на компонент кастомного инпута из какой-либо UI библиотеки навесить экшн цепляющий maskinput, и никак.

Все это объединяет, то что нужно знать на какую DOM-ноду навешивать класс, стиль или экшн. Поэтому предлагаю ввести так называемый Anchor(якорь), с помощью которого в компоненте можно указать на какую ноду навешивать поступающие в компонент классы, стили и экшены. Кроме того можно сделать якоря в компоненте с разными именами, тогда отдельно можно задать стили как для враппера, так и для поля ввода(например). Как и прочие директивы на элементах, якорь будет иметь свой значок - пусть "^".

// Card.xht
<div ^root>
   <div ^header>{title}</div>
   <slot/>
</div>

// App.xht
<Card title="hello" style="margin: 20px" class:header="red" />

Якорь ^root значит - что туда будут прицепляться переданные классы, стили и экшены, по-дефолту.

в малине писал

@dkzlv а как ты борол вот такое в тсе:

<script lang="ts">
  export let value: number | null = null;
</script>

<input type="number" bind:value />

Type 'number | null' is not assignable to type 'string | number | string[] | undefined'. 
~                             Type 'null' is not assignable to type 'string | number | string[] | undefined'. 

использовал number | undefined тип или как ?

<script lang="ts">
  export let value: number | null = null;
</script>

<input type="number" bind:value />

Type 'number | null' is not assignable to type 'string | number | string[] | undefined'. 
~                             Type 'null' is not assignable to type 'string | number | string[] | undefined'. 

Да, использую undefined, для меня он мало отличим в таких кейсах от null :)

причем в самом браузере там null если пустое поле