acrylblends 0.6.1 → 0.6.3

package/plugins/acryl-router/src/core/middleware/mount/index.ts

@@ -0,0 +1,108 @@
+/**
+ * @module
+ * Mount Helper for Acryl.
+ */
+
+import type { Context, ExecutionContext } from '../../context.ts'
+import { routePath } from '../../helper/route/index.ts'
+import type { MiddlewareHandler } from '../../types.ts'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ApplicationHandler = (request: Request, ...args: any) => Response | Promise<Response>
+type MountOptionHandler = (c: Context) => unknown
+type MountReplaceRequest = (originalRequest: Request) => Request
+type MountOptions =
+  | MountOptionHandler
+  | {
+      optionHandler?: MountOptionHandler
+      replaceRequest?: MountReplaceRequest | false
+    }
+
+const defaultReplaceRequest = (c: Context): Request => {
+  // e.g. `/another-app/*` (basePath is already merged) -> `/another-app`
+  const pathPrefix = routePath(c).replace(/\/\*$/, '')
+  const url = new URL(c.req.raw.url)
+  url.pathname = c.req.path.slice(pathPrefix.length) || '/'
+  return new Request(url, c.req.raw)
+}
+
+const defaultGetOptions = (c: Context): unknown[] => {
+  let executionContext: ExecutionContext | undefined = undefined
+  try {
+    executionContext = c.executionCtx
+  } catch {} // Do nothing
+  return [c.env, executionContext]
+}
+
+/**
+ * `mount()` allows you to mount applications built with other frameworks into your Acryl application.
+ *
+ *
+ * @param {Function} applicationHandler - other Request Handler
+ * @param {MountOptions} [options] - options of `mount()`
+ * @returns {MiddlewareHandler} handler to register with `app.all()`
+ *
+ * @example
+ * ```ts
+ * import { Router as IttyRouter } from 'itty-router'
+ * import { Acryl } from 'acrylblends'
+ * import { mount } from 'acrylblends/mount'
+ * // Create itty-router application
+ * const ittyRouter = IttyRouter()
+ * // GET /itty-router/hello
+ * ittyRouter.get('/hello', () => new Response('Hello from itty-router'))
+ *
+ * const app = new Acryl()
+ * app.all('/itty-router/*', mount(ittyRouter.handle))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const app = new Acryl()
+ * // Send the request to another application without modification.
+ * app.all('/app/*', mount(anotherApp, {
+ *   replaceRequest: (req) => req,
+ * }))
+ * ```
+ */
+export const mount = (
+  applicationHandler: ApplicationHandler,
+  options?: MountOptions
+): MiddlewareHandler => {
+  // handle options
+  let replaceRequest: MountReplaceRequest | undefined
+  let optionHandler: MountOptionHandler | undefined
+  if (options) {
+    if (typeof options === 'function') {
+      optionHandler = options
+    } else {
+      optionHandler = options.optionHandler
+      if (options.replaceRequest === false) {
+        replaceRequest = (request) => request
+      } else {
+        replaceRequest = options.replaceRequest
+      }
+    }
+  }
+
+  // prepare handlers for request
+  const getOptions: (c: Context) => unknown[] = optionHandler
+    ? (c) => {
+        const options = optionHandler!(c)
+        return Array.isArray(options) ? options : [options]
+      }
+    : defaultGetOptions
+
+  return async (c, next) => {
+    const request = replaceRequest ? replaceRequest(c.req.raw) : defaultReplaceRequest(c)
+    const res = await applicationHandler(request, ...getOptions(c))
+
+    if (res) {
+      return res
+    }
+
+    await next()
+  }
+}
+
+export type { ApplicationHandler, MountOptionHandler, MountReplaceRequest, MountOptions }

package/plugins/acryl-router/src/core/preset/quick.test.ts

@@ -0,0 +1,42 @@
+import { getRouterName } from '../helper/dev/index.ts'
+import { Acryl } from './quick.ts'
+
+describe('acryl-router/quick preset', () => {
+  it('Should have SmartRouter + LinearRouter', async () => {
+    const app = new Acryl()
+    expect(getRouterName(app)).toBe('SmartRouter + LinearRouter')
+  })
+})
+
+describe('Generics for Bindings and Variables', () => {
+  interface CloudflareBindings {
+    MY_VARIABLE: string
+  }
+
+  it('Should not throw type errors', () => {
+    // @ts-expect-error Bindings should extend object
+    new Acryl<{
+      Bindings: number
+    }>()
+
+    const appWithInterface = new Acryl<{
+      Bindings: CloudflareBindings
+    }>()
+
+    appWithInterface.get('/', (c) => {
+      expectTypeOf(c.env.MY_VARIABLE).toMatchTypeOf<string>()
+      return c.text('/')
+    })
+
+    const appWithType = new Acryl<{
+      Bindings: {
+        foo: string
+      }
+    }>()
+
+    appWithType.get('/', (c) => {
+      expectTypeOf(c.env.foo).toMatchTypeOf<string>()
+      return c.text('Hello Acryl!')
+    })
+  })
+})

package/plugins/acryl-router/src/core/preset/quick.ts

@@ -0,0 +1,24 @@
+/**
+ * @module
+ * The preset that uses `LinearRouter`.
+ */
+
+import { AcrylBase } from '../app-base.ts'
+import type { AcrylOptions } from '../app-base.ts'
+import { LinearRouter } from '../router/linear-router/index.ts'
+import { SmartRouter } from '../router/smart-router/index.ts'
+import { TrieRouter } from '../router/trie-router/index.ts'
+import type { BlankEnv, BlankSchema, Env, Schema } from '../types.ts'
+
+export class Acryl<
+  E extends Env = BlankEnv,
+  S extends Schema = BlankSchema,
+  BasePath extends string = '/',
+> extends AcrylBase<E, S, BasePath> {
+  constructor(options: AcrylOptions<E> = {}) {
+    super(options)
+    this.router = new SmartRouter({
+      routers: [new LinearRouter(), new TrieRouter()],
+    })
+  }
+}

package/plugins/acryl-router/src/core/preset/tiny.test.ts

@@ -0,0 +1,42 @@
+import { getRouterName } from '../helper/dev/index.ts'
+import { Acryl } from './tiny.ts'
+
+describe('acryl-router/tiny preset', () => {
+  it('Should have PatternRouter', async () => {
+    const app = new Acryl()
+    expect(getRouterName(app)).toBe('PatternRouter')
+  })
+})
+
+describe('Generics for Bindings and Variables', () => {
+  interface CloudflareBindings {
+    MY_VARIABLE: string
+  }
+
+  it('Should not throw type errors', () => {
+    // @ts-expect-error Bindings should extend object
+    new Acryl<{
+      Bindings: number
+    }>()
+
+    const appWithInterface = new Acryl<{
+      Bindings: CloudflareBindings
+    }>()
+
+    appWithInterface.get('/', (c) => {
+      expectTypeOf(c.env.MY_VARIABLE).toMatchTypeOf<string>()
+      return c.text('/')
+    })
+
+    const appWithType = new Acryl<{
+      Bindings: {
+        foo: string
+      }
+    }>()
+
+    appWithType.get('/', (c) => {
+      expectTypeOf(c.env.foo).toMatchTypeOf<string>()
+      return c.text('Hello Acryl!')
+    })
+  })
+})

package/plugins/acryl-router/src/core/preset/tiny.ts

@@ -0,0 +1,20 @@
+/**
+ * @module
+ * The preset that uses `PatternRouter`.
+ */
+
+import { AcrylBase } from '../app-base.ts'
+import type { AcrylOptions } from '../app-base.ts'
+import { PatternRouter } from '../router/pattern-router/index.ts'
+import type { BlankEnv, BlankSchema, Env, Schema } from '../types.ts'
+
+export class Acryl<
+  E extends Env = BlankEnv,
+  S extends Schema = BlankSchema,
+  BasePath extends string = '/',
+> extends AcrylBase<E, S, BasePath> {
+  constructor(options: AcrylOptions<E> = {}) {
+    super(options)
+    this.router = new PatternRouter()
+  }
+}

package/plugins/acryl-router/src/core/utils/types.ts

@@ -125,6 +125,9 @@ export type BufferSource = ArrayBufferView<ArrayBuffer> | ArrayBuffer
 /** A Web Crypto key, named from the runtime's own `crypto` so the public types do not need the DOM library. */
 export type CryptoKey = Awaited<ReturnType<typeof crypto.subtle.importKey>>
 
+/** What the Web `Headers` constructor accepts, named from the runtime's own `Headers` so the public types do not need the DOM library. */
+export type HeadersInit = NonNullable<ConstructorParameters<typeof Headers>[0]>
+
 /** How a WebSocket hands binary data to `onmessage`; declared here so the public types do not need the DOM library. */
 export type BinaryType = 'arraybuffer' | 'blob'
 
@@ -163,3 +166,9 @@ export interface JsonWebKey {
   x?: string
   y?: string
 }
+
+/**
+ * A DOM event type by its global name: the DOM library's own type when it is loaded (a browser project), otherwise the runtime's `Event`,
+ * so the JSX types (event handler props) do not need the DOM library on a server.
+ */
+export type DomEvent<Name extends string> = typeof globalThis extends { readonly [K in Name]: { readonly prototype: infer E } } ? E : Event

package/plugins/acryl-router/src/helpers/index.ts

@@ -4,7 +4,10 @@ export { accepts } from '../core/helper/accepts/index.ts'
 export { createFactory, createMiddleware, Factory } from '../core/helper/factory/index.ts'
 export { deleteCookie, generateCookie, generateSignedCookie, getCookie, getSignedCookie, setCookie, setSignedCookie } from '../core/helper/cookie/index.ts'
 export { getExtension, getMimeType, mimes, type BaseMime } from '../core/utils/mime.ts'
+export { createCssContext, css, cx, keyframes, rawCssString, Style, viewTransition } from '../core/helper/css/index.ts'
 export { html, raw } from '../core/helper/html/index.ts'
+export { proxy } from '../core/helper/proxy/index.ts'
+export { getRouterName, inspectRoutes, showRoutes } from '../core/helper/dev/index.ts'
 export { matchedRoutes, routePath, baseRoutePath, basePath } from '../core/helper/route/index.ts'
 export { testClient } from '../core/helper/testing/index.ts'
 export { stream, streamSSE, streamText, SSEStreamingApi, type SSEMessage } from '../core/helper/streaming/index.ts'

package/plugins/acryl-router/src/middleware/index.ts

@@ -1,6 +1,7 @@
 export { basicAuth } from '../core/middleware/basic-auth/index.ts'
 export { bearerAuth } from '../core/middleware/bearer-auth/index.ts'
 export { bodyLimit } from '../core/middleware/body-limit/index.ts'
+export { cache } from '../core/middleware/cache/index.ts'
 export { every, except, some } from '../core/middleware/combine/index.ts'
 export { compress } from '../core/middleware/compress/index.ts'
 export { contextStorage, getContext, tryGetContext } from '../core/middleware/context-storage/index.ts'
@@ -14,6 +15,7 @@ export { detectFromCookie, detectFromHeader, detectFromPath, detectFromQuery, la
 export { logger } from '../core/middleware/logger/index.ts'
 export { methodNotAllowed } from '../core/middleware/method-not-allowed/index.ts'
 export { methodOverride } from '../core/middleware/method-override/index.ts'
+export { mount } from '../core/middleware/mount/index.ts'
 export { poweredBy } from '../core/middleware/powered-by/index.ts'
 export { prettyJSON } from '../core/middleware/pretty-json/index.ts'
 export { requestId, type RequestIdVariables } from '../core/middleware/request-id/index.ts'

package/plugins/acryl-router/src/service.ts

@@ -54,13 +54,30 @@ declare module '@deepseek-ai/cordis' {
 /** Stable Cordis plugin name, equal to the package name and the Loader row id. */
 export const name = 'acryl-router'
 
-// Any `Acryl`, whatever its Env and schema; the router only reads its routes.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type MountableApp = Acryl<any, any, any>
+/**
+ * What {@link Router.route} takes: any app with routes, read structurally. An `Acryl` from this package qualifies, and so does one built from
+ * another copy of the framework (the published `acrylblends`), whose classes TypeScript would refuse nominally for their private members:
+ * mounting copies the app's routes (and keeps its own `onError`), which is all the router reads. Their handlers are then called with this
+ * router's `Context`, which has the same shape.
+ */
+export interface MountableApp {
+  readonly routes: readonly MountableRoute[]
+}
+
+/** One route of a {@link MountableApp}, as the core lists it. A handler of any context type fits (`never` parameters accept every function). */
+export interface MountableRoute {
+  readonly basePath: string
+  readonly path: string
+  readonly method: string
+  readonly handler: (c: never, next: never) => unknown
+}
+
+/** The core's `app.route` with a structural app: at run time it reads only the routes and the app's own error handler. */
+const copyRoutes = (app: MountableApp): Acryl => new Acryl().route('/', app as unknown as Acryl)
 
 interface Mount {
   readonly path: string
-  readonly app: MountableApp
+  readonly app: Acryl
 }
 
 interface RouterState {
@@ -161,7 +178,7 @@ export class Router extends Service {
    * mount's code a request is in. The core's `app.route` runs first so a sub-app's own `onError` still applies to its routes.
    */
   private snapshot(path: string, app: MountableApp): Mount {
-    const copy = new Acryl().route('/', app)
+    const copy = copyRoutes(app)
     const tagged = new Acryl()
     const mount: Mount = { path, app: tagged }
     for (const route of copy.routes) {

package/plugins/acryl-router/tests/jsx.spec.tsx

@@ -0,0 +1,63 @@
+/** @jsxImportSource acryl-router/jsx */
+/**
+ * JSX in a Cordis plugin, set up as the docs say (`jsxImportSource: 'acryl-router/jsx'`, which resolves this package's built runtime): a page rendered with the ported JSX renderer and styled with the CSS helper, served through `ctx.router`, and a
+ * streamed page whose suspended part arrives after the shell. The ported suites cover the renderer itself; this covers the plugin seam.
+ */
+
+import { Context } from '@deepseek-ai/cordis'
+import { afterEach, describe, expect, it } from 'vitest'
+import { css, Style } from '../src/helpers/index.ts'
+import { Acryl, apply, name } from '../src/index.ts'
+import { Suspense } from '../src/core/jsx/index.ts'
+import { renderToReadableStream } from '../src/core/jsx/streaming.ts'
+
+const contexts: Context[] = []
+const settle = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0))
+afterEach(async () => {
+  while (contexts.length > 0) await contexts.pop()?.fiber.dispose()
+})
+
+async function serve(app: Acryl): Promise<Context> {
+  const ctx = new Context()
+  contexts.push(ctx)
+  ctx.plugin({ name, apply })
+  ctx.plugin({ name: 'pages', inject: ['router'], apply(inner: Context) { inner.router.route('/pages', app) } })
+  await settle()
+  return ctx
+}
+
+describe('JSX through ctx.router', () => {
+  it('serves a page rendered from JSX, styled with the CSS helper', async () => {
+    const title = css`color: teal;`
+    const app = new Acryl().get('/', c => c.html(
+      <html>
+        <head><Style /></head>
+        <body><h1 class={title}>Acryl!</h1></body>
+      </html>,
+    ))
+    const ctx = await serve(app)
+
+    const response = await ctx.router.request('/pages')
+    expect(response.status).toBe(200)
+    expect(response.headers.get('content-type')).toBe('text/html; charset=UTF-8')
+    const page = await response.text()
+    expect(page).toMatch(/^<html><head><style id="acryl-css">\.css-\d+\{color:teal\}<\/style><\/head><body><h1 class="css-\d+">Acryl!<\/h1><\/body><\/html>$/u)
+  })
+
+  it('streams a page: the shell first, then the suspended part', async () => {
+    const Late = async () => { await new Promise(resolve => setTimeout(resolve, 10)); return <p>loaded</p> }
+    const page = <Suspense fallback={<p>loading</p>}><Late /></Suspense>
+    const app = new Acryl().get('/stream', c => c.body(renderToReadableStream(page), 200, {
+      'content-type': 'text/html; charset=UTF-8',
+    }))
+    const ctx = await serve(app)
+
+    const response = await ctx.router.request('/pages/stream')
+    const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader()
+    const chunks: string[] = []
+    for (let next = await reader.read(); !next.done; next = await reader.read()) chunks.push(next.value)
+    expect(chunks.length).toBeGreaterThan(1)
+    expect(chunks[0]).toContain('loading')
+    expect(chunks.join('')).toContain('loaded')
+  })
+})

package/plugins/acryl-router/upstream.json

@@ -2,15 +2,15 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "plugins/acryl-router",
-    "commit": "5743482e4199ded676a77f594bce15fd4aa0ca2f"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "vendored": [
     "src",
     "tests",
     "LICENSE"
   ],
-  "rewrittenSpecifiers": 4,
-  "digest": "sha256:543a5ca99518eea1fe2e319b7708d62af34a6c24ab3daeb17dde48d67d319d6a",
+  "rewrittenSpecifiers": 6,
+  "digest": "sha256:141895acbc03bfea20b4142356a0614361f83a0beca0a989ae141b5f877f399d",
   "testsNotRun": {
     "tests/loader.spec.ts": "loads the built lib/ entry through the real Loader; the library ships source and has no build"
   },

package/plugins/acryl-router-http/upstream.json

@@ -2,7 +2,7 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "plugins/acryl-router-http",
-    "commit": "5743482e4199ded676a77f594bce15fd4aa0ca2f"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "vendored": [
     "src",

package/plugins/acryl-state/upstream.json

@@ -2,7 +2,7 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "plugins/acryl-state",
-    "commit": "5743482e4199ded676a77f594bce15fd4aa0ca2f"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "vendored": [
     "src",

package/plugins/desktop/upstream.json

@@ -5,7 +5,7 @@
       "apps/acryl-desktop/src/shell/desktop-user-data.ts": "user-data.ts",
       "apps/acryl-desktop/src/shell/shutdown.ts": "shutdown.ts"
     },
-    "commit": "5743482e4199ded676a77f594bce15fd4aa0ca2f"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "rewrittenSpecifiers": 0,
   "digest": "sha256:7dfe960a8bbb476c35540d2202a7aaa62b33492c2ac3e34314e2ecfca45f32f2"

package/plugins/desktop-web/upstream.json

@@ -5,7 +5,7 @@
       "apps/acryl-desktop/src/shell/desktop-user-data.ts": "user-data.ts",
       "apps/acryl-desktop/src/shell/shutdown.ts": "shutdown.ts"
     },
-    "commit": "5743482e4199ded676a77f594bce15fd4aa0ca2f"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "rewrittenSpecifiers": 0,
   "digest": "sha256:7dfe960a8bbb476c35540d2202a7aaa62b33492c2ac3e34314e2ecfca45f32f2"

package/plugins/save/plugin.json

@@ -6,7 +6,7 @@
   "provides": [],
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.4",
-    "@webboxes/app-persistence": "0.1.0"
+    "@webboxes/app-persistence": "0.1.1"
   },
   "mount": "add a script \"save\": \"node src/plugins/save/cli.ts\" to package.json; mount the plugin to give the agent a save_app tool"
 }

package/templates/todo/upstream.json

@@ -5,7 +5,7 @@
       "examples/acryl-todo/src/index.ts": "src/todo.ts",
       "examples/acryl-todo/src/page.ts": "src/page.ts"
     },
-    "commit": "5743482e4199ded676a77f594bce15fd4aa0ca2f"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "rewrittenSpecifiers": 4,
   "digest": "sha256:9093704776563001f7f472f94cc5c2fdd79206342c1cb59c11fce62aa74df3ed"