DEV Community

Cover image for 🚀 Uniflow 1.1.18
Mathieu Ledru
Mathieu Ledru

Posted on

🚀 Uniflow 1.1.18

✹ Darkwood Update : Uniflow 1.1.18 & les prototypes Darkwaar intĂ©grĂ©s sur uniflow.io

đŸ§© Uniflow 1.1.18 – Le nouveau composant HtmlFlow
La version 1.1.18 d’Uniflow introduit un nouveau composant clĂ© : HtmlFlow. Il permet dĂ©sormais d’afficher directement du contenu HTML stockĂ© dans une variable de contexte — que ce soit un fragment de texte, un rendu visuel ou mĂȘme une iframe gĂ©nĂ©rĂ©e dynamiquement par un autre flow.

Ce composant, dĂ©veloppĂ© la semaine derniĂšre, marque une Ă©tape importante dans la philosophie Flow Based Programming d’Uniflow : rendre les flows autonomes, visuels et interactifs, sans dĂ©pendre d’une interface externe.

⚙ Exemple minimal
// JavascriptFlow
const iframe = <iframe frameborder="0"
src="https://itch.io/embed-upload/15043973?color=333333"
allowfullscreen
width="640"
height="380">
<a href="https://darkwoodcom.itch.io/darkwaar1">Play Darkwaar1 on itch.io</a>
</iframe>
;

context.gameHtml = iframe;
return context;

// HtmlFlow → Variable = gameHtml
Ici, le JavascriptFlow crĂ©e une iframe (par exemple vers un jeu itch.io) et la stocke dans gameHtml. Le HtmlFlow rĂ©cupĂšre cette variable et l’affiche directement, sans iframe interne, grĂące Ă  un rendu sĂ©curisĂ© cĂŽtĂ© client.

🔒 Un rendu HTML sĂ©curisĂ©
Le HtmlFlow n’est pas un simple dangerouslySetInnerHTML. Il applique un filtrage DOM personnalisĂ©, spĂ©cialement conçu pour autoriser les intĂ©grations (iframe, markup simple) tout en bloquant les attaques XSS ou les injections CSS.

Parmi les rÚgles appliquées :

Suppression des balises dangereuses (script, object, embed, form, button, etc.)
Suppression des attributs on* (ex. onclick) et style
Vérification stricte des URLs (https: ou relatives uniquement)
Nettoyage des iframe : seuls les attributs sûrs (src, width, height, frameborder, allowfullscreen, sandbox) sont conservés
Ajout automatique d’un sandbox sĂ©curisĂ© sur les iframes
Protection SSR : pas d’exĂ©cution cĂŽtĂ© serveur
Mémoïsation et limites de taille pour éviter les rendus excessifs
Ces garde-fous garantissent un équilibre entre flexibilité et sécurité, idéal pour intégrer des visualisations ou des jeux sans compromettre la stabilité du flow.

🎼 Darkwaar – Vers un puzzle game jouable
En parallĂšle, l’univers Darkwaar continue de prendre forme. J’ai commencĂ© plusieurs prototypes de puzzle games, jouables directement sur itch.io, explorant diffĂ©rentes mĂ©caniques :

Placement stratégique sur une grille,
Tour par tour et gestion des pions,
Résolution par logique (trouver le prochain coup gagnant).
Ces prototypes me permettent d’itĂ©rer rapidement sur le gameplay avant de stabiliser une version principale. L’objectif Ă  court terme : un puzzle jouable au format web, accessible Ă  tous depuis itch.io.

🌐 Uniflow × Darkwaar – IntĂ©gration native via HtmlFlow
GrĂące au nouveau composant HtmlFlow, j’ai pu intĂ©grer directement les quatre projets Darkwaar dans Uniflow. Chacun des prototypes est dĂ©sormais visible depuis un flow dĂ©diĂ© sur uniflow.io/flows.

Cette intĂ©gration montre concrĂštement comment Uniflow peut servir de hub crĂ©atif : les flows deviennent des modules capables d’orchestrer, d’afficher et d’hĂ©berger des crĂ©ations interactives — ici, des jeux Darkwaar — dans un mĂȘme environnement.

💡 Cette approche ouvre la voie Ă  un espace oĂč automatisation et crĂ©ation ludique se rejoignent. Chaque prototype Darkwaar est un flow, et chaque flow peut devenir une expĂ©rience jouable.

🔗 Liens utiles
đŸ§© Uniflow 1.1.18 — Lire la release sur GitHub
✹ Article technique complet — HtmlFlow sur le blog Uniflow
🎼 Prototypes Darkwaar — Disponible sur uniflow.io/flows
🌑 Darkwood — darkwood.com
🔼 Et aprùs ?
Les prochaines versions d’Uniflow continueront d’explorer la dimension visuelle et interactive des flows :

presets d’intĂ©gration sĂ©curisĂ©e (itch.io, YouTube, dashboards),
composants de visualisation avancés,
et connexion naturelle entre automatisation, jeu et création artistique.
Darkwaar, de son cĂŽtĂ©, suivra ce mouvement. L’objectif reste le mĂȘme : construire un univers cohĂ©rent oĂč la programmation, l’imagination et le jeu se rencontrent.

✍ Mathieu Ledru Darkwood – Automate. Create. Play. Music

🎁 Je propose des sĂ©ances de coaching gratuites de 30 minutes pour aider les crĂ©ateurs comme vous Ă  automatiser leurs processus et Ă  gagner du temps ⏱

👉 RĂ©servez votre sĂ©ance gratuite ici : https://www.bonzai.pro/matyo91/lp/4471/je-taide-a-automatiser-tes-process

Merci de votre lecture ! CrĂ©ons ensemble des workflows intelligents, rapides et automatisĂ©s đŸ’»âšĄ

Top comments (0)