Use javascript library in template

[MarcelRobitaille]

Hello. Is it possible to use a javascript library (moment, for example) in a template? I know I can pass php closures but I don't know how to pass javascript functions. Maybe we could extend $pug->share in some way?

Thanks!

[kylekatarnls]

You will have different possible approaches:

• You can set pugjs to true, that will stop using the PHP engine and use the native pugjs engine if node is available. In this mode you will be able to call a library like this in your pug code:

• moment = require('moment') p=moment.callAMethodFromTheLibrary()

  
  But you must understand this will serialize your PHP data to pass it to pugjs, so you will loose access in your templates to object methods, PHP functions etc. That's why I would not recommend this first approach.

• You can pass a helper function as any other variable via share or render:

  $pug->share('dateDisplay', function ($date) {
  return shell_exec('node your-js-script.js ' . escapeshellarg($date));
  });

• Or use V8Js engine (http://php.net/manual/en/book.v8js.php):

  $pug->share('dateDisplay', function ($date) {
  $v8 = new V8Js('values', array('date' => '2016-05-09'));
  
  return $v8->executeString('callJsFunction(values.date)');
  });

• But my best recommendation is using a PHP library instead like https://github.com/briannesbitt/Carbon or https://github.com/jenssegers/date, this is a good way to have a consistence stack of technologies. A PHP library would be better to handle PHP date (like DateTime object with some time zone for example).
• Also remember you can dump your dates in ISO format then handle them with moment with a front-end script.

[MarcelRobitaille]

When I try to require('moment') I get require is not defined even though I have pugjs set to true in the configuration. What do you mean by "If node is available". Node is installed on my computer if that's what you mean.

The reason for a js library with php is that I suspect the project will get moved to node quite soon.

Sorry for the late reply.

[kylekatarnls]

It seems related to this: https://github.com/pugjs/pug/issues/1810 I will try to find a work-around.

The reason for a js library with php is that I suspect the project will get moved to node quite soon.

It's a good reason. and so pugjs set to true is the best way to get closest to node as possible.

[MarcelRobitaille]

Thanks for the info.

[kylekatarnls]

We will be able to make require() available inside templates rendered with pugjs. This will be available with the version 3.0.1.

[kylekatarnls]

As it finally contains minor changes, it's the version 3.1.0, you can update to test it

[MarcelRobitaille]

I have upgraded to 3.1.0 and now I am getting Cannot find module 'moment'.

[kylekatarnls]

How did you install moment? Did you use npm -g install moment running with the same user that one that run PHP? Or did you use the composer setting:

"extra": {
  "npm": {
    "moment": "^2.19.1"
  }
}

And run composer install?

[MarcelRobitaille]

I installed it through composer as you described.

[kylekatarnls]

I found a solution, I will update nodejs-php-fallback to expose its own require method. I'll get you in touch.

[kylekatarnls]

Hi, please try to composer update, install with extra.npm composer section should now works with pugjs option to true.

[MarcelRobitaille]

I ran composer update and I am still getting the same errors. Is there anything special I have to do to install the node packages also?

[kylekatarnls]

You should just need to have in your composer.json:

"extra": {
  "npm": {
    "moment": "^2.19.1"
  }
}

And when you do composer update, you should see Package added to be installed/updated with npm: moment

Or you can install it manually in nodejs-php-fallback by running:

<?php

require 'vendor/autoload.php';

\NodejsPhpFallback\NodejsPhpFallback::installPackages(['moment' => '^2.19.1']);

[MarcelRobitaille]

That's exactly what I did.

composer.json:

{
  "require": {
    "pug-php/pug": "3.1.0"
  },
  "extra": {
    "npm": {
      "moment": "2.19.1"
    }
  }
}

composer update:

Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating autoload files
The node package [jstransformer] can be installed:
It allows you to use any jstransformer npm package as filter by adding it in your extra.npm section of composer.json.
Would you like to install/update it? (if you're not sure, you can safely press Y to get the package ready to use if you need it later) [Y/N] y
The node package [pug-cli] can be installed:
It allows you to use the native JS pug engine instead of the default PHP one with the `pugjs` option set to `true`
Would you like to install/update it? (if you're not sure, you can safely press Y to get the package ready to use if you need it later) [Y/N] y
Package added to be installed/updated with npm: jstransformer@"^1.0.0"
Package added to be installed/updated with npm: pug-cli@"^1.0.0-alpha6"
Package added to be installed/updated with npm: moment@"2.19.1"
Packages installed.

[kylekatarnls]

You must upgrade to pug-php 3.1.1.

[MarcelRobitaille]

Right. I am dumb sometimes. Thanks for all the help!