Example of code generator that uses JSX

index.tsx

import prettier from "prettier";

namespace CodeGen {
  export function createElement(
    tagFunction: (
      attributes: Record<string, unknown>,
      children: string[],
    ) => string,
    attributes: Record<string, unknown>,
    ...children: string[]
  ) {
    return tagFunction.call(null, attributes, children);
  }
  export function createFragment(_: any, children: string[]) {
    return children.join("\n");
  }
}

function If({ condition }: { condition: string }, children: string[]) {
  return `if (${condition}) { ${children.join("\n")} }`;
}

function ForOf(
  { item, iterable }: { item: string; iterable: string },
  children: string[],
) {
  return `for (${item} of ${iterable}) { ${children.join("\n")} }`;
}

async function main() {
  const code = (
    <>
      <If condition="a > b">
        console.log("hello")
        <If condition="a > 100">console.log("world")</If>
        <ForOf item="item" iterable="items">
          console.log("item", item)
        </ForOf>
      </If>
    </>
  );
  const formatted = await prettier.format(code, { filepath: "file.ts" });
  console.log(formatted);
}

main().catch(console.error);

// Output:
//
// if (a > b) {
//   console.log("hello");
//   if (a > 100) {
//     console.log("world");
//   }
//   for (item of items) {
//     console.log("item", item);
//   }
// }
//

tsconfig.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "compilerOptions": {
    "preserveConstEnums": true,
    "jsx": "react",
    "jsxFactory": "CodeGen.createElement",
    "jsxFragmentFactory": "CodeGen.createFragment",
    "outDir": "dist"
  },
  "include": ["src/**/*"],
}