Preact: Potential Feature: Automatically concatenate class

[lukepighetti]

Vue automatically passes component classes down to the top level component element without having to spread props. It's clean and predictable. Is there an opportunity to do this in Preact?

/// Proposed methodology
const Bar = () => <Foo class="in-bar">bar!</Foo>;
const Foo = ({ children }) => <div class="foo">Foo {children} </div>; /// renders with class "foo in-bar"

/// Current methodology
const Bar = () => <Foo class="in-bar">bar!</Foo>;
const Foo = ({ children, ...props }) => (
  <div class={`foo ${props.class || ""}`}>Foo {children} </div> /// renders with class "foo in-bar"
);

[robertknight]

Do you have a link to the relevant Vue documentation?

My general feeling is that this runs counter to Preact (& React)'s general tendency to avoid magical/implicit behaviours. If you see an expression like <div class="bar">content</div> it is very easy to reason about what will be rendered in the DOM, and the code which implements the mapping is pretty short and fairly easy to read.

Preact does however provide an extension mechanism via the options export which you can use to add functionality in your projects:

import { options } from 'preact';

const prevVNodeHook = options.vnode;
options.vnode = vnode => {

  // Modify elements created by `h` function here as you see fit.

  if (prevVNodeHook) {
    prevVNodeHook(vnode);
  }
};

[marvinhagemeister]

I'm with @robertknight here. In Preact or React for that matter, there is a great emphasize on making self contained components. This is what allows any component to be passed as a child to another one. Creating dependencies between a parent and a child can lead to hard to debug errors and is a bit frowned upon in the react ecosystem.

The suggested proposal would fall into that category. As Robert mentioned, our renderer is pluggable enough that you can add this behaviour via the option hooks👍

[lukepighetti]

Yep, that is an acceptable solution. Thank you all, and I support closing this issue.