access eleventyComputed data from another data file

[saiballo]

Hello,

in src/data I have two files:

• eleventyComputed.js
• commonData.js

inside eleventyComputed I have:

module.exports = {
	"data1": "foo",
	"data2": (data) => {

		if (typeof data["env"] === "bar") {

			return "foo";

		} else {

			return "bar";
		}
	}
};

Ok, Can I access data2 in commonData.js? How? If I get eleventyComputed.data1 all it's ok and return data (static) but I I try data2 it return the function instead the result

thank you

[saiballo]

is it possibile?

[mahnunchik]

More general question: is it possible to access data from another data file?

_data/first.js
_data/second.js

// first.js
export default function () {
  return { foo: 'bar' };
}

// second.js
```js
// first.js
export default function () {
  // data ?
  // this.data ?
  return { baz: data.first.foo + ' baz'  };
}

[dwkns]

Yes, you can import it just like any js module.

Note that you are exporting a function from first,js, so to get it's value you need to use data()

// first.js
export default function () {
  return { foo: 'bar' };
}

import data from "./first.js" // import the function from `first.js` as a variable called `data`

console.log( data ) // prints the function imported from `first.js`
console.log( data() ) // prints an object which is the result of calling the function in `first.js`
console.log( data().foo ) // this is what you wanted.

export default function () {  
  return { baz: data().foo + ' baz'  }; // now does what you expect.
}

[mahnunchik]

Thus all the magic of eleventyComputed properties is lost

[dwkns]

Not sure what you mean. In your example you're not using eleventyComputed.

Edit: I think I understand now, see message below.

[dwkns]

Thinking through this a bit more, the answer is no, you can't get the result of a function from eleventyComputed.js from within another js data file.

More correctly, you can't get the result of a function in eleventyComputed.js which relies on the dynamically created data property from within another js data file. Which is what @mahnunchik I think was hinting at.

This is because eleventyComputed is processed at the very end of the data cascade just before the template is rendered. So in your example above commonData.js is processed before eleventyComputed.js.

In commonData.js you can import eleventyComputed.js and read data1 ("foo") and data2 (a function). You can even call data2()as a function, but the reason your code won't work is that the magically created dataproperty doesn't exist yet.

Assume you have eleventyComputed.js with

module.exports = {
    "data1": "foo",
    "data2": (data) => {
      if (data) {
        return data.title + Date.now();
      }
      return "data doesn't exist"
    }
};

And commonData.js with

const eleventyComputed = require('./eleventyComputed.cjs')
console.log("eleventyComputed", eleventyComputed)
console.log("eleventyComputed.data1", eleventyComputed.data1)
console.log("eleventyComputed.data2()", eleventyComputed.data2())

And a template index.njk

---
layout: _page_skeleton.njk
title: "Homepage"
env: development
---
<p>{{ data1 }}</p>
<p>{{ data2 }}</p>

You'll notice that eleventyComputed.data2() logs out as data doesn't exist (because data in the data2 function doesn't exist yet.

But in the template <p>{{ data2 }}</p> (which is the same as calling eleventyComputed.data2() incommonData.js ) renders as expected because the data cascade has finished processing and the magic data property is now available.

All that said, what is the reason for wanted to access something from eleventyComputed from within another data js file? There is almost certainly a way of achiving the result you want using a different method.

[saiballo]

thank you. now everything is clear