Skip to content

Releases: alystrastudio/Event-Loop-Visualizer

v1.0.2

24 May 00:31

Choose a tag to compare

Changes

Fixes

  • Fixed favicon not appearing on GitHub Pages - path now resolves correctly using the runtime base URL for subdirectory deployments

v1.0.1

24 May 00:13

Choose a tag to compare

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

23 May 14:09

Choose a tag to compare

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

Open http://localhost:3000