https://github.com/wixplosives/tsx-air

Thoughts on a new rendering system
https://github.com/wixplosives/tsx-air

Last synced: about 2 months ago
JSON representation

Thoughts on a new rendering system

• Host: GitHub
• URL: https://github.com/wixplosives/tsx-air
• Owner: wixplosives
• License: mit
• Archived: true
• Created: 2019-02-25T23:11:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-01-15T07:10:40.000Z (over 2 years ago)
• Last Synced: 2024-07-01T00:25:11.021Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 6.23 MB
• Stars: 4
• Watchers: 9
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Welcome to TsxAir

[![tests](https://github.com/wixplosives/tsx-air/actions/workflows/tests.yml/badge.svg)](https://github.com/wixplosives/tsx-air/actions/workflows/tests.yml)

## TsxAir is a highly optimized frontend framework and compiler

- Code is written in functional Jsx/Tsx, similar to React FunctionalComponent.

- Most of the heavy lifting is done in build time, making the VDom/Reconciliation minimal or redundant.

- Minimal (~ 1-10k) runtime framework code

- Highly reactive: synchronous data updates, an optional 1 frame delay in DOM update @60 FPS

- Minimal changes to developer code

- SSR, TypeScript and standalone components from day 0

- Supports multiple concurrent runtime versions

## [Syntax Code Sample](docs/syntax.md)

```tsx

import { TSXAir, store } from '@tsx-air/framework';

export const ClickBait = TSXAir((p:{initial:number}) => {

    // will not change when p.initial changes

    const state = store({ counter: p.count });

    return 
 state.counter++}>

        click count: {/* will only change on click */ state.count}        

        initial: {/* will change with p.initial */ props.initial}    

    
;

});

```


## Wh Questions

- [Why (Background)](docs/background.md)

- [What (Goals)](docs/goals.md)

- [Who (Advisory board)](docs/advisory.board/advisory.board.md)

- [Ha? (Original Proposal)](docs/original.proposal.md)

- [How (Syntax)](docs/syntax.md)

## Getting started

### Prerequisite

- Git

- Yarn

- NodeJs

`git clone https://github.com/wixplosives/tsx-air.git`

(for ssh lovers: `[email protected]:wixplosives/tsx-air.git`)

### Running Local Playground 

`yarn start`

The playground is where you can edit interactive examples [showcasing the syntax and features](docs/syntax.md). 

You can change compilers to compare the generated code with native implementation.

### Testing

`yarn test` or `DEBUG=true yarn test`

The examples available at the playground are used to test the compiler (i.e that the compiled code behaves and performs as the native code)

The list of tested examples can be [here](packages/examples/src/examples/index.ts)

### CLI (under construction)

in package `builder` use `yarn compile`

## Project Structure

- The project is organized in [packages as a monorepo](https://github.com/wixplosives/sample-monorepo)

- Code execution is using NodeJs (14+) with [ts-tools](https://github.com/AviVahl/ts-tools)