Javascript Keywords as Props - Error

[jvanderen1]

There seems to be a re-occurring issue where you cannot properly use props which are named the same as Javascript keywords (i.e. class, for, etc.). It seems the best workaround is to simply use the $$props syntax.

In my case, I am trying to the use for and class prop inside my reusable label component:

<label for={$$props.for} class={`block text-sm font-medium text-gray-700 ${$$props.class}`}>
  <slot />
</label>

However, when running eslint ., I received the following error on both these guys:

  1:13  error  '$$props' is not defined  no-undef
  1:76  error  '$$props' is not defined  no-undef

However, if I add the <script> tags at the top of the file, like so:

<script></script>

<label for={$$props.for} class={`block text-sm font-medium text-gray-700 ${$$props.class}`}>
	<slot />
</label>

I receive no errors.

I am not sure what the svelte team can do as this seems like a language oversight, but I wish there was a way to easily extract these Javascript keyword-named props.

[dummdidumm]

Possible duplicate of #148