create-dalila 1.0.0 → 1.1.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/index.js +3 -0
- package/package.json +1 -1
- package/template/index.html +2 -23
- package/template/package.json +3 -1
- package/template/src/app/about/page.html +5 -0
- package/template/src/app/layout.html +14 -0
- package/template/src/app/page.html +14 -0
- package/template/src/app/page.ts +20 -0
- package/template/src/main.ts +13 -26
- package/template/src/style.css +72 -55
- package/template/tsconfig.json +6 -1
package/index.js
CHANGED
|
@@ -104,6 +104,9 @@ function main() {
|
|
|
104
104
|
console.log(` ${cyan('npm install')}`);
|
|
105
105
|
console.log(` ${cyan('npm run dev')}`);
|
|
106
106
|
console.log();
|
|
107
|
+
console.log('When you update files in src/app, regenerate routes with:');
|
|
108
|
+
console.log(` ${cyan('npm run routes')}`);
|
|
109
|
+
console.log();
|
|
107
110
|
console.log(`Open ${cyan('http://localhost:4242')} to see your app.`);
|
|
108
111
|
console.log();
|
|
109
112
|
}
|
package/package.json
CHANGED
package/template/index.html
CHANGED
|
@@ -3,32 +3,11 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Dalila App</title>
|
|
6
|
+
<title>Dalila Router App</title>
|
|
7
7
|
<link rel="stylesheet" href="/src/style.css">
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<div id="app"
|
|
11
|
-
<h1>Welcome to Dalila</h1>
|
|
12
|
-
|
|
13
|
-
<section class="card">
|
|
14
|
-
<h2>Counter: {count}</h2>
|
|
15
|
-
<p>Doubled: {doubled}</p>
|
|
16
|
-
|
|
17
|
-
<div class="buttons">
|
|
18
|
-
<button d-on-click="decrement">-</button>
|
|
19
|
-
<button d-on-click="increment">+</button>
|
|
20
|
-
</div>
|
|
21
|
-
</section>
|
|
22
|
-
|
|
23
|
-
<section class="card">
|
|
24
|
-
<p when={isEven}>The count is even</p>
|
|
25
|
-
<p when={isOdd}>The count is odd</p>
|
|
26
|
-
</section>
|
|
27
|
-
|
|
28
|
-
<footer>
|
|
29
|
-
<p>Edit <code>src/main.ts</code> and save to see changes.</p>
|
|
30
|
-
</footer>
|
|
31
|
-
</div>
|
|
10
|
+
<div id="app"></div>
|
|
32
11
|
|
|
33
12
|
<script type="module" src="/src/main.ts"></script>
|
|
34
13
|
</body>
|
package/template/package.json
CHANGED
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "dalila-dev",
|
|
8
|
+
"routes": "dalila routes generate",
|
|
9
|
+
"routes:watch": "dalila routes watch",
|
|
8
10
|
"build": "tsc",
|
|
9
11
|
"preview": "dalila-dev --dist"
|
|
10
12
|
},
|
|
11
13
|
"dependencies": {
|
|
12
|
-
"dalila": "^1.
|
|
14
|
+
"dalila": "^1.5.0"
|
|
13
15
|
},
|
|
14
16
|
"devDependencies": {
|
|
15
17
|
"typescript": "^5.7.3"
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<div class="app-shell">
|
|
2
|
+
<header class="app-header">
|
|
3
|
+
<div>
|
|
4
|
+
<h1>Dalila Router App</h1>
|
|
5
|
+
<p>File-based routing starter template</p>
|
|
6
|
+
</div>
|
|
7
|
+
<nav class="app-nav">
|
|
8
|
+
<a d-link="/">Home</a>
|
|
9
|
+
<a d-link="/about">About</a>
|
|
10
|
+
</nav>
|
|
11
|
+
</header>
|
|
12
|
+
|
|
13
|
+
<main class="app-main" data-slot="children"></main>
|
|
14
|
+
</div>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<section class="card">
|
|
2
|
+
<h2>Counter: {count}</h2>
|
|
3
|
+
<p>Doubled: {doubled}</p>
|
|
4
|
+
|
|
5
|
+
<div class="buttons">
|
|
6
|
+
<button type="button" d-on-click="decrement">-</button>
|
|
7
|
+
<button type="button" d-on-click="increment">+</button>
|
|
8
|
+
</div>
|
|
9
|
+
</section>
|
|
10
|
+
|
|
11
|
+
<section class="card">
|
|
12
|
+
<p when={isEven}>The count is even.</p>
|
|
13
|
+
<p when={isOdd}>The count is odd.</p>
|
|
14
|
+
</section>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { computed, signal } from 'dalila';
|
|
2
|
+
|
|
3
|
+
export function loader() {
|
|
4
|
+
const count = signal(0);
|
|
5
|
+
const doubled = computed(() => count() * 2);
|
|
6
|
+
const isEven = computed(() => count() % 2 === 0);
|
|
7
|
+
const isOdd = computed(() => count() % 2 !== 0);
|
|
8
|
+
|
|
9
|
+
const increment = () => count.update(value => value + 1);
|
|
10
|
+
const decrement = () => count.update(value => value - 1);
|
|
11
|
+
|
|
12
|
+
return {
|
|
13
|
+
count,
|
|
14
|
+
doubled,
|
|
15
|
+
isEven,
|
|
16
|
+
isOdd,
|
|
17
|
+
increment,
|
|
18
|
+
decrement
|
|
19
|
+
};
|
|
20
|
+
}
|
package/template/src/main.ts
CHANGED
|
@@ -1,30 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { createRouter } from 'dalila/router';
|
|
2
|
+
import { routes } from '../routes.generated';
|
|
3
|
+
import { routeManifest } from '../routes.generated.manifest';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
const app = createScope();
|
|
5
|
+
const outlet = document.getElementById('app');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const doubled = computed(() => count() * 2);
|
|
11
|
-
const isEven = computed(() => count() % 2 === 0);
|
|
12
|
-
const isOdd = computed(() => count() % 2 !== 0);
|
|
7
|
+
if (!outlet) {
|
|
8
|
+
throw new Error('Missing #app element');
|
|
9
|
+
}
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
// Bind to DOM
|
|
19
|
-
const root = document.getElementById('app');
|
|
20
|
-
if (root) {
|
|
21
|
-
bind(root, {
|
|
22
|
-
count,
|
|
23
|
-
doubled,
|
|
24
|
-
isEven,
|
|
25
|
-
isOdd,
|
|
26
|
-
increment,
|
|
27
|
-
decrement,
|
|
28
|
-
});
|
|
29
|
-
}
|
|
11
|
+
const router = createRouter({
|
|
12
|
+
outlet,
|
|
13
|
+
routes,
|
|
14
|
+
routeManifest
|
|
30
15
|
});
|
|
16
|
+
|
|
17
|
+
router.start();
|
package/template/src/style.css
CHANGED
|
@@ -5,97 +5,114 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
:root {
|
|
8
|
-
--bg: #
|
|
9
|
-
--
|
|
10
|
-
--text: #
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--primary
|
|
14
|
-
--
|
|
8
|
+
--bg: #f5f7fb;
|
|
9
|
+
--surface: #ffffff;
|
|
10
|
+
--text: #1f2937;
|
|
11
|
+
--muted: #5f6b7c;
|
|
12
|
+
--border: #dce2eb;
|
|
13
|
+
--primary: #1d4ed8;
|
|
14
|
+
--primary-hover: #1e40af;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
body {
|
|
18
|
-
|
|
19
|
-
background: var(--bg);
|
|
20
|
-
color: var(--text);
|
|
18
|
+
margin: 0;
|
|
21
19
|
min-height: 100vh;
|
|
20
|
+
background: radial-gradient(circle at top right, #dbeafe 0%, var(--bg) 48%);
|
|
21
|
+
color: var(--text);
|
|
22
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
#app {
|
|
26
|
+
max-width: 760px;
|
|
27
|
+
margin: 0 auto;
|
|
28
|
+
padding: 2rem 1rem 3rem;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.app-shell {
|
|
32
|
+
display: grid;
|
|
33
|
+
gap: 1rem;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.app-header {
|
|
37
|
+
background: var(--surface);
|
|
38
|
+
border: 1px solid var(--border);
|
|
39
|
+
border-radius: 14px;
|
|
40
|
+
padding: 1rem 1.25rem;
|
|
22
41
|
display: flex;
|
|
23
|
-
justify-content: center;
|
|
24
42
|
align-items: center;
|
|
43
|
+
justify-content: space-between;
|
|
44
|
+
gap: 1rem;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.app-header h1 {
|
|
48
|
+
font-size: 1.2rem;
|
|
25
49
|
}
|
|
26
50
|
|
|
27
|
-
.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
text-align: center;
|
|
51
|
+
.app-header p {
|
|
52
|
+
color: var(--muted);
|
|
53
|
+
font-size: 0.9rem;
|
|
31
54
|
}
|
|
32
55
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
56
|
+
.app-nav {
|
|
57
|
+
display: flex;
|
|
58
|
+
gap: 0.5rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.app-nav a {
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
color: var(--primary);
|
|
64
|
+
font-weight: 600;
|
|
65
|
+
padding: 0.45rem 0.7rem;
|
|
66
|
+
border-radius: 8px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.app-nav a:hover {
|
|
70
|
+
background: #eff6ff;
|
|
71
|
+
color: var(--primary-hover);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.app-main {
|
|
75
|
+
display: grid;
|
|
76
|
+
gap: 1rem;
|
|
40
77
|
}
|
|
41
78
|
|
|
42
79
|
.card {
|
|
43
|
-
background: var(--
|
|
44
|
-
border-radius: 12px;
|
|
45
|
-
padding: 1.5rem;
|
|
46
|
-
margin-bottom: 1rem;
|
|
80
|
+
background: var(--surface);
|
|
47
81
|
border: 1px solid var(--border);
|
|
82
|
+
border-radius: 14px;
|
|
83
|
+
padding: 1.2rem;
|
|
48
84
|
}
|
|
49
85
|
|
|
50
86
|
.card h2 {
|
|
51
|
-
font-size: 1.5rem;
|
|
52
87
|
margin-bottom: 0.5rem;
|
|
53
88
|
}
|
|
54
89
|
|
|
55
90
|
.card p {
|
|
56
|
-
color: var(--
|
|
57
|
-
margin-
|
|
91
|
+
color: var(--muted);
|
|
92
|
+
margin-top: 0.4rem;
|
|
58
93
|
}
|
|
59
94
|
|
|
60
95
|
.buttons {
|
|
96
|
+
margin-top: 1rem;
|
|
61
97
|
display: flex;
|
|
62
|
-
gap:
|
|
63
|
-
justify-content: center;
|
|
98
|
+
gap: 0.75rem;
|
|
64
99
|
}
|
|
65
100
|
|
|
66
101
|
button {
|
|
67
|
-
background: var(--primary);
|
|
68
|
-
color: white;
|
|
69
102
|
border: none;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
103
|
+
border-radius: 10px;
|
|
104
|
+
padding: 0.6rem 1rem;
|
|
105
|
+
min-width: 3rem;
|
|
106
|
+
background: var(--primary);
|
|
107
|
+
color: #ffffff;
|
|
108
|
+
font-size: 1.1rem;
|
|
73
109
|
cursor: pointer;
|
|
74
|
-
transition: background 0.2s, transform 0.1s;
|
|
75
110
|
}
|
|
76
111
|
|
|
77
112
|
button:hover {
|
|
78
113
|
background: var(--primary-hover);
|
|
79
114
|
}
|
|
80
115
|
|
|
81
|
-
button:active {
|
|
82
|
-
transform: scale(0.95);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
footer {
|
|
86
|
-
margin-top: 2rem;
|
|
87
|
-
color: var(--text-muted);
|
|
88
|
-
font-size: 0.875rem;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
footer code {
|
|
92
|
-
background: var(--card-bg);
|
|
93
|
-
padding: 0.25rem 0.5rem;
|
|
94
|
-
border-radius: 4px;
|
|
95
|
-
font-family: 'Fira Code', monospace;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/* Hide elements with tokens until bound */
|
|
99
116
|
[d-loading] {
|
|
100
117
|
visibility: hidden;
|
|
101
118
|
}
|