Core Architecture
Uniscript is a meta-compiler that orchestrates multiple web technologies into a single, cohesive execution environment. It uses a "Block-to-DOM" injection logic, ensuring that different languages like TypeScript and Python can interact seamlessly through the Shared Global Object.
Execution Lifecycle
- Parsing: The compiler extracts content from
<!uniscript ... >>;envelopes. - Metadata Processing: The
mainblock is analyzed for configuration, global variables, and injection targets. - Sequence Assembly: Blocks are injected into the DOM based on the
config executionmap. - Language Transpilation: TypeScript is converted via Babel, and Python is prepared for the Brython VM.
Purpose
Uniscript was developed to reduce errors in HTML projects. For beginners, understanding programming logic can be challenging and often leads to confusing bugs. Uniscript improves front-end management by streamlining configurations and integrating TypeScript-like logic to eliminate common execution and sequence errors.
Every developer who has worked with JavaScript has surely faced the frustrating experience of encountering an "Uncaught ReferenceError: variable is not defined". This type of error, which typically occurs when accessing a variable that hasn't been declared or is out of scope, remains one of the most common headaches in web development. An error witch uniscript will try to reduce.
At first glance, the organization of Uniscript might seem redundant or even pointless, as it requires writing extra lines of code to prevent simple errors. While this may feel like a minor loss of time, it serves a deliberate purpose: it acts as "training wheels" for developers. By forcing the integration of different logic types, it trains you to think ahead and eliminate bad habits, ensuring that "is not defined" errors become a thing of the past.
The Block System
Every piece of code in Uniscript must live inside a block. A block defines the scope and the language engine used to process the content.
<!uniscript block_name, language, content = <
// Your code here
>>;
Supported Language Engines
| Engine | Description | Use Case |
|---|---|---|
| uniscript | Manifest & Metadata. | Configurations and Global Vars. |
| html | Standard HTML5. | Layout and UI structures. |
| css | Styling. | Look and feel (Supports auto-ID resolution). |
| js / ts | ECMAScript / TypeScript. | High-performance logic and UI manipulation. |
| py | Python 3 (Brython). | Scientific logic or Python-based scripting. |
Metadata Commands
Metadata commands control the environment and the injection order. They reside within the main block of type uniscript.
1. config execution
Defines the chronological order of injection. This is vital for dependencies (e.g., CSS must exist before JS attempts to read layout heights).
config execution = {
start: "ui_block",
then: "style_block",
end: "logic_block"
}
2. use ... on
Manually forces a block to be injected into either the head or the body.
use "theme_config" on "head"
Global Scope (Declare)
The declare keyword creates variables that bridge the gap between isolated blocks. It attaches the variable to the window object, making it accessible to JS, TS, and Python.
Example Implementation
# Inside main block #
declare APP_THEME = "dark"
declare MAX_SCORE = 500
Accessing via TypeScript
// Inside logic block
const currentTheme = window.APP_THEME;
Deployment (Target)
The config target command determines how the application wraps its physical container.
| Value | Resulting Layout |
|---|---|
| "mobile" | 360x640px centered frame with shadow and overflow handling. |
| "computer" | Fullscreen mode (default for games and dashboards). |
| "flex" | Standard HTML responsive flow. |
Import & Reference System
Uniscript resolves ID conflicts by prefixing block names to element IDs. To access an element from another block, use the import syntax.
HTML Block: "header"
<h1 id="title">Hello</h1>
Logic Block: "script"
The compiler translates the following into document.getElementById("header_title"):
import "title" from "header"
title.innerText = "Modified!";
Code Examples & Preview
Selecione um exemplo para ver o código Uniscript e o resultado compilado: