Releases: alystrastudio/Event-Loop-Visualizer
Releases · alystrastudio/Event-Loop-Visualizer
v1.0.2
v1.0.1
Changes
CI/CD
- Added CI workflow: type check and static build on every push and PR to main
- Added GitHub Pages deploy workflow with correct base URL for subdirectory deployment
Fixes
- Fixed blank page on GitHub Pages caused by missing base URL configuration
- Fixed PR template: replaced Python version field with Node.js version and browser
v1.0.0 - JS Runtime Visualizer
What is this?
An interactive browser-based visualization of the JavaScript Event Loop. Write any JavaScript snippet and watch the Call Stack, Web APIs, Microtask Queue, and Macrotask Queue update in real time with animated state transitions.
What is in this release
Core engine
- AST-based interpreter using Acorn.js - parses user code into a syntax tree before executing, no eval()
- Faithful event loop implementation: Microtasks drain completely before any Macrotask runs
- Pinia store tracking all VM state reactively (call stack, web APIs, queues, console logs)
UI overhaul
- Glassmorphism design system on a dark (#04040c) base with animated radial blob background
- GSAP entrance timeline - header, code panel, and visualizer cards animate in on load
- Lenis smooth scroll
- Stack.vue: spring-physics push animation using GSAP back.out easing
- Queues.vue: color-coded Microtask (purple) and Macrotask (amber) tracks with spring transitions
- SVG logo and favicon with emerald-to-cyan-to-purple gradient matching the app theme
Responsive layout
- Full mobile support: single-column layout below 768px
- Visualizer panels no longer cut off on small screens
- Header, textarea, and queue grid all adapt to narrow viewports
Developer experience
- Replaced deprecated lucide-vue-next with @lucide/vue
- Added tailwind.config.js with JetBrains Mono font and custom keyframes
- nuxt.config.ts: SVG favicon, Google Fonts, theme-color meta
- Rewrote README.md to full industry-standard documentation
Getting started
git clone https://github.com/sha-wrks/Event-Loop-Visualizer.git
cd Event-Loop-Visualizer
npm install
npm run dev