Intra-component/element prop-commenting

[brandonmcconnell]

Describe the problem

In most cases, commenting is possible and works as expected, but there is one case where I have been having trouble since I started working with Svelte last month.

1. ✅ Commenting scripts within the <script></script> block:

<script>
// const space = "We'll get there fast and then we'll take it slow.";
const force = "That's where we want to go... way down in Kokomo.";
</script>

2. ✅ Commenting the HTML portion of a component using HTML-style comments:

<!--<div>Cheap generals are like cheap enchiladas.</div>-->
<div>You end up paying for it on the backend. – Mark Naird</div>

3. ✅ Commenting single-line scripting within props in a component or element:

<SpaceRocks
  prop={[
    // { title: "Dr.", firstName: "Adrian", lastName: "Mallory" },
    { title: "Chief of Space Operations", firstName: "Mark", lastName: "Naird" },
  ]}
/>

4. ❌ Commenting an entire prop (or multiple subsequent props of a component or element — this does not appear to be supported as far as I can tell (REPL). If I attempt to comment a single prop using Cmd+/ in VSCode, it attempts to comment the line as HTML, as can be seen in the below example. This throws an error (see REPL linked above).

<SpaceRocks
  <!-- prop={"Boots on the moon."} -->
  data={"Tuna sandwich"}
/>

Describe the proposed solution

I propose adopting a JSX-like commenting syntax ({/* and */}) and also supporting that via the official Svelte VSCode extension so (1) if the cursor is on a line with only a prop and Cmd+/ is pressed it comments only that line using {/* and */}, and (2) inline where if prop(s) is/are selected and Cmd+/ is pressed, the same syntax is used to comment only those selected areas.

This is how that would look in practice:

Single-line tag with single-prop comment:

<SpaceRocks {/*prop={"Boots on the moon."}*/} data={"Tuna sandwich"} />

Single-line tag with multi-prop comment:

<SpaceRocks {/*prop={"Boots on the moon."} data={"Tuna sandwich"}*/} />

Multi-line tag with single-prop comment:

<SpaceRocks
  {/*prop={"Boots on the moon."}*/}
  data={"Tuna sandwich"}
/>

Multi-line tag with multi-prop comment:

<SpaceRocks
  {/*prop={"Boots on the moon."}
  data={"Tuna sandwich"}*/}
/>

All of these examples work when used in JSX, which is the syntax highlighting I chose for the code blocks above to demonstrate the usage.

Alternatives considered

The main alternative I see to this in "the wild" is people commenting entire elements or components and duplicating them with the props they want to use instead to avoid permanently removing the props they want to comment.

Importance

would make my life easier

[brandonmcconnell]

Closing this issue as the desired functionality already exists as a PR in sveltejs/rfcs/pull/43.

I've left a comment and my support there. If there is anything I can do to help champion that request, please let me know.