feat: ofetch integration

Author: barelyhuman

adex/package.json

@@ -21,6 +21,9 @@
       "types": "./src/ssr.d.ts",
       "import": "./src/ssr.js"
     },
+    "./types": {
+      "types": "./types.d.ts"
+    },
     "./head": {
       "types": "./src/head.d.ts",
       "import": "./src/head.js"
@@ -61,11 +64,13 @@
     "hoofd": "^1.7.1",
     "mri": "^1.2.0",
     "node-stream-zip": "^1.15.0",
+    "ofetch": "^1.4.1",
     "preact-render-to-string": "^6.5.5",
     "regexparam": "^3.0.0",
     "sirv": "^2.0.4",
     "trouter": "^4.0.0",
-    "unifont": "^0.0.2"
+    "unifont": "^0.0.2",
+    "unimport": "^4.0.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.8.2",

adex/runtime/fetch.js

@@ -0,0 +1,16 @@
+import { ofetch as _ofetch } from 'ofetch'
+import { env } from 'adex/env'
+
+const constructBaseURL = () => {
+  if (import.meta.server) {
+    const origin = env.get('HOST', 'localhost')
+    const port = env.get('PORT', '3000')
+    return new URL(`http:${origin}${port ? `:${port}` : ''}`).toString()
+  }
+  return window.location.toString()
+}
+
+const baseURL = constructBaseURL()
+export const $fetch = _ofetch.create({
+  baseURL: baseURL,
+})

adex/src/env.js

@@ -1,16 +1,17 @@
-const isClient = typeof window !== 'undefined'
+export const env = {}
 
-if (isClient) {
-  throw new Error('[adex] Cannot use/import `adex/env` on the client side')
-}
-
-export const env = {
-  get(key, defaultValue = '') {
-    if (isClient) return ''
+if (import.meta.server) {
+  env.get = (key, defaultValue = '') => {
     return process.env[key] ?? defaultValue
-  },
-  set(key, value) {
-    if (isClient) return ''
+  }
+  env.set = (key, value) => {
     return (process.env[key] = value)
-  },
+  }
+} else {
+  env.get = (key, defaultValue = '') => {
+    return import.meta.env[key] ?? defaultValue
+  }
+  env.set = (key, value) => {
+    return (import.meta.env[key] = value)
+  }
 }

adex/src/ssr.d.ts

@@ -3,4 +3,4 @@ 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/vite.js

@@ -9,6 +9,7 @@ import {
   isFunctionIsland,
   readSourceFile,
 } from '@dumbjs/preland'
+import Unimport from 'unimport/unplugin'
 import { addImportToAST, codeFromAST } from '@dumbjs/preland/ast'
 import preact from '@preact/preset-vite'
 import { mkdirSync, readFileSync, writeFileSync } from 'fs'
@@ -37,6 +38,7 @@ export function adex({
   adapter: adapter = 'node',
 } = {}) {
   return [
+    adexConfig(),
     preactPages({
       root: '/src/pages',
       id: '~routes',
@@ -61,15 +63,15 @@ export function adex({
       import { dirname, join } from 'node:path'
       import { fileURLToPath } from 'node:url'
       import { existsSync, readFileSync } from 'node:fs'
-      import { env } from 'adex/env'
+      import {env} from "adex/env"
 
       import 'virtual:adex:font.css'
       import 'virtual:adex:global.css'
       
       const __dirname = dirname(fileURLToPath(import.meta.url))
 
-      const PORT = parseInt(env.get('PORT', '3000'), 10)
-      const HOST = env.get('HOST', 'localhost')
+      const PORT = parseInt(env.get("PORT","3000"))
+      const HOST = env.get("HOST","localhost") 
 
       const paths = {
         assets: join(__dirname, './assets'),
@@ -128,7 +130,6 @@ export function adex({
     adexServerBuilder({ islands }),
     !islands && adexClientBuilder(),
     islands && adexIslandsBuilder(),
-    ...adexGuards(),
   ]
 }
 
@@ -212,6 +213,10 @@ function adexIslandsBuilder() {
           await build({
             configFile: false,
             plugins: [preact()],
+            define: {
+              'import.meta.server': false,
+              'import.meta.client': true,
+            },
             build: {
               ssr: false,
               outDir: join(outDir, 'islands'),
@@ -346,6 +351,10 @@ function adexClientBuilder() {
             ),
             preact({ prefreshEnabled: false }),
           ],
+          define: {
+            'import.meta.client': true,
+            'import.meta.server': false,
+          },
           build: {
             outDir: 'dist/client',
             emptyOutDir: true,
@@ -388,8 +397,12 @@ function adexServerBuilder({ islands = false } = {}) {
       return {
         appType: 'custom',
         ssr: {
-          external: ['preact', 'adex', 'preact-render-to-string'],
-          noExternal: Object.values(adapterMap),
+          external: ['preact', 'preact-render-to-string'],
+          noExternal: Object.values(adapterMap).concat('adex/env'),
+        },
+        define: {
+          'import.meta.server': true,
+          'import.meta.client': false,
         },
         build: {
           outDir: 'dist/server',
@@ -479,45 +492,32 @@ function adexServerBuilder({ islands = false } = {}) {
 /**
  * @returns {import("vite").Plugin[]}
  */
-function adexGuards() {
+function adexConfig() {
   return [
+    // @ts-expect-error something wrong wrong
+    Unimport.vite({
+      imports: [
+        {
+          name: '$fetch',
+          from: fileURLToPath(new URL('../runtime/fetch.js', import.meta.url)),
+        },
+      ],
+    }),
     {
-      name: 'adex-guard-env',
+      name: 'adex-config',
       enforce: 'pre',
-      async transform(code, id) {
-        // ignore usage of `process.env` in node_modules
-        // Still risky but hard to do anything about
-        const nodeMods = resolve(cwd, 'node_modules')
-        if (id.startsWith(nodeMods)) return
-
-        // ignore usage of `process.env` in `adex/env`
-        const envLoadId = await this.resolve('adex/env')
-        if (id === envLoadId.id) return
-
-        if (code.includes('process.env')) {
-          this.error(
-            'Avoid using `process.env` to access environment variables and secrets. Use `adex/env` instead'
-          )
-        }
-      },
-      writeBundle() {
-        const pagesPath = resolve(cwd, 'src/pages')
-        const info = this.getModuleInfo('adex/env')
-        const viteRef = this
-
-        function checkTree(importPath, importStack = []) {
-          if (importPath.startsWith(pagesPath)) {
-            throw new Error(
-              `Cannot use/import \`adex/env\` on the client side, importerStack: ${importStack.join(' -> ')}`
-            )
-          }
-          viteRef
-            .getModuleInfo(importPath)
-            .importers.forEach(d =>
-              checkTree(d, [...importStack, importPath, d])
-            )
+      config() {
+        return {
+          server: {
+            port: 3000,
+          },
+          define: {
+            'import.meta.env.PORT': JSON.stringify(process.env.PORT ?? '3000'),
+            'import.meta.env.HOST': JSON.stringify(
+              process.env.HOST ?? 'localhost'
+            ),
+          },
         }
-        info.importers.forEach(i => checkTree(i))
       },
     },
   ]

adex/types.d.ts

@@ -0,0 +1,4 @@
+interface ImportMeta {
+  readonly server: boolean
+  readonly client: boolean
+}