Preact: Export vnode class

[Qrokqt]

I have my own h()-like function that wraps preact's h() function but it would be nice if I could skip the middle man and just import vnode and return them from my function.

[yaodingyd]

I think you can set this up in your .babelrc via transform-react-jsx plugin:

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "h" // your own h-like function name
    }]
  ]
}

and then import your h-like function in class file

[developit]

Also - worth noting that h() does more than just instance VNode. It normalizes arguments in a way that is required by the diff.

[Qrokqt]

@yaodingyd Thanks, but I'm not using jsx or babel.

@developit Could you elaborate on that?

It looks like VNode is just an empty class so this works just fine, in which case there's no need to import vnode. Thanks.

var vnode = {
    nodeName: 'div',
    children: ['test']
};
render(vnode, document.body);

[marvinhagemeister]

@Qrokqt yep, VNode is an empty class and your code will work fine. Just be aware that when somebody else uses your code they may expect h to work like preact's h. That's what @developit meant.

For example when props has a children property wie move copy that over to the vnode's children property and delete it from props.

h("div", { children: "foo", bar: "baz" })

// Without normalization
const VNode = {
  nodeName: "div",
  attributes: { children: "foo", bar: "baz" },
  children: [],
}

// Compare that to with normalization by preact's built-in h function
const VNode = {
  nodeName: "div",
  attributes: { bar: "baz" },
  children: ["foo"],
}