Edge Templates

Flick integrates with Edge, the AdonisJS templating engine, so you can render markup conditionally based on a feature's state. The same scope and resolution rules from Resolving Features apply: every check needs a scope, and the resolved value is coerced to a boolean for the active/inactive tags.

Passing the scope

Tags and the global never assume a scope for you. You pass it explicitly, exactly like in TypeScript. In an HTTP view that is usually the authenticated user, which you share with the template from your controller:

return view.render("checkout", { user: auth.user });

The examples below assume user is available in the template.

The @feature tag

@feature(feature, scope) renders its block when the feature resolves to a truthy value:

@feature('new_checkout', user)
  @include('checkout/new')
@end

Add an @else branch to render fallback markup when the feature is inactive:

@feature('new_checkout', user)
  @include('checkout/new')
@else
  @include('checkout/legacy')
@end

The @featureInactive tag

@featureInactive(feature, scope) is the inverse. It renders its block when the feature resolves to a falsy value, which reads better than an empty @feature with only an @else:

@featureInactive('beta_program', user)
  <a href="/beta/join">Join the beta</a>
@end

The flick global

Flick also exposes the service as a flick global, so the full resolver API is available inside templates. Because resolution is asynchronous, remember to await it.

Use it with Edge's native @if when you need @elseif chains or a condition the tags do not cover:

@if(await flick.for(user).isActive('new_checkout'))
  @include('checkout/new')
@elseif(await flick.for(user).isActive('legacy_checkout'))
  @include('checkout/legacy')
@else
  @include('checkout/default')
@end

Read a variant value with an interpolation:

<button class="btn-{{ await flick.for(user).value('checkout_button_color') }}">
  Checkout
</button>

Registering the plugin manually

The provider registers the plugin for you. If you manage your own Edge instance, or want to register it explicitly, import the plugin and pass it the Flick service:

import edge from "edge.js";
import flick from "@foadonis/flick/services/main";
import { edgePluginFlick } from "@foadonis/flick/plugins/edge";

edge.use(edgePluginFlick(flick));