using filter in a shortcode defined in its own file

[btrem]

I can use a filter in a shortcode if the shortcode function is defined in .eleventyConfig like this:

const getFoo = require('./filters/get-foo.js');

module.exports = (eleventyConfig) => {
    eleventyConfig.addFilter("getFoo", getFoo);

    eleventyConfig.addShortcode("table", function(phrase) {
            return `<table>
                <!-- map phrase to words; map each word to letter -->
                ${eleventyConfig.getFilter("getFoo")(letter)}
            </table>`;
    });
}

What if the shortcode is in a separate file?

const getFoo = require('./filters/get-foo.js');
const table = require('./shortcodes/table.js');

module.exports = (eleventyConfig) => {
    eleventyConfig.addFilter("getFoo", getFoo);
    eleventyConfig.addFilter("table", table);
}

With the same code from the first example, but moved to table.js,I get the following error:

Error with Nunjucks shortcode `table` (via Template render error) 3. Cannot read properties of undefined (reading 'getFilter') (via Template render error)

[pdehaan]

I believe you'd need to modify ./shortcodes/table.js to accept a function so you could pass the eleventyConfig context to the shortcode in order to be able to call `eleventyConfig.getFilter("getFoo") from within the file.

[btrem]

I'm afraid that went a bit over my head. How do I write a function to accept a function? I can add a second parameter to table.js:

module.exports = function(phrase, eleventyConfig) {
    return `<!-- table markup -->`
}

but how do I pass the context from .eleventy.js?

[pdehaan]

It'd look something like this:

const getFoo = require('./filters/get-foo.js');

module.exports = (eleventyConfig) => {
  eleventyConfig.addFilter("getFoo", getFoo);

  const table = require('./shortcodes/table.js')(eleventyConfig);
  eleventyConfig.addShortcode("table", table);

  return {
    dir: {
      input: "src",
      output: "www",
    },
  };
};

Where my ./shortcodes/table.js looks something like this:

module.exports = function (eleventyConfig = {}) {
  const foo = eleventyConfig.getFilter("getFoo");
  return (vals = []) => {
    const rows = vals.map(row => `<tr><td>${foo(row)}</td></tr>`);
    return `<table><tbody>${rows.join("\n")}</tbody></table>`;
  };
};

[pdehaan]

Or, sometimes if my .eleventy.js config file is getting long, I'll just create some /shortcodes/index.js file which does adds all the shortcodes for me:

// .eleventy.js
const getFoo = require('./filters/get-foo.js');

module.exports = (eleventyConfig) => {
  eleventyConfig.addFilter("getFoo", getFoo);

  require("./shortcodes/index.js")(eleventyConfig);

  return {
    dir: {
      input: "src",
      output: "www",
    },
  };
};

// shortcodes/index.js
module.exports = (eleventyCfg) => {
  const table = require("./table.js")(eleventyCfg);
  eleventyCfg.addShortcode("table", table);
};

// shortcodes/table.js
module.exports = function (eleventyConfig = {}) {
  const foo = eleventyConfig.getFilter("getFoo");
  return (vals = []) => {
    const rows = vals.map(row => `<tr><td>${foo(row)}</td></tr>`);
    return `<table><tbody>${rows.join("\n")}</tbody></table>`;
  };
};

[btrem]

Sorry if I'm being daft, but I can't get this to work. Note that my table.js already has a parameter, phrase, which then gets mapped. In your example, you have return (vals = []) => but where does vals come from? I don't see it declared anywhere.

Maybe it would help to see how your shortcode gets used. In my setup, I have a frontmatter item that is the parameter for the table.js shortcode, used like so in a markdown file:

---
phrase: cause pails trite
---
{{ table phrase }}

And I want to use filters in that shortcode. So I need to pass both phrase and eleventyConfig to table.js.

[pdehaan]

OK, modified my example to use non-arrow functions and match your attribute names to make it a bit easier to compare.
https://github.com/pdehaan/11ty-3192

[btrem]

As you can imagine, this was a bit over my head. It took a hour or two of copy/paste, get error, undo, copy/paste slightly differently, get error, until I got it right. And only after that did I sort of get an idea of what's going on, though it still looks weird to me.

Nonetheless, it works. So thanks very much for putting so much time into my question.

[pdehaan]

"It took a hour or two of copy/paste, get error, undo, copy/paste slightly differently, get error, until I got it right. And only after that did I sort of get an idea of what's going on, though it still looks weird to me."

Fear not, where I come from you get to call yourself a Senior or Staff level Software Engineer and charge lots of 💰 (and still not be sure why it all works).

After re-reading it, the other [perhaps simpler] solution might just be requiring the raw JavaScript filter from your shortcode instead of having to pass an eleventyConfig context object.
So in ./shortcodes/table.js, doing something like const getFoo = require('../filters/get-foo.js');

[btrem]

where I come from you get to call yourself a Senior or Staff level Software Engineer and charge lots of 💰 (and still not be sure why it all works).

Where is that? I want to move there and get a job. ;-)

the other [perhaps simpler] solution might just be requiring the raw JavaScript filter from your shortcode instead of having to pass an eleventyConfig context object.
So in ./shortcodes/table.js, doing something like const getFoo = require('../filters/get-foo.js');

I swear I tried that a week (two weeks?) ago, and couldn't get it to work. But yesterday I tried again, no problem. That's the solution I'm going with, but I'm going to leave the earlier solution as the answer in case someone else wants to know how to pass the config context to a shortcode/filter.