fix: non js assets path should add config.basePath to be relative to …

…root path (#697)

Solve #649.

I did some research based on #674.
The root cause is that css path in html missing / so that when brower
try to join the real path, it will use the current path instead of root
path.

![CleanShot 2024-05-05 at 00 44
55@2x](https://github.com/dai-shi/waku/assets/24316656/55ac214d-b5c9-49ed-9e67-95b59ed837b8)

![CleanShot 2024-05-05 at 00 45
27@2x](https://github.com/dai-shi/waku/assets/24316656/40021aeb-acbe-4f07-ac9f-79e9d7ebaa2a)

packages/waku/src/lib/builder/build.ts

@@ -514,7 +514,10 @@ const emitHtmlFiles = async (
         let htmlHead = publicIndexHtmlHead;
         if (cssAssets.length) {
           const cssStr = cssAssets
-            .map((asset) => `<link rel="stylesheet" href="${asset}">`)
+            .map(
+              (asset) =>
+                `<link rel="stylesheet" href="${config.basePath}${asset}">`,
+            )
             .join('\n');
           // HACK is this too naive to inject style code?
           htmlStr = htmlStr.replace(/<\/head>/, cssStr);

packages/waku/src/lib/plugins/vite-plugin-rsc-index.ts

@@ -79,17 +79,14 @@ ${opts.htmlHead}
     },
     transformIndexHtml() {
       return [
-        // HACK without <base>, some relative assets don't work.
-        // FIXME ideally, we should avoid this.
-        { tag: 'base', attrs: { href: opts.basePath } },
         {
           tag: 'script',
           attrs: { type: 'module', async: true },
           children: codeToInject,
         },
         ...(opts.cssAssets || []).map((href) => ({
           tag: 'link',
-          attrs: { rel: 'stylesheet', href },
+          attrs: { rel: 'stylesheet', href: `${opts.basePath}${href}` },
           injectTo: 'head' as const,
         })),
       ];