Typescript support

[jonatansberg]

Hey @rixo! Svench is awesome and we're looking at using it for Crown. As a part of that I've been trying to get Svench to work with Typescript components.

Imports from .ts files seems to work fine with the normal Rollup Typescript plugin, but <script lang="ts"> blocks aren't getting pre-processed properly. Do you have any suggestions on how to best go about fixing this?

Cheers!

[rixo]

Hi!

Thanks :)

That's surely a shortcoming on Svench's side. I haven't really tried to make it work with TS, but that's definitely something that needs to be supported.

Would you be so kind as to prepare a repro of what should work, and I'll debug it out?

[jonatansberg]

Thanks for the quick response!

Here is a repro case:
https://github.com/jonatansberg/svench-component-template

With include set to ./src/**/*.ts I get the following error:

[!] (plugin svelte (hot)) ParseError: Unexpected token
src/Component.svelte
1: <!-- your code here -->
2: <script lang="ts">
3:   let name: string = 'world'
             ^
4: </script>
5: 
ParseError: Unexpected token
    at error$1 (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:15722:20)
    at Parser$1.error (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:15798:10)
    at Parser$1.acorn_error (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:15792:15)
    at Object.read_script [as read] (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:7501:17)
    at tag (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:14865:34)
    at new Parser$1 (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:15757:22)
    at parse$3 (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:15889:21)
    at compile (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/svelte@3.30.0/node_modules/svelte/compiler.js:28511:18)
    at /Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/rollup-plugin-svelte-hot@0.11.2_rollup@2.33.3+svelte@3.30.0/node_modules/rollup-plugin-svelte-hot/index.js:309:22
    at async ModuleLoader.addModuleSource (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/rollup@2.33.3/node_modules/rollup/dist/shared/rollup.js:18289:30)

If you set the include pattern to something that includes the svelte file (e.g. ./src/**/*), you get this:

[!] (plugin typescript) Error: Could not load /Users/jonatan/Code/Crown/svench-component-template/src/index.svench.svx (imported by node_modules/.pnpm/svench@0.0.10-7_8c1995817a46e871801b9b3386426e99/node_modules/svench/tmp/routes.js): Debug Failure. False expression: Expected fileName to be present in command line
Error: Could not load /Users/jonatan/Code/Crown/svench-component-template/src/index.svench.svx (imported by node_modules/.pnpm/svench@0.0.10-7_8c1995817a46e871801b9b3386426e99/node_modules/svench/tmp/routes.js): Debug Failure. False expression: Expected fileName to be present in command line
    at Object.getOutputFileNames (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/typescript@4.1.2/node_modules/typescript/lib/typescript.js:99600:18)
    at findTypescriptOutput (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/@rollup/plugin-typescript@6.1.0_7acd921d0b3b835553b7f513891ce3ca/node_modules/@rollup/plugin-typescript/dist/index.js:416:33)
    at Object.load (/Users/jonatan/Code/Crown/svench-component-template/node_modules/.pnpm/@rollup/plugin-typescript@6.1.0_7acd921d0b3b835553b7f513891ce3ca/node_modules/@rollup/plugin-typescript/dist/index.js:680:28)
    at runNextTicks (internal/process/task_queues.js:58:5)
    at listOnTimeout (internal/timers.js:501:9)
    at processTimers (internal/timers.js:475:7)

I've also tried to add svelte-preprocess alongside the Svench preprocessor without any significant change in outcome.

(FYI: I've only been testing with Rollup since I cant get Svench to work with Nollup at all in our Crown monorepo.)

[jonatansberg]

I figured it out! When adding only the typescript preprocessor everything works! :D

I updated my forked template with the full working setup.