Add a single-file component (SFC) format

[AllanOricil]

Is your feature request related to a problem? Please describe. I was reading some vue docs and started to think:

• why isn't there a .lwc file extension?
• why can't I declare my .html, .js and .css in a single file?
• wouldn't It be cool to have .lwc files be represented with a lightning icon on code editors?
• it is so much easier to create and write a single file than 1 folder and, up to, 3 files. Don't you agree?

Describe the solution you'd like I would like to be able to create lwc components declaring .html, .css and .js in a single file called my-component.lwc, like in Vue or Svelte.

<template></template>
<script></script>
<style></style>

<!-- meta: platform specific metadata-->
<metadata></metadata>

Describe alternatives you've considered There isn't an alternative.

Additional context N/A

[nolanlawson]

Thanks for opening the issue! This is something we've discussed internally, but haven't committed to implementing. Metadata would probably not be included, but having the template/script/style in one file is something we've considered.

/cc @rui-rayqiu

[AllanOricil]

Did you guys discuss about support that feature that allows a component to have multiple templates, and choose 1 to render at a time based on the render method response? It would be nice if we could still use multiple <template> when using a single file.

You could require a boolean variable in all other templates. The ones without it is the default one. There could exist only 1 without a boolean expression.

<template></template> <!--default-->
<template render={renderA}>A</template>
<template render={renderB}>B</template>

<script>
...
function renderA(){...}
function renderB(){...}
...
</script>

If more than 1 template is due to be rendered at the same time, then throw an exception.