react-component

I've been playing around with Svelte this past few months. I was initially turned off by the way it somewhat abuses regular Javascript syntax since it's hard to have a clear overview where and when magic works. What I have enjoyed quite a bit is it's terse single file component definitions, so I wanted to see if I could bring that to the React world.

It had been a while since I've written any AST transformations, but I found @buildsghost Babel Handbook super helpful.

react-component allows you to write you're components in a Svelte inspired way:

import Page from './Page';

export let children;
export let title = '';

const [count, setCount] = useState(0);

<Page>
  <h1>{title}</h1>
  {children}
  <Button onClick={() => setCount(count => count + 1)}>
</Page>

Where export let bindings become props and the last JSX expression is your component definition.

Trying it out is easy, if you're using Next.js, I've built a this plugin Otherwise you can can check out how to use it here: react-component