create-aziz-app 2.0.14 → 3.0.0
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 +227 -0
- package/bin/create-aziz-app.js +9 -9
- package/package.json +10 -11
- package/template/README.md +862 -138
- package/template/_framework/boot.js +36 -0
- package/template/_framework/hooks.js +207 -0
- package/template/{modules → _framework}/next-response.js +5 -13
- package/template/_framework/router.js +279 -0
- package/template/_framework/runtime.js +86 -0
- package/template/api/createUser.js +1 -1
- package/template/api/hello.js +8 -17
- package/template/api/loginUser.js +1 -1
- package/template/api/users.js +38 -134
- package/template/app/about/page.js +45 -0
- package/template/app/layout.js +23 -0
- package/template/app/page.js +54 -0
- package/template/app/test/page.js +55 -0
- package/template/components/Footer.js +10 -0
- package/template/components/Navbar.js +30 -0
- package/template/index.html +24 -0
- package/template/package.json +5 -14
- package/template/scripts/dev-server.js +330 -302
- package/template/scripts/live-reload-client.js +0 -1
- package/template/.vscode/settings.json +0 -15
- package/template/api/getUser.js +0 -60
- package/template/api/getUserWithDB.js +0 -65
- package/template/app.config.js +0 -41
- package/template/app.html +0 -55
- package/template/components/Counter.jsx +0 -36
- package/template/components/Footer.jsx +0 -9
- package/template/components/Navbar.jsx +0 -17
- package/template/docs/API-GUIDE.md +0 -196
- package/template/docs/API-ROUTES.md +0 -538
- package/template/docs/AUTO-IMPORT.md +0 -99
- package/template/docs/AUTO-REGISTRATION.md +0 -248
- package/template/docs/CSS-FRAMEWORKS.md +0 -221
- package/template/docs/DEV-SERVER.md +0 -184
- package/template/docs/GETTING-STARTED.md +0 -205
- package/template/docs/HOW-IT-WORKS.md +0 -362
- package/template/docs/NEXTJS-APP-ROUTER.md +0 -536
- package/template/docs/NEXTJS-COMPARISON.md +0 -473
- package/template/docs/QUICK-START.md +0 -111
- package/template/docs/STYLING.md +0 -269
- package/template/docs/TROUBLESHOOTING.md +0 -282
- package/template/modules/README.md +0 -129
- package/template/modules/api.js +0 -44
- package/template/modules/auto-import.js +0 -130
- package/template/modules/router.js +0 -218
- package/template/modules/state.js +0 -248
- package/template/package-lock.json +0 -13
- package/template/pages/About.jsx +0 -48
- package/template/pages/ApiDemo.jsx +0 -209
- package/template/pages/Contact.jsx +0 -25
- package/template/pages/Example.jsx +0 -59
- package/template/pages/Home.jsx +0 -39
- package/template/pages/HooksDemo.jsx +0 -194
- package/template/pages/test.jsx +0 -72
- package/template/scripts/build.js +0 -81
- package/template/scripts/generate-imports.js +0 -88
- package/template/tailwind.config.js +0 -17
package/README.md
ADDED
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
# ⚡ Aziz.js
|
|
2
|
+
|
|
3
|
+
> A lightweight Next.js clone — file-based routing, React hooks, server-side API routes, ES module imports. **Zero dependencies. Instant startup.**
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npx create-aziz-app my-app
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## What is this?
|
|
12
|
+
|
|
13
|
+
Aziz.js gives you the Next.js developer experience without the weight:
|
|
14
|
+
|
|
15
|
+
| | Aziz.js | Next.js |
|
|
16
|
+
|--|---------|---------|
|
|
17
|
+
| Bundle size | **~50KB** | ~400KB+ |
|
|
18
|
+
| Dependencies | **0** | 20+ |
|
|
19
|
+
| Startup time | **< 1s** | 10–30s |
|
|
20
|
+
| `page.js` routing | ✅ | ✅ |
|
|
21
|
+
| `layout.js` | ✅ | ✅ |
|
|
22
|
+
| API routes | ✅ | ✅ |
|
|
23
|
+
| `NextResponse` | ✅ | ✅ |
|
|
24
|
+
| React hooks | ✅ | ✅ |
|
|
25
|
+
| ES module imports | ✅ | ✅ |
|
|
26
|
+
| `@/` alias | ✅ | ✅ |
|
|
27
|
+
| Live reload | ✅ | ✅ |
|
|
28
|
+
| SSR / SSG | ❌ | ✅ |
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Getting Started
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npx create-aziz-app my-app
|
|
36
|
+
cd my-app
|
|
37
|
+
npm run dev
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
The CLI will ask you:
|
|
41
|
+
- **Project name**
|
|
42
|
+
- **Port** (default: 3000)
|
|
43
|
+
- **CSS framework** — None / Bootstrap / Tailwind
|
|
44
|
+
- **Include examples?**
|
|
45
|
+
- **Include docs?**
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Project Structure
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
my-app/
|
|
53
|
+
├── index.html ← entry point
|
|
54
|
+
├── app/
|
|
55
|
+
│ ├── layout.js ← root layout
|
|
56
|
+
│ ├── page.js ← route: /
|
|
57
|
+
│ ├── about/
|
|
58
|
+
│ │ └── page.js ← route: /about
|
|
59
|
+
│ └── blog/
|
|
60
|
+
│ └── [slug]/
|
|
61
|
+
│ └── page.js ← route: /blog/:slug
|
|
62
|
+
├── api/
|
|
63
|
+
│ └── users.js ← /api/users (server-side)
|
|
64
|
+
├── components/
|
|
65
|
+
│ ├── Navbar.js
|
|
66
|
+
│ └── Footer.js
|
|
67
|
+
├── lib/
|
|
68
|
+
│ └── db.js
|
|
69
|
+
├── models/
|
|
70
|
+
│ └── User.js
|
|
71
|
+
└── styles/
|
|
72
|
+
└── globals.css
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Pages
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
// app/about/page.js → /about
|
|
81
|
+
/** @jsx h */
|
|
82
|
+
import { h } from '/_framework/runtime.js';
|
|
83
|
+
|
|
84
|
+
export default function Page() {
|
|
85
|
+
const [count, setCount] = useState(0);
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<div>
|
|
89
|
+
<h1>About</h1>
|
|
90
|
+
<p>Count: {count}</p>
|
|
91
|
+
<button onClick={() => setCount(c => c + 1)}>+</button>
|
|
92
|
+
</div>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Layouts
|
|
100
|
+
|
|
101
|
+
```js
|
|
102
|
+
// app/layout.js → wraps every page
|
|
103
|
+
/** @jsx h */
|
|
104
|
+
import { h } from '/_framework/runtime.js';
|
|
105
|
+
import Navbar from '/components/Navbar.js';
|
|
106
|
+
|
|
107
|
+
export default function Layout({ children }) {
|
|
108
|
+
return (
|
|
109
|
+
<div>
|
|
110
|
+
<Navbar />
|
|
111
|
+
<main>{children}</main>
|
|
112
|
+
</div>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## API Routes
|
|
120
|
+
|
|
121
|
+
```js
|
|
122
|
+
// api/users.js → /api/users
|
|
123
|
+
const { NextResponse } = require('../modules/next-response');
|
|
124
|
+
|
|
125
|
+
async function GET(request) {
|
|
126
|
+
const { searchParams } = new URL(request.url);
|
|
127
|
+
const id = searchParams.get('id');
|
|
128
|
+
// fetch from DB...
|
|
129
|
+
return NextResponse.json({ users: [] });
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
async function POST(request) {
|
|
133
|
+
const { name, email } = await request.json();
|
|
134
|
+
// save to DB...
|
|
135
|
+
return NextResponse.json({ created: true }, { status: 201 });
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
module.exports = { GET, POST };
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## Imports
|
|
144
|
+
|
|
145
|
+
```js
|
|
146
|
+
// Framework
|
|
147
|
+
import { h } from '/_framework/runtime.js';
|
|
148
|
+
import { navigate } from '/_framework/router.js';
|
|
149
|
+
|
|
150
|
+
// Absolute paths
|
|
151
|
+
import Navbar from '/components/Navbar.js';
|
|
152
|
+
|
|
153
|
+
// @/ alias
|
|
154
|
+
import connectDB from '@/lib/db';
|
|
155
|
+
import User from '@/models/User';
|
|
156
|
+
|
|
157
|
+
// npm packages (install first, then import)
|
|
158
|
+
import mongoose from 'mongoose';
|
|
159
|
+
import bcrypt from 'bcryptjs';
|
|
160
|
+
import jwt from 'jsonwebtoken';
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## React Hooks
|
|
166
|
+
|
|
167
|
+
All hooks work exactly like React — no imports needed in pages:
|
|
168
|
+
|
|
169
|
+
```js
|
|
170
|
+
const [count, setCount] = useState(0);
|
|
171
|
+
const [user, setUser] = useState(null);
|
|
172
|
+
|
|
173
|
+
useEffect(() => {
|
|
174
|
+
fetchUser().then(setUser);
|
|
175
|
+
}, []);
|
|
176
|
+
|
|
177
|
+
const doubled = useMemo(() => count * 2, [count]);
|
|
178
|
+
const ref = useRef(null);
|
|
179
|
+
|
|
180
|
+
const [state, dispatch] = useReducer(reducer, initialState);
|
|
181
|
+
|
|
182
|
+
const theme = useContext(ThemeContext);
|
|
183
|
+
|
|
184
|
+
const [name, setName] = useLocalStorage('name', '');
|
|
185
|
+
|
|
186
|
+
const { data, loading, error } = useFetch('/api/users');
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## Navigation
|
|
192
|
+
|
|
193
|
+
```js
|
|
194
|
+
import { navigate, Link, useRouter, useParams, useSearchParams } from '/_framework/router.js';
|
|
195
|
+
|
|
196
|
+
// Programmatic
|
|
197
|
+
navigate('/about');
|
|
198
|
+
|
|
199
|
+
// Component
|
|
200
|
+
<Link href="/about">About</Link>
|
|
201
|
+
|
|
202
|
+
// Hook
|
|
203
|
+
const { pathname, push, back } = useRouter();
|
|
204
|
+
|
|
205
|
+
// Dynamic route params (/blog/[slug])
|
|
206
|
+
const { slug } = useParams();
|
|
207
|
+
|
|
208
|
+
// Query string (/search?q=hello)
|
|
209
|
+
const searchParams = useSearchParams();
|
|
210
|
+
const q = searchParams.get('q');
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
## Full docs
|
|
216
|
+
|
|
217
|
+
See [README.md](template/README.md) inside your generated project for the complete guide.
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
## Author
|
|
222
|
+
|
|
223
|
+
**Syed Muhammad Aziz Ahmed**
|
|
224
|
+
|
|
225
|
+
## License
|
|
226
|
+
|
|
227
|
+
AZIZ
|
package/bin/create-aziz-app.js
CHANGED
|
@@ -17,14 +17,14 @@ function question(query) {
|
|
|
17
17
|
|
|
18
18
|
// Main function
|
|
19
19
|
async function main() {
|
|
20
|
-
console.log(`\n⚡ Welcome to Aziz
|
|
21
|
-
console.log(`🎨 A
|
|
20
|
+
console.log(`\n⚡ Welcome to Aziz.js!\n`);
|
|
21
|
+
console.log(`🎨 A lightweight Next.js clone — file-based routing, React hooks, API routes\n`);
|
|
22
22
|
|
|
23
23
|
// Get project name
|
|
24
24
|
let projectName = process.argv[2];
|
|
25
25
|
if (!projectName) {
|
|
26
|
-
projectName = await question('📁 Project name (my-aziz-app): ');
|
|
27
|
-
projectName = projectName.trim() || 'my-aziz-app';
|
|
26
|
+
projectName = await question('📁 Project name (my-aziz-js-app): ');
|
|
27
|
+
projectName = projectName.trim() || 'my-aziz-js-app';
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
// Validate project name
|
|
@@ -97,7 +97,7 @@ async function main() {
|
|
|
97
97
|
setupCSSFramework(targetDir, features.cssFramework);
|
|
98
98
|
|
|
99
99
|
console.log(`✅ Done! Your project is ready.\n`);
|
|
100
|
-
console.log(`🎉 Welcome to Aziz
|
|
100
|
+
console.log(`🎉 Welcome to Aziz.js\n`);
|
|
101
101
|
console.log(`📁 Created project: ${projectName}\n`);
|
|
102
102
|
console.log(`👉 Get started:\n`);
|
|
103
103
|
console.log(` cd ${projectName}`);
|
|
@@ -307,7 +307,7 @@ function Navbar() {
|
|
|
307
307
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
308
308
|
<div class="container-fluid">
|
|
309
309
|
<span class="navbar-brand" onClick={() => navigate("home")} style={{ cursor: 'pointer' }}>
|
|
310
|
-
⚡
|
|
310
|
+
⚡ Aziz.js
|
|
311
311
|
</span>
|
|
312
312
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
313
313
|
<span class="navbar-toggler-icon"></span>
|
|
@@ -348,7 +348,7 @@ function Footer() {
|
|
|
348
348
|
return (
|
|
349
349
|
<footer class="bg-dark text-light text-center py-3 mt-auto">
|
|
350
350
|
<div class="container">
|
|
351
|
-
<p class="mb-0">Made with ⚡
|
|
351
|
+
<p class="mb-0">Made with ⚡ Aziz.js</p>
|
|
352
352
|
</div>
|
|
353
353
|
</footer>
|
|
354
354
|
);
|
|
@@ -382,7 +382,7 @@ function Navbar() {
|
|
|
382
382
|
class="text-primary text-xl font-bold cursor-pointer hover:text-blue-300 transition"
|
|
383
383
|
onClick={() => navigate("home")}
|
|
384
384
|
>
|
|
385
|
-
⚡
|
|
385
|
+
⚡ Aziz.js
|
|
386
386
|
</span>
|
|
387
387
|
<div class="flex space-x-4">
|
|
388
388
|
<a href="#/home" class={\`px-3 py-2 rounded-md text-sm font-medium transition \${path === "home" ? "bg-primary text-dark" : "text-gray-300 hover:bg-gray-700 hover:text-white"}\`}>
|
|
@@ -419,7 +419,7 @@ function Footer() {
|
|
|
419
419
|
return (
|
|
420
420
|
<footer class="bg-dark text-gray-400 text-center py-4 mt-auto">
|
|
421
421
|
<div class="container mx-auto">
|
|
422
|
-
<p>Made with ⚡
|
|
422
|
+
<p>Made with ⚡ Aziz.js</p>
|
|
423
423
|
</div>
|
|
424
424
|
</footer>
|
|
425
425
|
);
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-aziz-app",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"description": "Create Aziz.js apps — lightweight Next.js clone with file-based routing, React hooks, and API routes",
|
|
5
5
|
"keywords": [
|
|
6
|
-
"
|
|
7
|
-
"
|
|
6
|
+
"aziz.js",
|
|
7
|
+
"nextjs",
|
|
8
8
|
"framework",
|
|
9
9
|
"cli",
|
|
10
10
|
"create-app",
|
|
11
|
-
"routing",
|
|
12
|
-
"
|
|
11
|
+
"file-based-routing",
|
|
12
|
+
"react-hooks",
|
|
13
13
|
"api-routes",
|
|
14
|
-
"live-reload"
|
|
14
|
+
"live-reload",
|
|
15
|
+
"lightweight"
|
|
15
16
|
],
|
|
16
|
-
"license": "
|
|
17
|
+
"license": "MIT",
|
|
17
18
|
"author": "Syed Muhammad Aziz Ahmed",
|
|
18
19
|
"type": "commonjs",
|
|
19
20
|
"files": [
|
|
@@ -24,8 +25,6 @@
|
|
|
24
25
|
"create-aziz-app": "bin/create-aziz-app.js"
|
|
25
26
|
},
|
|
26
27
|
"scripts": {
|
|
27
|
-
"dev": "cd template && node scripts/dev-server.js"
|
|
28
|
-
"build": "cd template && node scripts/generate-imports.js",
|
|
29
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
28
|
+
"dev": "cd template && node scripts/dev-server.js"
|
|
30
29
|
}
|
|
31
30
|
}
|