feat(core): upgrade to next.js (#42)

Vite => Next.js
Emotion => Tailwind

Author: vault-developer

.github/workflows/gh-pages-deploy.yml

@@ -0,0 +1,24 @@
+name: Playwright Tests
+on:
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.github/workflows/playwright.yml

@@ -22,16 +22,16 @@ jobs:
           node-version: 22.13.0
 
       - name: Install dependencies
-        run: yarn install
+        run: npm install
 
       - name: Run linter
-        run: yarn lint
+        run: npm run lint
 
       - name: Run type check
-        run: yarn typecheck
+        run: npm run typecheck
 
       - name: Run unit tests
-        run: yarn test
+        run: npm run test
 
       - name: Run build
-        run: yarn build
+        run: npm run build

.github/workflows/pr-check.yml

@@ -1,35 +1,36 @@
-# Logs
-logs
-*.log
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+#IDEs
 .idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.vscode
 
 # Playwright
 /test-results/
@@ -39,3 +40,5 @@ dist-ssr
 
 # Jest
 /coverage
+
+

.gitignore

@@ -1 +1 @@
-yarn commitlint --edit $1
+commitlint --edit $1

.husky/commit-msg

@@ -1 +1 @@
-yarn lint-staged --allow-empty
+lint-staged --allow-empty

.husky/pre-commit

@@ -1,9 +1,9 @@
 export default {
 	'*.{js,jsx,ts,tsx}': [
-		'yarn prettier --write',
-		'yarn eslint --fix',
-		'yarn test',
-		() => 'yarn typecheck',
+		'prettier --write',
+		'eslint --fix',
+		'jest --passWithNoTests',
+		() => 'npm run typecheck',
 	],
-	'*.{json,css,scss,md}': ['yarn prettier --write', 'yarn eslint --fix'],
+	'*.{json,css,scss,md}': ['prettier --write', 'eslint --fix'],
 };

.lintstagedrc.mjs

@@ -43,9 +43,9 @@ git clone [email protected]:vault-developer/event-loop-explorer.git
 
 cd event-loop-explorer
 
-yarn install
+npm install
 
-yarn dev
+npm run dev
 ```
 
 ### Future Plans:

README.md

@@ -0,0 +1,27 @@
+import { ThemeToggle } from './themeToggle';
+import { Repeat, Github } from 'lucide-react';
+import { Button } from '@/components/chadcdn/button';
+import Link from 'next/link';
+
+export function Header() {
+	return (
+		<div className="flex px-4 py-2 lg:px-6 lg:py-4 items-center justify-between border-b">
+			<div className="flex items-center gap-2">
+				<Repeat />
+				<h2>Event loop explorer</h2>
+			</div>
+
+			<div className="flex items-center gap-2">
+				<Button asChild variant="ghost" size="iconBig">
+					<Link
+						href="https://github.com/vault-developer/event-loop-explorer"
+						target="_blank"
+					>
+						<Github className="size-6" />
+					</Link>
+				</Button>
+				<ThemeToggle />
+			</div>
+		</div>
+	);
+}

app/(main)/header/header.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/chadcdn/button';
+import { Moon, Sun } from 'lucide-react';
+
+export function ThemeToggle() {
+	const { setTheme, theme } = useTheme();
+	const onToggle = () => setTheme(theme === 'light' ? 'dark' : 'light');
+
+	return (
+		<Button variant="ghost" size="iconBig" onClick={onToggle}>
+			<Sun
+				className="absolute scale-100 dark:scale-0 rotate-0 dark:rotate-90 transition-all size-6"
+				size={24}
+			/>
+			<Moon
+				className="absolute scale-0 dark:scale-100 rotate-90 dark:rotate-0 transition-all size-6"
+				size={24}
+			/>
+			<span className="sr-only">Toggle theme</span>
+		</Button>
+	);
+}

app/(main)/header/themeToggle.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Header } from './header/header';
+import { Configurator } from '@/app/(main)/sections/configurator/configurator';
+import { WebApi } from '@/app/(main)/sections/webApi';
+import { RequestAnimationFrame } from '@/app/(main)/sections/requestAnimaitionFrame';
+import { Callstack } from '@/app/(main)/sections/callstack';
+import { Console } from '@/app/(main)/sections/console';
+import { TasksQueue } from '@/app/(main)/sections/tasksQueue';
+import { MicrotasksQueue } from '@/app/(main)/sections/microtasksQueue';
+import { EventLoop } from '@/app/(main)/sections/eventLoop/eventLoop';
+
+export default function Home() {
+	return (
+		<div className="flex flex-col grow">
+			<Header />
+			<div className="grow grid grid-cols-2 md:grid-cols-5 p-4 gap-4 lg:p-6 lg:gap-6">
+				<div className="col-span-2 h-full grid grid-rows-5 gap-4 lg:gap-6">
+					<div className="row-span-3 flex overflow-auto">
+						<Configurator />
+					</div>
+					<div className="row-span-1 flex overflow-auto">
+						<WebApi />
+					</div>
+					<div className="row-span-1 flex overflow-auto">
+						<RequestAnimationFrame />
+					</div>
+				</div>
+				<div className="col-span-2 md:col-span-1 h-full grid grid-rows-2 gap-4 lg:gap-6">
+					<div className="row-span-1 flex overflow-auto">
+						<Callstack />
+					</div>
+					<div className="row-span-1 flex overflow-auto">
+						<Console />
+					</div>
+				</div>
+				<div className="col-span-2 h-full grid grid-rows-5 gap-4 lg:gap-6">
+					<div className="row-span-1 flex overflow-auto">
+						<TasksQueue />
+					</div>
+					<div className="row-span-1 flex overflow-auto">
+						<MicrotasksQueue />
+					</div>
+					<div className="row-span-3 flex overflow-auto">
+						<EventLoop />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

app/(main)/page.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { InfoContainer } from '@/components/infoContainer';
+import { List } from '@/components/list';
+import { Card } from '@/components/card';
+import { useQueueManagerStore } from '@/store/store';
+
+const description = (
+	<>
+		<p>
+			A call stack is a mechanism for an interpreter to keep track of its place
+			in a script that calls multiple functions — what function is currently
+			being run and what functions are called from within that function, etc.
+		</p>
+		<p>
+			When a script calls a function, the interpreter adds it to the call stack
+			and then starts carrying out the function.
+		</p>
+		<p>
+			When the current function is finished, the interpreter takes it off the
+			stack and resumes execution where it left off in the last code listing.
+		</p>
+		<p>
+			If the stack takes up more space than it was assigned, a &#34;stack
+			overflow&#34; error is thrown.
+		</p>
+	</>
+);
+
+export const Callstack: FC = () => {
+	const stack = useQueueManagerStore((state) => state.callstack);
+
+	return (
+		<InfoContainer title="Callstack" description={description}>
+			<List data={stack} orientation="vertical" className="md:flex-col-reverse">
+				{(el) => <Card text={el as (typeof stack)[0]} />}
+			</List>
+		</InfoContainer>
+	);
+};

app/(main)/sections/callstack.tsx

@@ -0,0 +1,42 @@
+import { FC, useState } from 'react';
+import { InfoContainer } from '@/components/infoContainer';
+import { Controls } from './controls';
+import { Editor } from './editor';
+import {
+	DEFAULT_EXAMPLE_KEY,
+	EXAMPLES,
+} from '@/app/(main)/sections/configurator/controls.data';
+
+const description = (
+	<>
+		<p>
+			This code editor allows you to write and visualize JavaScript code
+			execution within the event loop.
+		</p>
+		<ul>
+			<li>
+				- select a pre-built example from the dropdown menu or write your own
+				code from scratch.
+			</li>
+			<li>
+				- use the speed scrollbar to control the execution speed and observe how
+				the event loop processes your code.
+			</li>
+			<li>
+				- pause the execution when needed to examine the state of the event loop
+				at any given point.
+			</li>
+		</ul>
+	</>
+);
+
+export const Configurator: FC = () => {
+	const [code, setCode] = useState(() => EXAMPLES[DEFAULT_EXAMPLE_KEY].code);
+
+	return (
+		<InfoContainer title="Code Editor" description={description}>
+			<Controls code={code} setCode={setCode} />
+			<Editor code={code} setCode={setCode} />
+		</InfoContainer>
+	);
+};