using javascript keyword as component property

[RedHatter]

I often find myself wanting a property on my components called class. I can't use export let class as class is a javascript keyword. I'm left with either calling it something else or using $$props directly like so <label class={$$props['class']}>. I don't know if using $$props directly has any downsides. The tutorial warns that "it's not generally recommended, as it's difficult for Svelte to optimise". Either way, I don't know how plausible it would be, but it would be nice to have some mechanism to allow keywords to be used as component properties.

[Conduitry]

This is already supported, via export-as, and was recently documented here. Maybe this should be called out in the tutorial as well?

[RedHatter]

Ah, I missed that. I read through the api but only glanced through the accompanying code examples. The feature in question is a displayed as a comment in the code example.

I do think it would be beneficial to add it to the tutorial. I would think many users would want to use class as a property.

As another note, $$props is missing from the api? I understand it's not really concisered part of the public api but the tutorial mentions it so I would think that it should go in the api as well.

[Conduitry]

Yeah there's an issue #2528 about documenting $$props. It's officially a part of the public API, but was added pretty close to release and the API docs haven't been updated yet.

[Ryuno-Ki]

I often find myself wanting a property on my components called class. I can't use export let class as class is a javascript keyword. I'm left with either calling it something else […]

Back in the days, people tended to pick „klass” instead. I'm sure you'll find articles out there ;-)

[TheBosZ]

I'm going to copy and paste the answer from the docs so it's easier to find:

let clazz;
export { clazz as class };

[nikku]

My wish would be that svelte adds the className alias for that particular reserved name, as I find it quite annoying to be forced into the export { clazz as class } pattern.

For the moment that can be accomplished via a simple pre-processor:

function classProcessor() {

  function process(content) {
    return (
      content
        .replace(
          /export let className([;\n= ]{1})/g,
          'export { className as class }; let className$1'
        )
    );
  }

  return function(options) {

    const {
      content
    } = options;

    const code = process(content);

    return {
      code
    };
  }
};

Essentially transforms

<script>
  export let className;
</script>

to

<script>
  export { className as clazz };
  let className;
</script>

Not very convenient though.