@jacobhq can you write few lines about why you needed to export a type from tuono/client? It doesn't seem straightforward

@jacobhq can you write few lines about why you needed to export a type from tuono/client? It doesn't seem straightforward

Sure thing!

Vite provides some stuff (including env vars) on an object called import.meta. I hadn't encountered this object before, but after a brief read of MDN, I found it provides the module with context about itself like a URL etc.

Without this change, typescript had no idea about what was inside import.meta, and so treated it as you trying to get something that didn't exist (ts 2339: Property env does not exist on type ImportMeta.). After a quick google, I came across this stackoverflow question, which suggested creating a vite-env.d.ts with the following content (it also suggested another approach, I used that later on):

/// <reference types="vite/client" />

This works in vite projects, because vite exists as a dependency, but in tuono projects, vite is a dependency of tuono, so this doesn't work. I fixed this by importing client in packages/tuono/client.d.ts, exporting that as tuono/client, and then referencing that in tsconfig.json of new tuono projects. I took this approach because I hate all the files in the root of a project (look at how beautiful and simple it used to be in nextjs), using tsconfig.json so I didn't have to make a new root file in each project.

Hope that was useful. I had a long session last night trying to fix this, so it is fresh in my mind :)

TL;DR;

By adding tuono/client, which aliases vite/client, to tsconfig#types we include a file
which contains declarations about variables and files handled by vite:

• https://vite.dev/guide/env-and-mode#built-in-constants
• module declaration for
  • images
  • stylesheets (css, scss, less, ...)
  • various file types related to assets (mp3, ...)

Check vite/client content for more info: https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts

The major benefit of this is that we avoid users creating this kind of file inside their apps.
E.g.: I have done this myself in examples/tuono-tutorial/src/css-modules.d.ts

Kudos to @jacobhq for resolving this using this approach!

Thanks @jacobhq for the explanation. Great work with that!

No worries :)