Question about proper typing for JSX for special component definition

Question

I'm working on an experimental web component library. Components are basically of type

type Component<Props> = {
  new(): Props,
  init(props: Props): ...
}

and implemented like the following

// a bit simplified
@component('my-component')
class MyComponent {
  @prop()
  someProp = 0

  static init(props: MyComponent) {
    ...
  }
}

Now I want to use JSX for that. In real world things are a bit more complicated, but for here let's say that all component props shall be optional in JSX.

// a bit simplified
function createElement<Props>(type: Component<Props>, props?: Partial<Props> | null, ...) {
  ...
}

Now createElement(MyComponent) works perfectly fine, but <MyComponent/> will result in a compile error

"Type '{ }' is not assignable to type 'IntrinsicAttributes & MyComponent'. Property 'someProp' is missing in type '{ }' but required in type 'MyComponent'. ts(2322)"

How do I have to fix this in the global JSX typings or wherever? MTIA

[Edit - added demo]: Please find here a little simplified demo (=> see compile error in line 39 of index.tsx - I guess the problem is somewhere in jsx.d.ts): https://codesandbox.io/s/naughty-platform-8x3q5?file=/src/index.tsx

PS: BTW, just changing someProp = 0 to someProp? = 0 is not a useful solution.

Answer 1

I guess, what I am trying to do here is currently not possible with JSX (at least not without an additional function call, e.g. export default convert(MyComponent)).

In the JSX namespace you can configure interface ElementClass and interface ElementAttributesProperty to tell JSX how to retrieve the concrete props type of a class component. Which is too limited for my demo.

In my demo the retrieval of the type of the component props is more complex than possible to configure via ElementAttributesProperty, IMHO.

Please, let me know if I am wrong with this assumption or if you have additional comments or suggestions.

Answer 2

Your JSX pragma should be something like this:

/** @jsx createElement */

const appendChild = (parent, child) => {
  if (Array.isArray(child))
    child.forEach(nestedChild => appendChild(parent, nestedChild))
  else
    parent.appendChild(
      child.nodeType ? child : document.createTextNode(child)
    )
}

export const createElement = (tag, props, ...children) => {
  const element = document.createElement(tag)

  Object.entries(props || {}).forEach(([name, value]) => {
    if (name.startsWith('on') && name.toLowerCase() in window)
      element.addEventListener(name.toLowerCase().substr(2), value)
    else
      element.setAttribute(name, value.toString())
  })

  children.forEach(child => {
    appendChild(element, child)
  })

  return element
}


document.getElementById('root').appendChild(
  <div>Hello</div>
)

Check this demo.

I don't know about your virtual dom I can't say what can be wrong with it.

My tips:

1. Try first make it work without virtual dom
2. Don't forget to append it to document
3. Make sure that your props are not null or undefined before you process them.