Welcome to BlueJSX!
Just a pure Javascript with JSX syntax.
Code with pure Javascript, components, and JSX!
Features
- Component Based Development
- JSX syntax
- NO complex framework
- NO virtual DOMs! Just use your familiar HTML DOMs!
- No Re-rendering by its framework, easier for developers to understand the behavior
- Less Learning Difficulty than React
- TS support
How the Coding Works
When you code this:
const elem1 = <div id='elem1'>hi!</div>
This will work as:
const elem1 = document.createElement('div')
elem1.id = 'elem1'
elem1.append('hi!')
Installation
You can find more variety of templates. See here for more info.
# in your project folder, run:
npx degit bluejsx/templates/vite-ts # initialize your TS project
npm i
Congrats! Your environment is ready!
To start dev server, run:
npm run dev
To build you project, run:
npm run build
Enabling BlueJSX manually in your vite project
If you want to move your pre-existing vite project into the BlueJSX project, please follow the instruction below:
npm i -D bluejsx vite-with-bluejsx
In your vite.config.js
:
import withBlueJSX from 'vite-with-bluejsx'
export default withBlueJSX({
// your vite settings
})
Document
document
Please see theRoadmap
- [x] BlueJSX processor
- it dynamically appends components
- [x] Vite.js HMR Plugin
- HMR updates the DOM without reloading the whole page during dev
- Experimental
- [ ] SSG builder
- it generates
- pre-rendered HTML
- JS files which initializes the components
- ViteJS SSG loader
- it generates