acrylblends 0.6.1 → 0.6.3

package/README.md

@@ -22,7 +22,7 @@ One <code>Request</code> in, one <code>Response</code> out: routing, middleware,
 import { Acryl } from 'acrylblends'
 
 const app = new Acryl()
-app.get('/', (c) => c.text('Hello Acryl!'))
+app.get('/', (c) => c.text('Acryl!'))
 
 export default app
 ```
@@ -68,7 +68,7 @@ import { Acryl } from 'acrylblends'
 
 const app = new Acryl()
 
-app.get('/', (c) => c.text('Hello Acryl!'))
+app.get('/', (c) => c.text('Acryl!'))
 
 export default app
 ```
@@ -202,7 +202,7 @@ Export the app's type, and `acrylblends/client` calls its routes with typed path
 // api.ts
 import { Acryl } from 'acrylblends'
 
-const app = new Acryl().get('/api/hello', (c) => c.json({ message: 'Hello Acryl!' }))
+const app = new Acryl().get('/api/hello', (c) => c.json({ message: 'Acryl!' }))
 export type AppType = typeof app
 export default app
 ```
@@ -231,7 +231,7 @@ import app from './index.ts'
 test('GET / says hello', async () => {
   const response = await app.request('/')
   assert.equal(response.status, 200)
-  assert.equal(await response.text(), 'Hello Acryl!')
+  assert.equal(await response.text(), 'Acryl!')
 })
 ```
 
@@ -271,10 +271,15 @@ See [Node.js](https://github.com/acryldev/acryl/blob/main/docs/framework/getting
 | `acrylblends/http-exception` | `HTTPException` |
 | `acrylblends/router/*` | the routers: `reg-exp-router`, `smart-router`, `trie-router`, `pattern-router`, `linear-router` ([routers](https://github.com/acryldev/acryl/blob/main/docs/framework/concepts/routers.md)) |
 | `acrylblends/utils/*` | the utilities the framework is built from |
+| `acrylblends/tiny`, `acrylblends/quick` | the presets: `Acryl` with another router (`PatternRouter`; `LinearRouter` and `TrieRouter`) ([presets](https://github.com/acryldev/acryl/blob/main/docs/framework/api/presets.md)) |
+| `acrylblends/cache`, `acrylblends/mount` | the cache middleware and mounting another framework's fetch handler |
+| `acrylblends/proxy`, `acrylblends/dev` | the proxy helper and the dev helpers (`showRoutes`, `inspectRoutes`, `getRouterName`) |
+| `acrylblends/jsx` | JSX on the server: `jsxImportSource: 'acrylblends/jsx'`, with `jsx/streaming` ([JSX guide](https://github.com/acryldev/acryl/blob/main/docs/framework/guides/jsx.md)) |
+| `acrylblends/jsx/dom` | JSX in the browser: hooks and `render` (needs the DOM library) ([client components](https://github.com/acryldev/acryl/blob/main/docs/framework/guides/jsx-dom.md)) |
+| `acrylblends/css` | CSS in JSX: `css`, `cx`, `keyframes`, `Style` ([CSS helper](https://github.com/acryldev/acryl/blob/main/docs/framework/helpers/css.md)) |
 | `acrylblends/node-server` | `serve`, `createAdaptorServer`, `getRequestListener`; with `node-server/serve-static` and `node-server/conninfo` |
 
-Every subpath is listed in the package's `exports`. JSX, SSG, the cache, mount, proxy and dev helpers and other runtimes' adapters are
-being ported. The docs mark them "not yet available" until they ship
+Every subpath is listed in the package's `exports`. The JSX renderer middleware, SSG and other runtimes' adapters are being ported. The docs mark them "not yet available" until they ship
 ([FAQ](https://github.com/acryldev/acryl/blob/main/docs/framework/guides/faq.md)).
 
 To extend the context's typed variables, augment the root module:

package/docs/framework/README.md

@@ -39,14 +39,15 @@ Verified: Node.js. Bun is experimental. The other runtimes the framework could t
 
 ## Not yet available
 
-Some parts of the documented API surface are not part of the package yet, and their pages say so at the top: the JSX packages, static site generation, the CSS helper, the
-`proxy`, `dev` and `cache` pieces, the `quick` and `tiny` presets and the adapters of the runtimes other than Node.js. They are enabled as they are ported.
+Some parts of the documented API surface are not part of the package yet, and their pages say so at the top: the JSX renderer middleware, static site generation
+and the adapters of the runtimes other than Node.js. They are enabled as they are ported.
 
 ## Where to read next
 
 | I want to | Read |
 | --- | --- |
 | Run something in five minutes | [Getting started](getting-started/basic.md) |
+| Run the app as a desktop app | [Desktop](getting-started/desktop.md) |
 | Look up a call | [API](api/index.md), [Routing](api/routing.md), [Context](api/context.md), [Request](api/request.md), [API summary](api/summary.md) |
 | Understand the design | [Concepts](concepts/motivation.md) |
 | Copy a pattern | [Guides](guides/best-practices.md), [Validation](guides/validation.md), [Testing](guides/testing.md) |

package/docs/framework/UPSTREAM.md

@@ -1,3 +1,3 @@
 # Generated copy
 
-This folder is a copy of `docs/framework` of acryldev/acryl at commit `5743482e4199ded676a77f594bce15fd4aa0ca2f`, made by `scripts/sync-framework.mjs`. Do not edit it here: change the text in ACRYL and sync again. `pnpm run verify:framework` fails when a page differs from the recorded digest.
+This folder is a copy of `docs/framework` of acryldev/acryl at commit `60491f81b7346d1f3867fa01ee4e2caffc7baf47`, made by `scripts/sync-framework.mjs`. Do not edit it here: change the text in ACRYL and sync again. `pnpm run verify:framework` fails when a page differs from the recorded digest.

package/docs/framework/api/presets.md

@@ -1,8 +1,5 @@
 # Presets
 
-> **Partly available.** The default router (`SmartRouter`), `RegExpRouter`, `TrieRouter`, `LinearRouter` and `PatternRouter` are available and are chosen with the `router` option of `new Acryl()` (see [Routers](../concepts/routers.md)). The presets `acrylblends/quick` and `acrylblends/tiny` are **not yet available**; their examples below are not checked by the docs tests.
-
-
 Acryl has several routers, each designed for a specific purpose.
 You can specify the router you want to use in the constructor of Acryl.
 

package/docs/framework/cordis/acryl-in-a-cordis-app.md

@@ -43,6 +43,9 @@ export function apply(ctx: Context): void {
 | `GET /todo/todos/42` | `{ "id": "42" }` |
 | `GET /todo/` | 404: `/todo` and `/todo/` are different paths (see below) |
 
+The app can come from `acryl-router` or from the published `acrylblends` package: `route` takes any app by its routes
+(`MountableApp`), so an `Acryl` imported from `acrylblends` mounts as it is, with its middleware and its own `onError`.
+
 ### `/todo/` is a 404 until you choose
 
 `/todo/` is the first thing people type, and by default it is not found: the router treats `/todo` and `/todo/` as two paths. Choose
@@ -91,6 +94,12 @@ const app = new Acryl()
 Use middleware for authentication, logging, CORS, compression, request IDs and other behavior that should wrap more than one handler.
 The built-in set is listed in [Middleware](../concepts/middleware.md).
 
+## Render pages with JSX
+
+A plugin renders HTML with the same JSX as the published package: set `"jsx": "react-jsx"` and `"jsxImportSource": "acryl-router/jsx"`
+in its `tsconfig.json` (a `.tsx` file), and style with the CSS helper from `acryl-router/helpers`. Streaming with `Suspense` is in
+`acryl-router/jsx/streaming`. The [JSX guide](../guides/jsx.md) covers the rest; its examples import from `acrylblends/jsx` instead.
+
 ## Run the same app on a surface
 
 The application does not open a socket. A surface supplies requests to it:

package/docs/framework/getting-started/basic.md

@@ -63,7 +63,7 @@ import { Acryl } from 'acrylblends'
 const app = new Acryl()
 
 app.get('/', (c) => {
-  return c.text('Hello Acryl!')
+  return c.text('Acryl!')
 })
 
 export default app
@@ -83,7 +83,7 @@ const app = new Acryl()
 app.get('/api/hello', (c) => {
   return c.json({
     ok: true,
-    message: 'Hello Acryl!',
+    message: 'Acryl!',
   })
 })
 ```
@@ -162,7 +162,7 @@ app.use(
   '/admin/*',
   basicAuth({
     username: 'admin',
-    password: 'secret',
+    password: process.env.ADMIN_PASSWORD!,
   })
 )
 
@@ -181,7 +181,7 @@ An app is a function from `Request` to `Response`, so a test needs no server:
 import { Acryl } from 'acrylblends'
 
 const app = new Acryl()
-app.get('/', (c) => c.text('Hello Acryl!'))
+app.get('/', (c) => c.text('Acryl!'))
 
 const response = await app.request('/')
 console.log(response.status, await response.text())
@@ -192,5 +192,6 @@ See [Testing](../guides/testing.md).
 ## Next
 
 - [Node.js](nodejs.md) and [Bun](bun.md) (experimental)
+- [Desktop](desktop.md): the same app in an Electron window
 - [Routing](../api/routing.md), [Context](../api/context.md) and [Request](../api/request.md)
 - [Validation](../guides/validation.md)

package/docs/framework/getting-started/desktop.md

@@ -0,0 +1,41 @@
+# Desktop
+
+An Acryl app also runs as a desktop app: an Electron window opens on the app's own server. It is the same app and the same code as `npm run dev`; nothing in the app changes. This page covers a plain Acryl app (the `nodejs`
+template) and a Blend app (the `acryl-app` template or `acrylblends init`). It runs from source today: packaging a distributable app (dmg, exe, deb) is not part of it yet.
+
+## Add it
+
+In an Acryl app made by `npm create acrylblends@latest my-app -- --template nodejs`:
+
+```sh
+cd my-app
+npm install
+npx acrylblends add desktop
+npm install
+npm run desktop
+```
+
+In a Blend app, the same two commands (`npx acrylblends add desktop`, `npm install`) add the Blend form of the shell, and `npx acrylblends init my-app --template todo --desktop` creates a Blend app with it already in.
+`acrylblends add desktop` chooses the right form: a Blend app (it has `src/plugins/instance`) or a plain Acryl app.
+
+## What it adds
+
+- `src/plugins/desktop-web/` (a plain app) or `src/plugins/desktop/` (a Blend app): the window code. Only this folder imports `electron`; the app's own code never does.
+- `electron` as a development dependency (pinned to 44.0.0) and the script `npm run desktop`.
+- `.acrylblends/` in `.gitignore`: Electron's user data (window state, cache, logs) lives in `.acrylblends/electron` inside the app's own folder, never in the user's application-data folder.
+
+## What `npm run desktop` does
+
+1. Serves the app on `127.0.0.1` with a free port: for a plain app, `app.fetch` from `src/app.ts` (`export default app`) through `acrylblends/node-server`; for a Blend app, its own `createApp`.
+2. Takes a single-instance lock: a second launch of the same app focuses the first window and exits.
+3. Opens one window on the server's address, with a locked-down renderer (context isolation, no Node in the page, the sandbox, web security). Navigation stays on the app's own origin; any other link opens in the system browser.
+4. When the window closes (or on SIGINT or SIGTERM), stops the server and exits.
+
+## The first launch downloads Electron
+
+`npm install` does not download Electron's binary (Electron 44 has no install script). The first `npm run desktop` does: about 100 MB, once per machine, then it is cached. Behind a proxy or mirror set `ELECTRON_MIRROR`
+(and `ELECTRON_CACHE` to reuse a download); if the download is blocked, run `npx install-electron` where the mirror is reachable.
+
+## A different start page
+
+The window opens on `/`. To open another path, set it in `package.json`: `"acrylblends": { "desktopPath": "/todo" }`.

package/docs/framework/guides/jsx-dom.md

@@ -1,8 +1,5 @@
 # Client Components
 
-> **Not yet available.** The client-side JSX package (`acrylblends/jsx/dom`) is documented here so the page structure matches the rest of the framework, and is not part of acrylblends yet. The code on this page is not checked by the docs tests.
-
-
 `acrylblends/jsx` supports not only server side but also client side. This means that it is possible to create an interactive UI that runs in the browser. We call it Client Components or `acrylblends/jsx/dom`.
 
 It is fast and very small. The counter program in `acrylblends/jsx/dom` is only 2.8KB with Brotli compression, but 47.8KB for React.

package/docs/framework/guides/jsx.md

@@ -1,8 +1,5 @@
 # JSX
 
-> **Not yet available.** The JSX packages (`acrylblends/jsx` and its subpaths) is documented here so the page structure matches the rest of the framework, and is not part of acrylblends yet. The code on this page is not checked by the docs tests.
-
-
 You can write HTML with JSX syntax with `acrylblends/jsx`.
 
 Although `acrylblends/jsx` works on the client, you will probably use it most often when rendering content on the server side. Here are some things related to JSX that are common to both server and client.
@@ -54,7 +51,7 @@ const Top: FC<{ messages: string[] }> = (props: {
 }) => {
   return (
     <Layout>
-      <h1>Hello Acryl!</h1>
+      <h1>Acryl!</h1>
       <ul>
         {props.messages.map((message) => {
           return <li>{message}!!</li>

package/docs/framework/guides/middleware.md

@@ -95,7 +95,7 @@ app.use(
   '/auth/*',
   basicAuth({
     username: 'acrylblends',
-    password: 'acoolproject',
+    password: process.env.BASIC_AUTH_PASSWORD!,
   })
 )
 ```

package/docs/framework/helpers/cookie.md

@@ -37,7 +37,7 @@ app.get('/cookie', (c) => {
 
 ```ts
 app.get('/signed-cookie', (c) => {
-  const secret = 'secret' // make sure it's a large enough string to be secure
+  const secret = process.env.COOKIE_SECRET! // a long random string, kept out of the source
 
   await setSignedCookie(c, 'cookie_name0', 'cookie_value', secret)
   const fortuneCookie = await getSignedCookie(

package/docs/framework/helpers/css.md

@@ -1,8 +1,5 @@
 # css Helper
 
-> **Not yet available.** The CSS helper (`acrylblends/css`) is documented here so the page structure matches the rest of the framework, and is not part of acrylblends yet. The code on this page is not checked by the docs tests.
-
-
 The CSS helper - `acrylblends/css` - is Acryl's built-in CSS in JS(X).
 
 You can write CSS in JSX in a JavaScript template literal named `css`. The return value of `css` will be the class name, which is set to the value of the class attribute. The `<Style />` component will then contain the value of the CSS.

package/docs/framework/helpers/dev.md

@@ -1,8 +1,5 @@
 # Dev Helper
 
-> **Not yet available.** The dev helper (`acrylblends/dev`) is documented here so the page structure matches the rest of the framework, and is not part of acrylblends yet. The code on this page is not checked by the docs tests.
-
-
 Dev Helper provides useful methods you can use in development.
 
 ```ts

package/docs/framework/helpers/jwt.md

@@ -35,7 +35,7 @@ const payload = {
   role: 'admin',
   exp: Math.floor(Date.now() / 1000) + 60 * 5, // Token expires in 5 minutes
 }
-const secret = 'mySecretKey'
+const secret = process.env.JWT_SECRET!
 const token = await sign(payload, secret)
 ```
 

package/docs/framework/helpers/proxy.md

@@ -1,8 +1,5 @@
 # Proxy Helper
 
-> **Not yet available.** The proxy helper (`acrylblends/proxy`) is documented here so the page structure matches the rest of the framework, and is not part of acrylblends yet. The code on this page is not checked by the docs tests.
-
-
 Proxy Helper provides useful functions when using Acryl application as a (reverse) proxy.
 
 ## Import

package/docs/framework/middleware/builtin/basic-auth.md

@@ -21,7 +21,7 @@ app.use(
   '/auth/*',
   basicAuth({
     username: 'acrylblends',
-    password: 'acoolproject',
+    password: process.env.BASIC_AUTH_PASSWORD!,
   })
 )
 
@@ -41,7 +41,7 @@ app.get('/auth/page', (c) => {
 
 app.delete(
   '/auth/page',
-  basicAuth({ username: 'acrylblends', password: 'acoolproject' }),
+  basicAuth({ username: 'acrylblends', password: process.env.BASIC_AUTH_PASSWORD! }),
   (c) => {
     return c.text('Page deleted')
   }
@@ -100,7 +100,7 @@ app.use(
   '/auth/*',
   basicAuth({
     username: 'acrylblends',
-    password: 'acoolproject',
+    password: process.env.BASIC_AUTH_PASSWORD!,
     onAuthSuccess: (c, username) => {
       c.set('username', username)
     },
@@ -129,18 +129,18 @@ app.use(
   basicAuth(
     {
       username: 'acrylblends',
-      password: 'acoolproject',
+      password: process.env.BASIC_AUTH_PASSWORD!,
       // Define other params in the first object
       realm: 'www.example.com',
     },
     {
       username: 'acrylblends-admin',
-      password: 'super-secure',
+      password: process.env.ADMIN_PASSWORD!,
       // Cannot redefine other params here
     },
     {
       username: 'acrylblends-user-1',
-      password: 'a-secret',
+      password: process.env.USER_1_PASSWORD!,
       // Or here
     }
   )

package/docs/framework/middleware/builtin/cache.md

@@ -1,8 +1,5 @@
 # Cache Middleware
 
-> **Not yet available.** The cache middleware (`acrylblends/cache`) is documented here so the page structure matches the rest of the framework, and is not part of acrylblends yet. The code on this page is not checked by the docs tests.
-
-
 The Cache middleware uses the Web Standards' [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache).
 
 The Cache middleware currently supports Cloudflare Workers projects using custom domains and Deno projects using [Deno 1.26+](https://github.com/denoland/deno/releases/tag/v1.26.0). Also available with Deno Deploy.

package/docs/framework/middleware/builtin/combine.md

@@ -39,7 +39,7 @@ app.use(
   )
 )
 
-app.get('/', (c) => c.text('Hello Acryl!'))
+app.get('/', (c) => c.text('Acryl!'))
 ```
 
 ### some

package/docs/framework/middleware/builtin/ip-restriction.md

@@ -28,7 +28,7 @@ app.use(
   })
 )
 
-app.get('/', (c) => c.text('Hello Acryl!'))
+app.get('/', (c) => c.text('Acryl!'))
 ```
 
 Pass the `getConninfo` from the [ConnInfo helper](../../helpers/conninfo.md) appropriate for your environment as the first argument of `ipRestriction`. For a runtime whose adapter is not yet available there is no `getConnInfo` to pass yet.

package/docs/framework/middleware/builtin/logger.md

@@ -15,7 +15,7 @@ import { logger } from 'acrylblends/logger'
 const app = new Acryl()
 
 app.use(logger())
-app.get('/', (c) => c.text('Hello Acryl!'))
+app.get('/', (c) => c.text('Acryl!'))
 ```
 
 ## Logging Details

package/docs/framework/middleware/builtin/mount.md

@@ -1,8 +1,5 @@
 # Mount Middleware
 
-> **Not yet available.** The `acrylblends/mount` subpath (an app can still call `app.mount()`) is documented here so the page structure matches the rest of the framework, and is not part of acrylblends yet. The code on this page is not checked by the docs tests.
-
-
 The Mount Middleware lets you mount an application built with another framework into your Acryl application.
 
 ## Import

package/docs/framework/upstream.json

@@ -2,8 +2,8 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "docs/framework",
-    "commit": "5743482e4199ded676a77f594bce15fd4aa0ca2f"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
-  "files": 87,
-  "digest": "sha256:31bf1c46fbe74d7d2664b3b935a18bd916b8cab1b9ee9c2b006b8a75617a04f6"
+  "files": 88,
+  "digest": "sha256:c8ac3dd071b4cbc2a1f0265695dea71ea48e71cba455e2b778f9d567ca50f957"
 }

package/lib/accepts.d.ts

@@ -1,4 +1,4 @@
-import { t as Context } from "./context-Bm7rI-oK.js";
+import { t as Context } from "./context-DVQBjuns.js";
 import { t as AcceptHeader } from "./headers-tu2YYN8T.js";
 
 //#region ../../plugins/acryl-router/src/core/helper/accepts/accepts.d.ts

package/lib/acryl-base.d.ts

@@ -1,2 +1,2 @@
-import { $ as Acryl, et as AcrylOptions } from "./context-Bm7rI-oK.js";
+import { $ as Acryl, et as AcrylOptions } from "./context-DVQBjuns.js";
 export { Acryl as AcrylBase, AcrylOptions };

package/lib/adapter.d.ts

@@ -1,4 +1,4 @@
-import { t as Context } from "./context-Bm7rI-oK.js";
+import { t as Context } from "./context-DVQBjuns.js";
 
 //#region ../../plugins/acryl-router/src/core/helper/adapter/index.d.ts
 type Runtime = 'node' | 'deno' | 'bun' | 'workerd' | 'fastly' | 'edge-light' | 'other';

package/lib/{app-CmAYW1Al.d.ts → app-wFwpg-bt.d.ts}

@@ -1,4 +1,4 @@
-import { $ as Acryl$1, J as Schema, _ as Env, et as AcrylOptions, h as BlankSchema, p as BlankEnv } from "./context-Bm7rI-oK.js";
+import { $ as Acryl$1, J as Schema, _ as Env, et as AcrylOptions, h as BlankSchema, p as BlankEnv } from "./context-DVQBjuns.js";
 
 //#region ../../plugins/acryl-router/src/core/app.d.ts
 /**