Jump to content

RockFrontend πŸ”₯πŸš€ The Powerful Toolbox for ProcessWire Frontend Development


bernhard

Recommended Posts

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
Link to comment
Share on other sites

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!

Β 

  • Like 1
Link to comment
Share on other sites

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Β ?

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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;
    }
  }

Β 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 ?Β 

Link to comment
Share on other sites

  • 4 weeks later...

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Β ??

Link to comment
Share on other sites

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.

2024-07-12 20.13.36 eedop66.fr 86be166a3735.png

Link to comment
Share on other sites

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

Β 

Screenshot 2024-07-18 at 8.24.48β€―PM.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
});

Β 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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.
  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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',
	],
];

Β 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • bernhard changed the title to RockFrontend πŸ”₯πŸš€ The Powerful Toolbox for ProcessWire Frontend Development

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.
Link to comment
Share on other sites

  • 5 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
Γ—
Γ—
  • Create New...