Use import assertions to allow importing random file types

[sergiodxa]

Right now, the Remix compiler needs to maintain a large list of file extensions to know how to deal with each type of file

remix/packages/remix-dev/compiler/loaders.ts

Lines 4 to 40 in fd00bc6

	export const loaders: { [ext: string]: esbuild.Loader } = {
	".aac": "file",
	".avif": "file",
	".css": "file",
	".eot": "file",
	".flac": "file",
	".gif": "file",
	".gql": "text",
	".graphql": "text",
	".ico": "file",
	".jpeg": "file",
	".jpg": "file",
	".js": "jsx",
	".jsx": "jsx",
	".json": "json",
	// We preprocess md and mdx files using XDM and send through
	// the JSX for esbuild to handle
	".md": "jsx",
	".mdx": "jsx",
	".mp3": "file",
	".mp4": "file",
	".ogg": "file",
	".otf": "file",
	".png": "file",
	".sql": "text",
	".svg": "file",
	".ts": "ts",
	".tsx": "tsx",
	".ttf": "file",
	".wav": "file",
	".webm": "file",
	".webmanifest": "file",
	".webp": "file",
	".woff": "file",
	".woff2": "file",
	".zip": "file",
	};

From what you can see there, files can be

• json (only used for .json files)
• file (to get a URL)
• text (to get the value as a string)
• jsx (to import them as code

I propose using, if possible, import assertions to let users configure that, limited probably to the types file and text.

import query from "~/queries/get-user.gql" assert { type: "text" }

export async function loader() {
  let data = await runGraphQLQuery(query)
  return json(data)
}

This should import the file ~/queries/get-user.gql and give me the content as string

We can use it to also import more file types, for example a SQL query

import query from "~/queries/report.sql" assert { type: "text" }

export async function loader() {
  let data = await db(query)
  let pdf = await generatePDF(data)
  return new Response(pdf, {
    headers: {
      "Content-Type": "application/pdf"
    }
  })
}

Or an example someone brought in the Discord

import shader from "~/file.glsl" assert { type: "text" }
// use it somehow with WebGL

Or if we want to get a URL import as file:

import webWorker from "~/web-worker.js" assert { type: "file" }

// inside a component
useEffect(() => {
  let worker = new Worker(webWorker)
}, [])

In this case, we're telling the compiler that the file ~/web-worker.js should be treated not as a JS module but as a file, so it will move it to the build directory and give us back the hashed URL allowing developer to import JS files that WebWorkers, Service Workers or files they need to pass to a script tag.

The whole idea is to let developers import random files and get their content or hashed URL without having Remix to manually add them to the list of loaders and

[sergiodxa]

As a sub-idea of this, Remix could provide more types like a type image to opt-in into build-time image optimization

// gives you the hashed URL without any optimization like usual
import heroImage from "~/assets/hero.jpg"
// gives you the hashed URL with optimizations in place
import heroImage from "~/assets/hero.jpg" assert { type: "image" }

Using import evaluator attributes it could allow customizations too

import heroImage from "~/assets/hero.jpg" assert { type: "image" } with {
  quality: 80,
  srcSet: [720,1080, 2048],
  placeholder: true
};

Another option could be to use this with WebWorkers

import worker from "~/workers/foo.js" assert { type: "worker" }
// somewhere client-side
worker.postMessage(value)

So Remix could provide different loaders and let developers, using import assertions, specify which want to use on each import.

[machour]

This have been formalized in #4549