corfu

Typesafe HTML templates using JSX 🚀🛡️🔥

Get Started

Specify h as the JSX pragma and import it from mod.ts. Then construct JSX as if it was HTML.

/* @jsx h */import{h}from"http://deno.land/x/corfu/mod.ts";consthtml=<divclass="message">Helloworld</div>;

Your JSX is synchronously converted to a string without any intermediate representation like JSX.Element, or needing to call a utility to render. In the example above, the html variable holds your HTML string.

Templates

In react and co, a function that returns JSX.Element is called a Component. In corfu, a function that returns string is called a Template, to reduce confusion. You can use the PropsWithChildren interface to create Templates that accept children.

/* @jsx h */import{h,PropsWithChildren}from"http://deno.land/x/corfu/mod.ts";interfaceUserData{name: string;email: string;}functionUserInfo(props: PropsWithChildren<UserData>): string{return(<divclass="user"><spanclass="name">{props.name}</span><spanclass="email">{props.email }</span>{props.children}</div>);}consthtml=(<UserInfoname="Alexandros"email="alexandros@gmail.com"><div>achild</div></UserInfo>);// produces:<divclass="user"><spanclass="name">Alexandros</span><spanclass="email">alexandros@gmail.com</span><div>achild</div></div>

Hooks?

Since templates do not re-render, they don't need to express behavior or state that changes over time. For now, the only thing resembling a hook is the withData and useData helpers that help alleviate the pain of prop drilling:

/* @jsx h */import{h,useData,withData}from"../mod.ts";interfaceUser{name: string;email: string;}interfaceData{user: User;}functionUser(): string{const{ user }=useData<Data>();return<divclass="user-wrapper">{user.name} / {user.email}</div>;}constdata={user: {name: "Alexandros",email: "alexandros@gmail.com",},};// the generic type here is optionalconstrendered=withData<Data>(data,()=>{return(<div><h1>User Profile</h1><User/></div>);});