Xeact Version 0.69.71: JSX support

A 10 minute read.

hero image the-magician-anime

Image generated by MidJourney -- The Magician in the style of an anime as a tarot card

Xeact is the most popular femtoframework for discerning development teams. It has been used in at least 3 production facing web applications and has become well-loved by users. You simply cannot argue with this star count:

A graph of Xeact's star count going up and to the right

No React parody is complete without JSX support, so today we at Xeserv are proud to announce the immediate availability of Xeact 0.69.71.

This monumental release brings in officially sanctioned JSX support to the Xeact ecosystem. JSX has been criticized and called names such as "reverse PHP in JavaScript", but the introduction of this critical feature enables users to have unparalleled freedom in their usage of Xeact technology.

Numa is delet
<Numa> Now with additional Funky Kong mode!

No more complicated build system. No more needless complexity. Xeact has only the needful amounts of complexity to help you focus on keeping things simple. Xeact with JSX allows users to create and maintain applications of limitless scale and complexity without sacrificing the core Xeact values.

Numa is delet
<Numa> Makefiles for the winz0rz!

No longer do you need to write Xeact code that looks like this:


const app = async () => {
    // do something important.
    
    return div({}, [
        h1("hi there friends!"),
        p([t("holy cow these are some WORDS like 'lumbersexual macchiatto'. I don't know what they mean though!")]),
    ]),
};

r(() => {
    let root = g("app");
    let contents = await app();
    x(root);
});

That is so many parentheses and m-expressions, it looks like you are going to make Batman jealous!

No, this won't do at all! We need something simpler. We need the simplicity and ease of understanding that Xeact brings to the table. Here is what you can do with the unrestrained power of Xeact and JSX's unholy matrimony:


const Page = async () => {
    // do something important
    
    return (
        <div>
            <h1>hi there friends!</h1>
            <p>holy cow these are some WORDS like 'lumbersexual macchiatto'. I don't know what they mean though!"</p>
        </div>
    );
};

r(() => {
    let root = g("app");
    let contents = await Page();
    x(root);
});

Much better. Xeact is freed from the yoke of its own grammar and this allows you to transcend the boundaries of the flesh to create anything you can imagine with the unlimited power afforded to you. Imagine what you could create with such limitless potential!

How to use this power

Xeact's JSX support has only been tested with Deno's JSX (and TSX) compilation support. Write your code in what you wish you could write and then use Deno to turn that into what you actually have to write. To get started, first you need to install Deno somehow. If you are using Nix flakes, add pkgs.deno to your devShell or run nix shell nixpkgs#deno. If you are using a lesser operating system, follow Deno's instructions and press enter until the messages go away.

Then make a file called deno.json and copy this into it:


{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "xeact",
    },
    "importMap": "./import_map.json",
}

Then make a file called import_map.json and copy this into it:


{
    "imports": {
        "xeact": "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/xeact.ts",
        "xeact/jsx-runtime": "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/jsx-runtime.js",
    }
}

Cadey is coffee
<Cadey> I wish you could do this with less files.

Numa is delet
<Numa> Why? This is perfect as it is. Any less would ruin the beautiful vision we have for Xeact and absolutely stymie the ease of use! Once you get your JavaScript environment to fuck off and die then everything becomes so beautifully simple you could eat off of it!

Cadey is facepalm
<Cadey> If you say so...

Finally you can make your src/test.tsx file for your Xeact project:


// src/test.tsx

/** @jsxImportSource xeact */

import { g, r, x } from "xeact";

export const Page = async () => {
    return (
        <div>
            <h1>hi there friends!</h1>
            <p>holy cow these are some WORDS like 'lumbersexual macchiatto'. I don't know what they mean though!"</p>
        </div>
    );
};

r(async () => {
    let root = g("app");
    let contents = await Page();
    x(root);
});

You can test this awesome power with deno bundle:


$ mkdir -p static/js && deno bundle ./src/test.tsx ./static/js/test.js
Download https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/jsx-runtime.js
Download https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/xeact.ts
Download https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/xeact.js
Check file:///home/cadey/code/Xe/Xeact-demo/src/test.tsx
Bundle file:///home/cadey/code/Xe/Xeact-demo/src/test.tsx
Emit "./static/js/test.js" (1.25KB)

Finally you can witness your wondrous code with some crappy HTML like this:


<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="/static/xess.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body id="top">
        <main>
            <div id="app">Loading...</div>
            <script src="/static/js/test.js" type ="module"></script>
        </main>
    </body>
</html>

This will do everything you need. You can write all the modern code you want and with the power of Xeact, everything will just work out. Component functions work too!


/** @jsxImportSource xeact */

import { g, r, x, u } from "xeact";

type HipsumProps = {
    type: "hipster-centric" | "hipster-latin";
    sentences: number;
};

const getHipsum = async ({type, sentences}: HipsumProps): Promise<string[]> => {
    const resp = await fetch(u("http://hipsum.co/api/", {
        type, sentences, "start-with-lorem": "1"
    }));

    const text: string[] = await resp.json()
    return text;
}

const Hipsum = ({text}: {text: string[]}) => {
    return (
        <div>
            {text.map(para => <p>{para}</p>)}
        </div>
    );
}

export const Page = async () => {
    let paragraph = await getHipsum({type: "hipster-centric", sentences: 8});
    return (
        <div>
            <h1>Lumbersexual macchiatto</h1>
            <Hipsum text={paragraph} />
        </div>
    );
};

r(async () => {
    let root = g("app");
    let contents = await Page();
    x(root);
    root.appendChild(contents);
});

This gets you art like this:

Lumbersexual macchiatto I'm baby 90's thundercats chia poke tbh occupy humblebrag twee prism butcher whatever taxidermy. Brooklyn master cleanse hashtag beard tumeric twee. Normcore af hexagon gochujang, DSA ascot kitsch taxidermy. Fanny pack letterpress af squid. Tofu coloring book twee praxis meggings. Drinking vinegar skateboard try-hard big mood, DSA prism pok pok shaman. Lyft man bun whatever, fam affogato godard bicycle rights letterpress. Photo booth sustainable VHS DSA, organic hammock everyday carry cornhole migas occupy 8-bit.

If you want to witness the fearsome code that powers this humble demo, check here for your gateway to immortality.

Numa is delet
<Numa> Please be sure to follow the Xeact style guide when writing an app that uses Xeact. This means your default component for each page should be named "Page" and you must use semicolons everywhere to be sure the JavaScript compiler knows you are terminating a statement.

What could you create if the cloud was no longer the limit? What is the logical conclusion of your power if you have nothing holding you back? What can you do with Xeact?


This article was posted on M08 17 2022. Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Tags: xeact jsx frontend javascript

This post was WebMentioned at the following URLs:

The art for Mara was drawn by Selicre.

The art for Cadey was drawn by ArtZora Studios.