feat: add baseURL support for client only setups (#28)

barelyhuman · web-flow · commit 0ed3eaf61476 · 2025-03-26T01:44:49.000+05:30
diff --git a/adex/runtime/client.js b/adex/runtime/client.js
@@ -6,27 +6,36 @@ import {
   lazy,
   hydrate as preactHydrate,
   ErrorBoundary,
+  join,
+  prerender as ssr,
 } from 'adex/router'
 
 import 'virtual:adex:global.css'
 
+const baseURL = import.meta.env.BASE_URL ?? '/'
+
+const normalizeURLPath = url => (url ? join(baseURL, url) : undefined)
+
 // @ts-expect-error injected by vite
 import { routes } from '~routes'
 
 function ComponentWrapper({ url = '' }) {
   return h(
     LocationProvider,
     //@ts-expect-error no types for non-jsx function
-    { url: url },
+    { url: normalizeURLPath(url) },
     h(
       ErrorBoundary,
       {},
       h(
         Router,
         {},
-        routes.map(d =>
-          h(Route, { path: d.routePath, component: lazy(d.module) })
-        )
+        routes.map(d => {
+          return h(Route, {
+            path: normalizeURLPath(d.routePath),
+            component: lazy(d.module),
+          })
+        })
       )
     )
   )
@@ -43,3 +52,14 @@ async function hydrate() {
 if (typeof window !== 'undefined') {
   hydrate()
 }
+
+export const prerender = async ({ url }) => {
+  const { html, links: discoveredLinks } = await ssr(
+    h(ComponentWrapper, { url: url })
+  )
+
+  return {
+    html,
+    links: new Set([...(discoveredLinks ?? [])]),
+  }
+}
diff --git a/adex/runtime/pages.js b/adex/runtime/pages.js
@@ -7,7 +7,7 @@ export const routes = normalizeRouteImports(pages, [
   '#{__PLUGIN_PAGES_ROOT_REGEX_REPLACER}',
 ])
 
-// taken from
+// major bits taken from
 // https://github.com/cyco130/smf/blob/c4b601f48cd3b3b71bea6d76b52b9a85800813e4/smf/shared.ts#L22
 // as it's decently tested and aligns to what we want for our routing
 function compareRoutePatterns(a, b) {
diff --git a/adex/src/router.d.ts b/adex/src/router.d.ts
@@ -7,4 +7,7 @@ export {
   ErrorBoundary,
   useLocation,
   useRoute,
+  prerender,
 } from 'preact-iso'
+
+export declare const join: (...args: string[]) => string
diff --git a/adex/src/router.js b/adex/src/router.js
@@ -7,4 +7,14 @@ export {
   LocationProvider,
   useLocation,
   useRoute,
+  prerender,
 } from 'preact-iso'
+
+export const join = (...parts) => {
+  if (parts.some(part => part == null)) {
+    throw new Error(
+      'Expected join to get valid paths, but received undefined or null'
+    )
+  }
+  return parts.join('/').replace(/\/{2,}/g, '/')
+}
diff --git a/adex/src/vite.js b/adex/src/vite.js
@@ -142,6 +142,7 @@ export function adex({
  * @returns {import("vite").Plugin}
  */
 function adexClientBuilder({ ssr = true, islands = false } = {}) {
+  let baseUrl = '/'
   return {
     name: 'adex-client-builder',
     config(cfg) {
@@ -162,6 +163,10 @@ function adexClientBuilder({ ssr = true, islands = false } = {}) {
         },
       }
     },
+    configResolved(cfg) {
+      baseUrl = cfg.base
+      return
+    },
     generateBundle(opts, bundle) {
       let clientEntryPath
       for (const key in bundle) {
@@ -178,7 +183,7 @@ function adexClientBuilder({ ssr = true, islands = false } = {}) {
         // @ts-expect-error invalid types by vite? figure this out
         ...(bundle[clientEntryPath]?.viteMetadata?.importedCss ?? new Set()),
       ].map(d => {
-        return `<link rel="stylesheet" href="/${d}" />`
+        return `<link rel="stylesheet" href="${join(baseUrl, d)}" />`
       })
 
       if (!ssr) {
@@ -191,7 +196,7 @@ function adexClientBuilder({ ssr = true, islands = false } = {}) {
             </head>
             <body>
               <div id="app"></div>
-              <script src="/${clientEntryPath}" type="module"></script>
+              <script src="${join(baseUrl, clientEntryPath)}" type="module"></script>
             </body>
           </html>`,
         })
diff --git a/playground/.islands/island-counter.js b/playground/.islands/island-counter.js
diff --git a/playground/src/pages/index.jsx b/playground/src/pages/index.jsx
@@ -14,6 +14,7 @@ export default function Page() {
         <a href="https://preactjs.com" target="_blank">
           <img src={'/vite.svg'} class="logo preact" alt="Preact logo" />
         </a>
+        <a href="/about">About</a>
       </div>
       <h1>Vite + Preact</h1>
       <div class="card">
