components.md

After checking https://github.com/tailwindui/vue, I think that if we use Tailwind and Alpine, we could implement components with HTML only (maybe not as advanced as with Vue, but to a point).

And that means that we could use something like partials. So I gave it a try. A new tag is needed, because currently partial is not a pair tag.

The change I did to the partial tag is to parse $this->content and provide it to the view renreer as add content.

 public function wildcard($tag)
    {
        // We pass the original non-studly case value in as
        // an argument, but fall back to the studly version just in case.
        $partial = $this->get('src', $tag);

        $variables  = array_merge($this->context->all(), $this->parameters->all(), [
            '__frontmatter' => $this->parameters->all()
        ]);

        $rendered_content = $this->parser->parse($this->content, $variables);

        // We don't pass the full context: all parameters must be sent explicitly!
        $variables = array_merge($this->parameters->all(), [
            '__frontmatter' => $this->parameters->all(),
            'content' => $rendered_content
        ]);

        return view($this->viewName($partial), $variables)
            ->withoutExtractions()
            ->render();
    }

Usage example

Template:

<div class="p-1 border border-gray-400 rounded">
    {{ c:foo class="bg-red-200" x="Q" }}
        FOO '{{ x }}' '{{ title }}'
        {{ c:bar }}
    {{ /c:foo }}
</div>

Component foo:

<div class="{{ class }} p-1">
    <div>We're in foo</div>
    <div class="border border-green-600 p-1">
        {{ content }} {# that's what is inside the c:foo tag #}
    </div>
</div>

Component bar:

<div class="{{ class }} bg-blue-500 p-1">
    BAR '{{ x }}' '{{ title }}'
</div>

Result:

<div class="p-1 border border-gray-400 rounded">
    <div class="bg-red-200 p-1">
        <div>We're in foo</div>
        <div class="border border-green-600 p-1">
            FOO 'Q' 'Home'
            <div class="bg-red-200 bg-blue-500 p-1">
                BAR 'Q' ''  {# <-- title is not available #}
            </div>
        </div>
    </div>
</div>