Xylon

Xylon is a powerful web framework that has 0 dependencies. Even though Xylon is small it is powerful. Xylon is shaped like Vue, but acts like React.

Installation

To get started run:

npm install xylon

Then run:

npx xylon create <project-name>

Syntax

To define your html you can use the Xylon syntax:

import { Dx, e, body, head, div, strong, h1, h2, h3, h4, h5, h6, p, a, button } from "./turbo/everything.js";
import * as someApp from "./components/welcome.js";


// Main function to handle routing and page rendering
export default function(req) {
    // Define the initial state of the page
    const State = {
        ["html"]: {
            [head()]: {
                // Additional head content can be added here if needed
            },
            [body()]: {
                // Dynamically render content based on the request path
                [div({ id: "app" })]: function() {
                    switch (req.path) {
                        case "/":
                            return someApp; // Render the main page
                        default:
                            // Render a 404 page if the path is not recognized
                            return {
                                [h1({ id: "title" })]: 404,
                                [p()]: ["Page ",{[strong()]:"not"}," found"],
                                [a({ href: "/" })]: "Go to the main page."
                            };
                    }
                }(),
                // Button for playing sound
                [button({ id: "sfx-button", onclick: "mySound('play')" })]: "Play sound"
            }
        },
        // Script to be executed after rendering
        ["script"]: function() {
            // Change the color of the title element
            Title.style.color = "#10e670";
        },
        // CSS styles for the page
        ['style']: ""
    };

    // Initialize Diamond with the defined state
    let Diamond = new Dx(State);

    // Bind elements to Diamond for future manipulation
    Diamond.Bond('App', 'app');
    Diamond.Bond('Title', 'title');

    // Create a playback function for audio
    Diamond.Audio.CreatePlaybackFunctionFromUrl('mySound', 'https://manzdev.github.io/twitch-manzdev-bios/assets/boot.mp3');

    // Return the state of Diamond
    return Diamond.State;
}

Thank you!

Part of the Renderlabs Internet Program making the internet a better place.