solid-docs
solid-docs copied to clipboard
Improve Special JSX Attributes docs
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.