Compiling Blade Components to Return JSON Instead of HTML

[saade]

Context:

I'm working on a Laravel project where I need to use Blade views to declare components but instead of having the components output HTML, I want them to return JSON. The goal is to leverage Blade's templating engine to define component structures, while ultimately generating JSON output from these components, recursively handling nested components and passing their properties.

Problem:

Laravel's Blade system is primarily designed to compile templates into HTML, and its standard flow compiles Blade templates into PHP that renders HTML when processed. However, for my use case, I need to customize this process to return JSON output from my components.

Key Challenges:

1. Blade Compilation vs Rendering Phases:

   • During compilation, Blade templates are converted into PHP code. However, the actual interaction with component classes (like CardComponent, PageComponent, etc.) happens during the rendering phase.
   • My primary need is to hook into this rendering process so that instead of outputting HTML, the components return their properties in JSON format.

2. Blade directives:

   • I still want to be able to use Blade directives like @auth or @foreach in my templates to control the visibility of components or loop through them.
   • The challenge is how to ensure that any components declared within these Blade directives are still accessible in the rendering process, so they can be included in the final JSON structure.

3. Recursively Handling Nested Components:

   • My components can have nested children, and I need to handle this recursively. For example, a PageComponent might contain multiple CardComponents, and each CardComponent might have its own nested TextComponents.
   • Each component should be converted to JSON, and this process should handle recursion properly, including converting child components to JSON.

4. Attempted Solutions:

   • I initially thought about writing a custom Blade compiler to handle this, but it seems too complicated as Blade compilers focus on transforming Blade syntax into PHP and don’t directly interact with component classes.
   • I then considered modifying the render() method in each component class to return JSON. This approach seems more feasible, as Blade interacts with the component class during the rendering phase (after compilation), and I can override the render() method to output JSON instead of HTML.

Request for Help:

1. Is there a better approach for modifying the rendering phase of Blade components to output JSON instead of HTML?
2. How can I ensure that Blade directives like @auth or @foreach still work correctly and control the visibility of components, but ensure the components are still processed into JSON?
3. Any suggestions on recursively handling child components in a clean, maintainable way, especially given the structure of Blade components?
4. Should I consider any other Laravel internals or Blade extension mechanisms for handling this JSON conversion efficiently?

[JohnathonKoster]

Do you have an example of the input and output you're looking to achieve? 🤔

[saade]

Let me try to picture you:

Components Definition

app/View/Components/Page.php

namespace App\View\Components;

use Illuminate\View\Component;

class PageComponent extends Component
{
    public $title;
    public $description;

    public function __construct($title = null, $description = null)
    {
        $this->title = $title;
        $this->description = $description;
    }

    public function toJson()
    {
        return json_encode([
            'title' => $this->title ? $this->title->toJson() : null,
            'description' => $this->description ? $this->description->toJson() : null,
            'children' => $this->getChildren(),
        ]);
    }

    protected function getChildren()
    {
        // Return any child components or other Blade content
        // Here, you would need to iterate over any passed slots or content
    }

    public function render()
    {
        // Return view for normal rendering, but we also support JSON conversion
        return view('components.page');
    }
}

app/View/Components/Text.php

namespace App\View\Components;

use Illuminate\View\Component;

class TextComponent extends Component
{
    public $content;
    public $weight;

    public function __construct($content, $weight = null)
    {
        $this->content = $content;
        $this->weight = $weight;
    }

    public function toJson()
    {
        return json_encode([
            'type' => 'text',
            'content' => $this->content,
            'weight' => $this->weight,
        ]);
    }

    public function render()
    {
        return view('components.text');
    }
}

resources/views/components/page.blade.php

<!-- we don't need anything here actually -->

resources/views/components/text.blade.php

<!-- we don't need anything here actually -->

Page definition (using the components)

resources/views/my-page.blade.php

<x-page>
    <x-slot name="title">
        <x-text content="FOO" />
    </x-slot>

    <x-slot name="description">
        <x-text content="Bar" />
    </x-slot>

    @if(rand(1, 10) > 5)
        <x-text content="Random Text" />
    @endif

    <x-text content="Child 1" />
    <x-text content="Child 2" />
</x-page>

Rendering:

Route::get('/json-output', function () {
    return view('my-page')->render();  // This will now return the JSON
});

Expected output

{
    "title": {
        "type": "text",
        "content": "Foo",
        "weight": "w-400"
    },
    "description": {
        "type": "text",
        "content": "Bar",
        "weight": null
    },
    "children": [
        {
            "type": "text",
            "content": "Child 1",
            "weight": null
        },
        {
            "type": "text",
            "content": "Child 2",
            "weight": null
        }
    ]
}

I can give you more examples if needed, but basically i want to intercept the rendering process, and instead of parsing the html i just need access to the component class and call toJson() on it. (or any other better aproach than that)

[saade]

Tried to return a json from render() and override some methods inside the class, but in the end Blade wants a string

[JohnathonKoster]

Migrated this to a discussion instead. What you're looking to do would be technically possible with this library and writing a custom compiler, but you'd be re-implementing some of the plumbing around passed attributes. Do you need anything from regular components apart from the syntax?

In your example, you mention you don't need anything in the component's views:

<!-- we don't need anything here actually -->

but also mention "normal" rendering:

    public function render()
    {
        // Return view for normal rendering, but we also support JSON conversion
        return view('components.page');
    }

One approach you could look into that doesn't involve implementing a custom compiler is to create your own component base class that that pushes attribute data to a stack and then use that as the data when returning the final JSON. That should remove the need for a recursive compiler, re-implementing logic, or keeping track of children, etc.

[JohnathonKoster]

weird use case of blade, i know

haha! i actually think this sounds pretty neat. i'll do some more thinking on this one. I might be able to throw together a quick proof of concept of what it might look like as a custom compiler this weekend 👍

[saade]

Cool! Only if blade-parser could parse entire components instead of each opening and closing tags 🤔

Like, <x-text> would be parsed as Stillat\BladeParser\Components\AnonymousComponent and that class collects all of its attributes (data) and child components (slots)(basically a tree of components), that would do it for me.

[JohnathonKoster]

Cool! Only if blade-parser could parse entire components instead of each opening and closing tags

It definitely can.. you need to tell it to resolve the structures in the document, which would give you a "tree" of components.

In this example, I'm just creating a custom component namespace named "c" (this also works with regular <x- components):

<?php

use Stillat\BladeParser\Parser\DocumentParser;


$template = <<<'TEST'

<c-page>
    <c-text content="test 1" />
    <c-text content="test 2" />

    <c-thing>
        <c-something-else />
    </c-thing>
</c-page>
TEST;

$doc = (new DocumentParser())
    ->registerCustomComponentTag('c')
    ->parseTemplate($template)
    ->toDocument(resolveStructures:  true);

dd($doc->getRootNodes());

That would produce output similar to the following:

You would still be responsible for recursively traversing that and emitting the PHP code to implement your customer behaviors.

[saade]

Oh, I missed that in the documentation! I just tested it, and it looks promising.

I got it working yesterday using a custom Blade directive with @JSON inside the Blade view, but I think I might switch to the parser since it seems more reliable.

Thanks for the help! I'll keep you updated.

[JohnathonKoster]

Glad you got something to work! That definitely sounds much simpler for now (this library is a good fit if you wanted to do something super custom).