Wing-9527 / fre

:ghost: Tiny JSX compiler for building declarative user interfaces.

Home Page:https://fre.deno.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

fre

What's Fre3?

Fre3 is a compiler thar compiles declarative JSX to real dom oprates, there is no VDOM, no Proxy, no Sequence problem.

  • ⚡️ Embedded friendly —— Minimal memory usage, minimal space usage, and simplest algorithm complexity, disign for homo

  • Playground

How it works?

input:

function App(){
    const count = fre.signal(0)
    return <button onclick={()=>count(count()+1)}>{count()}</button>
}

document.body.appendChild(<App/>)

output:

function App() {
  const count = fre.signal(0)
  return (() => {
    let f1;
    f1 = fre.ce('button');
    fre.ael(f1, 'click', () => count(count() + 1));
    fre.effect(() => {
      fre.stc(f1, count());
    });
    return f1;
  })()

}
document.querySelector('.app').appendChild(App())

signals

There are two ways to implement signals, One is Proxy, such as Preact, Vue, Qwik

Proxy has a fatal flaw, which is the deconstruction problem.

Fre uses closures to achieve this, which is somewhat like hooks

Keepping the semantics of Javascript

function App() {
	const count = f.signal(0)
	return (() => { // There is still semantics here, it has a return value
		let f0, f1;
        ... // But there is no semantics here, it doesn't have any return values
		return f1;
	})()
}

Twisting JSX semantics is a drawback of this type of framework.

When we use APIs such as map, it does not receive return values.

In addition to Fre, Solidjs also has the same problem.

without babel or SWC

Fre is more widely used in homo, which is an embedded cross-end framework that makes it difficult for a group of programmers writing Clang to install the node environment.

Rust can be cross compiled or interoperability with Clang.

Contributors

About

:ghost: Tiny JSX compiler for building declarative user interfaces.

https://fre.deno.dev


Languages

Language:Rust 77.4%Language:JavaScript 19.0%Language:HTML 3.6%