[Seeking Help] Adding Typescript Support

[nickreese]

Hey All! I'm not a TS expert, yet many people in the community are asking for TS support. That said, I'd love the help from someone who knows TS and common TS toolchains to help us get native TS support in Elder.js.

Hurdles Blocking TS Support

At a high level the main hurdle to implementing TS for Elder.js really comes down to:

The fact that there are several files that read the system expects .js files in specific places. These files include:

1. routes.ts
2. externalHelpers.ts
3. plugins.ts
4. rollupPlugin.ts (look for ./server.js)
5. I'm sure there are more... (I'll update this list with edits)

When Should Elder.js Compile TS?

Accepting TS files in the above listed code isn't a hard problem to solve, there was a partial attempt to get these playing nicely which you can see on this PR (https://github.com/Elderjs/elderjs/pull/170)... the main problem comes down to when we compile TS and run that code.

The way I understand it there are two options:

1. Update the Elder.js srcDir to match the outDir found in the tsconfig and update all of the files Elder.js reads looking for .js and allow it to accept .ts as well. This would be done in getConfigand let the user handle the compilation in their own tool chain. I planned on using this approach in alpha versions of Elder.js.

2. Another suggestion from @orta that is on the TS team mentioned that we could just use an esbuild background process to transpile TS on the fly and just run the output as if it was a JS file.

The main reason neither of these have been implemented is that I just don't understand TS tooling well enough to make a decision because I don't know the pros/cons of each.

If anyone has strong opinions or would like to offer support, I'm all ears. 👂 👂 👂

[orta]

Re: esbuild background process - you can use esbuild/swc via the JavaScript API, so when you see 'routes.ts' instead of 'routes.js', you can do:

const esbuild = require('esbuild')
const jsversion = esbuild.transformSync(fs.readFileSync("routes.js"), { loader: 'ts' })

Then it can live in your existing build pipeline which has to do something like that for svelte files anyway

[tylersayshi]

@nickreese Do you have any suggestions or ideas for how a project would opt into using Typescript?

I think the first step is to follow @orta's advice for setting up the proper build with a ts template project, but I imagine that it'd be nice to setup some sort of nice setup script to go with these new changes. It might be nice to follow the npm init way that svelte-kit tackles this problem - https://github.com/sveltejs/kit/pull/41

I am going to try to get a working ts starter project running, but I'd appreciate some input on how to deliver this in the end as well.

[tylersayshi]

const jsversion = esbuild.transformSync(fs.readFileSync("routes.js"), { loader: 'ts' })

@orta should this code say routes.ts?

[nickreese]

const jsversion = esbuild.transformSync(fs.readFileSync("routes.js"), { loader: 'ts' })

@orta should this code say routes.ts?

Yeah. You’ll want to use path.resolve() to get the relevant TS file… after a check for if it exists.

As far as delivery a script that customizes the template seems like a good plan. Let me know how I can support. I’m on the svelte discord if you need a faster feedback loop.

[tylersayshi]

@orta transformSync takes a string as the first param, which is named input, so I am assuming the line should be more like this:

const jsversion = esbuild.transformSync("routes.ts", { loader: 'ts' })

But the return type of transformSync also doesn't exactly make sense to me. Is jsversion supposed to be the filepath to the transformed routes.js after it is processed through typescript? This is the return type from esbuild, so I am not exactly sure how to get helpful info from this:

export interface TransformResult {
  code: string;
  map: string;
  warnings: Message[];
}

Thanks in advance for any help, much appreciated

[orta]

I'd read up on the docs from esbuild, I just took this from their sample code

[AcrylicShrimp]

Thank you for your hard working! I'm very sorry for spamming, but is there any progress on this? It would be great if we can use Typescript for Elder.js.