Interface Spec

docs/deku.d.ts:148–263

* A descriptor of Component creation, behavior, and lifecycle. * * Deku's primary interface is operated via specification of components. * Components are collections of behavior and state parameterized by immutable, * static properties. A value of type Spec specifies a component o

   * type Component<P, S> with properties in type P and local state in type S.
   */
  interface Spec<P extends HasChildren, S> {
   
    /** Define a name for the component that can be used in debugging */
    name?: string;
   
    /** Validate the props sent to your component */
    propTypes?: { [prop: string]: PropSpec };
   
    /** 
     * Render a component. We need to pass in setState so that callbacks on
     * sub-components. This may change in the future.
     * 
     * Client: Yes
     * Server: Yes
     */  
    render: (component: Component<P, S>, setState: (newState: S) => void) => VirtualNode<P, S>;
    
    /** 
     * Get the initial state for the component. We don't pass props in here like
     * React does because the state should just be computed in the render function.  
     */
    initialState?: () => S;
    
    /** Default props can be defined that will be used across all instances.  */
    defaultProps?: P;
    
    /** This is called on both the server and the client. */
    beforeMount?: (component: Component<P, S>) => any;
    
    /**
     * This is called after the component is rendered the first time and is only
     * ever called once.
     * 
     * Use cases:
     * - Analytics tracking
     * - Loading initial data
     * - Setting the state that should change immediately eg. open/close
     * - Adding DOM event listeners on the window/document
     * - Moving the element in the DOM. eg. to the root for dialogs
     * - Focusing the element
     *
     * Client: Yes
     * Server: No
     */
    afterMount?: (component: Component<P, S>, el: Node, setState: (newState: S) => void) => any;
    
    /**
     * This is called once just before the element is removed. It should be used
     * to clean up after the component.
     * 
     * Use cases:
     * - Unbind window/document event handlers
     * - Edit the DOM in anyway to clean up after the component
     * - Unbind any event emitters
     * - Disconnect streams
     *
     * Client: Yes
     * Server: No