provide component data through render method params (constructor props)

[thescientist13]

Type of Change

Feature

Summary

As part of ProjectEvergreen/greenwood#1157, an alternative to getData was identified that could be more useful at the framework level as getData is more of a component / entry point level mechanic, but frameworks will likely have / want to implement their own data loading mechanics, so being able to DI data from the framework would be nice. For example, Greenwood would like to be able to pass in an instance of a Request object, and possibly additional framework metadata.

On top of that frameworks, may want to define their own naming convention for data loading, the most common one being the loader pattern, e.g.

export default class PostPage extends HTMLElement {
  constructor(request) {
    super();
    
    const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
    this.postId = params.get('id');
  }

  async connectedCallback() {
    const { postId } = this;
    const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(resp => resp.json());
    const { id, title, body } = post;

    this.innerHTML = `
      <h1>Fetched Post ID: ${id}</h1>
      <h2>${title}</h2>
      <p>${body}</p>
    `;
  }
}

Details

In theory a framework could import / call getData itself as a generic loader pattern, WCC would still run it itself too as part of rendering, incurring a double fetch. Also this makes the name flexible, and could let frameworks take on more complex requirements like ProjectEvergreen/greenwood#880.

So instead of relying only on WCC to do the data fetching and orchestration, we could pass these "constructor props" to WCC and it can inject that data into the top level component of the entry point, e.g.

const request = new Request({ /* ... */ });
const { html } = await renderToString(new URL(moduleUrl), false, request);

---

This may beg the question if WCC should even have a data loading mechanic, so it might be good to spin up an issue or discussion for that.