@marko-tags/context

Share data across arbitrarily nested Marko components.

_Note: version 1.0.0 of this module requires Marko >= 4.15 as it uses the new tag parameter syntax_

Installation

``console
npm install @marko-tags/context
`

API

$3

coupon-provider.marko

`marko




`

$3

somewhere-inside-coupon-provider.marko

`marko


Active Coupon: ${coupon}.

`

$3

You can also use context to add event handlers that can be triggered lower in the tree.

user-form.marko

`marko



`

$3

We can emit events to the above on-save handler by receiving and additional tag parameter that we'll call emit. This is a function that operates identically to component.emit but will trigger events on the requested context.

somewhere-inside-user-form.marko

`marko


Save data for ${email}


`

Discovery

The from attribute here is special and uses the same discovery method as Marko uses when finding tags.

is going to _receive_ context from an ancestor component called router.

This method avoids namespace collisions without all of the additional boilerplate needed by solutions in other frameworks.

If for some reason the provider component cannot be discovered through the normal component discovery method, you can import the component manually and pass the constructor as the from attribute.

`marko
import Router from "../../some-strange-path/template.marko";


`

Example

Lets say we want to have a custom form component with a schema that validates its special form inputs. With forms you likely want to allow developers to insert arbitrary markup and components to fit their design and functionality requirements.

Traditionally the user of the component would have to manually pass this schema information to every single form control, as well as the form component. Alternatively you could use window, global or out.global but none of them solve the task well and open you up to name collisions and hard to reason about code.

With context this can be made both simpler and less brittle. It allows you to build contracts between a receiving component and an ancestor arbitrarily higher in the tree which will provide it with data.

index.marko

`marko
static const schema = {
username(value) {
if (value.length >= 6) {
return true;
}

return false;
},
password(value) {
return ...;
}
}



Username



`

fancy-form.marko

`marko





<${input}/>




`

fancy-input.marko

`marko
class {
onCreate() {
this.state = {
isValid: true
};
}
validate(test, ev) {
this.state.isValid = test(ev.target.value);
}
}




$ const test = schema[input.name];



This is invalid!


`

Receiving from the same component type

Sometimes you want to access data from an ancestor component which is the same type as the current component.
To access the current ancestor of the same type you can use from=".". Here is an example basic router implementation that uses this.

index.marko

`marko

<@route path="/test">


<@route path="/">



`

nested-router.marko

`marko

<@route path="/a">



<@route path="/b">



`

router.marko

`marko

<-- Here we have access to an ancestor route context. -->
$ const match = matchRoute(remaining, input.routes);


<${match.route}/>


``