https://github.com/kbismark/xolus
JSX template engine and a modern html rendering framework.
https://github.com/kbismark/xolus
expressjs javascript-framework nodejs template-engine
Last synced: about 1 year ago
JSON representation
JSX template engine and a modern html rendering framework.
- Host: GitHub
- URL: https://github.com/kbismark/xolus
- Owner: KBismark
- License: mit
- Created: 2024-09-12T00:36:29.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-02T13:49:21.000Z (about 1 year ago)
- Last Synced: 2025-02-02T14:27:19.408Z (about 1 year ago)
- Topics: expressjs, javascript-framework, nodejs, template-engine
- Language: TypeScript
- Homepage:
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Xolus
A JSX template engine and a modern html rendering framework.
Xolus is a progressive web framework to build web applications by reducing much complexities in known frameworks.
It is an attempt to have the old way of building applications using just html, css and javaScript beautiful and interesting again.
It attempts to solve why you do not require over 300 mb of files just to start a "Hello world!" application. Imagine writing just
html but in a composable way.
```bash
npx create-xolus-app myapp
```
[Check out this repo to see how I created a soccer betting tips website using the Xolus framework](https://github.com/KBismark/turnibet)
## Xolus development environment preview
**A typical HTML file may look like this**
```tsx
```
**It may look this way with Xolus**
> *src/App.jsx*
```tsx
import { createComponent } from 'xolus'
const App = createComponent({
// Define the view or UI of the component
template({parentRef, componentRef, props}){
const ids = ['item1','item2','item3']
return (
{Row}
{Row}
{Row}
)
},
// Gather all data needed for the UI or view to render
templateData(){
return
},
})
export default App
```
**It may also look this way with Xolus Maps**
> *src/App.jsx*
```tsx
import { createComponent } from 'xolus'
const App = createComponent({
// Define the view or UI of the component
template({parentRef, componentRef, props}){
const ids = ['item1','item2','item3']
return (
{Row}
)
},
// Gather all data needed for the UI or view to render
templateData({componentRef, done}){
const data = fetch('/get/data').then(()=>done(componentRef))
return
},
})
export default App
```
The xolus codes above will be converted to JavaScript codes that are only executable on the server to generate the corresponding HTML.
Your template codes only runs on the server hence, can perform all database requests for data in the `templateData` method. The
generated HTML is shipped along with `action` codes (more on action codes later) that allows your application to be interactable at first
sight with [statestore.js](https://github.com/kbismark/statestore.js) as the backbone for ensuring data access to your application both on the
server and on the browser. (TODO: Make the application composable on the broswer too since the template codes aren't available on the browser.)
Xolus also exposes APIs to allow pre-generation of HTML files for static websites.
Try Xolus with `npx create-xolus-app myapp`. Create Xolus App comes with Expressjs as the server framework and xolus us your JSX template engine.
```js
const {configure, renderPage, getSiteStats } = require('xolus')
const express = require('express');
// import from App.jsx
const App = require('./dist/App').default;
const app = express();
// Configure Xolus Renderer
configure({
root: __dirname
});
app.get('/', async (req, res)=>{
res.setHeader('content-type','text/html');
let html = ''
try {
html = await renderPage(App, {/* some props... */})
} catch (error) {
throw error
};
res.status(200)
.send(html);
})
```
**This project is in development and has some features not fully stable and not recommended for any production use. Unless you know what you are doing, do not use in production yet!**