RockFrontend 🚀🚀 The Powerful Toolbox for ProcessWire Frontend Development

[Christophe]

Hello Bernhard,

I updated/upgraded ProcessWire and RockFrontend recently (ProcessWire 3.0.239, RockFrontend 3.15.1, PHP 8.1).

I've just noticed 2 error messages in the consoles in Vivaldi and Firefox.
(Debug mode is on. It's the same when it's off.)
I wanted to try the Scrollclass so I added this in _init.php (RockFrontend profile):

->add('/site/modules/RockFrontend/RockFrontend.min.js', 'defer')

I'm not sure if it works as intended as there is one error message related to RockFrontend.min.js.

The error message related to RockFrontend.js (so the non minified version) already exists when the above code related to RockFrontend.min.js is not added.
I don't remember noticing this error message related to RockFrontend.js before.

So now, I see this in Firefox:

Uncaught ReferenceError: assignment to undeclared variable j
    <anonymous> http://domainname.fr/site/modules/RockFrontend/RockFrontend.min.js?m=1716312961:5
    <anonymous> http://domainname.fr/site/modules/RockFrontend/RockFrontend.min.js?m=1716312961:5
RockFrontend.min.js:5:278
Uncaught ReferenceError: assignment to undeclared variable j
    <anonymous> http://domainname.fr/site/modules/RockFrontend/RockFrontend.js?m=1716312961:258
    <anonymous> http://domainname.fr/site/modules/RockFrontend/RockFrontend.js?m=1716312961:270
RockFrontend.js:258:10
    <anonyme> http://domainname.fr/site/modules/RockFrontend/RockFrontend.js?m=1716312961:258
    <anonyme> http://domainname.fr/site/modules/RockFrontend/RockFrontend.js?m=1716312961:270

And this in Vivaldi (chrome-based):

RockFrontend.min.js?m=1716312961:5 Uncaught ReferenceError: j is not defined
    at RockFrontend.min.js?m=1716312961:5:279
    at RockFrontend.min.js?m=1716312961:5:534
(anonymous) @ RockFrontend.min.js?m=1716312961:5
(anonymous) @ RockFrontend.min.js?m=1716312961:5
RockFrontend.js?m=1716312961:258 Uncaught ReferenceError: j is not defined
    at RockFrontend.js?m=1716312961:258:12
    at RockFrontend.js?m=1716312961:270:3

[bernhard]

Hi @Christophe I can't reproduce. Please provide step by step instructions then I can try to fix it.

[Christophe]

Hi Bernhard,

I removed RockFrontend.min.js because it's not needed as RockFrontend.js is already added automatically.

The browser says it is related to the following line, certainly the only place where j is mentioned: (j = 0; j < attrs.length; j++) {

I was just testing the rf-scrollclass attribute (with the css that is included in the docs): 

<footer class="tm-prose">
  <div class="uk-container">
    <div class="uk-text-right">
      <a href='#' rf-scrollclass='to-top show-desktop@300 show-mobile@600'>Scroll to top</a>
    </div>
    ...

I don't know the reason for the error message, so I'm just removing the attribute for the moment.
I'll try again another time.

Have a nice evening!

 

[bernhard]

Hey @netcarver and @gebeer great news for you (and all RockFrontend users)

I've fixed an issue with ajax endpoints not replacing ALFRED markup (thx for the report @gebeer) and while working on that I got quite a lot of errors in the console about the livereload stream having a wrong mimetype, which has also been observed and reported by @netcarver some time ago.

So I fixed that as well 🙂 Please try the latest version on the dev branch, which will be merged to master in some days.

LiveReload only reloads the visible tab. This is to avoid endless loops where one window reload causes the other one to reload as well and vice versa. In older versions you had to reload the tab manually once you switched back to it. In the latest version it will wait and as soon as you switch back to the tab it will be reloaded automatically if a file changed in the meantime 🚀

[bernhard]

Everybody using the cool ajax endpoints feature please update to v3.16.1 as it contains an important fix (added missing return statement in public endpoints).

@gebeer

[Spinbox]

I used to use TemplateEngine with Twig, where I could hook into twig to add extensions and functions. Is it possible to make it hookable? Right now we can use Twig, but very limited, or am I wrong?

Perhaps changing to current function

  /**
   * Twig renderer
   */
  protected function renderFileTwig($file, $vars)
  {
    try {
      require_once $this->wire->config->paths->root . 'vendor/autoload.php';
      $loader = new \Twig\Loader\FilesystemLoader($this->wire->config->paths->root);
      $twig = new \Twig\Environment($loader, [
        'debug' => true,
      ]);
      $twig->addExtension(new \Twig\Extension\DebugExtension());
      $relativePath = str_replace(
        $this->wire->config->paths->root,
        $this->wire->config->urls->root,
        $file
      );
      $vars = array_merge((array)$this->wire('all'), $vars);
      return $twig->render($relativePath, $vars);
    } catch (\Throwable $th) {
      return $th->getMessage() .
        '<br><br>Use composer require "twig/twig:^3.0" in PW root';
    }
  }

to something similar like the Latte renderer

  /**
   * Twig renderer
   */
  protected function renderFileTwig($file, $vars)
  {
    $twig = $this->loadTwig();
    if (!$twig) throw new WireException("Unable to load Twig");
	$vars = array_merge((array)$this->wire('all'), $vars);
	$relativePath = str_replace(
		$this->wire->config->paths->root,
		$this->wire->config->urls->root,
		$file
	  );
    return $twig->render($relativePath, $vars);
  }

  public function ___loadTwig()
  {
	if ($twig instanceof \Twig\Environment) return $this->twig;
    try {
		require_once $this->wire->config->paths->root . 'vendor/autoload.php';
		$loader = new \Twig\Loader\FilesystemLoader($this->wire->config->paths->root);
		$twig = new \Twig\Environment($loader, [ 
		  'debug' => true,
		]);
		$twig->addExtension(new \Twig\Extension\DebugExtension());
		return $this->twig = $twig;
    } catch (\Throwable $th) {
      $this->log($th->getMessage());
      return false;
    }
  }

 

[bernhard]

5 minutes ago, Spinbox said:

Is it possible to make it hookable?

Hi. The render() method is already hookable and that one will be called before renderFileTwig(). Would that work?

Could you please be more precise with your request? I'm happy to add whatever anyone needs, but I need to understand exactly why things are requested to ensure we don't add anything we don't want to.

So could you please explain what the problem is currently and what exactly has to be done to solve it. Maybe provide a specific use case for me to better understand. And maybe provide a PR for it.

Input from anybody else using Twig is welcome.

[Spinbox]

Thank you for your reply. First of all, I'm more of a frontender, which could lead to not providing all the things you would like too. Sorry if this leads to unclear questions. Learning each day though. I'm happy to provide a PR but the problem is I'm not sure if I'm right or what I'm doing is the right 'way', or let's say I'm not that confident.

What I want to achieve

This is what I'm trying to achieve, by adding functions/extensions/filters to twig.

<h2>{{translate('Articles','General')}}</h2>
<p>{{page.article_date|format_datetime(pattern="d MMMM yyyy")}}</p>

Suggestion

My suggestion is to have a separate function to load twig (just like Latte is loaded right now), like mentioned in my previous post.

This hook would then be able to add these extensions etc.

$this->wire()->addHookAfter('RockFrontend::loadTwig', function (HookEvent $event) {
  /** @var \Twig_Environment $twig */
  $twig = $event->return;

  // Adding custom Twig extensions, functions, and filters
  $twig->addExtension(new IntlExtension());

  $twig->addFunction(new \Twig\TwigFunction('translate', function ($text, $context = "General") {
  return _x($text, $context, config()->urls->templates . 'language/translations.php');
  }));

  $twig->addFilter(new \Twig\TwigFilter('html_entity_decode', 'html_entity_decode'));
  $twig->addFilter(new \Twig\TwigFilter('base64_encode', 'base64_encode'));
  $twig->addFilter(new \Twig\TwigFilter('base64_decode', 'base64_decode'));

  $twig->addFunction(new \Twig\TwigFunction('bd', function ($dump) {
  bd($dump);
  }));

  // Return the modified Twig environment
  $event->return = $twig;


});

 

16 minutes ago, bernhard said:

The render() method is already hookable and that one will be called before renderFileTwig(). Would that work?

I'm not sure how this would work. My first thought are that I have to copy the contents of this function into a hook and then change the part where it was going to call the renderFileTwig(). That seems like it's prone to errors if the module gets updates but I could be wrong. Any pointers in how to approach this would be welcome.

[bernhard]

Hey @Spinbox, thx that makes sense 🙂 

Could you please try the latest commit of the dev branch? You can now hook into RockFrontend::loadTwig

[Spinbox]

Thanks @bernhard, that works 🙂

I think I'm going to dive into Latte. It looks like RPB isn't suited for Twig. As both modules are designed with Latte in mind I have to give this a try.

Thank you for all your hard work.

[bernhard]

11 minutes ago, Spinbox said:

It looks like RPB isn't suited for Twig.

I guess it would be easy to support Twig as well, but if you want to try Latte that's the safest bet for sure, as that's the combo I'm using everyday.

For the basics this page is all you need: https://latte.nette.org/en/tags

11 minutes ago, Spinbox said:

Thank you for all your hard work.

Thx 🙂