Data Loading Strategies

[thescientist13]

WCC currently supports data loading through a couple different strategies

Loader Function
Any component can export a getData function, which is pretty versatile and works at the definition level, anywhere in the tree.

class Counter extends HTMLElement {
  constructor(props = {}) {
    super();

    this.count = props.count;
    this.render();
  }

  // ....

  render() {
    return `
      <template shadowroot="open">
        <script type="application/json">
          ${JSON.stringify({ count: this.count })}
        </script>

        <div>
          <button id="inc">Increment</button>
          <span>Current Count: <span id="count">${this.count}</span></span>
          <button id="dec">Decrement</button>
        </div>
      </template>
    `;
  }
}

export async function getData() {
  return {
    count: Math.floor(Math.random() * (100 - 0 + 1) + 0)
  };
}

Constructor Props
In #119 we allowed it so a "constructor prop" could be passed in programmatically when calling renderToString for the entry point module

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

This pattern plays really nice with file-based routing and SSR!

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 { title, body } = post;

    this.innerHTML = `
      <h2>${title}</h2>
      <p>${body}</p>
    `;
  }
}

---

How do we feel about these patterns? Should we keep both, or drop one or the other? Or something altogether different? 🤔

Should this also apply to renderFromHTML?

Technically, I suppose you could combine them anyway you see fit? Seems like they could serve different use cases.