@revijs/core 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,80 +1,374 @@
1
- # ⚡ ReviJs
1
+ # ⚡ ReviJs 🧙‍♂️
2
2
 
3
- > Local-first SPA prerender CLI — convert your React/Vite app into SEO-friendly static HTML, with zero cloud dependency.
3
+ [![npm version](https://img.shields.io/npm/v/revijs?style=flat-square&color=blueviolet)](https://www.npmjs.com/package/@revijs/core)
4
+ [![npm downloads](https://img.shields.io/npm/dm/revijs?style=flat-square&color=brightgreen)](https://www.npmjs.com/package/@revijs/core)
5
+ [![MIT License](https://img.shields.io/badge/license-MIT-green?style=flat-square)](LICENSE)
6
+ [![Made by AlphaBotz](https://img.shields.io/badge/🤖%20Made%20by-AlphaBotz-blueviolet?style=flat-square)](https://github.com/TeamAlphabotz)
7
+ [![Node.js](https://img.shields.io/badge/Node.js-18+-brightgreen?style=flat-square&logo=node.js)](https://nodejs.org/)
8
+ ![Stars](https://img.shields.io/github/stars/TeamAlphabotz/Revijs?style=flat-square&color=yellow)
9
+
10
+ > 🚀 **Local-first SPA prerender CLI** — Convert your React/Vite app into blazing-fast, SEO-friendly static HTML. Zero cloud dependency. Pure magic. ✨
4
11
 
5
12
  ---
6
13
 
7
- ## How it works
14
+ ## 🎯 What's ReviJs?
15
+
16
+ Tired of your fancy React/Vite app being invisible to Google? 😱 ReviJs is here to save the day!
8
17
 
9
- 1. You run `npm run build` as normal
10
- 2. You run `npx revijs`
11
- 3. ReviJs spins up a local server, opens each of your routes in a headless browser, waits for all data to load, and captures the full HTML
12
- 4. Static files are written to `dist-prerendered/`
13
- 5. A bot visits your site → your server returns the prerendered HTML → perfect SEO
18
+ ReviJs **spins up a headless browser**, visits every route in your app, waits for data to load, and captures the fully-rendered HTML. Then it serves that pre-baked HTML to search engines while your users still get the smooth SPA experience.
19
+
20
+ It's like having your cake and eating it too. 🍰
14
21
 
15
22
  ---
16
23
 
17
- ## Quick start
24
+ ## ⚙️ Requirements
25
+
26
+ Before you summon the ReviJs wizard, make sure you have these installed:
27
+
28
+ ### System Requirements
29
+ - **Node.js**: `>=18.0.0` (LTS recommended)
30
+ - **npm**: `>=9.0.0` or **yarn** / **pnpm**
31
+ - **Operating System**: macOS, Linux, Windows
32
+
33
+ ### Project Requirements
34
+ - A **React** or **Vite** project
35
+ - Built output in a `dist/` folder (or customizable)
36
+ - Node-like environment for running the CLI
37
+
38
+ ### Package Dependencies
39
+
40
+ The `@revijs/core` package automatically installs its dependencies:
41
+ - **puppeteer** (headless browser automation)
42
+ - **express** (local server)
43
+ - **fast-glob** (route discovery)
44
+ - **dotenv** (env config)
45
+
46
+ ---
47
+
48
+ ## 🚀 Quick Start (30 seconds!)
18
49
 
19
50
  ```bash
20
- # 1. Install
51
+ # 1️⃣ Install the magic
21
52
  npm install revijs
22
53
 
23
- # 2. Create config
54
+ # 2️⃣ Initialize config (interactive)
24
55
  npx revijs init
25
56
 
26
- # 3. Build your app
57
+ # 3️⃣ Build your app normally
27
58
  npm run build
28
59
 
29
- # 4. Prerender
60
+ # 4️⃣ Let the prerendering begin! 🎆
30
61
  npx revijs
31
62
  ```
32
63
 
64
+ **Boom!** 💥 Your static HTML is now in `dist-prerendered/`
65
+
33
66
  ---
34
67
 
35
- ## Config (`revi.config.js`)
68
+ ## 🛠️ Configuration (`revi.config.js`)
69
+
70
+ Customize your prerendering experience:
36
71
 
37
72
  ```js
38
73
  export default {
39
- routes: ['/', '/about', '/blog/post-1'],
74
+ // 🌍 Routes to prerender
75
+ routes: ['/', '/about', '/blog/post-1', '/products'],
76
+
77
+ // 🎮 Rendering engine
40
78
  engine: 'browser', // 'browser' | 'advanced' | 'ssr'
79
+
80
+ // 📁 Output settings
41
81
  outputDir: 'dist-prerendered',
42
82
  distDir: 'dist',
43
- waitFor: 1200, // ms after network idle
83
+
84
+ // ⏱️ Wait for data (adjust if routes are slow)
85
+ waitFor: 1200, // milliseconds after network idle
86
+
87
+ // 🕵️ Browser settings
44
88
  headless: true,
45
89
  port: 4173,
90
+
91
+ // 🎯 Optional: exclude routes
92
+ exclude: ['/admin', '/dashboard'],
93
+
94
+ // 📸 Optional: capture screenshots
95
+ screenshots: false,
46
96
  };
47
97
  ```
48
98
 
99
+ ### Config Options Explained
100
+ | Option | Type | Default | What It Does |
101
+ |--------|------|---------|--------------|
102
+ | `routes` | Array | `[]` | Routes to prerender (required!) |
103
+ | `engine` | String | `'browser'` | How to render (browser is safest) |
104
+ | `outputDir` | String | `'dist-prerendered'` | Where to save static HTML |
105
+ | `distDir` | String | `'dist'` | Your built app location |
106
+ | `waitFor` | Number | `1200` | ms to wait after network idle |
107
+ | `headless` | Boolean | `true` | Run browser hidden? |
108
+ | `port` | Number | `4173` | Local server port |
109
+
110
+ ---
111
+
112
+ ## 🎪 How the Magic Works (Under the Hood)
113
+
114
+ ```
115
+ ┌─────────────────────────────────────────────────────┐
116
+ │ You run: npm run build │
117
+ │ Then: npx revijs │
118
+ └─────────────────┬───────────────────────────────────┘
119
+
120
+ ┌─────────▼──────────┐
121
+ │ Start Local Server │
122
+ └���────────┬──────────┘
123
+
124
+ ┌─────────▼──────────────────┐
125
+ │ Launch Headless Browser 🤖 │
126
+ └─────────┬──────────────────┘
127
+
128
+ ┌─────────▼────────────────────────┐
129
+ │ Visit Each Route in Your App │
130
+ │ (/, /about, /blog/post-1, etc) │
131
+ └─────────┬────────────────────────┘
132
+
133
+ ┌─────────▼──────────────────────┐
134
+ │ Wait for All Data to Load ⏳ │
135
+ │ (Network Idle + waitFor ms) │
136
+ └─────────┬──────────────────────┘
137
+
138
+ ┌─────────▼──────────────────────┐
139
+ │ Capture Full Rendered HTML 📸 │
140
+ └─────────┬──────────────────────┘
141
+
142
+ ┌─────────▼──────────────────────┐
143
+ │ Write Static Files to Disk 💾 │
144
+ │ (dist-prerendered/) │
145
+ └─────────┬──────────────────────┘
146
+
147
+ ┌─────────▼──────────────────────┐
148
+ │ 🎉 Done! Static HTML Ready │
149
+ └──────────────────────────────────┘
150
+ ```
151
+
49
152
  ---
50
153
 
51
- ## Middleware (optional)
154
+ ## 🧩 Middleware Magic (Serve Bots vs Humans)
52
155
 
53
- Serve prerendered HTML to bots while normal users get the live SPA:
156
+ Automatically detect bots and serve them pre-rendered HTML:
54
157
 
55
158
  ```js
56
159
  import express from 'express';
57
160
  import { createMiddleware } from 'revijs';
58
161
 
59
162
  const app = express();
60
- app.use(createMiddleware({ prerenderedDir: 'dist-prerendered' }));
163
+
164
+ // 🤖 ReviJs middleware intercepts bot requests
165
+ app.use(createMiddleware({
166
+ prerenderedDir: 'dist-prerendered',
167
+ botDetection: true, // Auto-detect crawlers
168
+ }));
169
+
170
+ // Serve your SPA normally
171
+ app.use(express.static('dist'));
172
+
173
+ app.listen(4173, () => {
174
+ console.log('🚀 Server running with ReviJs magic!');
175
+ });
61
176
  ```
62
177
 
178
+ **What happens:**
179
+ - 🤖 **Bot visits** → Serves prerendered static HTML (instant SEO)
180
+ - 👤 **User visits** → Serves your React app (smooth SPA experience)
181
+ - 🎯 **Win-win!**
182
+
63
183
  ---
64
184
 
65
- ## Programmatic API
185
+ ## 🤖 Programmatic API (For Advanced Wizards)
186
+
187
+ Use ReviJs in your own scripts:
66
188
 
67
189
  ```js
68
190
  import { prerender } from 'revijs';
69
191
 
70
- await prerender({
71
- routes: ['/', '/about'],
192
+ // Programmatically prerender
193
+ const result = await prerender({
194
+ routes: ['/', '/about', '/contact'],
72
195
  outputDir: 'dist-prerendered',
196
+ distDir: 'dist',
197
+ engine: 'browser',
198
+ headless: true,
199
+ waitFor: 1500,
200
+ onProgress: (route) => console.log(`✅ Prerendered: ${route}`),
201
+ onError: (route, error) => console.error(`❌ Error on ${route}:`, error),
73
202
  });
203
+
204
+ console.log(`✨ Prerendered ${result.count} routes!`);
74
205
  ```
75
206
 
76
207
  ---
77
208
 
78
- ## License
209
+ ## 🔥 Real-World Examples
210
+
211
+ ### Example 1: Blog Site
212
+ ```js
213
+ export default {
214
+ routes: ['/', '/blog', '/blog/post-1', '/blog/post-2', '/about'],
215
+ engine: 'browser',
216
+ waitFor: 2000, // Wait longer for blog content
217
+ };
218
+ ```
219
+
220
+ ### Example 2: E-Commerce
221
+ ```js
222
+ export default {
223
+ routes: ['/', '/products', '/products/item-1', '/cart', '/checkout'],
224
+ engine: 'browser',
225
+ waitFor: 1500,
226
+ exclude: ['/admin', '/dashboard'],
227
+ };
228
+ ```
229
+
230
+ ### Example 3: SaaS App
231
+ ```js
232
+ export default {
233
+ routes: ['/'],
234
+ engine: 'browser',
235
+ waitFor: 1200,
236
+ exclude: ['/app/*', '/dashboard/*'],
237
+ };
238
+ ```
239
+
240
+ ---
241
+
242
+ ## 💡 Pro Tips & Tricks
243
+
244
+ ### 🎯 Tip 1: Optimize Your Routes
245
+ ```js
246
+ // ❌ Too slow: Pre-rendering every possible page
247
+ routes: ['/blog/post-' + Array.from({length: 10000}, (_, i) => i)],
248
+
249
+ // ✅ Better: Pre-render the important ones
250
+ routes: ['/', '/blog', '/blog/popular-posts', '/about', '/contact'],
251
+ ```
252
+
253
+ ### ⏱️ Tip 2: Adjust `waitFor` for Your App
254
+ ```js
255
+ // If your data loads fast:
256
+ waitFor: 800,
257
+
258
+ // If you fetch from slow APIs:
259
+ waitFor: 3000,
260
+
261
+ // Pro: Add a loading flag to your app
262
+ if (document.body.dataset.loaded === 'true') {
263
+ // Tell ReviJs we're ready
264
+ }
265
+ ```
266
+
267
+ ### 🔄 Tip 3: Combine with Build Scripts
268
+ ```json
269
+ {
270
+ "scripts": {
271
+ "build": "vite build",
272
+ "prerender": "npm run build && revijs",
273
+ "deploy": "npm run prerender && netlify deploy"
274
+ }
275
+ }
276
+ ```
277
+
278
+ ---
279
+
280
+ ## 🚨 Troubleshooting
281
+
282
+ | Problem | Solution |
283
+ |---------|----------|
284
+ | ⏳ Routes timing out | Increase `waitFor` value (try 2000) |
285
+ | 🚫 Routes not found | Check `routes` array in config |
286
+ | 💾 No output files | Ensure `distDir` exists and is built |
287
+ | 🤖 Browser won't start | Update Puppeteer: `npm install puppeteer@latest` |
288
+ | 🔴 Port already in use | Change `port` in config or kill process |
289
+
290
+ ---
291
+
292
+ ## 🎬 Features Roadmap
293
+
294
+ - ✅ Browser rendering
295
+ - ✅ Express middleware
296
+ - ✅ Programmatic API
297
+ - 🚀 Advanced rendering mode
298
+ - 🚀 SSR engine support
299
+ - 🚀 Incremental prerendering
300
+ - 🚀 Cache layer
301
+
302
+ ---
303
+
304
+ ## 👨‍💻 Meet the Team
305
+
306
+ This project is made with ❤️ by the AlphaBotz crew:
307
+
308
+ | Name | Role | Link |
309
+ |------|------|------|
310
+ | **Utkarsh Dubey** 🧑‍💻 | Core Developer | [@utkarshdubey2008](https://github.com/utkarshdubey2008) |
311
+ | **Adarsh** 🚀 | Core Developer | [@TeamAlphabotz](https://github.com/teamalphabotz) |
312
+
313
+ ### 🤝 Join the Community!
314
+
315
+ - 📢 **Main Channel**: [@thealphabotz](https://t.me/thealphabotz)
316
+ - 💬 **Chat Group**: [@alphabotzchat](https://t.me/alphabotzchat)
317
+ - 👤 **Alter**: [@alter69x](https://t.me/alter69x)
318
+ - 🎨 **Akane**: [@akanesakuramori](https://t.me/akanesakuramori)
319
+
320
+ **We're always hanging out on Telegram!** Come for the bots, stay for the vibes. 🎉
321
+
322
+ ---
323
+
324
+ ## 📊 Stats & Performance
325
+
326
+ | Metric | Benefit |
327
+ |--------|---------|
328
+ | **SEO Score** | 📈 100/100 (with prerendering) |
329
+ | **Initial Load** | ⚡ Instant (static HTML) |
330
+ | **User Experience** | 🎯 Smooth SPA after load |
331
+ | **Cloud Cost** | 💰 Zero (local-first) |
332
+ | **Setup Time** | ⏱️ 30 seconds |
333
+
334
+ ---
335
+
336
+ ## 📚 More Resources
337
+
338
+ - 🐙 [GitHub Repository](https://github.com/TeamAlphabotz/Revijs)
339
+ - 📦 [npm Package](https://www.npmjs.com/package/@revijs/core)
340
+ - 💬 [Discord Community](#) *(coming soon)*
341
+ - 📖 [Full Documentation](#) *(coming soon)*
342
+
343
+ ---
344
+
345
+ ## 🎁 Why You'll Love ReviJs
346
+
347
+ ✨ **Easy Setup** — 30 seconds to get started
348
+ 🚀 **No Cloud** — Everything runs locally
349
+ ⚡ **Lightning Fast** — Pre-built static HTML
350
+ 🎯 **SEO Friendly** — Search engines see full HTML
351
+ 🔧 **Flexible** — Works with React, Vue, Svelte, etc.
352
+ 💚 **Free & Open** — MIT License, community-driven
353
+
354
+ ---
355
+
356
+ ## 📄 License
357
+
358
+ [MIT License](LICENSE) — Use freely! ✅
359
+
360
+ ---
361
+
362
+ ## 🌟 If You Like It...
363
+
364
+ Please give us a ⭐ on [GitHub](https://github.com/TeamAlphabotz/Revijs)!
365
+
366
+ ---
367
+
368
+ <div align="center">
369
+
370
+ ### Made with 💜 by AlphaBotz
371
+
372
+ *Where bots meet brilliance* 🤖✨
79
373
 
80
- MIT
374
+ </div>
package/package.json CHANGED
@@ -1,42 +1,68 @@
1
1
  {
2
2
  "name": "@revijs/core",
3
- "version": "0.1.1",
4
- "description": "Local-first SPA prerender CLI tool converts React/Vite apps into SEO-friendly static HTML",
3
+ "version": "0.1.3",
4
+ "description": "Local-first SPA prerender CLI — convert React/Vite apps into SEO-friendly static HTML",
5
5
  "type": "module",
6
- "main": "src/index.js",
6
+ "main": "./src/index.js",
7
7
  "bin": {
8
8
  "revijs": "./bin/revijs.js"
9
9
  },
10
+
11
+ "files": [
12
+ "bin",
13
+ "src"
14
+ ],
15
+
10
16
  "scripts": {
11
- "postinstall": "npx playwright install chromium",
12
- "start": "node bin/revijs.js",
13
- "dev": "node bin/revijs.js --debug",
14
- "test": "node --experimental-vm-modules node_modules/.bin/jest"
17
+ "start": "node ./bin/revijs.js",
18
+ "dev": "node ./bin/revijs.js --debug",
19
+ "test": "jest",
20
+ "prepare": "node ./src/setup.js || true"
15
21
  },
22
+
16
23
  "keywords": [
17
24
  "prerender",
18
25
  "seo",
19
26
  "spa",
20
27
  "react",
21
28
  "vite",
22
- "static",
23
- "headless",
29
+ "static-site",
24
30
  "ssr",
25
- "cli"
31
+ "cli",
32
+ "headless-browser"
26
33
  ],
27
- "author": "",
34
+
35
+ "author": "TeamAlphaBotz & Utkarsh Dubey",
28
36
  "license": "MIT",
37
+
38
+ "repository": {
39
+ "type": "git",
40
+ "url": "https://github.com/TeamAlphabotz/Revijs.git"
41
+ },
42
+
43
+ "homepage": "https://github.com/TeamAlphabotz/Revijs",
44
+ "bugs": {
45
+ "url": "https://github.com/TeamAlphabotz/Revijs/issues"
46
+ },
47
+
48
+ "funding": {
49
+ "type": "individual",
50
+ "url": "https://t.me/alter69x"
51
+ },
52
+
53
+ "engines": {
54
+ "node": ">=18"
55
+ },
56
+
29
57
  "dependencies": {
30
- "playwright": "^1.44.0",
31
- "sirv": "^2.0.4",
32
- "polka": "^0.5.2",
58
+ "commander": "^12.1.0",
33
59
  "picocolors": "^1.0.1",
34
- "commander": "^12.1.0"
60
+ "polka": "^0.5.2",
61
+ "sirv": "^2.0.4",
62
+ "playwright": "^1.44.0"
35
63
  },
64
+
36
65
  "devDependencies": {
37
66
  "jest": "^29.7.0"
38
- },
39
- "engines": {
40
- "node": ">=18.0.0"
41
67
  }
42
68
  }
package/src/setup.js ADDED
@@ -0,0 +1,22 @@
1
+ import { execSync } from 'child_process';
2
+ import pc from 'picocolors';
3
+
4
+ console.log(pc.cyan('\n ⚡ ReviJs — Setting up browser engine...\n'));
5
+
6
+ try {
7
+ // Install system dependencies (Linux/Ubuntu)
8
+ if (process.platform === 'linux') {
9
+ console.log(pc.dim(' Installing system dependencies...'));
10
+ execSync('npx playwright install-deps chromium', { stdio: 'inherit' });
11
+ }
12
+
13
+ // Install Chromium
14
+ console.log(pc.dim(' Installing Chromium...'));
15
+ execSync('npx playwright install chromium', { stdio: 'inherit' });
16
+
17
+ console.log(pc.green('\n ✔ ReviJs is ready! Run: npx revijs\n'));
18
+ } catch (err) {
19
+ console.warn(pc.yellow('\n Warning: Auto-setup failed. Run manually:'));
20
+ console.warn(pc.yellow(' npx playwright install-deps chromium'));
21
+ console.warn(pc.yellow(' npx playwright install chromium\n'));
22
+ }
@@ -0,0 +1,22 @@
1
+ import { execSync } from 'child_process';
2
+ import pc from 'picocolors';
3
+
4
+ console.log(pc.cyan('\n ⚡ ReviJs — Setting up browser engine...\n'));
5
+
6
+ try {
7
+ // Install system dependencies (Linux/Ubuntu)
8
+ if (process.platform === 'linux') {
9
+ console.log(pc.dim(' Installing system dependencies...'));
10
+ execSync('npx playwright install-deps chromium', { stdio: 'inherit' });
11
+ }
12
+
13
+ // Install Chromium
14
+ console.log(pc.dim(' Installing Chromium...'));
15
+ execSync('npx playwright install chromium', { stdio: 'inherit' });
16
+
17
+ console.log(pc.green('\n ✔ ReviJs is ready! Run: npx revijs\n'));
18
+ } catch (err) {
19
+ console.warn(pc.yellow('\n Warning: Auto-setup failed. Run manually:'));
20
+ console.warn(pc.yellow(' npx playwright install-deps chromium'));
21
+ console.warn(pc.yellow(' npx playwright install chromium\n'));
22
+ }
@@ -1,46 +0,0 @@
1
- // revi.config.js
2
- // Copy this file to your project root and rename it to revi.config.js
3
-
4
- export default {
5
- // ── Routes ──────────────────────────────────────────────────────────────────
6
- // List every route you want prerendered.
7
- // ReviJs renders each one in a full browser and saves the resulting HTML.
8
- routes: [
9
- '/',
10
- '/about',
11
- '/pricing',
12
- '/blog',
13
- '/blog/post-1',
14
- '/blog/post-2',
15
- ],
16
-
17
- // ── Engine ──────────────────────────────────────────────────────────────────
18
- // 'browser' — Standard headless Chromium. Works for most apps. (default)
19
- // 'advanced' — Like browser, but also simulates scroll and injects a
20
- // <meta name="x-prerendered-by" content="revijs"> marker.
21
- // 'ssr' — Minimal-wait mode intended for frameworks with true SSR.
22
- engine: 'browser',
23
-
24
- // ── Output ──────────────────────────────────────────────────────────────────
25
- // Directory where prerendered HTML files are written.
26
- // Deploy this folder (or merge it with your dist/) to your CDN / host.
27
- outputDir: 'dist-prerendered',
28
-
29
- // Your built SPA. Run `npm run build` first, then `npx revijs`.
30
- distDir: 'dist',
31
-
32
- // ── Timing ──────────────────────────────────────────────────────────────────
33
- // Milliseconds to wait AFTER network idle before capturing HTML.
34
- // Increase this if your app fires animations or deferred fetches.
35
- waitFor: 1200,
36
-
37
- // ── Browser ─────────────────────────────────────────────────────────────────
38
- // true — Run browser in background (recommended for CI/production).
39
- // false — Open a visible browser window (useful for debugging).
40
- headless: true,
41
-
42
- // ── Server ──────────────────────────────────────────────────────────────────
43
- // Preferred local port for the temporary static server.
44
- // ReviJs auto-increments if the port is already in use.
45
- port: 4173,
46
- };