properties panel example should work without JSX

[marstamm]

What should we do?
Change https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension to not use JSX.

E.g.: use htm instead.

Why should we do it?

• When using the example in a React/Angular/..., the JSX is compiled by the root application
• This is a reoccurring issue in the forum. It hinders the getting started experience

---

Related to #200

[chilligerchief]

This actually hinders me from extending the properties panel in my svelte application. Do you have a working example without JSX? Or can you provide a link to the forum, where someone got it to work?

When I just return a String it works fine.
But if I can return HTML (as string) it just displays the raw HML.
If I generate the Elemente programmatically like such

  const html = document.createElement('input')
  html.type = 'text' 
  html.value = "test"
  return html 

It does not display anything. I have no experience with htm. Is there no way to use "plain" javascript to create a simple text input?

[nikku]

You can use tagged template literals to accomplish the same thing, no JSX required. Please checkout https://github.com/developit/htm and see if that helps you.

We aim to port this example over, but were simply not able to do so, yet.

[chilligerchief]

This works fine. However, I wonder if there is a way to do this without adding yet another dependency. But I guess this is the way the world of javascript has evolved.

[nikku]

You can absolutely do without an additional dependency. But it will be verbose / impossible to maintain.

[hknsrr]

Hi,

https://forum.bpmn.io/t/entry-is-not-visible/9139/3?u=hakan_sarier

Do you have any suggestions for solving this error?

[marstamm]

Hi @hknsrr ,

sorry for the late reply. There are multiple ways to create Preact components. If you don't want to use JSX, an alternative could be htm. Check out the changes in #240 to see how this would look like.