diff --git a/packages/interactivity/docs/2-api-reference.md b/packages/interactivity/docs/2-api-reference.md index 03e9918efec36b..63e2ef03291711 100644 --- a/packages/interactivity/docs/2-api-reference.md +++ b/packages/interactivity/docs/2-api-reference.md @@ -50,7 +50,7 @@ With directives we can manage directly in the DOM behavior related to things suc The `wp-interactive` "activates" hydration for the DOM element and its children through the Interactivity API (directives and store). > **Note** -> The use of `wp-interactive` is a requirement for the Intereactivity API "engine" to work. We have not added the `wp-interactive` to the following examples for the sake of simplicity +> The use of `wp-interactive` is a requirement for the Interactivity API "engine" to work. In the following examples the `wp-interactive` has not been added for the sake of simplicity #### `wp-context` ![](https://img.shields.io/badge/STATE-207399.svg) @@ -69,17 +69,23 @@ _Example of `wp-context` directive_ > ``` + +
+ See store used with the directive above + ```js -// store used with the directive above store( { - actions: { + actions: { logId: ( { context } ) => { console.log( context.post.id ); }, - }, + }, } ); ``` +
+
+ Different contexts can be defined at different levels and deeper levels will merge their own context with any parent one: ```html @@ -120,8 +126,10 @@ _Example of `wp-bind` directive_ ``` +
+ See store used with the directive above + ```js -// store used with the directive above store( { actions: { toggleMenu: ( { context } ) => ! context.isMenuOpen, @@ -129,6 +137,9 @@ store( { } ); ``` +
+
+ The `wp-bind` directive is executed: - when the element is created - each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference) @@ -170,17 +181,22 @@ _Example of `wp-class` directive_ ``` +
+ See store used with the directive above + ```js -// store used with the directive above store( { - actions: { - toggleSelection: ( { context } ) => { - context.isSelected = !context.isSelected - } - } + actions: { + toggleSelection: ( { context } ) => { + context.isSelected = !context.isSelected + } + } } ); ``` +
+
+ The `wp-class` directive is executed: - when the element is created - each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference) @@ -205,8 +221,10 @@ _Example of `wp-style` directive_ > ``` +
+ See store used with the directive above + ```js -// store used with the directive above store( { actions: { toggleContextColor: ( { context } ) => { @@ -216,6 +234,9 @@ store( { } ); ``` +
+
+ The `wp-style` directive is executed: - when the element is created - each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference) @@ -243,17 +264,22 @@ It sets the inner text of an HTML element. ``` +
+ See store used with the directive above + ```js -// store used with the directive above store( { - actions: { + actions: { toggleContextText: ( { context } ) => { context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1'; }, - }, + }, } ); ``` +
+
+ The `wp-text` directive is executed: - when the element is created - each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference) @@ -273,15 +299,20 @@ _Example of `wp-context` directive_ ``` +
+ See store used with the directive above + ```js -// store used with the directive above store( { - actions: { - logTime: () => console.log( new Date() ), - }, + actions: { + logTime: () => console.log( new Date() ), + }, } ); ``` +
+
+ The `wp-on` directive is executed each time the associated event is triggered. The callback passed as reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`) and the returned value by this callback is ignored. @@ -304,8 +335,10 @@ _Example of `wp-on` directive_ ``` +
+ See store used with the directive above + ```js -// store used with the directive above store( { actions: { increaseCounter: ({ context }) => { @@ -315,12 +348,15 @@ store( { context.counter--; }, } - effects: { - logCounter: ({ context }) => console.log("Counter is " + context.myNamespace.counter + " at " + new Date() ), - }, + effects: { + logCounter: ({ context }) => console.log("Counter is " + context.myNamespace.counter + " at " + new Date() ), + }, } ); ``` +
+
+ The `wp-effect` directive is executed: - when the element is created - each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference) @@ -355,17 +391,23 @@ _Example of several `wp-init` directives on the same DOM element_ ``` +
+ See store used with the directive above + ```js -// store used with the directive above store( { - effects: { + effects: { logTimeInit: () => console.log( `Init at ` + new Date() ), focusFirstElement: ( { ref } ) => ref.querySelector( 'input:first-child' ).focus(), - }, + }, } ); ``` +
+
+ + The `wp-init` can return a function. If it does, the returned function will run when the element is removed from the DOM. ### Values of directives are references to properties