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 ? 

[bernhard]

Anybody using this config setting

$config->livereloadBuild = true;

please update to the latest version v3.18.2 otherwise the "npm run build" will execute every second if you have multiple tabs open which will produce useless cpu cycles and make your computer feel like it's training for a marathon ??

[Tiberium]

But i need the heat for this cold days ^^

For real: Thx for the info and update notification!

[Christophe]

Hello @bernhard,

I'm about to put in production the website that is using RockFrontend (module and profile). I've updated the module to the latest version (but not the profile).
As I want to use ProCache, I wanted to remove the minification of the styles and scripts.
But removing both lines in _init.php:
->minify($config->debug ? false : true);
->minify($config->debug ? false : true);
causes a ParseError, syntax error, unexpected variable "$rf"

So, I've tried by using:
->minify(false);
->minify(false);
and it seems to remove the issue.

I guess it cannot be removed.

[bernhard]

You are just missing the final semicolon after addDefaultFolder()

[Christophe]

Yes, I forgot to keep both semicolons at the end of the styles and scripts sections.
No more error message now (501 or 500 on the frontend, I don't 100% remember).

[psy]

Installed RockFrontend for the first time on a client dev site. Great work @bernhard!

Client (superuser) is happy with the ability to modify content on the fly from the frontend. Had a few issues however with FormBuilder conflicts.

1. When I render a FormBuilder form on page via the api, and manually add its styles and scripts in the <head> tag, RFE js fails with RockFrondEnd not found. Worked around this by embedding the form via the api so no js conflicts
2. How do I turn off LiveReload for a guest user? Another form is in a 'body' field that is ALFRED enabled, with FormBuilder Method A, see attached image. The LiveReload code still loads and screws the FormBuilder CSRF check even though the user is not logged in. Work around was to turn off CSRF Check on the form but would prefer to have it enabled.

Using:
PW: 3.0.237
RockFrontEnd: 3.18.2
FormBuilder: 0.5.5

 

[bernhard]

3 hours ago, psy said:

How do I turn off LiveReload for a guest user?

What do you mean? For a guest user on development? On a live site you should never ever enable Livereload.

[Andi]

3 hours ago, bernhard said:

How do I turn off LiveReload for a guest user?

Hey @bernhard. I was actually wondering about that a few weeks ago. I was working on a dev server as admin setting up templates, and another user with limited privileges was editing content somewhere else on the site. So no live site, but several people accessing at the same time.

So I was wondering rather, would it currently be possible to somehow limit LiveReload to certain users or groups?

[bernhard]

Please check out the new version on the dev branch which will be merged begin of next month:

// site/ready.php
wire()->addHookAfter("RockFrontend::addLiveReload", function ($event) {
  // if the current user is a guest user we override the
  // original return value and set it to false
  // which will tell RF to not add livereload markup
  if(wire()->user->isGuest()) $event->return = false;
});

 

[bernhard]

RockFrontend v3.19.0

• addLiveReload has been made hookable, that means you can now fire custom actions whenever you save a file! I'm using this to run the tailwind compiler. See the docs here.
• Some fixes related to livereload and the topbar have been added.
• We added a new method addPageEditWrapper() that makes it possible to add any custom markup to your ProcessWire backend page editor. I'm using it to place two fields side by side via flexbox instead of using the limited columnWidth layout options. It's part of RockFrontend because I need the latte rendering capabilities and so I didn't want to put it into another module like RockMigrations and add a dependency.

[nurkka]

Using RockFrontend in a real project for the first time since yesterday – I'm totally blown away! Currently I am only using Latte templates and LiveReload, but these two features alone are such game changers. @bernhard Thank you so much (again!) for donating such a genius module to the community!

I don't know if anybody already asked/answered this, so I'll leave this info here: If you want to add additional folders to be watched by LiveReload, you can define them this way:

/site/config.php:

$config->livereload = [
	'interval' => 1, 
	'include'  => [
		$config->paths->root . '/some/folder',
		$config->paths->root . '/another/folder',
	],
];

 

[bernhard]

Thx for letting me know! Glad you like it ? 

[bernhard]

RockFrontend v3.20.0

• User Contributions ❤️
  @gebeer provided a Pull Request to improve Livereload on slow internet connections and @stefanowitsch fixed an issue with the rf-scrollclass feature. Thank you!
• Livereload now shows how often it refreshed the browser for you in the console. On my current project it shows "Loading LiveReload - 3721" which means RockFrontend saved me from hitting the refresh button for 3721 times already. If you haven't tried LiveReload be sure to check it out!
• There is a new field() method. Check out the docs here.

[bernhard]

RockFrontend v3.21.1

• Several improvements in the docs
• Added support for nested AJAX Endpoints (see video below)