TSlash ⚡

A high-performance library to use HTML & JS like Flash with modern automatizations.
Built with TSX, Pretext, Tsub, and the power of TypeScript.

Why TSlash? 🚀

TSlash isn't just another UI framework; it's a native visualization engine that brings the fun of Flash back to the modern web, without the bloat of a Virtual DOM.

1. Zero-Overhead Reactivity

In modern frameworks, a state change forces a comparison of entire component trees (diffing). In TSlash, when you set sprite.x = 100, the change goes straight to the Browser via native CSS. No middleman, no lag.

2. The Power of "Living Objects"

Unlike React, where components are constantly destroyed and recreated, TSlash Sprites and Texts are persistent instances in memory.

• No reference loss: Your objects stay alive.
• Persistent Animation: Motion doesn't snap or reset on "re-renders".
• Dynamic Hierarchy: Use .append() to move objects between containers seamlessly.

3. Native DOM Inheritance

Every Sprite is a HTMLDivElement and every Text is a HTMLSpanElement.

• Use your favorite tools: Browser Inspector, external CSS, and native ~~AS3~~ JS events.
• 100% compatible with third-party libraries (Tailwind, GSAP, etc.).

4. The Missing Flash API on HTML5

HTML5 elements are static by nature. TSlash fills that gap by injecting the missing high-level manipulation API directly into the DOM:

• Transformations: x, y, rotation, scaleX, scaleY, skewX, skewY.
• Real-time Filters: hue, saturation, brightness, contrast.
• Smart Typography: BetterText uses the Pretext JS engine to ensure fluid text doesn't tank performance.

5. Native DOM DisplayList

TSlash doesn't reinvent the DisplayList; it unlocks the one already built into your browser. By turning native DIVs into persistent Flash-like objects, you get the performance of the DOM with the mental model of ActionScript.

Examples:

Normal Version

<script src="https://unpkg.com/@b4uti4gd/[email protected]/dist/tslash.global.js"></script>
<script>
        const { Sprite, BetterText } = window.tslash;

        // 1. El Contenedor (Padre)
        const contenedor = new Sprite();
        contenedor.x = 100;
        contenedor.y = 100;
        contenedor.style.border = "1px solid rgba(255,255,255,0.2)";
        document.body.append(contenedor);

        // 2. BetterText con Pretext (Hijo)
        const textoLargo = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.";
        const etiqueta = new BetterText(""); 
        etiqueta.x = 20;
        etiqueta.y = 20;
        etiqueta.width = 300; // El ancho que activará el reflow de Pretext
        etiqueta.style.color = "#000000ff";
        etiqueta.style.fontFamily = "Arial, sans-serif";

        contenedor.append(etiqueta);

        // 3. Lógica de Typewriter + Yoyo
        let charIndex = 0;
        let isDeleting = false;

        setInterval(() => {
            // Si estamos escribiendo, sumamos 1 letra. Si borramos, restamos.
            if (!isDeleting) {
                charIndex++;
                if (charIndex > textoLargo.length) isDeleting = true;
            } else {
                charIndex--;
                if (charIndex === 0) isDeleting = false;
            }

            // Actualizamos el .text (BetterText ejecutará el layout rápido de Pretext)
            etiqueta.text = textoLargo.substring(0, charIndex);

            // Animación suave del padre para ver que el texto no "tiembla"
            contenedor.x += 0.5;
            contenedor.rotation += 0.2;
        }, 50); // Velocidad de la máquina de escribir

</script>