Recommended ways to export a Gleam package as a JS/TS package?

[rigid steeple]

I'm trying to gradually adopt Gleam in my company. I'm currently implementing some core logic in Gleam and want to import it into a Next.js project. Things are working fine, but I'd like to improve the import paths on the TypeScript side. Currently, I need to import it as:

import { } from "@package/core/build/dev/javascript/core/types/core.mjs";
import { List } from "@package/core/build/dev/javascript/prelude.mjs";

Any recommendations on how to improve this?

I tried exploring one option: using "module": "core/build/dev/javascript/core/types/core.mjs" in the package.json, but this would require having a single file entrypoint (something like an index.mjs). Another option would be to have a Gleam module re-export all needed definitions, but this seems not possible at the moment. What other options would you recommend?

[twin yacht]

maybe just setting a typescript alias is enough

"@gleam": "./core/build/dev/javascript"

[rigid steeple]

didn't know about typescript aliases, but apparently it works only for paths in the same package (so the ./core/... is relative to current package not the imported package)

[tiny relic]

could use a private npm repo and babel it as needed in the publish step if you want to go through that trouble, I get wanting it to live in the monorepo though

[twin yacht]

You never want to bundle dependencies really

[silver kelp]

There's the exports key you can use

https://nodejs.org/api/packages.html#package-entry-points

[rigid steeple]

Yes! Using the exports helped a lot!!! Thanks @silver kelp, you saved the day

[gritty cliff]

when using vite you can also do this

import { my_function } from './src/example.gleam' and

[fickle nacelle]

Yep, that's how I do it in Nestful

[gritty cliff]

i thought that's how everyone dose it its very handy

[fickle nacelle]

He uses Next.js which doesn't necessarily bundle with vite, if at all

[tiny relic]

next uses turbopack, an unreleased tool, to bundle and find "use server" directives, among other things.

[rigid steeple]

Nice! does it need the vite-gleam plug-in or it's using some native vite feature?

[gritty cliff]

it needs vite-gleam

you can use any pub gleam functions from the files you import

i have an example vite project if you want

https://github.com/sanabel-al-firdaws/gleam_vite/tree/master

it uses lustre but you can just change the file content

[tiny relic]

this is really cool, great way to slowly introduce gleam to a project

[gritty cliff]

Yes i actually was using it to use a vue text editor in my lustre app and ended up using vite and now i can't go back

Vite plugins are so many and they are so usefull

https://vite-pwa-org.netlify.app/

for example this is a vite plugin i used before

after weeks of pulling my hair i finnaly understand most of the things about how pwas work

[tiny relic]

yeah i actually just started my first web freelance project and was reccomended vite and I think I'll keep using it as long as I'm doing this sort of stuff

[gritty cliff]

Astro with vite

is the best setup for static websites