Warning
This framework is still in heavy development. Purge the cache to ensure the acquisition of the latest updated version.
The project's name was changed from "automata" to "secutio" due to the existence of other projects related to Finite State Machines already using the name "automata". "Secutio" is a Latin term that translates to "sequence" or "following." I believe "Secutio" is an excellent name for this project, as it specifically emphasizes the execution of tasks in a sequential order.
Makes the difficult parts easy. It's like htmx but different!
The objective of this project is to simplify the development of web applications (single-page applications) by reducing the inherent complexity.
This library facilitates the association of actions (referred to as tasks here) with any HTML element, much like the way we associate actions with form submissions. Templates, whether embedded in HTML (using the script element with type="text/html") or served from a directory, are also supported. The practical association of data with templates is achieved using JavaScript Template Literals.
This library also enables you to modify only the target HTML elements specified in the "tasks" without needing to reload the entire page.
You can implement the backend in any programming language since the framework is programming language agnostic. A working example can be seen here.
Create an HTML file and include the library path at the end of the "body" tag. Define tasks to be performed using the "script" element and add the "data-tasktable" attribute. Also, include the "type" attribute, which must be set to "application/json". Tasks can alternatively be defined in a JSON file; both modes are supported simultaneously, similar to styles.
Example:
<script data-tasktable type="application/json" src="tasks.json"></script>Here is a working example that retrieves a joke and can be viewed on CodePen:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<button data-tasks="get-joke">Click Me</button>
<p id="output"></p>
<script data-tasktable type="application/json">
{
"get-joke": {
"action": "https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode",
"method": "get",
"trigger": "click",
"target": "#output",
"swap": "inner"
}
}
</script>
<!-- If in a browser environment -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/gh/mrhdias/secutio@master/dist/js/secutio.min.js"></script>
<script>
const app = new Secutio();
app.init();
</script>
</body>
</html>Here is an example of a JSON file (tasks.json) containing the tasks mentioned below in the HTML script tag:
{
"get-joke": {
"action": "https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode",
"method": "get",
"trigger": "click",
"target": "#output",
"swap": "inner"
}
}Embedded templates should have a unique id property, and their content must be enclosed within the tag "script" with type="text/template".
<script id="contacts-list-tpl" type="text/template">
<!-- HTML Content -->
</script>Why opt for the "script" HTML element over "template" when embedding a template?
When considering whether to utilize the "script" HTML element or the "template" element for embedding templates, the choice revolves around functionality. In some cases, the "template" element may disrupt the behavior of "Template literals". For instance, using "table" HTML elements may result in the relocation of "Template literals" code outside the table. Furthermore, complications can arise when attempting to nest templates within elements. Opting for the "script" element ensures consistent functionality, akin to templates sourced from external files, thereby facilitating seamless integration.