fix(vite): asset handling (#3225)

This PR reworks asset handling in our vite plugin. Importing assets in
js is now supported.

Author: marvinhagemeister

deno.lock

@@ -19,6 +19,7 @@ export interface BuildSnapshot<State> {
   fsRoutes: FsRouteFile<State>[];
   staticFiles: Map<string, FileSnapshot>;
   islands: ServerIslandRegistry;
+  entryAssets: string[];
 }
 
 export interface StaticFile {
@@ -39,6 +40,7 @@ export interface BuildCache<State = any> {
   };
   getFsRoutes(): Command<State>[];
   readFile(pathname: string): Promise<StaticFile | null>;
+  getEntryAssets(): string[];
 }
 
 export class ProdBuildCache<State> implements BuildCache<State> {
@@ -54,6 +56,10 @@ export class ProdBuildCache<State> implements BuildCache<State> {
     this.clientEntry = snapshot.clientEntry;
   }
 
+  getEntryAssets(): string[] {
+    return this.#snapshot.entryAssets;
+  }
+
   getFsRoutes(): Command<State>[] {
     return fsItemsToCommands(this.#snapshot.fsRoutes);
   }

packages/fresh/src/build_cache.ts

@@ -8,3 +8,5 @@ export const MINUTE = SECOND * 60;
 export const HOUR = MINUTE * 60;
 export const DAY = HOUR * 24;
 export const WEEK = DAY * 7;
+
+export const ASSET_CACHE_BUST_KEY = "__frsh_c";

packages/fresh/src/constants.ts

@@ -81,6 +81,10 @@ export class MemoryBuildCache<State> implements DevBuildCache<State> {
     this.clientEntry = getClientEntry(config.buildId);
   }
 
+  getEntryAssets(): string[] {
+    return [];
+  }
+
   getFsRoutes(): Command<State>[] {
     return this.#commands;
   }
@@ -247,6 +251,10 @@ export class DiskBuildCache<State> implements DevBuildCache<State> {
     this.root = config.root;
   }
 
+  getEntryAssets(): string[] {
+    return [];
+  }
+
   getFsRoutes(): Command<State>[] {
     return [];
   }
@@ -357,6 +365,7 @@ export class DiskBuildCache<State> implements DevBuildCache<State> {
         },
         fsRoutesFiles: this.#fsRoutes.files,
         outDir: root,
+        entryAssets: [],
       }),
     );
 
@@ -422,6 +431,7 @@ export async function generateSnapshotServer(
     // deno-lint-ignore no-explicit-any
     fsRoutesFiles: FsRouteFileNoMod<any>[];
     staticFiles: PendingStaticFile[];
+    entryAssets: string[];
     writeSpecifier: (filePath: string) => string;
   },
 ): Promise<string> {
@@ -475,21 +485,13 @@ export async function generateSnapshotServer(
 
   const staticFiles = await Promise.all(
     options.staticFiles.map(async (item) => {
-      const file = await Deno.open(item.filePath);
-      const hash = item.hash ? item.hash : await hashContent(file.readable);
-      const url = new URL(item.pathname, "http://localhost");
-
-      return {
-        name: url.pathname,
-        hash,
-        filePath: path.isAbsolute(item.filePath)
-          ? path.relative(outDir, item.filePath)
-          : item.filePath,
-        contentType: getContentType(item.filePath),
-      };
+      return await prepareStaticFile(item, outDir);
     }),
   );
 
+  const entryAssets = options.entryAssets.map((url) => JSON.stringify(url))
+    .join(",\n");
+
   return `${EDIT_WARNING}
 import { IslandPreparer } from "fresh/internal";
 ${islandImports}
@@ -510,12 +512,34 @@ ${
   }
 ]);
 
+export const entryAssets = [${entryAssets}];
+
 export const fsRoutes = [
 ${serializedFsRoutes}
 ];
 `.replaceAll(/\n[\n]+/g, "\n\n");
 }
 
+export async function prepareStaticFile(
+  item: PendingStaticFile,
+  outDir: string,
+): Promise<
+  { name: string; hash: string; filePath: string; contentType: string }
+> {
+  const file = await Deno.open(item.filePath);
+  const hash = item.hash ? item.hash : await hashContent(file.readable);
+  const url = new URL(item.pathname, "http://localhost");
+
+  return {
+    name: url.pathname,
+    hash,
+    filePath: path.isAbsolute(item.filePath)
+      ? path.relative(outDir, item.filePath)
+      : item.filePath,
+    contentType: getContentType(item.filePath),
+  };
+}
+
 export function generateServerEntry(
   options: {
     root: string;