README
VanillaJSX
Just a pure Javascript with JSX syntax.
⚠️Caution⚠️
- This is still in Draft phase!
- specification may change without notice
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
- Just use your JS skills!
- If you want to change DOM attributes or texts, JUST SET THEM BY YOURSELF!
- 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
npm i @vanillajsx/vjsx
vitejs
forin your vite.config.js
:
export default {
esbuild: {
jsxFactory: 'VJSX.r',
jsxFragment: 'VJSX.Fragment',
jsxInject: `import VJSX from '@vanillajsx/vjsx'`
},
//... other settings
}
in your tsconfig.json
/jsconfig.json
{
/*
... your settings ...
You would need to state "jsx" option of your choice
*/
"jsxFactory": "VJSX.r",
"jsxFragmentFactory": "VJSX.Fragment"
}
Then your JSX code would be interpreted as VanillaJSX! Have fun!
Usage
documentation
seeRoadmap
- VanillaJSX processor
- it dynamically appends components
- Vite.js HMR Plugin
- SSG builder
- it generates
- pre-rendered HTML
- JS files which initializes the components
- ViteJS SSG loader
- it generates