@layr/react-integration/dist/node-esm/decorators.d.ts

React integration for Layr

import { Component } from '@layr/component';
import { RoutableComponent, RouteOptions, WrapperOptions, Pattern } from '@layr/routable';
import { PlainObject } from 'core-helpers';
type ViewOption = {
    observe?: boolean;
};
/**
 * Decorates a method of a Layr [component](https://layrjs.com/docs/v2/reference/component) so it be can used as a React component.
 *
 * Like any React component, the method can receive some properties as first parameter and return some React elements to render.
 *
 * The decorator binds the method to a specific component, so when the method is executed by React (via, for example, a reference included in a [JSX expression](https://reactjs.org/docs/introducing-jsx.html)), it has access to the bound component through `this`.
 *
 * Also, the decorator observes the attributes of the bound component, so when the value of an attribute changes, the React component is automatically re-rendered.
 *
 * @example
 * ```
 * import {Component, attribute} from '﹫layr/component';
 * import React from 'react';
 * import ReactDOM from 'react-dom';
 * import {view} from '﹫layr/react-integration';
 *
 * class Person extends Component {
 *   ﹫attribute('string') firstName = '';
 *
 *   ﹫attribute('string') lastName = '';
 *
 *   ﹫view() FullName() {
 *     return <span>{`${this.firstName} ${this.fullName}`}</span>;
 *   }
 * }
 *
 * const person = new Person({firstName: 'Alan', lastName: 'Turing'});
 *
 * ReactDOM.render(<person.FullName />, document.getElementById('root'));
 * ```
 *
 * @category Decorators
 * @decorator
 */
export declare function view(options?: ViewOption): (target: typeof Component | Component, name: string, descriptor: PropertyDescriptor) => {
    configurable: boolean | undefined;
    enumerable: false;
    get(this: (typeof Component | Component) & {
        __boundReactComponents: PlainObject;
    }): any;
};
/**
 * A convenience decorator that combines the [`@route()`](https://layrjs.com/docs/v2/reference/routable#route-decorator) and [`@view()`](https://layrjs.com/docs/v2/reference/react-integration#view-decorator) decorators.
 *
 * Typically, you should use this decorator to implement the pages of your app.
 *
 * @param pattern The canonical [URL pattern](https://layrjs.com/docs/v2/reference/addressable#url-pattern-type) of the route.
 * @param [options] An object specifying the options to pass to the `Route`'s [constructor](https://layrjs.com/docs/v2/reference/addressable#constructor) when the route is created.
 *
 * @examplelink See an example of use in the [`BrowserNavigatorView`](https://layrjs.com/docs/v2/reference/react-integration#browser-navigator-view-react-component) React component.
 *
 * @category Decorators
 * @decorator
 */
export declare function page(pattern: Pattern, options?: ViewOption & RouteOptions): (target: typeof RoutableComponent | RoutableComponent, name: string, descriptor: PropertyDescriptor) => PropertyDescriptor;
/**
 * A convenience decorator that combines the [`@wrapper()`](https://layrjs.com/docs/v2/reference/routable#wrapper-decorator) and [`@view()`](https://layrjs.com/docs/v2/reference/react-integration#view-decorator) decorators.
 *
 * Typically, you should use this decorator to implement the layouts of your app.
 *
 * @param pattern The canonical [URL pattern](https://layrjs.com/docs/v2/reference/addressable#url-pattern-type) of the wrapper.
 * @param [options] An object specifying the options to pass to the `Wrapper`'s [constructor](https://layrjs.com/docs/v2/reference/addressable#constructor) when the wrapper is created.
 *
 * @examplelink See an example of use in the [`BrowserNavigatorView`](https://layrjs.com/docs/v2/reference/react-integration#browser-navigator-view-react-component) React component.
 *
 * @category Decorators
 * @decorator
 */
export declare function layout(pattern: Pattern, options?: ViewOption & WrapperOptions): (target: typeof RoutableComponent | RoutableComponent, name: string, descriptor: PropertyDescriptor) => PropertyDescriptor;
export {};