Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bluejsx/bluejsx
pure Javascript with JSX syntax.
https://github.com/bluejsx/bluejsx
component-based frontend-web javascript jsx lightweight typescript vanilla-js vitejs
Last synced: 3 months ago
JSON representation
pure Javascript with JSX syntax.
- Host: GitHub
- URL: https://github.com/bluejsx/bluejsx
- Owner: bluejsx
- License: mit
- Archived: true
- Created: 2021-04-05T10:11:39.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-18T01:44:59.000Z (5 months ago)
- Last Synced: 2024-09-26T12:52:17.829Z (3 months ago)
- Topics: component-based, frontend-web, javascript, jsx, lightweight, typescript, vanilla-js, vitejs
- Language: TypeScript
- Homepage: https://bluejsx.github.io/
- Size: 368 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```jsx
const elem1 =
hi!
```
This will work as:
```js
const elem1 = document.createElement('div')
elem1.id = 'elem1'
elem1.append('hi!')
```
#### Experimental HMR
[How it's implemented](https://github.com/bluejsx/BlueJSX/discussions/5#discussion-3631908)
## Installation
> You can find more variety of templates. See [here](https://bluejsx.github.io/docs/templates.html) for more info.
```sh
# 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:
```sh
npm run dev
```
To build you project, run:
```sh
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`:
```js
import withBlueJSX from 'vite-with-bluejsx'
export default withBlueJSX({
// your vite settings
})
```
## Document
### Please see the [document](https://bluejsx.github.io/docs/)
## Roadmap
- [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](https://vitejs.dev/guide/ssr.html#ssr-specific-plugin-logic)