major: refactored test, added timeouts on file generation

Author: Austin1serb

README.md

@@ -1,9 +1,9 @@
 # React Zero‑UI (Beta)
 
- **Instant UI state updates. ZERO React re‑renders. <1 KB runtime.**
+**Instant UI state updates. ZERO React re‑renders. <1 KB runtime.**
+
+Pre‑render your UI once, flip a `data-*` attribute to update — that's it.
 
- Pre‑render your UI once, flip a `data-*` attribute to update — that's it.
- 
 <a href="https://www.npmjs.com/package/@austinserb/react-zero-ui" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/bundlephobia/min/@austinserb/[email protected]" alt="npm version" />
 </a>
 
@@ -13,19 +13,19 @@
 
 ## 🚀 Live Demo
 
-| Example                                 | Link                                                                                     | What it shows                                                 | Link to Code                                                                 |
-| --------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------- |------------------------------------------------------------------------------ |
-| Interactive menu with render tracker    | <a href="https://react-zero-ui.vercel.app/" target="_blank" rel="noopener noreferrer"><strong>Main Demo↗</strong></a>             | Compare Zero‑UI vs. React side‑by‑side while toggling a menu. | <a href="https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo" target="_blank" rel="noopener noreferrer">Github</a> |
-| React benchmark (10 000 nested nodes)   | <a href="https://react-zero-ui.vercel.app/react" target="_blank" rel="noopener noreferrer"><strong>React 10k↗</strong></a>         | How long the traditional React render path takes.             | <a href="https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo/src/app/react" target="_blank" rel="noopener noreferrer">Github</a> |
-| Zero‑UI benchmark (10 000 nested nodes) | <a href="https://react-zero-ui.vercel.app/zero-ui" target="_blank" rel="noopener noreferrer"><strong style="text-align: nowrap;">Zero‑UI 10k↗</strong></a>     | Identical DOM, but powered by Zero‑UI's `data-*` switch.      | <a href="https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo/src/app/zero-ui" target="_blank" rel="noopener noreferrer">Github</a> |
+| Example                                 | Link                                                                                                                                                        | What it shows                                                 | Link to Code                                                                                                                                        |
+| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Interactive menu with render tracker    | <a href="https://react-zero-ui.vercel.app/" target="_blank" rel="noopener noreferrer"><strong>Main Demo↗</strong></a>                                      | Compare Zero‑UI vs. React side‑by‑side while toggling a menu. | <a href="https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo" target="_blank" rel="noopener noreferrer">Github</a>                 |
+| React benchmark (10 000 nested nodes)   | <a href="https://react-zero-ui.vercel.app/react" target="_blank" rel="noopener noreferrer"><strong>React 10k↗</strong></a>                                 | How long the traditional React render path takes.             | <a href="https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo/src/app/react" target="_blank" rel="noopener noreferrer">Github</a>   |
+| Zero‑UI benchmark (10 000 nested nodes) | <a href="https://react-zero-ui.vercel.app/zero-ui" target="_blank" rel="noopener noreferrer"><strong style="text-align: nowrap;">Zero‑UI 10k↗</strong></a> | Identical DOM, but powered by Zero‑UI's `data-*` switch.      | <a href="https://github.com/Austin1serb/React-Zero-UI/tree/main/examples/demo/src/app/zero-ui" target="_blank" rel="noopener noreferrer">Github</a> |
 
 ---
 
 ## 🧐 Why Zero‑UI?
 
-Every `setState` in React triggers the full VDOM → Diff → Reconciliation → Paint pipeline. For *pure UI state* (themes, menus, toggles) that work is wasted.
+Every `setState` in React triggers the full VDOM → Diff → Reconciliation → Paint pipeline. For _pure UI state_ (themes, menus, toggles) that work is wasted.
 
-**Zero‑UI introduces "*PRE‑rendering*":**
+**Zero‑UI introduces "_PRE‑rendering_":**
 
 1. Tailwind variants for every state are **generated at build‑time**.
 2. The app **pre‑renders once**.
@@ -75,8 +75,8 @@ Then follow **Setup →** for your bundler.
 import { zeroUIPlugin } from '@austinserb/react-zero-ui/vite';
 
 export default {
-  // ❗️Remove the default `tailwindcss()` plugin — Zero‑UI extends it internally
-  plugins: [zeroUIPlugin()],
+	// ❗️Remove the default `tailwindcss()` plugin — Zero‑UI extends it internally
+	plugins: [zeroUIPlugin()],
 };
 ```
 
@@ -90,24 +90,19 @@ export default {
    // or:  import { bodyAttributes } from '../.zero-ui/attributes';
 
    export default function RootLayout({ children }) {
-     return (
-       <html lang="en">
-         <body {...bodyAttributes}>{children}</body>
-       </html>
-     );
+   	return (
+   		<html lang="en">
+   			<body {...bodyAttributes}>{children}</body>
+   		</html>
+   	);
    }
    ```
 
-2. **Add the PostCSS plugin (must come *before* Tailwind).**
+2. **Add the PostCSS plugin (must come _before_ Tailwind).**
 
    ```js
    // postcss.config.js
-   module.exports = {
-     plugins: {
-       '@austinserb/react-zero-ui/postcss': {},
-       tailwindcss: {},
-     },
-   };
+   module.exports = { plugins: { '@austinserb/react-zero-ui/postcss': {}, tailwindcss: {} } };
    ```
 
 ---
@@ -120,11 +115,9 @@ export default {
 import { useUI } from '@austinserb/react-zero-ui';
 
 export function ThemeToggle() {
-  const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light');
+	const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light');
 
-  return (
-    <button onClick={() => setTheme('dark')}>Switch to dark</button>
-  );
+	return <button onClick={() => setTheme('dark')}>Switch to dark</button>;
 }
 ```
 
@@ -141,15 +134,12 @@ Consume the state anywhere with Tailwind variants:
 ### `useUI(key, defaultValue)`
 
 ```ts
-const [staleValue, setValue] = useUI<'open' | 'closed'>(
-  'sidebar',
-  'closed',
-);
+const [staleValue, setValue] = useUI<'open' | 'closed'>('sidebar', 'closed');
 ```
 
-* `key` → becomes `data-{key}` on `<body>`.
-* `defaultValue` → optional, prevents FOUC.
-* **Note:** the returned `staleValue` does **not** update (`useUI` is write‑only).
+- `key` → becomes `data-{key}` on `<body>`.
+- `defaultValue` → optional, prevents FOUC.
+- **Note:** the returned `staleValue` does **not** update (`useUI` is write‑only).
 
 ### Tailwind variants
 
@@ -172,12 +162,12 @@ Any `data-{key}="{value}"` pair becomes a variant: `{key}-{value}:`.
 
 ## ✅ Features
 
-* **Zero React re‑renders** for UI‑only state.
-* **Global setters** — call from any component or util.
-* **Tiny**: < 1 KB gzipped runtime.
-* **TypeScript‑first**.
-* **SSR‑friendly** (Next.js & Vite SSR).
-* **Framework‑agnostic CSS** — generated classes work in plain HTML / Vue / Svelte as well.
+- **Zero React re‑renders** for UI‑only state.
+- **Global setters** — call from any component or util.
+- **Tiny**: < 1 KB gzipped runtime.
+- **TypeScript‑first**.
+- **SSR‑friendly** (Next.js & Vite SSR).
+- **Framework‑agnostic CSS** — generated classes work in plain HTML / Vue / Svelte as well.
 
 ---
 

packages/core/__tests__/config/playwright.next.config.js

@@ -13,13 +13,21 @@ export default defineConfig({
 	workers: 2,
 	timeout: 30_000,
 	expect: { timeout: 15_000 },
-	reporter: 'html',
+	reporter: [
+		['list'], // Shows test results in terminal
+	],
+
+	use: {
+		headless: true,
+		baseURL: BASE_URL,
+		// Show console logs from page/browser
+		trace: 'retain-on-failure',
+	},
 
-	use: { headless: true, baseURL: BASE_URL },
+	globalSetup: '../e2e/nextSetup.js',
 
 	projects: [
-		{ name: 'setup', testMatch: /nextSetup\.js/ },
-		{ name: 'next-cli-e2e', dependencies: ['setup'], testMatch: /cli-next\.spec\.js/ },
+		{ name: 'next-cli-e2e', testMatch: /cli-next\.spec\.js/ },
 		{ name: 'next-e2e', dependencies: ['next-cli-e2e'], testMatch: /next\.spec\.js/ },
 	],
 	webServer: {

packages/core/__tests__/config/playwright.vite.config.js

@@ -13,16 +13,24 @@ export default defineConfig({
 	workers: 2,
 	timeout: 30_000,
 	expect: { timeout: 15_000 },
-	reporter: 'html',
+	reporter: [
+		['list'], // Shows test results in terminal
+		['html'] // Also keep HTML report
+	],
+
+	use: {
+		headless: true,
+		baseURL: BASE_URL,
+		// Show console logs from page/browser
+		trace: 'retain-on-failure',
+	},
 
-	use: { headless: true, baseURL: BASE_URL },
+	globalSetup: '../e2e/viteSetup.js',
 
 	// One project = one fixture app (Next, Vite, etc.)
 	projects: [
-		{ name: 'setup', testMatch: /viteSetup\.js/ },
 		{
 			name: 'vite-cli-e2e',
-			dependencies: ['setup'],
 			testMatch: /cli-vite\.spec\.js/, // Matches both cli-vite.spec.js and vite.spec.js
 		},
 		{

packages/core/__tests__/e2e/nextSetup.js

@@ -15,5 +15,10 @@ export default async function globalSetup() {
 	const zeroUiCli = await loadCliFromFixture(projectDir);
 	await zeroUiCli([]);
 
+	// Wait for 5 seconds to make sure the file system is stable
+	console.log('[Global Setup] ⏳ Waiting 5 seconds for file system to stabilize...');
+	await new Promise(resolve => setTimeout(resolve, 5000));
+
 	console.log('[Global Setup] ✅ Next.js fixture setup complete!✅');
+
 }

packages/core/__tests__/e2e/viteSetup.js

@@ -16,4 +16,10 @@ export default async function globalSetup() {
 	await zeroUiCli([]);
 
 	console.log('[Global Setup] ✅ Vite fixture setup complete!✅');
+
+	// Wait for 10 seconds to make sure the file system is stable
+	console.log('[Global Setup] ⏳ Waiting 5 seconds for file system to stabilize...');
+	await new Promise(resolve => setTimeout(resolve, 5000));
+	return;
+
 }

packages/core/__tests__/fixtures/next/app/layout.tsx

@@ -1,9 +1,11 @@
+import { bodyAttributes } from "@zero-ui/attributes";
 import './globals.css';
-
-export default function RootLayout({ children }) {
-	return (
-		<html lang="en">
-			<body>{children}</body>
-		</html>
-	);
-}
+export default function RootLayout({
+  children
+}) {
+  return <html lang="en">
+			<body {...bodyAttributes} className="bg-red test-ww this is to test the body tag" id="88">
+				{children}
+			</body>
+		</html>;
+}

packages/core/__tests__/fixtures/next/postcss.config.mjs

@@ -1,3 +1,5 @@
 // postcss.config.mjs
-const config = { plugins: ['@austinserb/react-zero-ui/postcss', '@tailwindcss/postcss'] };
-export default config;
+const config = {
+  plugins: ["@austinserb/react-zero-ui/postcss", '@tailwindcss/postcss']
+};
+export default config;

packages/core/__tests__/fixtures/next/tsconfig.json

@@ -1,22 +1,43 @@
 {
-	"compilerOptions": {
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"allowJs": true,
-		"skipLibCheck": true,
-		"strict": false,
-		"noEmit": true,
-		"incremental": true,
-		"module": "ESNext",
-		"esModuleInterop": true,
-		"moduleResolution": "node",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"jsx": "preserve",
-		"plugins": [{ "name": "next" }],
-		"target": "ES2017",
-		"baseUrl": ".",
-		"paths": { "@zero-ui/attributes": ["./.zero-ui/attributes.js"] }
-	},
-	"include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx", ".zero-ui/**/*.d.ts", ".next/**/*.d.ts"],
-	"exclude": ["node_modules"]
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "target": "ES2017",
+    "baseUrl": ".",
+    "paths": {
+      "@zero-ui/attributes": [
+        "./.zero-ui/attributes.js"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/**/*.d.ts",
+    ".zero-ui/**/*.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/core/__tests__/fixtures/vite/vite.config.ts

@@ -1,5 +1,8 @@
-import zeroUI from '@austinserb/react-zero-ui/vite';
+import zeroUI from "@austinserb/react-zero-ui/vite";
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+
 // https://vite.dev/config/
-export default defineConfig({ plugins: [react(), zeroUI()] });
+export default defineConfig({
+  plugins: [react(), zeroUI()]
+});

packages/core/__tests__/helpers/overwriteFile.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+
+/**
+ * Overwrites a given file with the provided content.
+ *
+ * @param {string} filePath - Absolute path to the file (e.g., projectDir/layout.tsx)
+ * @param {string} content  - New content to write
+ */
+export async function overwriteFile(filePath, content) {
+  if (!fs.existsSync(filePath)) {
+    console.warn(`[Reset] ⚠️ File not found: ${filePath} — skipping overwrite.`);
+    return;
+  }
+
+  fs.writeFileSync(filePath, content);
+  console.log(`[Reset] ✅ Overwrote: ${filePath}`);
+
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  console.log(`[Reset] ✅ Wait complete, continuing...`);
+}