wallace 0.1.0 → 0.3.0

package/lib/types.d.ts

@@ -16,6 +16,7 @@
   6. Inheritance
   7. Stubs
   8. TypeScript
+  9. Utility functions
 
 For more detailed documentation go to https://github.com/wallace-js/wallace
 
@@ -37,8 +38,8 @@ The function takes two arguments, both optional:
 2. **xargs** - which *must* be destructured to exactly one level, as shown:
 
 ```tsx
-const MyComponent = ({title}, {ctrl, e}) => (
-  <button onClick={ctrl.doSomething(e)}>
+const MyComponent = ({title}, {ctrl, event}) => (
+  <button onClick={ctrl.doSomething(event)}>
     {title}
   </button>
 );
@@ -48,7 +49,7 @@ The **xargs** contains:
 
 - `ctrl` a reference to a controller object.
 - `self` a reference to the component instance (as `this` is not allowed).
-- `e` for use in event callbacks, signifies the event.
+- `event` for use in event callbacks, signifies the event.
 
 The function will be replaced by a very different one during compilation, therefore:
 
@@ -154,21 +155,21 @@ Other than that, its standard JSX, except for three special cases:
 2. Nesting.
 3. Stubs, for inheritance.
 
-## 3 Nesting
+## 3. Nesting
 
 To nest or repeat components use its name followed by `.nest` or `.repeat`:
 
 ```tsx
-const Task: Uses<iTask> = (task) => (<div></div>);
+const Task = (task) => (<div></div>);
 
-const TopTasks: Uses<iTask[]> = (tasks) => (
+const TopTasks = (tasks) => (
   <div>
     <Task.nest props={tasks[0]} />
     <Task.nest props={tasks[1]} />
   </div>
 );
 
-const TaskList: Uses<iTask[]> = (tasks) => (
+const TaskList = (tasks) => (
   <div>
     <Task.repeat props={tasks} />
   </div>
@@ -177,10 +178,9 @@ const TaskList: Uses<iTask[]> = (tasks) => (
 
 Notes:
 
-  - You may only use the directives `prop`, `show` and `hide`.
-  - TypeScript will adjust `props` to require `iTask` or `iTask[]` accordingly.
-  - You may not nest the root element.
-  - A repeat must be the only child element under its parent.
+ - You cannot use nest or repeat on the root element.
+ - Repeat must be the only child element under its parent.
+ - The `props` expects an array on repeat (See **TypeScript** below) 
 
 ## 4. Directives
 
@@ -190,9 +190,11 @@ over it in your IDE.
 
 You can also display this list by hovering over any JSX element, like `div`.
 
+- `apply` runs a callback to modify an element.
 - `bind` updates a value when an input is changed.
 - `class:xyz` defines a set of classes to be toggled.
-- `hide` sets and element or component's hidden property.
+- `hide` sets an element or component's hidden property.
+- `html` Set the element's `innnerHTML` property.
 - `if` excludes an element from the DOM.
 - `on[EventName]` creates an event handler (note the code is copied)
 - `props` specifes props for a nested or repeated component, in which case it must be
@@ -214,25 +216,28 @@ component, making it a convenient place to handle:
 - Sorting, filtering and formatting props.
 - Coordinating updates.
 
-This lets you use props solely for data, without callbacks.
+This lets you use props purely for data.
 
 Controllers often reference:
 
-- Any components that should be updated after data changes.
-- Higher level controllers.
+- One or more components to be updated after data changes.
+- Other controllers they need access to like services or modal containers.
+
+Components sometimes only use a controller, and no props.
 
 ```tsx
 class TaskController {
-  constructor (rootComponent, mainController) {
+  constructor (rootComponent, dbController) {
     this.root = rootComponent;
-    this.main = mainController;
+    this.db = dbController;
   }
   getTasks () {
-    return this.main.fetch(...);
+    return this.db.fetch(...);
   }
   newTask () {
-      // do stuff...
-    this.root.update();
+    this.db.put(...).then(() => {
+      this.root.update();
+    });
   }
 }
 
@@ -245,17 +250,17 @@ const TaskList = (_, {ctrl}) => (
 );
 
 TaskList.methods({
-  render(props, ctrl) {
-    this.props = props;
+  render(_, ctrl) {
     this.ctrl = new TaskController(this, ctrl);
+    this.update();
   }
 });
 ```
 
 ## 6. Inheritance
 
-You can define new components by extending other component definitions, either with
-using the base's structure, or overriding it:
+You can creat new component defintion by extending another one, either preserving the
+base's structure, or overriding it:
 
 ```tsx
 import { extendComponent } from 'wallace';
@@ -290,21 +295,20 @@ MyComponent.stubs.text: MyTextComponent;
 
 Stubs are inherited and can be overridden, which means you can either:
 
-- Let the base define the DOM structure, and implement/override stubs on the inherited
-component.
-- Let the inherited component define the DOM structure, and use stubs from the base.
+- Set the DOM structure in the base, and implement/override stubs on the child.
+- Set the DOM structure in the child, and use/override stubs from the base.
+
+So long as the rendered component has all its stubs defined somewhere, it will work.
 
 Notes:
 
-* Stubs receive the same props and controller as their containing component.
-* Stubs are separate components, so cannot access methods on the containing component
-* through `self` (use the controller for that kind of thing).
+ - Stubs receive the same props and controller as their containing component.
+ - Stubs are separate components, so cannot access methods on the containing component
+   through `self` (use the controller for that kind of thing).
 
 ## 8. TypeScript
 
-### 8.1 `Uses` type
-
-The `Uses` type must be placed where shown:
+The main type is `Uses` which must be placed right after the comonent name:
 
 ```tsx
 import { Uses } from 'wallace';
@@ -316,28 +320,32 @@ interface iTask {
 const Task: Uses<iTask> = ({text}) => <div>{text}</div>;
 ```
 
-This will set up typing for the props inside the function and many other things.
-
 If you require no props, set it to `null`:
 
 ```tsx
 const Task: Uses<null> = () => <div>Hello</div>;
 ```
 
-##### Nesting
+`Uses` sets up type support in several places.
+
+### Props
 
-With `Uses` in place, you will be warned if you attempt to pass incorrect props during
-mounting or nesting, including repeat, which expects an arry of the type:
+TypeScript will ensure you pass correct props during mounting or nesting,
+including repeat, which expects an arry of the type:
 
 ```
 const TaskList: Uses<iTask[]> = (tasks) => (
   <div>
-    <Task.repeat props={tasks} />
+    First task:
+    <Task.nest props={tasks[0]} />
+    <div>
+      <Task.repeat props={tasks.slice(1)} />
+    </div>
   </div>
 );
 ```
 
-##### Controller
+### Controller
 
 The 2nd type is used for the controller, available as `ctrl` in **xargs**:
 
@@ -353,7 +361,7 @@ const Task: Uses<null, TaskController> = (_, { ctrl }) => (
 ));
 ```
 
-##### Methods
+### Methods
 
 To see custom methods on `self` you'll need use an interface:
 
@@ -379,7 +387,7 @@ Task.methods({
 The type will pass into the object passed into `methods` so it recognises custom methods
 in addition to standard methods like `render`, which are already typed for you.
 
-##### Stubs
+### Stubs
 
 The `props` and `controller` will pass through to functions you assign to
 `Component.stubs` as stubs receive the same props as the parent.
@@ -393,7 +401,7 @@ Task.stubs.foo = (_, { self }) => (
 ));
 ```
 
-### 8.2 Types for `extendComponent`
+### Inheritance
 
 The `extendComponent` function transfers the types specified on the base:
 
@@ -413,12 +421,46 @@ const Child = extendComponent<newProps, Controller, Methods>(Parent);
    to `any`.
 2. Each type must extend its corresponding type on base.
 
-Note that these are just typing restrictions, you can ignore them if you must.
+### Other types:
 
+Wallace defines some other types you may use:
 
+ - `Component<Props, Controller, Methods>` - the base component class (it is a 
+    constructor, not a class)
+ - `ComponentInstance<Props, Controller, Methods>` - a component instance.
+
+## Utility functions
+
+Each of these has their own JSDoc, we just lsit them here.
+
+
+### extendComponent
+
+Define a new componend by extending another one:
+
+```
+const Foo = extendComponent(Base);
+const Bar = extendComponent(Base, () => <div></div>);
+```
+
+### mount
+
+Mounts an instance of a component to the DOM:
+
+```
+mount("elementId", MyComponent, props, ctrl);
+```
+
+### watch
+
+Returns a Proxy of an object which calls `callback` when keys are set:
+
+```
+watch(obj, () => console.log('obj modified);
+```
 ---
----
-Help make Wallace better by giving it a star: https://github.com/wallace-js/wallace
+Report any issues to https://github.com/wallace-js/wallace (and please give it a ★)
+
 */
 
 declare module "wallace" {
@@ -429,20 +471,20 @@ declare module "wallace" {
   interface ComponentFunction<
     Props = any,
     Controller = any,
-    Methods extends object = {},
+    Methods extends object = {}
   > {
     (
       props: Props,
       other?: {
         ctrl: Controller;
-        self: Component<Props, Controller, Methods>;
-        e: Event;
+        self: ComponentInstance<Props, Controller, Methods>;
+        event: Event;
       }
     ): JSX.Element;
     nest?({
       props,
       show,
-      hide,
+      hide
     }: {
       props?: Props;
       show?: boolean;
@@ -451,7 +493,7 @@ declare module "wallace" {
     repeat?({
       props,
       show,
-      hide,
+      hide
     }: {
       props: Array<Props>;
       show?: boolean;
@@ -459,10 +501,10 @@ declare module "wallace" {
     }): JSX.Element;
     methods?(
       object: ComponenMethods<Props, Controller> &
-        ThisType<Component<Props, Controller, Methods>>
+        ThisType<ComponentInstance<Props, Controller, Methods>>
     ): void;
     readonly prototype?: ComponenMethods<Props, Controller> &
-      ThisType<Component<Props, Controller, Methods>>;
+      ThisType<ComponentInstance<Props, Controller, Methods>>;
     // Methods will not be available on nested component, so omit.
     readonly stubs?: Record<string, ComponentFunction<Props, Controller>>;
   }
@@ -491,16 +533,16 @@ declare module "wallace" {
   export type Uses<
     Props = any,
     Controller = any,
-    Methods extends object = {},
+    Methods extends object = {}
   > = ComponentFunction<Props, Controller, Methods>;
 
   /**
    * The type for a component instance.
    */
-  export type Component<
+  export type ComponentInstance<
     Props = any,
     Controller = any,
-    Methods extends object = {},
+    Methods extends object = {}
   > = {
     update(): void;
     render(props: Props, ctrl?: Controller): void;
@@ -509,6 +551,14 @@ declare module "wallace" {
     ctrl: Controller;
   } & Methods;
 
+  /**
+   * The component constructor function (typed as a class, but isn't).
+   */
+  export class Component<Props = any, Controller = any> {
+    update(): void;
+    render(props: Props, ctrl?: Controller): void;
+  }
+
   /**
    * Use to define a new component which extends another component, meaning it will
    * inherit its prototye and stubs.
@@ -521,7 +571,7 @@ declare module "wallace" {
   export function extendComponent<
     Props = any,
     Controller = any,
-    Methods extends object = {},
+    Methods extends object = {}
   >(
     base: Uses<Props, Controller, Methods>,
     componentFunc?: ComponentFunction<Props, Controller, Methods>
@@ -532,16 +582,12 @@ declare module "wallace" {
    *
    * Note that the original element is removed along with its attributes (class, id...).
    */
-  export function mount<
-    Props = any,
-    Controller = any,
-    Methods extends object = {},
-  >(
+  export function mount<Props = any, Controller = any, Methods extends object = {}>(
     element: string | HTMLElement,
     componentDefinition: Uses<Props, Controller, Methods>,
     props?: Props,
     ctrl?: Controller
-  ): Component<Props, Controller, Methods>;
+  ): ComponentInstance<Props, Controller, Methods>;
 
   /**
    * Returns a Proxy of an object which calls `callback` when keys are set, and this
@@ -560,19 +606,15 @@ declare module "wallace" {
    * The callback does not indicate the data has changed, only that a key was set.
    *
    * Some methods like `Array.push` set the index and then the length immediately after,
-   * so we use a grace period to avoid calling the callback twice for what is really a
+   * so we use a timeout period to avoid calling the callback twice for what is really a
    * single operation.
    *
    * @param {*} target - Any object, including arrays.
-   * @param {*} grace - Any value in ms. Defaults to 100.
+   * @param {*} timeout - Any value in ms. Defaults to 100.
    * @param {*} callback - A callback function.
    * @returns a Proxy of the object.
    */
-  export function watch<T>(
-    target: T,
-    callback: CallableFunction,
-    grace?: number
-  ): T;
+  export function watch<T>(target: T, callback: CallableFunction, timeout?: number): T;
 }
 
 type MustBeExpression = Exclude<any, string>;
@@ -583,14 +625,25 @@ type MustBeExpression = Exclude<any, string>;
  */
 interface DirectiveAttributes extends AllDomEvents {
   /**
-   * ## Wallace directive: base
+   * ## Wallace directive: apply
+   *
+   * Applies a callback, typically to modify its element, which is accessible via
+   * **xargs**.
    *
-   * Specifies a base component definition to inherit from.
+   * Note that you can use `element` from **xargs** multiple times and each will refer
+   * to the element where it is used.
+   *
+   * ```
+   * const MyComponent = (_, { element }) => (
+   *   <div>
+   *     <div apply={doSomething(element)}></div>
+   *     <div apply={doSomethingElse(element)}></div>
+   *   </div>
+   * );
+   * ```
    *
-   * This allows you to inherit methods and override stubs.
-   * Must be an expression returning a component definition.
    */
-  base?: MustBeExpression;
+  apply?: MustBeExpression;
 
   /**
    * ## Wallace directive: bind
@@ -612,16 +665,16 @@ interface DirectiveAttributes extends AllDomEvents {
    * Is the equivalent of this:
    *
    *```
-   * const MyComponent = ({name}, {e}) => (
-   *   <input type="text" onChange={name = e.target.value} value={name}/>
+   * const MyComponent = ({name}, {event}) => (
+   *   <input type="text" onChange={name = event.target.value} value={name}/>
    * );
    * ```
    *
    * In the case of a checkbox it uses `checked` instead of `value`, so is the equivalent of this:
    *
    * ```
-   * const MyComponent = ({done}, {e}) => (
-   *   <input type="checkbox" onChange={done = e.target.checked} checked={done}/>
+   * const MyComponent = ({done}, {event}) => (
+   *   <input type="checkbox" onChange={done = event.target.checked} checked={done}/>
    * );
    * ```
    *
@@ -666,6 +719,12 @@ interface DirectiveAttributes extends AllDomEvents {
    */
   hide?: MustBeExpression;
 
+  /** ## Wallace directive: html
+   *
+   * Set the element's `innnerHTML` property.
+   */
+  html?: MustBeExpression;
+
   /** Wallace excludes this element from the DOM if the condition is false,
    * and does not render dynamic elements underneath. */
   if?: MustBeExpression;
@@ -748,11 +807,20 @@ declare namespace JSX {
 
   interface IntrinsicElements {
     /**
+     * Nesting syntax:
+     *   ```
+     *   <MyComponent.nest props={singleProps} />
+     *   <MyComponent.repeat props={arrayOfProps} />
+     *   ```
+     * But note that repeat must not have siblings.
+     *
      * Available Wallace directives:
      *
+     * - `apply` runs a callback to modify an element.
      * - `bind` updates a value when an input is changed.
      * - `class:xyz` defines a set of classes to be toggled.
-     * - `hide` sets and element or component's hidden property.
+     * - `hide` sets an element or component's hidden property.
+     * - `html` Set the element's `innnerHTML` property.
      * - `if` excludes an element from the DOM.
      * - `on[EventName]` creates an event handler (note the code is copied)
      * - `props` specifes props for a nested or repeated component, in which case it must be
@@ -777,882 +845,970 @@ declare namespace JSX {
  */
 interface AllDomEvents {
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onAbort?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler.
+   *
+   * Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onAnimationCancel?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onAnimationEnd?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onAnimationIteration?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onAnimationStart?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onAuxClick?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onBeforeInput?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onBlur?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onCancel?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onCanPlay?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onCanPlayThrough?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onChange?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onClick?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onClose?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onContextMenu?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onCopy?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onCueChange?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onCut?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDblClick?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDrag?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDragEnd?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDragEnter?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDragLeave?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDragOver?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDragStart?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDrop?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onDurationChange?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onEmptied?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onEnded?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onError?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onFocus?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onFormData?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onGotPointerCapture?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onInput?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onInvalid?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onKeyDown?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onKeyPress?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onKeyUp?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onLoad?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onLoadedData?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onLoadedMetadata?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onLoadStart?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onLostPointerCapture?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onMouseDown?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onMouseEnter?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onMouseLeave?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onMouseMove?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onMouseOut?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onMouseOver?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onMouseUp?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPaste?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPause?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPlay?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPlaying?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerCancel?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerDown?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerEnter?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerLeave?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerMove?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerOut?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerOver?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onPointerUp?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onProgress?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onRateChange?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onReset?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onResize?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onScroll?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onSecurityPolicyViolation?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onSeeked?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onSeeking?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onSelect?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onSlotChange?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onStalled?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onSubmit?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onSuspend?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTimeUpdate?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onToggle?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTouchCancel?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTouchEnd?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTouchMove?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTouchStart?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTransitionCancel?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTransitionEnd?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTransitionRun?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onTransitionStart?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onVolumeChange?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onWaiting?: any;
   /**
-   * Wallace runs the expression when the event fires.
+   * ## Wallace event handler
+   *
+   * Note the code is copied. Use xargs to access the event:
    *
-   * Use xargs to access the event or element:
    * ```
-   * const MyComponent = (_, { e }) => (
-   *    <button onClick={clickHandler(e)} />
+   * const MyComponent = (_, { event }) => (
+   *    <button onClick={clickHandler(event)} />
    * );
    * ```
    */ onWheel?: any;