Hi, need some help to use custom helpers in child theme

[Yoann Aubry 0]

Hello,

I need to customize links in my custom child template with a helper like :

//in my template file : 
<span data-apt="{function.obfuscate, someUrl}" />

I found some solutions on old topics but nothing in the documentation.

My first attempt was to use the app load hook:

// in the plugin.json file 
{ "hook": "static:app.load", "method": "init" },

// in library.js
const benchpress = require.main.require('benchpressjs');
....
library.init =  async function (params) {
	app = params.app;
	const middleware = params.middleware;
	benchpress.registerHelper('obfuscate', function(data){
		// custom code
                return 'mycustomcode';
	});
	....
};

My second attempt with a simple module and a require :

// in helpers.js
(function (factory) {
	if (typeof module === 'object' && module.exports) {
		factory(require.main.require('benchpressjs'));
	} else {
		require(['benchpress'], factory);
	}
})(function (Benchpress) {
	Benchpress.registerHelper('obfuscate', function (data) {
			return 'my-custom-result';
		});
	});

//in library.js
require(./helpers.js);

And the pretty empty output trace for Benchpress object:

benchpress {
   "helpers": {},
   "cache": {},
   "globals": {
      "true": true,
      "false": false
   }
}

Have you an idea ? A better way to add and use helpers ?

Thx

[PitaJ]

The helper has to be registered both on the client side and the server side.

[Yoann Aubry 0]

@PitaJ I see that in an other topic. It needs only this line in plugin.json :

scripts : "./helpers.js" in plugin.json

If the client registration is missing, at least it should work on first load... I miss the point here.

[Yoann Aubry 0]

I have added some traces on the Benchpress object :

 {
  precompile: [Function: precompile] {
    isNative: true,
    defaults: { minify: false, unsafe: false, native: true }
  },
  __express: [Function: __express],
  evaluate: [Function: evaluate],
  compileRender: [Function: compileRender],
  compileParse: [Function: compileParse],
  runtime: [Function: runtime],
  helpers: {
    __escape: [Function: identity],
    displayMenuItem: [Function: displayMenuItem],
    buildMetaTag: [Function: buildMetaTag],
    buildLinkTag: [Function: buildLinkTag],
    stringify: [Function: stringify],
    escape: [Function: escape],
    stripTags: [Function: stripTags],
    generateCategoryBackground: [Function: generateCategoryBackground],
    generateChildrenCategories: [Function: generateChildrenCategories],
    generateTopicClass: [Function: generateTopicClass],
    membershipBtn: [Function: membershipBtn],
    spawnPrivilegeStates: [Function: spawnPrivilegeStates],
    localeToHTML: [Function: localeToHTML],
    renderTopicImage: [Function: renderTopicImage],
    renderDigestAvatar: [Function: renderDigestAvatar],
    userAgentIcons: [Function: userAgentIcons],
    buildAvatar: [Function: buildAvatar],
    register: [Function: register],
    logger: [Function: logger],
    obfuscate: [Function: obfuscate]
  },
  registerHelper: [Function: registerHelper],
  cache: {},
  globals: { true: true, false: false },
  setGlobal: [Function: setGlobal],
  addGlobals: [Function: addGlobals],
  flush: [Function: flush],
  render: [Function: render],
  parse: [Function: parse],
  registerLoader: [Function: registerLoader]
}

My two custom helper functions, logger and obfuscate, are visible, but the result template still show {function.obfuscate, 'testUrl'} .

[Yoann Aubry 0]

I have found the problem, it was a bad theme declaration. My child theme was not encapsulate in

(function(module) {

....

 }(module));

Unfortunately, now i have a new probleme. It seems not possible to concatenate var in helper parameter like this :

{function.myHelper, {config.relative_path}/user/{posts.user.userslug}}
or 
{function.myHelper, config.relative_path + '/user' + posts.user.userslug}

Any idea ?

[PitaJ]

Yeah that isn't possible. Instead you'll need to pass the individual values in as arguments and perform the concatenation in the helper itself.

BTW, I recommend you use the new helper syntax. It's easier to reason about.

benchpressjs/docs/helpers.md at master · benchpressjs/benchpressjs

ultralight javascript templating framework. Contribute to benchpressjs/benchpressjs development by creating an account on GitHub.

GitHub (github.com)

[Yoann Aubry 0]

yes, it's the solution i have chosen. Thx !