Proposal: Switch props from "export let" to "import let"

Describe the solution you’d like Whilst going through the tutorial, I was confused by the same use of export let name for both receiving in props from parent, and passing value up to the parent through bind. It seems that receiving props in using “export let” doesn’t really have the right connotation.

Describe alternatives you’ve considered Consider changing the syntax for receiving props to be import let name. Then you would have a clear distinction between what comes in, and what goes out.

Contrived example.

form.svelte

<script>
  import Field from './field.svelte'
  let name;
</script>

<Field type='text' label='Name' bind:value={name} />

field.svelte

<script>
  import let type;
  import let label;
  export let value;
</script>

<p>
  <label>{label}</label>
  <input type={type} bind:value={value} />
</p>

How important is this feature to you? It’s not critical, but for the above example, it makes things very clear what comes in and out. If both variable declarations were export, which is currently required, it makes things a bit confusing and requires code comments to explain.

[Rich-Harris]

I’m going to save everyone’s time and close this issue, because I don’t see any realistic prospect of this changing. This has been discussed before at considerable length, and export is the best option. It doesn’t perfectly match the semantics of export in JavaScript modules, but it’s the most appropriate verb since in both contexts ‘export’ means ‘exposing a contract to the outside world’, and any replacement would have its own issues.

[paganaye]

Import is certainly not an option. One option that would not break (all) javascript would be to add a prop keyword.

<script>
  prop type;
  prop type;
  prop value;
</script>
<p>
  <label>{label}</label>
  <input type={type} bind:value={value} />
</p>