Include non-JS assets in esbuild bundles

[shosti]

🚀 feature request

Relevant Rules

• esbuild
• ts_library

Description

esbuild has the ability to load non-JavaScript assets such as CSS and binary files. It would be awesome if this were exposed to Bazel (if it is currently possible, I can't figure out a way).

Describe the solution you'd like

Probably the most intuitive way would be to include assets in the srcs or data section of ts_library. So if you had a main.tsx file that looked like:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

ReactDOM.render(<h1>Hello!</h1>, document.getElementById("root"));

with related CSS in index.css, the relevant rules could be something like:

ts_library(
    name = "lib",
    srcs = ["main.tsx"],
    data = ["index.css"],
    deps = [
        "@npm//react",
        "@npm//react-dom",
        "@npm//@types/react",
        "@npm//@types/react-dom",
    ],
)

esbuild(
    name = "bundle",
    entry_point = "main.tsx",
    deps = [
        ":lib",
    ],
    ...
)

(This setup currently produces an error like Could not resolve "./index.css".)

Describe alternatives you've considered

The only alternative I know of is to have CSS/other assets completely separate from the bundling pipeline, which seems less than ideal.

[mattem]

I think this is partly covered by #2545, but it should handle pulling through the data dependencies

[mattem]

output_css is now landed at HEAD via #2545. Will keep this open for the binary support if possible, haven't investigated yet.

[jaronsummers]

Is there a way to do this for a more general use case? I have a json file that is generated at build time, and I want it included as part of the ts_library outputs, and it's not entirely obvious to me how to do that. the naive approach of wrapping the ts_library in a filegroup doesn't seem to work, because ts_library's output is a struct with a number of expected attributes on it.

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions]

This issue was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"