[TypeScript] text-patched html element function on an existing element

text-patch-html.ts

type IHtmlFunctionCallBuilder<T extends (...args: any) => void> = (func: T, funcArgs: Parameters<T>) => string
const htmlFunctionCallBuilder: IHtmlFunctionCallBuilder<(...args: any) => void> = (func, funcArgs) => {
  let parsedArgs = JSON.stringify(funcArgs);
  
  return `${func.name}(${parsedArgs});`
}

const renderToHTMLWithFunctions = (props: IButtonData) => {
  // Create HTML element
  const html = ReactDOMServer.renderToString(Button(props));
  // Assuming HTML is correct the string will be <elemType ...
  const elemStart = html.split(/\b/)[0] + html.split(/\b/)[1];
  // We will separate HTML text right after elemType
  const elemEnd = html.substring(elemStart.length);
  // And will put in the functions in between
  const functionCodeStart = " onClick=\'"
  const functionCodeEnd = "\' "
  let htmlWithFunc = functionCodeStart;
  if (props.callsback === true) htmlWithFunc += htmlFunctionCallBuilder(functions.exampleButtonCallback, { data: "test" });
  htmlWithFunc += functionCodeEnd;
  
  return elemStart + htmlWithFunc + elemEnd;
}