New syntax proposal for data selectors

[davidtheclark]

Something that's bumming me out about data selectors is that they can only be injected by page, need to be injected on every page that will use them, and then need to be passed down the React tree from the outermost page-wrapping component.

It would be nicer if you could import the data whenever you wanted it — on a page, in a component, whenever — and let module resolution determine how it loads.

I think we could make this happen. Instead of injectedData being a special front matter property, we could generate a set of @mapbox/batfish/data/* modules that are available for importing.

For example, if in your config you define a data selector pageTitles, then in any of your components or pages you could import pageTitles from '@mapbox/batfish/data/page-titles' and use it.

@jfurrow @lshig since you've both used data selectors — what do you think? Does the new plan make sense?

[davidtheclark]

We would still maintain the benefit of data selectors (as opposed to just injecting all the data in all the pages) — namely, that bundles would only include the data that they use.

When we initialize Webpack, we'd build these data modules in the temporary directory (similarly to how we currently build the page modules), then we'll alias @mapbox/batfish/data/* paths to them.

[lshig]

It would be nicer if you could import the data whenever you wanted it — on a page, in a component, whenever — and let module resolution determine how it loads.

I agree with this. This scenario was particularly tricky when working with a Table of Contents type component. There was some unexpected nesting with the injectedData. I like the plan! 👍

[jfurrow]

Yes, I love this idea!