Api for script[src] & style[src] attributes to break up large components & support compiled languages (e.g. Typescript) using vendor tools (no preprocessor necessary)

[btakita]

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...

[Conduitry]

Is there anything here that can't go in #65?

[btakita]

It does look like a preprocessor could handle the src attribute to prepend the contents of that file into the tag. Thank you for pointing out the #65.