The Stem Vision

[brillout]

The Stem Vision

Step 1: Universal Handler

Basically, what the Universal Handler project is about:

import { renderPage } from 'vike/server'
import { telefunc } from 'telefunc'

const handlers = [
  // Vike
  async (req, ctx) => {
    const pageContextInit = { urlOriginal: req.url, ...ctx }
    const pageContext = await renderPage(pageContextInit)
    const resp = pageContext.httpResponse
    if (!resp) return null
    return new Response(await resp.getBody(), {
      status: resp.statusCode,
      headers: resp.headers
    })
  },
  // Telefunc
  async (req, ctx) => {
    const resp = await telefunc({
      url: req.url,
      method: req.method,
      body: req.body,
      context: ctx
    })
    return new Response(resp.body, {
      status: resp.statusCode,
      headers: resp.headers
    })
  }
]

// Express.js
import express from 'express'
import unhandler from 'unhandler/express'
const app = express()
app.use(unhandler(handlers))

// Hono
import { Hono } from 'hono'
import unhandler from 'unhandler/hono'
const app = new Hono()
app.use(unhandler(handlers))

Enabling Bati to write handlers/middlewares only once.

Note that the code of universal handlers live in user land.

Step 2: Built-in integrations

- import { renderPage } from 'vike/server'
- import { telefunc } from 'telefunc'
+ import vike from 'vike/unhandler'
+ import telefunc from 'telefunc/unhandler'

+ const handlers = [vike, telefunc]
- const handlers = [
-   // Vike
-   async (req, ctx) => {
-     const pageContextInit = { urlOriginal: req.url, ...ctx }
-     const pageContext = await renderPage(pageContextInit)
-     const resp = pageContext.httpResponse
-     if (!resp) return null
-     return new Response(await resp.getBody(), {
-       status: resp.statusCode,
-       headers: resp.headers
-     })
-   },
-   // Telefunc
-   async (req, ctx) => {
-     const resp = await telefunc({
-       url: req.url,
-       method: req.method,
-       body: req.body,
-       context: ctx
-     })
-     return new Response(resp.body, {
-       status: resp.statusCode,
-       headers: resp.headers
-     })
-   }
- ]

  import express from 'express'
  import unhandler from 'unhandler/express'
  const app = express()
  app.use(unhandler(handlers))

Step 3: Eject

The user can $ eject server vike and $ eject server telefunc in order to move vike/unhandler and telefunc/unhandler into the user-land.

Maybe this isn't needed: maybe the universal handlers can be so good that users only seldomly want to eject. If they do, they can eject manually. Let's see.

Step 4: No-code

- import vike from 'vike/unhandler'
- import telefunc from 'telefunc/unhandler'

- const handlers = [vike, telefunc]

- import express from 'express'
- import unhandler from 'unhandler/express'
- const app = express()
- app.use(unhandler(handlers))

Hiding the whole server code from the user while the user can $ eject server.

Not only zero-config, but even no-code.

Step 5: Other kinds of glue code

Same idea, but for "Universal Emailing", "Universal ORM", etc.

Essentially replicating WordPress in a Software Engineer friendly way. A no-code platform for business users, with ejectable code if the business ends up hiring Software Engineers for customization.

It will take us a while to get there, but the neat thing is that the Universal Handler project gets us one step closer.

AFAICT the Stem vision doesn't affect the Universal Handler project, while Stem will be based on it. (In other words: we keep Stem constituents neatly modular.)