solid-docs icon indicating copy to clipboard operation
solid-docs copied to clipboard

Improve Special JSX Attributes docs

Open micnic opened this issue 3 years ago • 0 comments

At the moment the Special JSX Attributes section in api.md does not fully explain how one can extend the JSX syntax to support the special attributes. I propose to improve it by using something similar to the following structure:

import "solid-js";

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      // use:____

      /**
       * @example
       * model: [() => string, (v: string) => void];
       *
       * // Usage:
       * <input type="text" use:model={[name, setName]}/>
       */
    }

    interface ExplicitProperties {
      // prop:____

      /**
       * @example
       * scrollTop: number;
       *
       * // Usage:
       * <div prop:scrollTop={props.scrollTop} />
       */
    }

    interface ExplicitAttributes {
      // attr:____

      /**
       * @example
       * status: string;
       *
       * // Usage:
       * <my-elem attr:status={props.status} />
       */
    }

    interface CustomEvents {
      // on:____

      /**
       * @example
       * click: MouseEvent;
       *
       * // Usage:
       * <div on:click={(e: MouseEvent) => {}}>Click me!</div>
       */
    }

    interface CustomCaptureEvents {
      // oncapture:____
      
      /**
       * @example
       * click: MouseEvent;
       *
       * // Usage:
       * <div oncapture:click={(e: MouseEvent) => {}}>
       *   <div onClick={(e: MouseEvent) => {}}>Click me!</div>
       * </div>
       */
    }
  }
}

Or add the specific interface for each type of special attribute. Eventually this declaration template can be added to the solidjs/templates repo.

micnic avatar May 24 '22 11:05 micnic