Minimal Templating Engine In Javascript

minimal-templating-engine.ts

// magic!
function dom<Props extends Record<string, unknown>>(
  str: TemplateStringsArray,
  ...args: string[] | ((props: Props) => string)[]
) {
  const interleaved = args.flatMap((arg, index) => {
    return [arg, str[index + 1]];
  });

  return (props?: Props) =>
    [str[0], ...interleaved]
      .map((part) => {
        return typeof part === "function" ? part(props!) : part;
      })
      .join("");
}

const Message = dom`<span>Hello</span>`;
const Greeting = dom<{ color: string; name: string }>`
  <p>
  ${Message}
  <span style="color: ${(p) => p.color}">${(p) => p.name}</span>
  </p>
`;

// Main component
const Component = dom`
  <h3>Ladies and gentlemen: Tagged Template Literals! ✨</h3>
  ${Greeting({ name: "Anurag Hazra", color: "red" })}
`;

document.body.innerHTML = Component();

Damn thats great code bro ! took me a while to understand but its brilliant ! 👍