Roots Discourse

Working With View Composers in Sage 10

Originally published at: https://roots.io/working-with-composers-in-sage-10/

View Composers are new to Sage 10 and are based on Laravel’s View Composers, which are described this way: View composers are callbacks or class methods that are called when a view is rendered. If you have data that you want to be bound to a view each time that view is rendered, a view…

10 Likes

I’m trying to understand the “Get it from $data” part. What does this mean?:

“any variable [in $data array] available to that view is available to your Composer as well.”

Any variable created in a Composer file is added to $data array and it is available for the same Composer file where it was created. Is it?

Each Composer receives the $data variable, which is a keyed array. That Composer then adds keys and values to that array, and returns it. Each row in the array is then passed to the view, where each row is available as a variable with the name if that row’s key. Any views @included in that view will get the same data, which means their associated Composers will also get that data.

Let’s say I have a header.blade.php that looks like this:

// partials/header.blade.php
<header>
  {{ $title }}
  @include('partials.intro')
</header>

And its Composer has this:

// Composers/Partials/Header.php
public function with($data)
{
  return ['title' => 'Hello'];
}

So when the header is rendered, the $title variable will contain Hello.

The Composer for intro.blade.php could look like this:

// Composers/Partials/Intro.php
public function with($data)
{
  return ['intro' => $data['title'] . ' There'];
}

When the view intro.blade.php is rendered in header.blade.php, it will have access to a variable called $intro that contains Hello There. This is because when intro.blade.php is called in the context of header.blade.php, it has access to the same data that was passed to header.blade.php, which means its Composer also has access to that data, which is why we can concatenate that data in the Composer.

1 Like

Yes! Thank you very much for this extra explanation. Very clear :+1:

1 Like

That sounds already very promising and thank you so much to continue the great work! Is there any ETA for sage 10?
However I’m quite sure that the forum will be full of questions regarding “Composer” vs “View Composers” as the terminology is easily confusing.

I’m sure we’d be open to consideration re: possible alternative names, so if you have some ideas I’d love to hear them!

Personally I feel fairly comfortable about addressing those issues if and when they come up, for two reasons:

  1. Laravel, as much larger organization, has been using this terminology for a while with no serious issues that I’m aware of, and as another PHP-based project they have definitely encountered composer the dependency manager.
  2. View Composers and composer the dependency manager have very, very different uses, so I feel like in most cases context will be sufficient to communicate which thing someone might be talking about.

There’s a bug in your Figure.php code:

return wp_get_attachment_image($image_id);

should be

return wp_get_attachment_image($data['image_id']);

In the article you use var_dump instad of @dump.
Is this a sign that @dump() and @debug are going away in sage 10, or am I reading too much into this?

You’re reading too much into this. I always forget about @dump because I’m so used to writing var_dump() all the time :frowning:

1 Like

Awesome! the reason I asked is that my @debug wasnt being parsed on the 10.0.0.dev branch, and I had a moment of concern. :ok_hand:

Just finished reading the article and would like to use sage 10 for my next project. Is the dev branch more or less ready for production work, and how can I install it?

That depends on how comfortable you feel troubleshooting it. I, and others, have used it at various stages for production sites (I launched two sites with an early development version of it).

It’s just a git repo, so:

$ git clone https://github.com/roots/sage.git
$ cd sage
$ git checkout 10.0.0-dev
$ cd site/web/app/themes
$ composer create-project roots/sage my-theme-name dev-10.0.0-dev
1 Like