Description
Moved from #3677
This seems to be a discussion in it's own right & I didn't want to distract from the discussion on the svelte-ts thread.
My personal experience. I recently have been working on an Angular project & I have to say that having separate *.ts, *.html, *.scss files is not too bad, especially when components are large.
Perhaps, svelte could offer an api to have the contents of the <script> tag defined with a function that can be defined in a *.ts file. Same with <script context=module>.
This way, one can use tsc -w for the fastest typescript compilation performance while interfacing with Svelte. Such an api could also assist with svelte-ts.
It could look something like:
MyComponent.svelte
<script context=module src="./MyComponent.module"></script>
<script src="./MyComponent"></script>
{#if has_title}
<h1 on:click={onclick}>{title}</h1>
{/if}MyComponent.ts
export title = ''
let has_title
$: has_title = !!title
function onclick() {
}MyComponent.module.ts
export async function preload(req, res) {
// ...
}The typescript compiler will have a chance to compile MyComponent.ts to MyComponent.js & MyComponent.module.ts to MyComponent.module.js.
The svelte compiler would then copy the contents of MyComponent.js & MyComponent.component.js & place the contents inside the respective <script> tags. The src attribute would keep the semantics of scoping to be within the component as well.
In the case of svelte-ts, the compiler can implicitly create MyComponent.ts from the typescript contents of the <script> tag. This way, the Svelte library has an explicit contract on handling other languages such as typescript, livescript, coffeescript, etc. while using the standard cli tools for these libraries & not having to resort to preprocessors.
This also seems fairly simple to implement from the current svelte implementation.
Love to hear any thoughts...