index.js
const hyptiotes = require("hyptiotes");

const configuration = require("./configuration");
const App = require("./app");

hyptiotes.setElementInitializer(configuration.elementInitializer);
hyptiotes.setItemHandlers(configuration.itemHandlers);
hyptiotes.setAttributeHandlers(configuration.attributeHandlers);
hyptiotes.setElementFinalizer(configuration.elementFinalizer);

const domTree = hyptiotes.castWeb(App);

document.getElementById("root").appendChild(domTree);

app.js
module.exports = [
	":div",
	{ id: "main-content", style: {alignItems: "flex-start"} },
	[":h1", "Hyptiotes Basics"],

	[':span', "Follow the sources along with each section for a guided intro to Hyptiotes patterns"],

	require("./arrayTrees"),
	require("./richNodes"),
	require("./treeGeneration"),
];

arrayTrees.js
// A tree represented in arrays
module.exports = [
	":div",
	[":h3", "Array Based Trees "],
	[
		":span",
		"Hyptiotes leverages the most basic form of a tree: nested arrays. ",
		"With Hyptiotes, defining the structure of a ui tree is as simple as creating an array. ",

		[":br"],
		[":br"],

		"See ",
		[":code", "arrayTrees.js"],
		" under sources to see how this ui hierarchy was represented in arrays.",
	],
];

richNodes.js
module.exports = [
	":div",
	[":h3", "Rich Nodes: Tags + Attributes + Children"],

	[
		// Tag
		":span",

		// Children
		"In typical UI trees, in addition to ",
		[
			":span",
			// Attributes
			{ style: { fontWeight: "bold" } },
			"children",
		],
		", nodes also have ",
		[":span", { style: { fontWeight: "bold" } }, "tags"],
		" and ",
		[":span", { style: { fontWeight: "bold" } }, "attributes"],
		". ",

		[":br"],
		[":br"],

		"In the basic hyptiotes convention, tags are always ",
		[":span", { style: { textDecoration: "underline" } }, "the first item"],
		" in an array and attributes are ",
		[":span", { style: { fontStyle: "italic" } }, "plain objects"],
		" within the tree. ",

		[":br"],
		[":br"],

		[
			":i",
			'Note: the default convention for hyptiotes is to prefix tag names with ":". ',
			"This is just to improve the readability of array trees and can be configured. ",
		],
	],
];

treeGeneration.js
const STEPS = [
	"Initialize Element",
	"Item Mapping",
	"Attribute Mapping",
	"Finalize Element",
];

module.exports = [
	":div",
	[":h3", "Tree Generation: Node Mapping"],

	"Hyptiotes facilitates tree generation as a 4 step array to node reduction for each 'element': ",

  // Variables and functional mapping
	[":ol", STEPS.map((step) => [":li", step])],

	"Each step provides an open plugin architecture which allows essentially limitless capabilities. ",

  // Inline function call
	Bonus(),

	[":h3", '"Build your own framework"'],
	"By leveraging configuration, hyptiotes makes it easy to essentially build or plug in your own framework. ",
	"Check out the other examples to see different example configurations for different app building paradigms like ",
	[
		":ul",
		[
			"generating markup",
			"creating and manipulating DOM via the DOM API",
			"creating a React tree",
		].map((paradigm) => [":li", paradigm]),
	],
  "If you want to know more about what Hyptiotes can do, check out the README"
];

function Bonus() {
	return [
		":div",
		"And since you're just dealing with JS, you can use any JS functionality available like variables, functions, or modules. ",
	];
}