jCtapuk•4mo ago

import declarate import *.png

Since convex does not allow us to explicitly load the loader such as a link to import *.png. And I ask the question: how to ignore it? since they serve for the astro application, but for the backend I need its key values. As far as I get the image key name they are just referencing.

42 Replies

Convex Bot•4mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

ballingt•4mo ago

@jCtapuk

Since convex does not allow us to explicitly load the loader such as a link to import *.png.

That's right, it's not supported to bundle images into your Convex functions.

And I ask the question: how to ignore it?

Why do you have code that does that that you need to import from a convex function?

since they serve for the astro application, but for the backend I need its key values.

I don't understand this, I understand that Astro might need to serve them but what is a key value?

As far as I get the image key name they are just referencing.

What is an image key name? To answer your question directly, we can allow some bundler customization in the future; probably configured via the convex.json file, you could list what esbuild plugins you want to use. But it would help for now to understand what you're trying to do here, what do you want these imported values to be? Why do you have to import them?

jCtapukOP•4mo ago

when there is a list key and a link to an image, for example, astro converts the link to the picture into a meta but not a blob file. And when there is a list of keys that I set in v.union for example 5 image and every name and the user changes this name and finds the name in the client and receives a link to the picture. But I will have to manually enter the keys without the link in the image. Entering 500 names manually and in the backend is such a task 🙂

ballingt•4mo ago

So these should be strings? or arrays? I'm not sure what a list key is

jCtapukOP•4mo ago

example:

import ImageRed from './assets/red.png'
import ImageBlue from './assets/blue.png'

const images = {
 red: ImageRed,
 blue: ImageBlue
}

import ImageRed from './assets/red.png'
import ImageBlue from './assets/blue.png'

const images = {
 red: ImageRed,
 blue: ImageBlue
}

work v.union('blue', "red") or import images convert keys to union no work import { images } from './randomFile' v.union(...Object.keys(images).map(key => v.literal(key)))

ballingt•4mo ago

Got it, and what is this string? Does it need integration with Astro to know where it will be hosted, or is it deriveable from the filename? sorry I'm a bit slow here, I don't understand the work / no work example

jCtapukOP•4mo ago

As much as he tried to follow the link, during the build you could add resistors of file types like png, they are not needed for the backend, it's just easier for me than manually in my code 50 controllers and in the backend 50 controller keys for double work.

ballingt•4mo ago

When you write

import ImageRed from './assets/red.png'
console.log(ImageRed);

import ImageRed from './assets/red.png'
console.log(ImageRed);

what is ImageRed?

jCtapukOP•4mo ago

This image string is simply turned into metadata which astro has its own assembly for unbuild you could just add it type *.png ignore

ballingt•4mo ago

What is metadata?

jCtapukOP•4mo ago

it depends on the assembly, astro has its own assembly, it converts it into a metadata object

ballingt•4mo ago

Got it, so to TypeScript this is an object of shape ImageMetadata. What is it at runtime? I need to learn some Astro

jCtapukOP•4mo ago

but since you have your own assembly, it picks up imports everywhere, even an image that it doesn’t know what to do with it. let it convene into the void for the backend the backend doesn’t need client resources 🙂

jCtapukOP•4mo ago

runtime client object metadata

ballingt•4mo ago

How does it figure these things out, would you need an esbuild plugin that analyzed these files? Or are you saying you wouldn't mind if these details were wrong, you just want to convince TypeScript that this is legal?

jCtapukOP•4mo ago

But you don’t need it, you could just fix a couple of codes in the unbuild assembly; if it sees the import image, let it ignore it so that it doesn’t end up in the packaging for the backend...

ballingt•4mo ago

Sounds good, so the problem here is TypeScript, not esbuild? Because you don't actually use these values, so they shouldn't be bundled, but you need to convince TYpeScript of this? If you don't need this metadata at runtime in Convex backend functions, could you avoid importing these images from convex directory files?

jCtapukOP•4mo ago

Well, typescript is enabled for astro, of course, so that I know its link 🙂 And for some reason the backend grabs it 🙂

ballingt•4mo ago

thank you for your patience here, trying to understand for future support for this kind of thing If you need to get this metadata for your backend functions then you need an esbuild plugin to do that, but if you just need to get TypeScript not to complain I think you could include these same astro/client.d.ts file you use for frontend compilation for the backend. But it scares me because although TypeScript will think it's there, it won't be there at runtime so I woudl prefer to avoid importing these in Convex directory files

jCtapukOP•4mo ago

example structure <root> - convex -- customer.ts

import { customers } from '../game/customer'
// converts customers to key union select "variant1"

import { customers } from '../game/customer'
// converts customers to key union select "variant1"

- game -- customer.ts

import ImageFont from '../src/assets/imageFont.png'
export const customers = {
 variant1: ImageFont
}

import ImageFont from '../src/assets/imageFont.png'
export const customers = {
 variant1: ImageFont
}

- src (astro) -- profile.astro (select key customer and get url image)

ballingt•4mo ago

It looks like you do need this metadata at runtime then?

jCtapukOP•4mo ago

not when you run the npx convex dev command, it grabs imports everywhere, even the image, which in the end scolds that the image cannot be loaded because your builder does not know what to do with the file along the .png path and scolds on typing that it will not build the project. And if I have to refuse import keys name which also has an import to the image, then I will have to manually specify the key name for the database because if I remember the builder has ignore properties: [".png"] this means that during assembly it will not read the image along the import path __ Otherwise, manually entering 500 keys is not a job) If I suddenly want to add a new image and key to the project, then I can also enter it manually in the backend. Or he could simply import the entire list of keys and let the image be empty for the backend, he doesn’t need to know

ballingt•4mo ago

In your example it looks like you need the metadata to be bundled in, is this example not right?

- convex
-- customer.ts
import { customers } from '../game/customer'
export const getCustomers = query(() => {
  return customers;
});

game
-- customer.ts
import ImageFont from '../src/assets/imageFont.png'
export const customers = {
 variant1: ImageFont
}

- convex
-- customer.ts
import { customers } from '../game/customer'
export const getCustomers = query(() => {
  return customers;
});

game
-- customer.ts
import ImageFont from '../src/assets/imageFont.png'
export const customers = {
 variant1: ImageFont
}

I'm confused about whether you need to ignore these imports or make them work, importing metadata I may not be understanding this part

// converts customers to key union select "variant1"

// converts customers to key union select "variant1"

Or he could simply import the entire list of keys

what is a "key", is this the path to the image? I'm confused about what a key is.

jCtapukOP•4mo ago

ballingt•4mo ago

Got it, ok so you do need the metadata bundled into your Convex functions. To support this we (Convex) needs to add a way to write/use esbuild plugins for Convex function bundling. There are no immediate plans for this but it's very helpful to here you need this. Do you know if there's an existing plugin for esbuild that does this, or if you'd have to write one? What bundler does astro use, how do they achieve this I wonder For now I would recommend writing a script to generate TypeScript based on the files you need (or doing it manually, as you point out this would be annoying)

jCtapukOP•4mo ago

@ballingt https://vitejs.dev/guide/assets well, astro assembles the assembly via vite and its plugin converts the path into metadata for unbuild I think you need to install the file-loader plugin I don’t remember But the point is not to get a link to the image, but to be able to ignore it for assembly, let it find imports only along the path *.ts *.js and let it ignore the image

jCtapukOP•4mo ago

I tried to add an exception for the image and it still complains

ballingt•4mo ago

that's not quite how "exclude" works, TypeScript will still follow the imports; you need to use something like that astro/client.d.ts file

But the point is not to get a link to the image, but to be able to ignore it for assembly, let it find imports only along the path .ts.js and let it ignore the image

This confuses me, the code you shared actually does the import! What would "ignoring the import" mean, when it's a variable that you use in your code?

jCtapukOP•4mo ago

Will it be possible for a convex one?

ballingt•4mo ago

Will what be possible? There are two things here, 1. setting up TypeScript types so that you won't get typechecking errors if you import a file that has these *.png-style imports from a convex directory file. This you can do today. As long as you don't use these values, esbuild should tree-shake them out. 2. actually importing them as metadata, or at least as a string. This isn't possible today, but I'm adding you to the list of people that have requested this feature.

ballingt•4mo ago

My understanding is that 1) is not enough for you, you actually need to do these imports: that's what this code says to me

ballingt•4mo ago

You can't ignore this import because you're using it in an object, you have to decide what BackgroundNormal1 is supposed to be.

jCtapukOP•4mo ago

astro import *.png convert to object

{
      src: '/@fs/workspaces/Astro-v2/src/assets/ground/normal-1.png?origWidth=32&origHeight=80&origFormat=png',
      width: 32,
      height: 80,
      format: 'png'
    }

{
      src: '/@fs/workspaces/Astro-v2/src/assets/ground/normal-1.png?origWidth=32&origHeight=80&origFormat=png',
      width: 32,
      height: 80,
      format: 'png'
    }

ballingt•4mo ago

Yeah that's 2) above, it's not possible today and if you need this in a convex file I suggest writing a script that generates these for you and importing from that

jCtapukOP•4mo ago

Well, for now I’ll manually enter the keys while there are few of them, but in the future it will come in handy.

ballingt•4mo ago

thanks for letting us know, bundler customization is on the radar

jCtapukOP•4mo ago

essentially you need to convert it to build ts to js

  const tutorial = {background: {
    layers: [
      image: "/assets/image.png" or undefined
    ]
  }
}

  const tutorial = {background: {
    layers: [
      image: "/assets/image.png" or undefined
    ]
  }
}

Let the assembler understand that it is importing an image and simply convention the formula as a path or set any And having access to the collector directly will be cool

ballingt•4mo ago

Yeah the bundler plugin that just transforms the import string would be very easy to write. The one that actually builds the image metadata would be a bit more involved but not bad.

jCtapukOP•4mo ago

Well, let there be a line 🙂 He doesn’t need to know the width and height

jCtapukOP•4mo ago

For now I'll drive manually 🙂