should width be a view?

Community Help
2

I recommend overriding the definition of width if you want different behavior. Here two patterns I sometimes use.

The first pattern is to set a fixed width and then use CSS to resize the content. In SVG, this is done using the viewBox attribute combined with styles width = 100%, height = auto.

width = 975 // set a fixed width

html`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;">
  <circle cx="${width / 2}" cy="${height / 2}" r="100"></circle>
</svg>`

The second pattern is to use Generators.observe to control when the width changes. For example, this definition evaluates to either 480 or 640, depending on what will fit, and only yields a new value when the threshold is crossed.

width = Generators.observe(notify => {
  let width;
  function resized() {
    let w = document.body.clientWidth >= 640 ? 640 : 480;
    if (w !== width) notify(width = w);
  }
  resized();
  window.addEventListener("resize", resized);
  return () => window.removeEventListener("resize", resized);
})

Also, if you want to read the width non-reactively (meaning, without triggering cell invalidation), you can say

document.body.clientWidth
3 Likes