@wordpress/interactivity
Version:
Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.
67 lines • 2.51 kB
TypeScript
/**
* External dependencies
*/
import type { h as createElement, RefObject } from 'preact';
import type { Evaluate } from './hooks';
export interface Scope {
evaluate: Evaluate;
context: object;
serverContext: object;
ref: RefObject<HTMLElement>;
attributes: createElement.JSX.HTMLAttributes;
}
export declare const getScope: () => Scope;
export declare const setScope: (scope: Scope) => void;
export declare const resetScope: () => void;
/**
* Retrieves the context inherited by the element evaluating a function from the
* store. The returned value depends on the element and the namespace where the
* function calling `getContext()` exists.
*
* @param namespace Store namespace. By default, the namespace where the calling
* function exists is used.
* @return The context content.
*/
export declare const getContext: <T extends object>(namespace?: string) => T;
/**
* Retrieves a representation of the element where a function from the store
* is being evaluated. Such representation is read-only, and contains a
* reference to the DOM element, its props and a local reactive state.
*
* @return Element representation.
*/
export declare const getElement: () => Readonly<{
ref: HTMLElement | null;
attributes: createElement.JSX.HTMLAttributes<EventTarget>;
}>;
/**
* Retrieves the part of the inherited context defined and updated from the
* server.
*
* The object returned is read-only, and includes the context defined in PHP
* with `wp_interactivity_data_wp_context()`, including the corresponding
* inherited properties. When `actions.navigate()` is called, this object is
* updated to reflect the changes in the new visited page, without affecting the
* context returned by `getContext()`. Directives can subscribe to those changes
* to update the context if needed.
*
* @example
* ```js
* store('...', {
* callbacks: {
* updateServerContext() {
* const context = getContext();
* const serverContext = getServerContext();
* // Override some property with the new value that came from the server.
* context.overridableProp = serverContext.overridableProp;
* },
* },
* });
* ```
*
* @param namespace Store namespace. By default, the namespace where the calling
* function exists is used.
* @return The server context content.
*/
export declare const getServerContext: <T extends object>(namespace?: string) => T;
//# sourceMappingURL=scopes.d.ts.map