PreactBaseElement: Support returning a function for "selector" prop defs

[caroqliu]

This PR adds support for an as configuration in component prop definitions to be paired with definitions that provide a selector and single: true. single: false does not support as as we do not have a use case for this currently.

Follow up for #33636 and #33105 to provide a generic soln from PreactBaseElement. This also addresses the arrow function issue discussed here.

[jridgewell]

This actually has the same issue mentioned in the other thread. Here, SlotWithProps function is being recreated every time we render, which means the Component identity changes every time. This will cause the <slot> DOM node to be removed, a new one created, and then inserted during every diff.

Now that we're operating on the PreactBaseElement level, we can actually cache this per the element instance. Eg:

const cache: WeakMap<Element, {oldDefauls: (!Object|undefined), component: Component}> = new WeakMap();

export function createSlot(element, name, defaultProps, as) {
  element.setAttribute('slot', name);
  if (!as) {
    return <Slot {...(defaultProps || EMPTY)} name={name} />;
  }

  const cached = cache.get(element);
  if (cached && shallowEquals(cached.oldProps, defaultProps)) {
    return cached.component;
  }
  function SlotWithProps(props) {
    return <Slot {...(defaultProps || EMPTY)} name={name} {...props} />;
  }
  cache.set(element, { oldProps: defaultProps, component: SlotWithProps });

  return SlotWithProps;
}

[caroqliu]

Thanks for clarifying! Updated.

[jridgewell]

Looks good. I'd like to see a unit test verifying the <slot> DOM node is the same after a rerender, and possibly one asserting that it is new after the defaultProps changes.

[caroqliu]

To get the second case, we will have to enable both deep prop def checking in shouldMutationBeRerendered and include subtree: true in CHILDREN_MUTATION_INIT -- wanted to confirm this is OK.

[jridgewell]

I think we can avoid it with:

PBE['props'] = {
  next: {
    selector: '…',
    props: {
      bar: {attr: 'bar'},
    },
  },
  foo: {
    attr: 'foo',
  },
};

// Mutate slot prop, but this won't trigger a rerender
el.querySelector('next').setAttribute('bar', 'other');

// Mutate an observed attr to trigger rerender
el.setAttribute('foo', 'foooey');

If it's more complicated than that, I think it's ok with just the unit tests you wrote.

[caroqliu]

Oh nice, that works. I removed the changes to the mutation observer then. Thanks!

[jridgewell]

Looks good. I'd like to see a unit test verifying the <slot> DOM node is the same after a rerender, and possibly one asserting that it is new after the defaultProps changes.

[jridgewell]

I think we can avoid it with:

PBE['props'] = {
  next: {
    selector: '…',
    props: {
      bar: {attr: 'bar'},
    },
  },
  foo: {
    attr: 'foo',
  },
};

// Mutate slot prop, but this won't trigger a rerender
el.querySelector('next').setAttribute('bar', 'other');

// Mutate an observed attr to trigger rerender
el.setAttribute('foo', 'foooey');

If it's more complicated than that, I think it's ok with just the unit tests you wrote.