Xeact Version 0.69.71: JSX support
Published on , 1236 words, 5 minutes to read
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:
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.
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.
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"
}
}
I wish you could do this with less files.
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!
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:
If you want to witness the fearsome code that powers this humble demo, check here for your gateway to immortality.
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?
Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.
Tags: jsx, frontend, javascript