@orieljs/view 0.1.0-alpha.6 → 0.1.0-alpha.7

package/NOTICE

@@ -10,3 +10,7 @@ The Oriel name and logo are not covered by that license; see TRADEMARKS.md
 
 @orieljs/support (and @orieljs/framework, which bundles it) includes transliteration data from
 voku/portable-ascii (https://github.com/voku/portable-ascii), Copyright (C) 2019 Lars Moelleken, MIT License.
+
+@orieljs/notifications (and @orieljs/framework, which bundles it) includes the HTML and CSS of
+Laravel's default notification mail (laravel/framework, https://github.com/laravel/framework),
+Copyright (c) Taylor Otwell, MIT License.

package/README.md

@@ -0,0 +1,35 @@
+# @orieljs/view
+
+Server-rendered views for Oriel, written in TSX: a view is a function component that returns HTML, where Laravel uses Blade. It is part of `@orieljs/framework`, which every Oriel app already installs, and is re-exported from it. In an app, import it from `@orieljs/framework`; `@orieljs/view` is also published on its own.
+
+```bash
+npm install @orieljs/framework
+```
+
+```tsx title="resources/views/posts/index.tsx"
+import type { Post } from '../../../app/Models/Post'
+
+export default function Index({ posts }: { posts: Post[] }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>
+          <a href={`/posts/${post.slug}`}>{post.title}</a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+`view('posts.index', { posts })` renders `resources/views/posts/index.tsx` from a route or a controller. Text is escaped unless it is wrapped in `raw()`. `View.share()` and `View.composer()` add data to views, and `csrfField()` and `methodField()` write a form's hidden fields.
+
+Documentation: https://orieljs.vercel.app/docs/views
+
+Status: early alpha. APIs will change.
+
+## License
+
+Oriel is open-source software licensed under the Apache License 2.0 (Apache-2.0; see `LICENSE` and `NOTICE`). The Oriel name and logo are trademarks; see `TRADEMARKS.md`.
+
+Website: https://orieljs.vercel.app

package/TRADEMARKS.md

@@ -0,0 +1,33 @@
+# Oriel trademark policy
+
+The Oriel code is open source under the Apache License 2.0. The **Oriel name and logo** are not: the license covers
+the code only (section 6 of the license says so), and the name and logo stay with the project. This page explains
+what you can and can't do with them. The goal is simple: people should always be able to tell what is the real Oriel
+and what isn't.
+
+## You can, without asking
+
+- Use, change, ship and sell the code, as the license allows.
+- Say that your app or package is "built with Oriel", "for Oriel" or "compatible with Oriel".
+- Name a package `oriel-<something>` or `<something>-for-oriel` when it works with Oriel, as long as it is clear that
+  it is not official (for example, don't publish it under the `@orieljs` npm scope).
+- Use the name and logo to write about Oriel, teach it, or link to it, in articles, talks, videos and courses.
+- Use the unmodified logo to point to the project, as it is (no recolouring, cropping or
+  distortion).
+
+## You can't, without written permission
+
+- Call a fork, a modified copy or a competing product "Oriel", or anything likely to be confused with it.
+- Use the name or logo as the name, logo or domain of your own product, company or service.
+- Suggest that the Oriel project made, endorses or supports your work when it doesn't.
+- Sell merchandise with the name or logo.
+
+## Forks
+
+Forks are welcome. Please give yours a different name and logo, keep the `LICENSE` and `NOTICE` files, and say that
+it is based on Oriel.
+
+## Questions
+
+Open an issue at https://github.com/orieljs/framework or email meeeet.dev@gmail.com. If you're unsure whether a use
+is fine, ask; the answer is usually yes.

package/dist/{chunk-KIU7OKDI.js → chunk-AXHMZAM6.js}

@@ -22,4 +22,4 @@ export {
   jsx,
   jsxs
 };
-//# sourceMappingURL=chunk-KIU7OKDI.js.map
+//# sourceMappingURL=chunk-AXHMZAM6.js.map

package/dist/{chunk-KIU7OKDI.js.map → chunk-AXHMZAM6.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../Element.ts","../jsx-runtime.ts"],"sourcesContent":["import type { Htmlable } from '@orieljs/contracts'\n\n/** Marks the objects jsx() returns (Symbol.for, so two copies of the package agree). */\nexport const ELEMENT: unique symbol = Symbol.for('oriel:view.element')\n\nexport type Props = Record<string, unknown>\n\n/** Anything that can appear as a child: text is escaped, Htmlable is emitted as-is, promises are awaited. */\nexport type Renderable =\n  | OrielElement\n  | string\n  | number\n  | bigint\n  | boolean\n  | null\n  | undefined\n  | Htmlable\n  | Promise<Renderable>\n  | Iterable<Renderable>\n\n/** A function component. It may be async: the renderer awaits it. */\nexport type Component<P = Props> = (props: P) => Renderable | Promise<Renderable>\n\n/**\n * `<>…</>` and `<Fragment>`: renders its children only. A symbol at runtime; typed as a component so that\n * `<Fragment>` type-checks as a JSX tag.\n */\nexport const Fragment = Symbol.for('oriel:view.fragment') as unknown as (props: { children?: Renderable }) => Renderable\n\nexport type ElementType = string | Component<never>\n\n/** What `<div />` evaluates to: an inert description, rendered later by renderToString()/renderToStream(). */\nexport interface OrielElement {\n  readonly [ELEMENT]: true\n  readonly type: ElementType\n  readonly props: Props\n  readonly key: string | number | undefined\n}\n\nexport function createElement(type: ElementType, props: Props | null | undefined, key?: string | number): OrielElement {\n  return { [ELEMENT]: true, type, props: props ?? {}, key }\n}\n\nexport function isElement(value: unknown): value is OrielElement {\n  return typeof value === 'object' && value !== null && (value as Record<symbol, unknown>)[ELEMENT] === true\n}\n","/**\n * The automatic JSX runtime (`jsxImportSource: \"@orieljs/view\"`). jsx() only describes elements; rendering\n * (escaping, async components) happens in renderToString()/renderToStream().\n */\nimport type { ClassValue, StyleObject } from './attributes'\nimport { createElement, Fragment, type Component, type ElementType, type OrielElement, type Props, type Renderable } from './Element'\n\nexport { Fragment }\n\nexport function jsx(type: ElementType, props: Props | null, key?: string | number): OrielElement {\n  return createElement(type, props, key)\n}\n\n/** Same as jsx(); the compiler uses it when there are several static children. */\nexport const jsxs = jsx\n\n/** Attributes every intrinsic element accepts. Unknown attributes (hx-*, x-*, o:click, …) are allowed. */\nexport interface HtmlAttributes {\n  children?: Renderable\n  class?: ClassValue\n  className?: ClassValue\n  style?: string | StyleObject\n  dangerouslySetInnerHTML?: { __html: string }\n  [attribute: string]: unknown\n}\n\nexport declare namespace JSX {\n  type Element = OrielElement\n  /** Lets components be async: `async function Posts() { … }` is a valid element type. */\n  type ElementType = string | Component<never>\n  interface ElementChildrenAttribute {\n    children: unknown\n  }\n  interface IntrinsicAttributes {\n    key?: string | number\n  }\n  interface IntrinsicElements {\n    [element: string]: HtmlAttributes\n  }\n}\n"],"mappings":";AAGO,IAAM,UAAyB,uBAAO,IAAI,oBAAoB;AAwB9D,IAAM,WAAW,uBAAO,IAAI,qBAAqB;AAYjD,SAAS,cAAc,MAAmB,OAAiC,KAAqC;AACrH,SAAO,EAAE,CAAC,OAAO,GAAG,MAAM,MAAM,OAAO,SAAS,CAAC,GAAG,IAAI;AAC1D;AAEO,SAAS,UAAU,OAAuC;AAC/D,SAAO,OAAO,UAAU,YAAY,UAAU,QAAS,MAAkC,OAAO,MAAM;AACxG;;;ACpCO,SAAS,IAAI,MAAmB,OAAqB,KAAqC;AAC/F,SAAO,cAAc,MAAM,OAAO,GAAG;AACvC;AAGO,IAAM,OAAO;","names":[]}
+{"version":3,"sources":["../Element.ts","../jsx-runtime.ts"],"sourcesContent":["import type { Htmlable } from '@orieljs/contracts'\n\n/** Marks the objects jsx() returns (Symbol.for, so two copies of the package agree). */\nexport const ELEMENT: unique symbol = Symbol.for('oriel:view.element')\n\nexport type Props = Record<string, unknown>\n\n/** Anything that can appear as a child: text is escaped, Htmlable is emitted as-is, promises are awaited. */\nexport type Renderable =\n  | OrielElement\n  | string\n  | number\n  | bigint\n  | boolean\n  | null\n  | undefined\n  | Htmlable\n  | Promise<Renderable>\n  | Iterable<Renderable>\n\n/** A function component. It may be async: the renderer awaits it. */\nexport type Component<P = Props> = (props: P) => Renderable | Promise<Renderable>\n\n/**\n * `<>…</>` and `<Fragment>`: renders its children only. A symbol at runtime; typed as a component so that\n * `<Fragment>` type-checks as a JSX tag.\n */\nexport const Fragment = Symbol.for('oriel:view.fragment') as unknown as (props: { children?: Renderable }) => Renderable\n\nexport type ElementType = string | Component<never>\n\n/** What `<div />` evaluates to: an inert description, rendered later by renderToString()/renderToStream(). */\nexport interface OrielElement {\n  readonly [ELEMENT]: true\n  readonly type: ElementType\n  readonly props: Props\n  readonly key: string | number | undefined\n}\n\nexport function createElement(type: ElementType, props: Props | null | undefined, key?: string | number): OrielElement {\n  return { [ELEMENT]: true, type, props: props ?? {}, key }\n}\n\nexport function isElement(value: unknown): value is OrielElement {\n  return typeof value === 'object' && value !== null && (value as Record<symbol, unknown>)[ELEMENT] === true\n}\n","/**\n * The automatic JSX runtime (`jsxImportSource: \"@orieljs/view\"`). jsx() only describes elements; rendering\n * (escaping, async components) happens in renderToString()/renderToStream().\n */\nimport type { ClassValue, StyleObject } from './attributes'\nimport type { LiveDirectiveAttributes, LiveEventAttributes, OtherAttributes } from './directives'\nimport { createElement, Fragment, type Component, type ElementType, type OrielElement, type Props, type Renderable } from './Element'\n\nexport { Fragment }\n\nexport function jsx(type: ElementType, props: Props | null, key?: string | number): OrielElement {\n  return createElement(type, props, key)\n}\n\n/** Same as jsx(); the compiler uses it when there are several static children. */\nexport const jsxs = jsx\n\n/**\n * Attributes every intrinsic element accepts. Any attribute is allowed (hx-*, x-*, data-*, …) except an `o:` name\n * that isn't a Live directive or `o:<event>` (directives.ts), so a typo such as `o:clik` doesn't compile. An `o:` form\n * with a `-` that the type doesn't list compiles unchecked (TypeScript doesn't check a hyphenated JSX name the type\n * leaves out), and a custom event name is spread: `<div {...{ 'o:saved': 'refresh' }} />`.\n */\nexport interface HtmlAttributes extends OtherAttributes, LiveDirectiveAttributes, LiveEventAttributes {\n  children?: Renderable\n  class?: ClassValue\n  className?: ClassValue\n  style?: string | StyleObject\n  dangerouslySetInnerHTML?: { __html: string }\n}\n\nexport declare namespace JSX {\n  type Element = OrielElement\n  /** Lets components be async: `async function Posts() { … }` is a valid element type. */\n  type ElementType = string | Component<never>\n  interface ElementChildrenAttribute {\n    children: unknown\n  }\n  interface IntrinsicAttributes {\n    key?: string | number\n  }\n  interface IntrinsicElements {\n    [element: string]: HtmlAttributes\n  }\n}\n"],"mappings":";AAGO,IAAM,UAAyB,uBAAO,IAAI,oBAAoB;AAwB9D,IAAM,WAAW,uBAAO,IAAI,qBAAqB;AAYjD,SAAS,cAAc,MAAmB,OAAiC,KAAqC;AACrH,SAAO,EAAE,CAAC,OAAO,GAAG,MAAM,MAAM,OAAO,SAAS,CAAC,GAAG,IAAI;AAC1D;AAEO,SAAS,UAAU,OAAuC;AAC/D,SAAO,OAAO,UAAU,YAAY,UAAU,QAAS,MAAkC,OAAO,MAAM;AACxG;;;ACnCO,SAAS,IAAI,MAAmB,OAAqB,KAAqC;AAC/F,SAAO,cAAc,MAAM,OAAO,GAAG;AACvC;AAGO,IAAM,OAAO;","names":[]}

package/dist/index.d.ts

@@ -53,6 +53,93 @@ declare function renderToString(node: Renderable): Promise<string>;
 /** Renders to a UTF-8 byte stream, sending everything rendered so far each time rendering waits on a promise. */
 declare function renderToStream(node: Renderable): ReadableStream<Uint8Array>;
 
+/**
+ * The `o:` attributes of Live components, typed for TSX: a directive (`o:model`, `o:loading`, …) or an action on a DOM
+ * event (`o:click="save"`), with modifiers joined by `-` (`o:model-live`, `o:keydown-enter`). An `o:` name that is
+ * neither doesn't compile (`o:clik`, `o:modle`), and the forms listed here are completed by editors and have their
+ * values checked. TypeScript doesn't check JSX attribute names that contain a `-` unless the type lists them, so a
+ * form that isn't listed (a duration such as `o:model-live-debounce-500ms`, an event's modifiers) is accepted as
+ * written, and so is a misspelt one (`o:model-lvie`).
+ */
+type ModelTrigger = 'live' | 'blur' | 'change' | 'lazy';
+type ElementChange = 'remove' | 'class' | 'class-remove' | 'attr';
+/**
+ * The directives that aren't DOM events, by name: the value each takes (`boolean` for one that can be written bare,
+ * `<a o:navigate>`, or from an expression, `o:navigate={external}`: `false` leaves it out) and its modifier forms, the
+ * `-`-joined text after the name (`never` for none). A new directive adds a member here, and its name to the Live
+ * client's reserved directives.
+ */
+interface LiveDirectives {
+    /** o:model="title": binds an input to a public property, sent with the next request unless live, blur, change or lazy. */
+    model: {
+        value: string;
+        modifiers: ModelTrigger | 'number' | 'debounce' | 'live-debounce' | `${ModelTrigger}-number`;
+    };
+    /** o:loading: shown (or changed) while the component's request runs. */
+    loading: {
+        value: boolean | string;
+        modifiers: ElementChange | 'delay' | `delay-${ElementChange}`;
+    };
+    /** o:target="save,title": the actions or properties o:loading waits for. */
+    target: {
+        value: string;
+        modifiers: never;
+    };
+    /** o:poll="refresh": calls the method ($refresh without one) every 2.5 s, or every `o:poll-<n>s`. */
+    poll: {
+        value: boolean | string;
+        modifiers: 'keep-alive' | 'visible';
+    };
+    /** o:navigate on a link: fetches the page and swaps it in; `-hover` prefetches on hover. */
+    navigate: {
+        value: boolean;
+        modifiers: 'hover';
+    };
+    /** o:offline: shown (or changed) while the browser is offline. */
+    offline: {
+        value: boolean | string;
+        modifiers: ElementChange;
+    };
+    /** o:key: keeps an element's identity across re-renders. */
+    key: {
+        value: string | number;
+        modifiers: never;
+    };
+    /** o:confirm="Delete this tag?": asks before the element's action runs; `-prompt` asks for a typed answer. */
+    confirm: {
+        value: boolean | string;
+        modifiers: 'prompt';
+    };
+    /** o:announce on a status region: an action that leaves the same message announces it again. */
+    announce: {
+        value: boolean;
+        modifiers: never;
+    };
+}
+/**
+ * The DOM events `o:<event>` runs an action on. A name with a `-` can't be written in TSX (modifiers are `-`
+ * segments), and `offline` is the o:offline directive, not the event. An event this list doesn't have (a custom
+ * event a component dispatches) is spread: `<div {...{ 'o:saved': 'refresh' }} />`.
+ */
+type LiveEvent = 'click' | 'dblclick' | 'auxclick' | 'contextmenu' | 'mousedown' | 'mouseup' | 'mousemove' | 'mouseover' | 'mouseout' | 'mouseenter' | 'mouseleave' | 'wheel' | 'pointerdown' | 'pointerup' | 'pointermove' | 'pointerover' | 'pointerout' | 'pointerenter' | 'pointerleave' | 'pointercancel' | 'gotpointercapture' | 'lostpointercapture' | 'keydown' | 'keyup' | 'keypress' | 'input' | 'beforeinput' | 'change' | 'submit' | 'reset' | 'invalid' | 'select' | 'formdata' | 'search' | 'focus' | 'blur' | 'focusin' | 'focusout' | 'copy' | 'cut' | 'paste' | 'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop' | 'touchstart' | 'touchend' | 'touchmove' | 'touchcancel' | 'compositionstart' | 'compositionupdate' | 'compositionend' | 'play' | 'pause' | 'playing' | 'ended' | 'timeupdate' | 'volumechange' | 'ratechange' | 'durationchange' | 'loadstart' | 'loadeddata' | 'loadedmetadata' | 'canplay' | 'canplaythrough' | 'seeking' | 'seeked' | 'waiting' | 'stalled' | 'suspend' | 'emptied' | 'progress' | 'abort' | 'error' | 'load' | 'animationstart' | 'animationend' | 'animationiteration' | 'animationcancel' | 'transitionstart' | 'transitionend' | 'transitionrun' | 'transitioncancel' | 'scroll' | 'scrollend' | 'resize' | 'toggle' | 'beforetoggle' | 'close' | 'cancel' | 'online' | 'popstate' | 'hashchange' | 'beforeunload' | 'pagehide' | 'pageshow' | 'storage' | 'message' | 'visibilitychange' | 'selectionchange' | 'fullscreenchange' | 'slotchange' | 'cuechange';
+/** `o:model`, `o:model-live`, …: each directive and each of its modifier forms, with the directive's value. */
+type LiveDirectiveAttributes = {
+    [N in keyof LiveDirectives as `o:${N}` | `o:${N}-${LiveDirectives[N]['modifiers']}`]?: LiveDirectives[N]['value'];
+};
+/** `o:click="save"`: an action (a method, `method(args)`, `$refresh`, `$set(…)`, `$dispatch(…)`) on a DOM event. */
+type LiveEventAttributes = {
+    [E in LiveEvent as `o:${E}`]?: string;
+};
+type Letter = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+/**
+ * Every other attribute, with any value: each name that doesn't start with `o:` (`o`, `href`, `onclick`, `open`,
+ * `xlink:href`, `viewBox`; names with a `-`, such as `data-*`, `aria-*` and `hx-post`, are never checked).
+ */
+type OtherAttributes = {
+    [K in 'o' | `${Exclude<Letter, 'o'> | Uppercase<Letter> | '_' | '$'}${string}` | `o${Letter | Uppercase<Letter> | Digit | '_' | '.' | '$'}${string}`]?: unknown;
+};
+
 /**
  * The automatic JSX runtime (`jsxImportSource: "@orieljs/view"`). jsx() only describes elements; rendering
  * (escaping, async components) happens in renderToString()/renderToStream().
@@ -61,8 +148,13 @@ declare function renderToStream(node: Renderable): ReadableStream<Uint8Array>;
 declare function jsx(type: ElementType, props: Props | null, key?: string | number): OrielElement;
 /** Same as jsx(); the compiler uses it when there are several static children. */
 declare const jsxs: typeof jsx;
-/** Attributes every intrinsic element accepts. Unknown attributes (hx-*, x-*, o:click, …) are allowed. */
-interface HtmlAttributes {
+/**
+ * Attributes every intrinsic element accepts. Any attribute is allowed (hx-*, x-*, data-*, …) except an `o:` name
+ * that isn't a Live directive or `o:<event>` (directives.ts), so a typo such as `o:clik` doesn't compile. An `o:` form
+ * with a `-` that the type doesn't list compiles unchecked (TypeScript doesn't check a hyphenated JSX name the type
+ * leaves out), and a custom event name is spread: `<div {...{ 'o:saved': 'refresh' }} />`.
+ */
+interface HtmlAttributes extends OtherAttributes, LiveDirectiveAttributes, LiveEventAttributes {
     children?: Renderable;
     class?: ClassValue;
     className?: ClassValue;
@@ -70,7 +162,6 @@ interface HtmlAttributes {
     dangerouslySetInnerHTML?: {
         __html: string;
     };
-    [attribute: string]: unknown;
 }
 declare namespace JSX {
     type Element = OrielElement;
@@ -207,4 +298,4 @@ declare class ViewServiceProvider extends ServiceProvider {
     register(): void;
 }
 
-export { type ClassValue, type Component, ELEMENT, Factory, FileViewFinder, Fragment, type HtmlAttributes, HtmlString, InvalidViewError, JSX, type OrielElement, type Props, type Renderable, type StyleObject, TsxView, View, type ViewEnvironment, ViewNotFoundError, ViewRenderError, ViewServiceProvider, classNames, createElement, csrfField, e, isElement, isHtmlable, jsx, jsxs, methodField, raw, renderToStream, renderToString, styleString, view };
+export { type ClassValue, type Component, ELEMENT, Factory, FileViewFinder, Fragment, type HtmlAttributes, HtmlString, InvalidViewError, JSX, type LiveDirectiveAttributes, type LiveDirectives, type LiveEvent, type LiveEventAttributes, type OrielElement, type OtherAttributes, type Props, type Renderable, type StyleObject, TsxView, View, type ViewEnvironment, ViewNotFoundError, ViewRenderError, ViewServiceProvider, classNames, createElement, csrfField, e, isElement, isHtmlable, jsx, jsxs, methodField, raw, renderToStream, renderToString, styleString, view };

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   isElement,
   jsx,
   jsxs
-} from "./chunk-KIU7OKDI.js";
+} from "./chunk-AXHMZAM6.js";
 
 // Html.ts
 var ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };

package/dist/jsx-runtime.d.ts

@@ -3,6 +3,93 @@ import { Htmlable } from '@orieljs/contracts';
 type ClassValue = string | number | null | undefined | false | ClassValue[] | Record<string, unknown>;
 type StyleObject = Record<string, string | number | null | undefined | false>;
 
+/**
+ * The `o:` attributes of Live components, typed for TSX: a directive (`o:model`, `o:loading`, …) or an action on a DOM
+ * event (`o:click="save"`), with modifiers joined by `-` (`o:model-live`, `o:keydown-enter`). An `o:` name that is
+ * neither doesn't compile (`o:clik`, `o:modle`), and the forms listed here are completed by editors and have their
+ * values checked. TypeScript doesn't check JSX attribute names that contain a `-` unless the type lists them, so a
+ * form that isn't listed (a duration such as `o:model-live-debounce-500ms`, an event's modifiers) is accepted as
+ * written, and so is a misspelt one (`o:model-lvie`).
+ */
+type ModelTrigger = 'live' | 'blur' | 'change' | 'lazy';
+type ElementChange = 'remove' | 'class' | 'class-remove' | 'attr';
+/**
+ * The directives that aren't DOM events, by name: the value each takes (`boolean` for one that can be written bare,
+ * `<a o:navigate>`, or from an expression, `o:navigate={external}`: `false` leaves it out) and its modifier forms, the
+ * `-`-joined text after the name (`never` for none). A new directive adds a member here, and its name to the Live
+ * client's reserved directives.
+ */
+interface LiveDirectives {
+    /** o:model="title": binds an input to a public property, sent with the next request unless live, blur, change or lazy. */
+    model: {
+        value: string;
+        modifiers: ModelTrigger | 'number' | 'debounce' | 'live-debounce' | `${ModelTrigger}-number`;
+    };
+    /** o:loading: shown (or changed) while the component's request runs. */
+    loading: {
+        value: boolean | string;
+        modifiers: ElementChange | 'delay' | `delay-${ElementChange}`;
+    };
+    /** o:target="save,title": the actions or properties o:loading waits for. */
+    target: {
+        value: string;
+        modifiers: never;
+    };
+    /** o:poll="refresh": calls the method ($refresh without one) every 2.5 s, or every `o:poll-<n>s`. */
+    poll: {
+        value: boolean | string;
+        modifiers: 'keep-alive' | 'visible';
+    };
+    /** o:navigate on a link: fetches the page and swaps it in; `-hover` prefetches on hover. */
+    navigate: {
+        value: boolean;
+        modifiers: 'hover';
+    };
+    /** o:offline: shown (or changed) while the browser is offline. */
+    offline: {
+        value: boolean | string;
+        modifiers: ElementChange;
+    };
+    /** o:key: keeps an element's identity across re-renders. */
+    key: {
+        value: string | number;
+        modifiers: never;
+    };
+    /** o:confirm="Delete this tag?": asks before the element's action runs; `-prompt` asks for a typed answer. */
+    confirm: {
+        value: boolean | string;
+        modifiers: 'prompt';
+    };
+    /** o:announce on a status region: an action that leaves the same message announces it again. */
+    announce: {
+        value: boolean;
+        modifiers: never;
+    };
+}
+/**
+ * The DOM events `o:<event>` runs an action on. A name with a `-` can't be written in TSX (modifiers are `-`
+ * segments), and `offline` is the o:offline directive, not the event. An event this list doesn't have (a custom
+ * event a component dispatches) is spread: `<div {...{ 'o:saved': 'refresh' }} />`.
+ */
+type LiveEvent = 'click' | 'dblclick' | 'auxclick' | 'contextmenu' | 'mousedown' | 'mouseup' | 'mousemove' | 'mouseover' | 'mouseout' | 'mouseenter' | 'mouseleave' | 'wheel' | 'pointerdown' | 'pointerup' | 'pointermove' | 'pointerover' | 'pointerout' | 'pointerenter' | 'pointerleave' | 'pointercancel' | 'gotpointercapture' | 'lostpointercapture' | 'keydown' | 'keyup' | 'keypress' | 'input' | 'beforeinput' | 'change' | 'submit' | 'reset' | 'invalid' | 'select' | 'formdata' | 'search' | 'focus' | 'blur' | 'focusin' | 'focusout' | 'copy' | 'cut' | 'paste' | 'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop' | 'touchstart' | 'touchend' | 'touchmove' | 'touchcancel' | 'compositionstart' | 'compositionupdate' | 'compositionend' | 'play' | 'pause' | 'playing' | 'ended' | 'timeupdate' | 'volumechange' | 'ratechange' | 'durationchange' | 'loadstart' | 'loadeddata' | 'loadedmetadata' | 'canplay' | 'canplaythrough' | 'seeking' | 'seeked' | 'waiting' | 'stalled' | 'suspend' | 'emptied' | 'progress' | 'abort' | 'error' | 'load' | 'animationstart' | 'animationend' | 'animationiteration' | 'animationcancel' | 'transitionstart' | 'transitionend' | 'transitionrun' | 'transitioncancel' | 'scroll' | 'scrollend' | 'resize' | 'toggle' | 'beforetoggle' | 'close' | 'cancel' | 'online' | 'popstate' | 'hashchange' | 'beforeunload' | 'pagehide' | 'pageshow' | 'storage' | 'message' | 'visibilitychange' | 'selectionchange' | 'fullscreenchange' | 'slotchange' | 'cuechange';
+/** `o:model`, `o:model-live`, …: each directive and each of its modifier forms, with the directive's value. */
+type LiveDirectiveAttributes = {
+    [N in keyof LiveDirectives as `o:${N}` | `o:${N}-${LiveDirectives[N]['modifiers']}`]?: LiveDirectives[N]['value'];
+};
+/** `o:click="save"`: an action (a method, `method(args)`, `$refresh`, `$set(…)`, `$dispatch(…)`) on a DOM event. */
+type LiveEventAttributes = {
+    [E in LiveEvent as `o:${E}`]?: string;
+};
+type Letter = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+/**
+ * Every other attribute, with any value: each name that doesn't start with `o:` (`o`, `href`, `onclick`, `open`,
+ * `xlink:href`, `viewBox`; names with a `-`, such as `data-*`, `aria-*` and `hx-post`, are never checked).
+ */
+type OtherAttributes = {
+    [K in 'o' | `${Exclude<Letter, 'o'> | Uppercase<Letter> | '_' | '$'}${string}` | `o${Letter | Uppercase<Letter> | Digit | '_' | '.' | '$'}${string}`]?: unknown;
+};
+
 /** Marks the objects jsx() returns (Symbol.for, so two copies of the package agree). */
 declare const ELEMENT: unique symbol;
 type Props = Record<string, unknown>;
@@ -34,8 +121,13 @@ interface OrielElement {
 declare function jsx(type: ElementType, props: Props | null, key?: string | number): OrielElement;
 /** Same as jsx(); the compiler uses it when there are several static children. */
 declare const jsxs: typeof jsx;
-/** Attributes every intrinsic element accepts. Unknown attributes (hx-*, x-*, o:click, …) are allowed. */
-interface HtmlAttributes {
+/**
+ * Attributes every intrinsic element accepts. Any attribute is allowed (hx-*, x-*, data-*, …) except an `o:` name
+ * that isn't a Live directive or `o:<event>` (directives.ts), so a typo such as `o:clik` doesn't compile. An `o:` form
+ * with a `-` that the type doesn't list compiles unchecked (TypeScript doesn't check a hyphenated JSX name the type
+ * leaves out), and a custom event name is spread: `<div {...{ 'o:saved': 'refresh' }} />`.
+ */
+interface HtmlAttributes extends OtherAttributes, LiveDirectiveAttributes, LiveEventAttributes {
     children?: Renderable;
     class?: ClassValue;
     className?: ClassValue;
@@ -43,7 +135,6 @@ interface HtmlAttributes {
     dangerouslySetInnerHTML?: {
         __html: string;
     };
-    [attribute: string]: unknown;
 }
 declare namespace JSX {
     type Element = OrielElement;

package/dist/jsx-runtime.js

@@ -2,7 +2,7 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-KIU7OKDI.js";
+} from "./chunk-AXHMZAM6.js";
 export {
   Fragment,
   jsx,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orieljs/view",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.7",
   "description": "The Oriel View component.",
   "type": "module",
   "license": "Apache-2.0",
@@ -31,12 +31,13 @@
   "files": [
     "dist",
     "LICENSE",
-    "NOTICE"
+    "NOTICE",
+    "TRADEMARKS.md"
   ],
   "dependencies": {
-    "@orieljs/contracts": "0.1.0-alpha.6",
-    "@orieljs/support": "0.1.0-alpha.6",
-    "@orieljs/container": "0.1.0-alpha.6"
+    "@orieljs/contracts": "0.1.0-alpha.7",
+    "@orieljs/container": "0.1.0-alpha.7",
+    "@orieljs/support": "0.1.0-alpha.7"
   },
   "scripts": {
     "build": "tsup && node ../../../scripts/copy-license.mjs"