How do I generate typescript definitions? | The Gleam Programming Language | Page 1

light light Jun 25, 2024, 6:36 AM

#

It says in the site that Gleam can do this.
I seen this https://gleam.run/news/gleam-v0.22-released/

[javascript]
typescript_declarations = true

Doesn't seem to do anything, I cannot see any d.ts files created anywhere.
thanks

Gleam v0.22 released! – Gleam

The Gleam programming language

narrow lintel Jun 25, 2024, 6:37 AM

#

are you building js? unless you've also set target=javascript in your toml file you'll need to run gleam build --target javascript

light light Jun 25, 2024, 6:37 AM

#

yes target is javascript

#

when I do gleam build it outputs a js file in priv/static/

narrow lintel Jun 25, 2024, 6:39 AM

#

have you tried doing a clean build? i didn't need to when i enabled it but i know others have needed it. gleam clean && gleam build

light light Jun 25, 2024, 6:39 AM

#

trying

#

No diff

#

Do I need to annotate the types in Gleam that I want to export somehow?

viral sinew Jun 25, 2024, 6:41 AM

#

I think there's an option in the gleam.toml file for generating TS definitions

narrow lintel Jun 25, 2024, 6:42 AM

#

are you checking for .d.ts specifically? gleam generates .d.mts to match the .mjs files it generates

light light Jun 25, 2024, 6:42 AM

#

I can't see anything resembling types being generated

viral sinew Jun 25, 2024, 6:43 AM

#

Try putting

[javascript]
typescript_declarations = true

in your gleam.toml

trail grove Jun 25, 2024, 6:43 AM

#

And then delete your build dir

light light Jun 25, 2024, 6:43 AM

#

I have that, will try deleting the build dir

trail grove Jun 25, 2024, 6:44 AM

#

Gleam caches builds if there’s nothing to build you wont see any additional artefacts ^.^

light light Jun 25, 2024, 6:44 AM

#

In which dir are those definitions supposed to appear?

narrow lintel Jun 25, 2024, 6:45 AM

#

beside the .mjs files

#

so build/javascript/[package]/[path/to/module].d.mts

light light Jun 25, 2024, 6:45 AM

#

Does the mjs file need to import the gleam file or something?

narrow lintel Jun 25, 2024, 6:46 AM

#

light light when I do `gleam build` it outputs a js file in `priv/static/`

wait, are you talking about gleam? or about lustre? gleam doesn't generate anything in priv/static

light light Jun 25, 2024, 6:49 AM

#

I found a definition file deep in the build folder.
Ok I guess this makes sense for publishing a library.

#

Hmm, so what I would like to achieve is to have typechecking on my mjs files via typescript (jsdocs I suppose?).
E.g. if I have a type in gleam User
I want to type check that a function in JS returns a User as expected by gleam.

trail grove Jun 25, 2024, 7:00 AM

#

https://github.com/Enderchief/gleam-tools/tree/master/packages/ts-gleam

GitHub

gleam-tools/packages/ts-gleam at master · Enderchief/gleam-tools

monorepo for vite-gleam & ts-gleam. Contribute to Enderchief/gleam-tools development by creating an account on GitHub.

light light Jun 25, 2024, 7:02 AM

#

Looking, thanks

narrow lintel Jun 25, 2024, 7:02 AM

#

i'm not sure i understand the problem. generate types out of your gleam library, publish your gleam library with that type information, and then use typescript in the project that's using the library and it should just work?

TypeScript is especially guilty of this because it makes it extremely non obvious because it tries to allow for incremental addoption, but gleam's FFI can suffer from this too - there is no explicit type checking at the boundaries of your type safe code. if you write untyped javascript then you're on your own to make sure you do the right thing, both when calling into type safe code or calling out from type safe code via FFI. If you care about ensuring the types are correct at the boundaries then you need runtime checks.

light light Jun 25, 2024, 7:02 AM

#

It is an app, with some parts in Gleam and some in JS

#

So, not a Gleam lib that will be used somewhere else

trail grove Jun 25, 2024, 7:03 AM

#

narrow lintel i'm not sure i understand the problem. generate types out of your gleam library,...

i'm not sure i understand the problem. generate types out of your gleam library, publish your gleam library with that type information, and then use typescript in the project that's using the library and it should just work?
conceptually what you describe is simple, but please remember that it is not actually documented where any of this build stuff goes, nor is there any guidance on how to "publish your gleam library with that type information" in a way that is meaningful to js/ts users

narrow lintel Jun 25, 2024, 7:03 AM

#

true

narrow lintel Jun 25, 2024, 7:20 AM

#

i was definitely assuming some knowledge about the javascript side of things, and for reference gleam dumps the built files into build/javascript/[package] which includes the type information. This whole process is something I want to document better myself as I start working towards publishing the commonmark package into NPM as well. a discord thread is probably not the right place to start writing up extensive documentation though, especially since you'll probably want a bundler and dts rollup as part of that process and each of those could be an article in their own right.

trail grove Jun 25, 2024, 7:21 AM

#

i think they just want to type their ffi code with gleam types, nothing crazy 🙂

light light Jun 25, 2024, 7:26 AM

#

I will like to have typed functions in the JS side eg.

export async function generateFoo(): Promise<Foo> {
  return ...
}

Where Foo is a type defined in Gleam

#

I was trying ts-gleam, followed the instructions, but don't know what is supposed to do when running gleam build.
How is that going to interact with typescript?

#

Well, thanks for the help, will come back to this later

trail grove Jun 25, 2024, 7:34 AM

#

what do you mean "interact with typescript"?

#

gleam doesnt interact with any of your ffi files save for moving them from src/ to build/dev/javascript. if you'd like ts to check your code you will need to run ts, similarly if you'd like ts to build your code you'd have to run tsc.

#

kinda like how if you wrote ports with typescript elm wouldnt know anything about it, you'd still have to handle the ts files somehow and elm make wouldnt do that for you

light light Jun 25, 2024, 10:08 AM

#

I would like to generate the .d.ts files in my source folder, so I can import those types in typescript files. And then run tsc.

#

Kind like what https://elm-ts-interop.com/ does
Run a command that generates the type definitions in some place where can be imported by TS

elm-ts-interop

Add and change ports and flags with confidence and ease.

trail grove Jun 25, 2024, 10:13 AM

#

the types are generated in "some place" 😅 as explained above they're generate in build/dev/javascript

#

you can import those in your ts code

light light Jun 25, 2024, 10:13 AM

#

So is the idea to commit the build directory in a repo?

#

Anyway, this is very helpful, thanks

trail grove Jun 25, 2024, 10:32 AM

#

light light So is the idea to commit the build directory in a repo?

no i wouldnt think so, anyone using your project will also have the gleam compiler around necessarily

light light Jun 25, 2024, 10:37 AM

#

I'm just realising that the generated types cannot be used as is either.
Gleam generates JS classes for custom types.
e.g.

pub type Thing {
  Thing(
    name: String
  )
}

Is generated as

export class Thing extends _.CustomType {
  constructor(name: string);
  
  name: string;
}

Which is probable useful when you have variants.
But all I want is to return a record from TS. e.g.

type Thing = {
  name: string
}

plush hull Jun 25, 2024, 10:40 AM

#

I'm confused as to why that's an issue

light light Jun 25, 2024, 10:42 AM

#

If I have a function in JS like

import { Thing } from "../build/dev/javascript/app/app.mts";

export function generateThing(): Thing {
  return {
    name: "thing1"
  }
}

The types won't match

trail grove Jun 25, 2024, 10:45 AM

#

ts records aren't compatible with gleam types

#

you wouldnt be able to pattern match on them

light light Jun 25, 2024, 10:45 AM

#

Unsure what would happen if I return a class instance from JS, trying.

plush hull Jun 25, 2024, 10:51 AM

#

light light If I have a function in JS like ```js import { Thing } from "../build/dev/javasc...

So return new Thing("thing1") 😄

light light Jun 25, 2024, 10:51 AM

#

Couldn't run the lustre/dev.main as esbuild cannot resolve this

import { Thing } from "../build/dev/javascript/app/app.mts";

light light Jun 25, 2024, 10:52 AM

#

plush hull So return `new Thing("thing1")` 😄

Yeah, I suppose in theory that just works if I can run this. As JS class instances are just JS objects.

light light Jun 25, 2024, 11:14 AM

#

These two files show what I'm attempting to do if anyone is interested
https://github.com/sporto/explore-gleam-lustre/blob/main/src/app.gleam
https://github.com/sporto/explore-gleam-lustre/blob/main/src/thing.ts

GitHub

explore-gleam-lustre/src/app.gleam at main · sporto/explore-gleam-l...

Contribute to sporto/explore-gleam-lustre development by creating an account on GitHub.

GitHub

explore-gleam-lustre/src/thing.ts at main · sporto/explore-gleam-lu...

Contribute to sporto/explore-gleam-lustre development by creating an account on GitHub.

plush hull Jun 25, 2024, 11:19 AM

#

So import { Thing } from "../build/dev/javascript/app/app.mts"; has a bad path

#

If you notice in the error

#

build/dev/javascript/build/dev/javascript/app/app.mts

#

All you need to do is ./app.mjs

#

This is because the file (thing.js) is copied into the build directory

#

So you'd want import { Thing } from "./app.mjs";

#

Note that I changed to .mjs instead

light light Jun 25, 2024, 11:23 AM

#

Ah, I see, you are running it differently
I was using gleam run -m lustre/dev start

plush hull Jun 25, 2024, 11:24 AM

#

oh don't do the command i was running then

#

if you're writing lustre do that lustre one

trail grove Jun 25, 2024, 11:27 AM

#

The important bit is that you’re trying to import a .mts but gleam doesnt compile to typescript it compiles to javascript with separate typescript declaration files

light light Jun 25, 2024, 12:11 PM

#

Alright progress. In order for esbuild to find the paths they need to be absolute

import { Result, Ok } from "build/dev/javascript/prelude.mjs";
import { Thing } from "build/dev/javascript/app/app.mjs";

narrow lintel Jun 25, 2024, 12:32 PM

#

you might find this useful: https://github.com/mscharley/gleam-commonmark/commit/06cee0fa93694b4c6419b02047e2d7019561b1aa

#

this is pretty specific to my project, but it shows where all the files are located and how to bundle things up for both javascript and typescript types

#

not sure how this approach deals with prelude stuff though. the types definitely work, but they're probably not accessible for import :/

trail grove Jun 25, 2024, 12:36 PM

#

they're not making a library and they're not using esbuild directly

#How do I generate typescript definitions?