Refactor createTemplate/createElementFromTemplate/createElement to vanilla jsx/renderElement

[devhelpr]

currently at a lot of places the following is still used to add html elements to the DOM:

const template = createTemplate(
      `<div class="flex flex-col"><p>Hello DOM!</p></div>`
);
const contentElement = createElementFromTemplate(template);

const htmlElement = createElement(
  'div', {},
  rootElement,
  contentElement
);

The same be done in a tsx file :

import {
  createJSXElement,
  renderElement
} from '@devhelpr/visual-programming-system';

let htmlElement: HTMLElement | undefined = undefined;

renderElement(<div getElement={(element : HTMLElement)) => {
    htmlElement=elementl;}
  }
  class="flex flex-col">
  <p>Hello DOM!</p>
</div>, rootElement);

Code flow canvas has special tsconfig settings which link createJSXElement to the typescript jsx transform proces. The components you can create with this within code flow canvas don't have the same possibilities like you have in react or solid (state/signals etc) but it is much easier to create components then with the above createTemplate/createElementFromTemplate/createElement setup.