mohebifar / vidact

A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM

Vidact

Vidact compiles your React source codes to VanillaJS code with No Virtual DOM ™️. It is similar to Svelte, but unlike Svelte, Vidact does not introduce a new syntax. It takes in pure React-compatible JavaScript (JSX) and outputs plain JavaScript.

Vidact currently is in alpha phase and has known limitations. It does not fully comply with React's behaviour in some edge cases, and probably never will, but the goal is to get as close behaviour to React as possible. Also, it currently only supports functional components and does not support class components.

How does it work and how is it different from React?

Vidact is a babel-plugin that scans your source code to find what parts of the UI need to be updated in response to a prop or state change and generates a plain JavaScript code that should have the same DOM result as the equivalent React code. Note that all of this is done in build time! Whereas React does the bulk of its work in runtime in the browser by leveraging Virtual DOMs to determine what needs to be updated in the actual DOM.

When should I use it instead of React?

Vidact is not currently ready to be used in production.

The goal is to have an alternative library for those who love React, but are looking for a more lightweight and high-performance implementation for smaller projects.

Roadmap

• JSX conversion for native HTML elements
• JSX conversion for component elements
• Support event listeners for native HTML elements
  • Proxy onChange for text inputs and textarea
• Support inline styles
• Reactive props
• Basic array child nodes support
• useState: Stateful components
• Dangerously set innerHTML
• useRef
• useEffect
• useEffect with cleanup (detect component unmount)
• useCallback
• useMemo
• Conditional expression performance
• Support custom hook functions built upon native hooks
• Improve array child support
  • Avoid refreshing elements with the same key and only do prop updates instead
  • Avoid refreshing rearranged elements with the same key
• SVG support
• Support components with multiple conditional return statements
• Support context
• SSR support
• Props spread

vidact's Issues

Join forces with Svelte.dev

Svelte.dev has a similar idea.
It has the only other source files.
vidact - JSX to Precision DOM
svelte.dev - svelte file to Precision DOM

What do you think?

I assume that in theory they should have a lot in common. If they don't have it yet, it probably results only from not working out some ideas.

Printing 0

<div>{0}</div> leads to empty div while it should print 0