feat: flag to turn off ssr (#26)

* chore: be able to turn off ssr if needed

* chore: remove comments

* feat: client first (#25)

* feat: move it to be client first instead of server first

* fix: builds for islands

Author: barelyhuman

adex/package.json

@@ -17,6 +17,14 @@
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
+    "./router": {
+      "types": "./src/router.d.ts",
+      "import": "./src/router.js"
+    },
+    "./utils/isomorphic": {
+      "types": "./src/utils/isomorphic.d.ts",
+      "import": "./src/utils/isomorphic.js"
+    },
     "./ssr": {
       "types": "./src/ssr.d.ts",
       "import": "./src/ssr.js"
@@ -61,6 +69,7 @@
     "hoofd": "^1.7.1",
     "mri": "^1.2.0",
     "node-stream-zip": "^1.15.0",
+    "preact-iso": "^2.9.0",
     "preact-render-to-string": "^6.5.5",
     "regexparam": "^3.0.0",
     "sirv": "^2.0.4",

adex/runtime/client.js

@@ -1,20 +1,51 @@
-import { hydrate as preactHydrate, h } from 'preact'
+import { h } from 'preact'
+import {
+  LocationProvider,
+  Router,
+  Route,
+  lazy,
+  hydrate as preactHydrate,
+  ErrorBoundary,
+} from 'adex/router'
+
 import 'virtual:adex:global.css'
 
-const pageRoutes = import.meta.glob('/src/pages/**/*.{tsx,jsx,js}')
+// @ts-expect-error injected by vite
+import { routes } from '~routes'
 
-async function hydrate() {
-  const entryPage = document.getElementById('app').dataset.entryPage
-  const routeParams = document.getElementById('app').dataset.routeParams
-  const componentModule = await pageRoutes[entryPage]()
-  const Component =
-    'default' in componentModule ? componentModule.default : componentModule
-  preactHydrate(
-    h(Component, {
-      routeParams: routeParams ? JSON.parse(atob(routeParams)) : {},
-    }),
-    document.getElementById('app')
+const withComponents = routes.map(d => {
+  return {
+    ...d,
+    component: lazy(d.module),
+  }
+})
+
+function ComponentWrapper({ url = '' }) {
+  return h(
+    LocationProvider,
+    //@ts-expect-error no types for non-jsx function
+    { url: url },
+    h(
+      ErrorBoundary,
+      {},
+      h(
+        Router,
+        {},
+        withComponents.map(d =>
+          h(Route, { path: d.routePath, component: d.component })
+        )
+      )
+    )
   )
 }
 
-hydrate()
+export const App = ({ url = '' }) => {
+  return h(ComponentWrapper, { url })
+}
+
+async function hydrate() {
+  preactHydrate(h(ComponentWrapper, {}), document.getElementById('app'))
+}
+if (typeof window !== 'undefined') {
+  hydrate()
+}

adex/runtime/handler.js

@@ -1,8 +1,12 @@
 import { CONSTANTS, emitToHooked } from 'adex/hook'
 import { prepareRequest, prepareResponse } from 'adex/http'
-import { renderToString, toStatic } from 'adex/ssr'
+import { toStatic } from 'adex/ssr'
+import { renderToString } from 'adex/utils/isomorphic'
 import { h } from 'preact'
 
+// @ts-expect-error injected by vite
+import { App } from 'virtual:adex:client'
+
 // @ts-expect-error injected by vite
 import { routes as apiRoutes } from '~apiRoutes'
 // @ts-expect-error injected by vite
@@ -16,7 +20,8 @@ export async function handler(req, res) {
   prepareRequest(req)
   prepareResponse(res)
 
-  const [baseURL] = req.url.split('?')
+  const [url, search] = req.url.split('?')
+  const baseURL = normalizeRequestUrl(url)
 
   const { metas, links, title, lang } = toStatic()
 
@@ -50,10 +55,15 @@ export async function handler(req, res) {
   })
 
   if (matchedInPages) {
-    const module = await matchedInPages.module()
-    const render = 'default' in module ? module.default : module
     const routeParams = getRouteParams(baseURL, matchedInPages)
 
+    // @ts-expect-error
+    global.location = new URL(req.url, 'http://localhost')
+
+    const rendered = await renderToString(
+      h(App, { url: [baseURL, search].filter(Boolean).join('?') })
+    )
+
     const htmlString = HTMLTemplate({
       metas,
       links,
@@ -63,7 +73,7 @@ export async function handler(req, res) {
       routeParams: Buffer.from(JSON.stringify(routeParams), 'utf8').toString(
         'base64'
       ),
-      body: renderToString(h(render, { routeParams })),
+      body: rendered.html,
     })
     const modifiableContext = {
       req: req,
@@ -105,13 +115,7 @@ function HTMLTemplate({
         ${headString}
       </head>
       <body>
-        <div
-          id="app"
-          data-entry-page="${entryPage}"
-          data-route-params="${routeParams}"
-        >
-          ${body}
-        </div>
+        <div id="app">${body}</div>
       </body>
     </html>
   `
@@ -146,3 +150,7 @@ const stringify = (title, metas, links) => {
     ${stringifyTag('link', links)}
   `
 }
+
+function normalizeRequestUrl(url) {
+  return url.replace(/\/(index\.html)$/, '/')
+}

adex/runtime/pages.js

@@ -1,4 +1,4 @@
-import { pathToRegex } from 'adex/ssr'
+import { pathToRegex } from 'adex/utils/isomorphic'
 
 const pages = import.meta.glob('#{__PLUGIN_PAGES_ROOT}')
 

adex/src/fonts.js

@@ -49,7 +49,7 @@ export function fonts({ providers = [], families = [] } = {}) {
     },
     async transform(code, id) {
       const resolvedData = await this.resolve('virtual:adex:client')
-      if (id === resolvedData.id) {
+      if (resolvedData?.id == id) {
         return {
           code: `import "${fontVirtualId}";\n` + code,
         }

adex/src/router.d.ts

@@ -0,0 +1,8 @@
+export {
+  hydrate,
+  Router,
+  Route,
+  lazy,
+  LocationProvider,
+  ErrorBoundary,
+} from 'preact-iso'

adex/src/router.js

@@ -0,0 +1,8 @@
+export {
+  hydrate,
+  Router,
+  ErrorBoundary,
+  Route,
+  lazy,
+  LocationProvider,
+} from 'preact-iso'

adex/src/ssr.d.ts

@@ -1,6 +1,4 @@
 export { toStatic } from 'hoofd/preact'
-export { renderToString } from 'preact-render-to-string'
-export { parse as pathToRegex } from 'regexparam'
 export { use as useMiddleware } from '@barelyhuman/tiny-use'
 export { default as sirv } from 'sirv'
-export { default as mri } from 'mri'
+export { default as mri } from 'mri'

adex/src/ssr.js

@@ -1,6 +1,5 @@
-export { renderToString } from 'preact-render-to-string'
+export { prerender as renderToString } from 'preact-iso'
 export { default as sirv } from 'sirv'
 export { default as mri } from 'mri'
-export { parse as pathToRegex } from 'regexparam'
 export { toStatic } from 'hoofd/preact'
 export { use as useMiddleware } from '@barelyhuman/tiny-use'

adex/src/utils/isomorphic.js

@@ -0,0 +1,2 @@
+export { parse as pathToRegex } from 'regexparam'
+export { prerender as renderToString } from 'preact-iso'