Templating in ConcreteCMS

Hey together, i am looking for a templating solution which i can use in concrete. the idea is, that i can use the template in a pure frontend solution (html, javascript, css) and copy paste the same template in the view of a concrete block view, and it will work without changing anything as long as the variables are the same.
Did somebody maybe use Laravel Blade or similar in Blocks? Blade Templates - Laravel 12.x - The PHP Framework For Web Artisans And can give me examples or experiences.

Not really sure what you mean. I constantly make html, css and js templates then take the parts i need and dump them into a view.php for blocks.

But i feel that not quite what you mean

I would like to use something like here: Blade Templates - Laravel 12.x - The PHP Framework For Web Artisans

so with <h1>{{ $title }}</h1> cause then i can render the template in javascript too. So my designer can create a mockup with javascript and without the need of a php engine and DB.
And i later just copy paste the designers template in my concrete project. So we can stay easy insync.

I thought I remembered an issue or pull that said something about blade templates, but can’t find it now. If anyone can post a link, please do so…

As an addon, blade could be overlaid as any level of output filter (getting bigger in scope)

  • As a template for the specific blocks such as content, html, stack
  • An override of the Area class
  • An event handler on page output
  • A middleware layer

If built into the core, there wold be some possibilities between these layers.

(I did similar on c5.6 for Magic Data, but it never caught on in enough volume to make it worth maintaining for v7+. In retrospect, the concept of Magic Data grew too far in scope, making the mistakes below)

More generally, I am hesitant about the growing scope of template engines. PHP began life as a simple template filling engine for html, then grew in complexity to become a programming language. Now Blade and other template engines are implemented in PHP as an additional layer on the view to provide something simpler than PHP.

Blade already provides conditionals and loops. At some point in the future the template syntax will have grown to become rich enough to be usable as programming language, where entire systems could be written in Blade v99 without any PHP.

Then someone will have the idea to streamline their work and use Blade v99 to write a ‘simple’ layer of template engine, call it Kukuri, and the spiral starts another loop.

Its not limited to PHP and Blade. Various JavaScript template engines exhibit a similar tendency towards growing into programming languages.

(And I keep this fable in mind when adding new capabilities to the submit handling pipeline of Form Reform)

There is a merged PR in version 10 for using symfony form builder/twig for custom forms.
So hopefully in 10.0, twig could replace php templates across the board (blocks, themes etc).
At least that’s impression I have by reading related github comments.

Though, not sure if straight copy-pasta will work, since twig/blade are server-side compilers. And a lot of variables in core blocks are more than simple scalar values (objects/arrays). Not sure how that could be handled by any javascript framework (or maybe I misunderstood your workflow).

Thanks guys, after all of this i think i go with an easy template compiler written in typescript for php files. so that i can interpret echos, conditions and loops. Merge the data out of a json file and returning plane html. and then start growing from this point.

const phpTemplate = `
<html>
  <body>
    <?php if($test) { ?>
      <p>Test is true!</p>
    <?php } ?>
    <ul>
      <?php foreach($items as $item) { ?>
        <li><?= $item ?></li>
      <?php } ?>
    </ul>
  </body>
</html>
`;

// Compile the PHP template into a render function.
const render = compilePhpTemplate(phpTemplate);

// Example data (e.g. parsed from JSON)
const data = { test: true, items: ["Apple", "Banana", "Cherry"] };

// Render the template.
const outputHtml = render(data);