Support bundling HTML files and their js, css, and assets in Bun.build and bun build
#15940
Conversation
|
Updated 7:35 AM PT - Dec 22nd, 2024
✅ @Jarred-Sumner, your commit 1059b90 has passed in 🧪 try this PR locally: bunx bun-pr 15940 |
| @@ -9,7 +9,7 @@ | |||
| pub const DevServer = @This(); | |||
| pub const debug = bun.Output.Scoped(.Bake, false); | |||
| pub const igLog = bun.Output.scoped(.IncrementalGraph, false); | |||
|
|
|||
| const Chunk = @import("../bundler//bundle_v2.zig").Chunk; | |||
There was a problem hiding this comment.
avoid file imports if possible
const Chunk = bun.bundle_v2.Chunk
(move this at the end of the file)
| @@ -6036,6 +6113,12 @@ pub const LinkerContext = struct { | |||
| } | |||
| } | |||
|
|
|||
| if (experimental_html) { | |||
| for (html_chunks.values()) |*chunk| { | |||
| // a <link rel="modulepreload" href="..." crossorigin> tag that | ||
| // points to the module or chunk's unique key so that we tell the | ||
| // browser to preload the user's code. | ||
| // We might also want to force <!DOCTYPE html> at the top of the file, but I'm not sure about that yet. |
There was a problem hiding this comment.
its fine to take no action re:doctype
the one person who wants to bundle quirks mode html can do so
| } | ||
|
|
||
| pub fn onTag(this: *@This(), element: *lol.Element, path: []const u8, url_attribute: []const u8, kind: ImportKind) void { | ||
| _ = kind; // autofix |
There was a problem hiding this comment.
no autofix comments pls
remove the comment or make the parameter name _
| }, | ||
| // Catch-all for other links with href | ||
| .{ | ||
| .selector = "link:not([rel~='stylesheet']):not([rel~='modulepreload']):not([rel~='manifest']):not([rel~='icon']):not([rel~='apple-touch-icon'])[href]", |
There was a problem hiding this comment.
not 100% sure if this is a good idea.
| @@ -0,0 +1,297 @@ | |||
| const std = @import("std"); | |||
There was a problem hiding this comment.
whenever a file with a single struct is added, make that struct top-level and make the file name the name of that struct (html_scanner.zig to HTMLScanner.zig). when i do these, i then make one of the first line the text const StructName = @This() directly followed by the fields.
this pattern pairs really well with imports at the end of the file, so the start reads well
| expect(page1Css).toContain(".shared"); | ||
| expect(page2Css).toContain(".shared"); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
can a test that has a js entrypoint importing an html file be added
additionally a js file importing an html file importing the first js file
i assume these already work but would be good to have it tested
What does this PR do?
This lets you bundle HTML files in Bun. It uses
lol-htmlto parse and enqueue assets.Currently, elements matching the following selectors are considered for either bundling (if js/css) or copied when non-external:
script[src]link[rel='stylesheet'][href]link[as='style'][href]link[as='font'][href], link[type^='font/'][href]link[as='image'][href]link[as='video'][href], link[as='audio'][href]link[as='worker'][href]link[rel='manifest'][href]link[rel='icon'][href], link[rel='apple-touch-icon'][href]link:not([rel~='stylesheet']):not([rel~='modulepreload']):not([rel~='manifest']):not([rel~='icon']):not([rel~='apple-touch-icon'])[href]img[src]img[srcset]video[src]video[poster]audio[src]source[src]source[srcset]iframe[src]This list will probably change before this merges. It should probably be configurable.
How did you verify your code works?
There are tests.