jsx-view/lib/renderSpec.d.ts

Minimal JSX for HTML DOM tightly integrated with RxJS. TypeScript definitions, and attributes can be assigned to observables.

import { Subscription } from "rxjs";
import type { DOMOutputSpec } from "./DOMOutputSpec";
import type { Context } from "./Context";
/**
 * Render out an Element which can be appended to another Node in the DOM.
 *
 * TypeScript: Defaults to assuming the return is an {@link HTMLElement}, but it can be customized using a type parameter.
 */
export declare function renderSpec<T extends Element = HTMLElement>(parentSub: Subscription, structure: DOMOutputSpec): T;
/**
 * Pull a context from the current render function's execution frame.
 *
 * @example
 * import {createContext, useContext} from "jsx-view"
 *
 * const themeContext = createContext({
 *   textColor: "cornflowerblue"
 * })
 *
 * function MyComponent(props, children) {
 *   const theme = useContext(themeContext)
 *   return <p style={`color: ${theme.textColor}`}>
 *     Styled text
 *   </p>
 * }
 */
export declare function useContext<T>(context: Context<T>): T;
/**
 * Add a value for the context to the current render scope which will be passed down to child dom components.
 *
 * @example
 * import {createContext, useContext, addContext} from "jsx-view"
 *
 * const themeContext = createContext({
 *   textColor: "cornflowerblue"
 * })
 *
 * function MyParent(props, children) {
 *   const theme = useContext(themeContext) // pull default / parent provided context
 *
 *   addContext(themeContext, {...theme, textColor: "dodgerblue"}) // Makes MyComponent style with dodgerblue
 *
 *   return <p style={`color: ${theme.textColor}`}>
 *     Styled cornflowerblue
 *     <MyComponent/>
 *   </p>
 * }
 *
 * function MyComponent(props, children) {
 *   const theme = useContext(themeContext)
 *   return <p style={`color: ${theme.textColor}`}>
 *     Styled dodgerblue
 *   </p>
 * }
 */
export declare function addContext<T>(context: Context<T>, value: T): T;
export declare class ContextAccessError extends Error {
    constructor(intent: string);
}
//# sourceMappingURL=renderSpec.d.ts.map