@analogjs/platform 2.0.0-beta.2 → 2.0.0-beta.21
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/package.json +5 -5
- package/src/lib/content-plugin.d.ts +11 -1
- package/src/lib/content-plugin.js +38 -9
- package/src/lib/nx-plugin/src/generators/app/files/template-angular/src/app/app.config.ts__template__ +0 -6
- package/src/lib/nx-plugin/src/generators/app/files/template-angular/vite.config.ts__template__ +0 -8
- package/src/lib/nx-plugin/src/generators/app/generator.js +0 -12
- package/src/lib/nx-plugin/src/generators/app/generator.js.map +1 -1
- package/src/lib/nx-plugin/src/generators/app/lib/add-home-page.js +0 -3
- package/src/lib/nx-plugin/src/generators/app/lib/add-home-page.js.map +1 -1
- package/src/lib/nx-plugin/src/generators/app/schema.d.ts +0 -1
- package/src/lib/nx-plugin/src/generators/app/schema.json +0 -6
- package/src/lib/nx-plugin/src/generators/app/versions/minimum-supported-versions.d.ts +0 -1
- package/src/lib/nx-plugin/src/generators/app/versions/minimum-supported-versions.js +1 -3
- package/src/lib/nx-plugin/src/generators/app/versions/minimum-supported-versions.js.map +1 -1
- package/src/lib/nx-plugin/src/generators/app/versions/nx_18_X/versions.d.ts +5 -5
- package/src/lib/nx-plugin/src/generators/app/versions/nx_18_X/versions.js +5 -5
- package/src/lib/nx-plugin/src/generators/app/versions/nx_18_X/versions.js.map +1 -1
- package/src/lib/nx-plugin/src/generators/preset/schema.d.ts +0 -1
- package/src/lib/nx-plugin/src/generators/preset/schema.json +0 -6
- package/src/lib/nx-plugin/src/utils/versions/ng_19_X/versions.d.ts +5 -5
- package/src/lib/nx-plugin/src/utils/versions/ng_19_X/versions.js +5 -5
- package/src/lib/nx-plugin/src/utils/versions/ng_19_X/versions.js.map +1 -1
- package/src/lib/router-plugin.d.ts +14 -4
- package/src/lib/router-plugin.js +69 -16
- package/src/lib/nx-plugin/src/generators/app/files/trpc/src/note.ts__template__ +0 -5
- package/src/lib/nx-plugin/src/generators/app/files/trpc/src/server/routes/api/trpc/[trpc].ts__template__ +0 -10
- package/src/lib/nx-plugin/src/generators/app/files/trpc/src/server/trpc/context.ts__template__ +0 -7
- package/src/lib/nx-plugin/src/generators/app/files/trpc/src/server/trpc/routers/index.ts__template__ +0 -8
- package/src/lib/nx-plugin/src/generators/app/files/trpc/src/server/trpc/routers/notes.ts__template__ +0 -32
- package/src/lib/nx-plugin/src/generators/app/files/trpc/src/server/trpc/trpc.ts__template__ +0 -13
- package/src/lib/nx-plugin/src/generators/app/files/trpc/src/trpc-client.ts__template__ +0 -15
- package/src/lib/nx-plugin/src/generators/app/files/welcome-components/css-trpc/src/app/pages/analog-welcome.component.ts__template__ +0 -439
- package/src/lib/nx-plugin/src/generators/app/files/welcome-components/tailwind-trpc/src/app/pages/analog-welcome.component.ts__template__ +0 -162
- package/src/lib/nx-plugin/src/generators/app/lib/add-trpc.d.ts +0 -3
- package/src/lib/nx-plugin/src/generators/app/lib/add-trpc.js +0 -16
- package/src/lib/nx-plugin/src/generators/app/lib/add-trpc.js.map +0 -1
- package/src/lib/nx-plugin/src/generators/app/versions/trpc-dependencies.d.ts +0 -4
- package/src/lib/nx-plugin/src/generators/app/versions/trpc-dependencies.js +0 -44
- package/src/lib/nx-plugin/src/generators/app/versions/trpc-dependencies.js.map +0 -1
|
@@ -1,439 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
|
|
3
|
-
import { FormsModule, NgForm } from '@angular/forms';
|
|
4
|
-
import { waitFor } from '@analogjs/trpc';
|
|
5
|
-
import { shareReplay, Subject, switchMap, take } from 'rxjs';
|
|
6
|
-
import { injectTrpcClient } from '../../trpc-client';
|
|
7
|
-
import { Note } from '../../note';
|
|
8
|
-
|
|
9
|
-
@Component({
|
|
10
|
-
selector: '<%= fileName %>-analog-welcome',
|
|
11
|
-
<% if (majorAngularVersion < 19) { %>standalone: true,<% } %>
|
|
12
|
-
imports: [AsyncPipe, FormsModule, NgFor, DatePipe, NgIf],
|
|
13
|
-
styles: [
|
|
14
|
-
`
|
|
15
|
-
:host {
|
|
16
|
-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
|
17
|
-
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
|
18
|
-
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
19
|
-
'Noto Color Emoji';
|
|
20
|
-
display: flex;
|
|
21
|
-
padding: 2rem 1rem 8rem;
|
|
22
|
-
flex-direction: column;
|
|
23
|
-
background: rgb(250 250 250);
|
|
24
|
-
height: 100%;
|
|
25
|
-
}
|
|
26
|
-
a {
|
|
27
|
-
color: inherit;
|
|
28
|
-
text-decoration: inherit;
|
|
29
|
-
}
|
|
30
|
-
.main {
|
|
31
|
-
margin: 0 auto;
|
|
32
|
-
flex: 1 1 0;
|
|
33
|
-
}
|
|
34
|
-
.intro-section {
|
|
35
|
-
padding-top: 1.5rem;
|
|
36
|
-
padding-bottom: 2rem;
|
|
37
|
-
}
|
|
38
|
-
.intro-section > * + * {
|
|
39
|
-
margin-top: 1.5rem;
|
|
40
|
-
}
|
|
41
|
-
@media (min-width: 768px) {
|
|
42
|
-
.intro-section {
|
|
43
|
-
padding-top: 2.5rem;
|
|
44
|
-
padding-bottom: 3rem;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
@media (min-width: 1024px) {
|
|
48
|
-
.intro-section {
|
|
49
|
-
padding-top: 8rem;
|
|
50
|
-
padding-bottom: 8rem;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
.intro-container {
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: column;
|
|
56
|
-
text-align: center;
|
|
57
|
-
gap: 1rem;
|
|
58
|
-
align-items: center;
|
|
59
|
-
max-width: 64rem;
|
|
60
|
-
}
|
|
61
|
-
.intro-logo {
|
|
62
|
-
height: 3rem;
|
|
63
|
-
width: 3rem;
|
|
64
|
-
}
|
|
65
|
-
.intro-badge {
|
|
66
|
-
transition-property: color, background-color, border-color,
|
|
67
|
-
text-decoration-color, fill, stroke;
|
|
68
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
69
|
-
transition-duration: 150ms;
|
|
70
|
-
font-weight: 500;
|
|
71
|
-
font-size: 0.875rem;
|
|
72
|
-
line-height: 1.25rem;
|
|
73
|
-
padding: 0.375rem 1rem;
|
|
74
|
-
background-color: rgb(228 228 231);
|
|
75
|
-
border-radius: 1rem;
|
|
76
|
-
}
|
|
77
|
-
.intro-heading {
|
|
78
|
-
margin: 0;
|
|
79
|
-
font-weight: 500;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
@media (min-width: 640px) {
|
|
83
|
-
.intro-heading {
|
|
84
|
-
font-size: 3rem;
|
|
85
|
-
line-height: 1;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
@media (min-width: 768px) {
|
|
89
|
-
.intro-heading {
|
|
90
|
-
font-size: 3.75rem;
|
|
91
|
-
line-height: 1;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
@media (min-width: 1024px) {
|
|
95
|
-
.intro-heading {
|
|
96
|
-
font-size: 4.5rem;
|
|
97
|
-
line-height: 1;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
.intro-analog {
|
|
101
|
-
color: #dd0031;
|
|
102
|
-
}
|
|
103
|
-
.intro-description {
|
|
104
|
-
line-height: 1.5;
|
|
105
|
-
max-width: 42rem;
|
|
106
|
-
margin: 0;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
@media (min-width: 640px) {
|
|
110
|
-
.intro-description {
|
|
111
|
-
line-height: 2rem;
|
|
112
|
-
font-size: 1.25rem;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
.btn-container > * + * {
|
|
116
|
-
margin-left: 1rem;
|
|
117
|
-
}
|
|
118
|
-
.darkBtn {
|
|
119
|
-
transition-property: color, background-color, border-color,
|
|
120
|
-
text-decoration-color, fill, stroke;
|
|
121
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
122
|
-
transition-duration: 150ms;
|
|
123
|
-
color: rgb(250 250 250);
|
|
124
|
-
font-weight: 500;
|
|
125
|
-
font-size: 0.875rem;
|
|
126
|
-
line-height: 1.25rem;
|
|
127
|
-
padding-left: 2rem;
|
|
128
|
-
padding-right: 2rem;
|
|
129
|
-
background-color: rgb(9 9 11);
|
|
130
|
-
border-radius: 0.375rem;
|
|
131
|
-
justify-content: center;
|
|
132
|
-
align-items: center;
|
|
133
|
-
height: 2.75rem;
|
|
134
|
-
cursor: pointer;
|
|
135
|
-
display: inline-flex;
|
|
136
|
-
}
|
|
137
|
-
.darkBtn:hover {
|
|
138
|
-
background-color: rgb(9 9 11 / 0.9);
|
|
139
|
-
}
|
|
140
|
-
.lightBtn {
|
|
141
|
-
transition-property: color, background-color, border-color,
|
|
142
|
-
text-decoration-color, fill, stroke;
|
|
143
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
144
|
-
transition-duration: 150ms;
|
|
145
|
-
color: rgb(24, 24, 27);
|
|
146
|
-
background: rgb(250 250 250);
|
|
147
|
-
font-weight: 500;
|
|
148
|
-
font-size: 0.875rem;
|
|
149
|
-
line-height: 1.25rem;
|
|
150
|
-
padding-left: 2rem;
|
|
151
|
-
padding-right: 2rem;
|
|
152
|
-
border-radius: 0.375rem;
|
|
153
|
-
border: 1px solid rgb(229, 231, 235);
|
|
154
|
-
justify-content: center;
|
|
155
|
-
align-items: center;
|
|
156
|
-
height: 2.75rem;
|
|
157
|
-
display: inline-flex;
|
|
158
|
-
cursor: pointer;
|
|
159
|
-
}
|
|
160
|
-
.lightBtn:hover {
|
|
161
|
-
background-color: rgb(244 244 245);
|
|
162
|
-
}
|
|
163
|
-
.trpc-section {
|
|
164
|
-
padding-top: 2rem;
|
|
165
|
-
padding-bottom: 2rem;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
@media (min-width: 768px) {
|
|
169
|
-
.trpc-section {
|
|
170
|
-
padding-top: 3rem;
|
|
171
|
-
padding-bottom: 3rem;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
@media (min-width: 1024px) {
|
|
176
|
-
.trpc-section {
|
|
177
|
-
padding-top: 6rem;
|
|
178
|
-
padding-bottom: 6rem;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
.trpc-container {
|
|
182
|
-
text-align: center;
|
|
183
|
-
gap: 1rem;
|
|
184
|
-
justify-content: center;
|
|
185
|
-
align-items: center;
|
|
186
|
-
flex-direction: column;
|
|
187
|
-
max-width: 58rem;
|
|
188
|
-
display: flex;
|
|
189
|
-
margin-left: auto;
|
|
190
|
-
margin-right: auto;
|
|
191
|
-
}
|
|
192
|
-
.trpc-heading {
|
|
193
|
-
color: #dd0031;
|
|
194
|
-
line-height: 1.1;
|
|
195
|
-
font-weight: 500;
|
|
196
|
-
font-size: 1.875rem;
|
|
197
|
-
margin: 0;
|
|
198
|
-
}
|
|
199
|
-
.trpc-description {
|
|
200
|
-
line-height: 1.5;
|
|
201
|
-
max-width: 85%;
|
|
202
|
-
margin: 0;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
@media (min-width: 640px) {
|
|
206
|
-
.trpc-description {
|
|
207
|
-
line-height: 1.75rem;
|
|
208
|
-
font-size: 1.125rem;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
.trpc-form {
|
|
212
|
-
padding-bottom: 0.5rem;
|
|
213
|
-
align-items: center;
|
|
214
|
-
display: flex;
|
|
215
|
-
margin-top: 2rem;
|
|
216
|
-
gap: 0.5rem;
|
|
217
|
-
}
|
|
218
|
-
.sr-only {
|
|
219
|
-
position: absolute;
|
|
220
|
-
width: 1px;
|
|
221
|
-
height: 1px;
|
|
222
|
-
padding: 0;
|
|
223
|
-
margin: -1px;
|
|
224
|
-
overflow: hidden;
|
|
225
|
-
clip: rect(0, 0, 0, 0);
|
|
226
|
-
white-space: nowrap;
|
|
227
|
-
border-width: 0;
|
|
228
|
-
}
|
|
229
|
-
.trpcInput {
|
|
230
|
-
transition-property: color, background-color, border-color,
|
|
231
|
-
text-decoration-color, fill, stroke;
|
|
232
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
233
|
-
transition-duration: 150ms;
|
|
234
|
-
font-weight: 500;
|
|
235
|
-
font-size: 0.875rem;
|
|
236
|
-
line-height: 1.25rem;
|
|
237
|
-
padding-left: 0.5rem;
|
|
238
|
-
padding-right: 0.5rem;
|
|
239
|
-
border-radius: 0.375rem;
|
|
240
|
-
justify-content: center;
|
|
241
|
-
align-items: center;
|
|
242
|
-
width: 100%;
|
|
243
|
-
height: 2.5rem;
|
|
244
|
-
font-family: inherit;
|
|
245
|
-
font-feature-settings: inherit;
|
|
246
|
-
font-variation-settings: inherit;
|
|
247
|
-
color: inherit;
|
|
248
|
-
margin: 0;
|
|
249
|
-
border: 1px solid rgb(229, 231, 235);
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.notes {
|
|
253
|
-
margin-top: 1rem;
|
|
254
|
-
}
|
|
255
|
-
.note {
|
|
256
|
-
padding: 1rem;
|
|
257
|
-
margin-bottom: 1rem;
|
|
258
|
-
border-radius: 0.375rem;
|
|
259
|
-
font-weight: 400;
|
|
260
|
-
border: 1px solid rgb(229, 231, 235);
|
|
261
|
-
}
|
|
262
|
-
.note-head {
|
|
263
|
-
display: flex;
|
|
264
|
-
justify-content: space-between;
|
|
265
|
-
align-items: center;
|
|
266
|
-
}
|
|
267
|
-
.note-date {
|
|
268
|
-
font-size: 0.875rem;
|
|
269
|
-
margin: 0;
|
|
270
|
-
line-height: 1.25rem;
|
|
271
|
-
color: rgb(161, 161, 170);
|
|
272
|
-
}
|
|
273
|
-
.note-note {
|
|
274
|
-
margin: 0 0 2rem 0;
|
|
275
|
-
}
|
|
276
|
-
.noteDeleteBtn {
|
|
277
|
-
transition-property: color, background-color, border-color,
|
|
278
|
-
text-decoration-color, fill, stroke;
|
|
279
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
280
|
-
transition-duration: 150ms;
|
|
281
|
-
font-weight: 500;
|
|
282
|
-
font-size: 0.875rem;
|
|
283
|
-
line-height: 1.25rem;
|
|
284
|
-
border-radius: 0.375rem;
|
|
285
|
-
justify-content: center;
|
|
286
|
-
align-items: center;
|
|
287
|
-
width: 1.5rem;
|
|
288
|
-
height: 1.5rem;
|
|
289
|
-
display: inline-flex;
|
|
290
|
-
cursor: pointer;
|
|
291
|
-
background: none;
|
|
292
|
-
border: 1px solid transparent;
|
|
293
|
-
}
|
|
294
|
-
.noteDeleteBtn:hover {
|
|
295
|
-
background-color: rgb(244 244 245);
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.no-notes {
|
|
299
|
-
padding: 5rem;
|
|
300
|
-
border-radius: 0.75rem;
|
|
301
|
-
text-align: center;
|
|
302
|
-
}
|
|
303
|
-
.no-notes-headline {
|
|
304
|
-
font-size: 1.25rem;
|
|
305
|
-
line-height: 1.75rem;
|
|
306
|
-
font-weight: 500;
|
|
307
|
-
margin: 0;
|
|
308
|
-
}
|
|
309
|
-
.no-notes-desc {
|
|
310
|
-
color: rgb(161 161 170);
|
|
311
|
-
margin: 0;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.loading-text {
|
|
315
|
-
margin-top: 1rem;
|
|
316
|
-
text-align: center;
|
|
317
|
-
}
|
|
318
|
-
`,
|
|
319
|
-
],
|
|
320
|
-
template: `
|
|
321
|
-
<main class="main">
|
|
322
|
-
<section class="intro-section">
|
|
323
|
-
<div class="intro-container">
|
|
324
|
-
<img
|
|
325
|
-
class="intro-logo"
|
|
326
|
-
src="https://analogjs.org/img/logos/analog-logo.svg"
|
|
327
|
-
alt="AnalogJs logo. Two red triangles and a white analog wave in front"
|
|
328
|
-
/>
|
|
329
|
-
<a
|
|
330
|
-
class="intro-badge"
|
|
331
|
-
target="_blank"
|
|
332
|
-
href="https://twitter.com/analogjs"
|
|
333
|
-
>Follow along on Twitter</a
|
|
334
|
-
>
|
|
335
|
-
<h1 class="intro-heading">
|
|
336
|
-
<span class="intro-analog">Analog.</span> The fullstack Angular
|
|
337
|
-
meta-framework
|
|
338
|
-
</h1>
|
|
339
|
-
<p class="intro-description">
|
|
340
|
-
Analog is for building applications and websites with Angular.
|
|
341
|
-
<br />Powered by Vite.
|
|
342
|
-
</p>
|
|
343
|
-
<div class="btn-container">
|
|
344
|
-
<a class="darkBtn" href="https://analogjs.org">Read the docs</a>
|
|
345
|
-
<a
|
|
346
|
-
target="_blank"
|
|
347
|
-
rel="noreferrer"
|
|
348
|
-
class="lightBtn"
|
|
349
|
-
href="https://github.com/analogjs/analog"
|
|
350
|
-
>Star on GitHub</a
|
|
351
|
-
>
|
|
352
|
-
</div>
|
|
353
|
-
</div>
|
|
354
|
-
</section>
|
|
355
|
-
<section id="trpc-demo" class="trpc-section">
|
|
356
|
-
<div class="trpc-container">
|
|
357
|
-
<h2 class="trpc-heading">Leave a note</h2>
|
|
358
|
-
<p class="trpc-description">
|
|
359
|
-
This is an example of how you can use tRPC to superpower your
|
|
360
|
-
client-server interaction.
|
|
361
|
-
</p>
|
|
362
|
-
</div>
|
|
363
|
-
<form class="trpc-form" #f="ngForm" (ngSubmit)="addNote(f)">
|
|
364
|
-
<label class="sr-only" for="newNote"> Note </label>
|
|
365
|
-
<input
|
|
366
|
-
required
|
|
367
|
-
autocomplete="off"
|
|
368
|
-
name="newNote"
|
|
369
|
-
[(ngModel)]="newNote"
|
|
370
|
-
class="trpcInput"
|
|
371
|
-
/>
|
|
372
|
-
<button class="lightBtn">+</button>
|
|
373
|
-
</form>
|
|
374
|
-
<div class="notes" *ngIf="notes$ | async as notes; else loading">
|
|
375
|
-
<div
|
|
376
|
-
class="note"
|
|
377
|
-
*ngFor="let note of notes; trackBy: noteTrackBy; let i = index"
|
|
378
|
-
>
|
|
379
|
-
<div class="note-head">
|
|
380
|
-
<p class="note-date">{{ note.createdAt | date }}</p>
|
|
381
|
-
<button class="noteDeleteBtn" (click)="removeNote(note.id)">
|
|
382
|
-
x
|
|
383
|
-
</button>
|
|
384
|
-
</div>
|
|
385
|
-
<p class="note-note">{{ note.note }}</p>
|
|
386
|
-
</div>
|
|
387
|
-
|
|
388
|
-
<div class="no-notes " *ngIf="notes.length === 0">
|
|
389
|
-
<h3 class="no-notes-headline">No notes yet!</h3>
|
|
390
|
-
<p class="no-notes-desc">
|
|
391
|
-
Add a new one and see them appear here...
|
|
392
|
-
</p>
|
|
393
|
-
</div>
|
|
394
|
-
</div>
|
|
395
|
-
<ng-template #loading>
|
|
396
|
-
<p class="loading-text">Loading...</p>
|
|
397
|
-
</ng-template>
|
|
398
|
-
</section>
|
|
399
|
-
</main>
|
|
400
|
-
`,
|
|
401
|
-
})
|
|
402
|
-
export class AnalogWelcomeComponent {
|
|
403
|
-
private _trpc = injectTrpcClient();
|
|
404
|
-
public triggerRefresh$ = new Subject<void>();
|
|
405
|
-
public notes$ = this.triggerRefresh$.pipe(
|
|
406
|
-
switchMap(() => this._trpc.note.list.query()),
|
|
407
|
-
shareReplay(1)
|
|
408
|
-
);
|
|
409
|
-
public newNote = '';
|
|
410
|
-
|
|
411
|
-
constructor() {
|
|
412
|
-
void waitFor(this.notes$);
|
|
413
|
-
this.triggerRefresh$.next();
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
public noteTrackBy = (index: number, note: Note) => {
|
|
417
|
-
return note.id;
|
|
418
|
-
};
|
|
419
|
-
|
|
420
|
-
public addNote(form: NgForm) {
|
|
421
|
-
if (!form.valid) {
|
|
422
|
-
form.form.markAllAsTouched();
|
|
423
|
-
return;
|
|
424
|
-
}
|
|
425
|
-
this._trpc.note.create
|
|
426
|
-
.mutate({ note: this.newNote })
|
|
427
|
-
.pipe(take(1))
|
|
428
|
-
.subscribe(() => this.triggerRefresh$.next());
|
|
429
|
-
this.newNote = '';
|
|
430
|
-
form.form.reset();
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
public removeNote(id: number) {
|
|
434
|
-
this._trpc.note.remove
|
|
435
|
-
.mutate({ id })
|
|
436
|
-
.pipe(take(1))
|
|
437
|
-
.subscribe(() => this.triggerRefresh$.next());
|
|
438
|
-
}
|
|
439
|
-
}
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
|
|
3
|
-
import { FormsModule, NgForm } from '@angular/forms';
|
|
4
|
-
import { shareReplay, Subject, switchMap, take } from 'rxjs';
|
|
5
|
-
import { waitFor } from '@analogjs/trpc';
|
|
6
|
-
import { injectTrpcClient } from '../../trpc-client';
|
|
7
|
-
import { Note } from '../../note';
|
|
8
|
-
|
|
9
|
-
@Component({
|
|
10
|
-
selector: '<%= fileName %>-analog-welcome',
|
|
11
|
-
<% if (majorAngularVersion < 19) { %>standalone: true,<% } %>
|
|
12
|
-
imports: [AsyncPipe, FormsModule, NgFor, DatePipe, NgIf],
|
|
13
|
-
host: {
|
|
14
|
-
class:
|
|
15
|
-
'flex min-h-screen flex-col text-zinc-900 bg-zinc-50 px-4 pt-8 pb-32',
|
|
16
|
-
},
|
|
17
|
-
template: `
|
|
18
|
-
<main class="flex-1 mx-auto">
|
|
19
|
-
<section class="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
|
|
20
|
-
<div
|
|
21
|
-
class="flex max-w-[64rem] flex-col items-center gap-4 text-center"
|
|
22
|
-
>
|
|
23
|
-
<img class="h-12 w-12" src="https://analogjs.org/img/logos/analog-logo.svg" alt="AnalogJs logo. Two red triangles and a white analog wave in front"/>
|
|
24
|
-
<a
|
|
25
|
-
class="rounded-2xl bg-zinc-200 px-4 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
26
|
-
target="_blank"
|
|
27
|
-
href="https://twitter.com/analogjs"
|
|
28
|
-
>Follow along on Twitter</a
|
|
29
|
-
>
|
|
30
|
-
<h1
|
|
31
|
-
class="font-heading font-medium text-3xl sm:text-5xl md:text-6xl lg:text-7xl"
|
|
32
|
-
>
|
|
33
|
-
<span class="text-[#DD0031]">Analog.</span> The fullstack Angular
|
|
34
|
-
meta-framework
|
|
35
|
-
</h1>
|
|
36
|
-
<p
|
|
37
|
-
class="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8"
|
|
38
|
-
>
|
|
39
|
-
Analog is for building applications and websites with Angular.
|
|
40
|
-
<br />Powered by Vite.
|
|
41
|
-
</p>
|
|
42
|
-
<div class="space-x-4">
|
|
43
|
-
<a
|
|
44
|
-
class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background bg-zinc-950 text-zinc-50 hover:bg-zinc-950/90 h-11 px-8 rounded-md"
|
|
45
|
-
href="https://analogjs.org"
|
|
46
|
-
>Read the docs</a
|
|
47
|
-
><a
|
|
48
|
-
target="_blank"
|
|
49
|
-
rel="noreferrer"
|
|
50
|
-
class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-input hover:bg-zinc-100 hover:text-zinc-950 h-11 px-8 rounded-md"
|
|
51
|
-
href="https://github.com/analogjs/analog"
|
|
52
|
-
>Star on GitHub</a
|
|
53
|
-
>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
</section>
|
|
57
|
-
<section id="trpc-demo" class="py-8 md:py-12 lg:py-24">
|
|
58
|
-
<div
|
|
59
|
-
class="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center"
|
|
60
|
-
>
|
|
61
|
-
<h2 class="text-[#DD0031] font-medium text-3xl leading-[1.1]">
|
|
62
|
-
Leave a note
|
|
63
|
-
</h2>
|
|
64
|
-
<p
|
|
65
|
-
class="max-w-[85%] leading-normal sm:text-lg sm:leading-7"
|
|
66
|
-
>
|
|
67
|
-
This is an example of how you can use tRPC to superpower your
|
|
68
|
-
client-server interaction.
|
|
69
|
-
</p>
|
|
70
|
-
</div>
|
|
71
|
-
<form
|
|
72
|
-
class="mt-8 pb-2 flex items-center"
|
|
73
|
-
#f="ngForm"
|
|
74
|
-
(ngSubmit)="addNote(f)"
|
|
75
|
-
>
|
|
76
|
-
<label class="sr-only" for="newNote"> Note </label>
|
|
77
|
-
<input
|
|
78
|
-
required
|
|
79
|
-
autocomplete="off"
|
|
80
|
-
name="newNote"
|
|
81
|
-
[(ngModel)]="newNote"
|
|
82
|
-
class="w-full inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-input hover:text-zinc-950 h-11 px-2 rounded-md"
|
|
83
|
-
/>
|
|
84
|
-
<button
|
|
85
|
-
class="ml-2 inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-input hover:bg-zinc-100 hover:text-zinc-950 h-11 px-8 rounded-md"
|
|
86
|
-
>
|
|
87
|
-
+
|
|
88
|
-
</button>
|
|
89
|
-
</form>
|
|
90
|
-
<div class="mt-4" *ngIf="notes$ | async as notes; else loading">
|
|
91
|
-
<div
|
|
92
|
-
class="note mb-4 p-4 font-normal border border-input rounded-md"
|
|
93
|
-
*ngFor="let note of notes; trackBy: noteTrackBy; let i = index"
|
|
94
|
-
>
|
|
95
|
-
<div class="flex items-center justify-between">
|
|
96
|
-
<p class="text-sm text-zinc-400">{{ note.createdAt | date }}</p>
|
|
97
|
-
<button
|
|
98
|
-
[attr.data-testid]="'removeNoteAtIndexBtn' + i"
|
|
99
|
-
class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background hover:bg-zinc-100 hover:text-zinc-950 h-6 w-6 rounded-md"
|
|
100
|
-
(click)="removeNote(note.id)"
|
|
101
|
-
>
|
|
102
|
-
x
|
|
103
|
-
</button>
|
|
104
|
-
</div>
|
|
105
|
-
<p class="mb-4">{{ note.note }}</p>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<div
|
|
109
|
-
class="no-notes text-center rounded-xl p-20"
|
|
110
|
-
*ngIf="notes.length === 0"
|
|
111
|
-
>
|
|
112
|
-
<h3 class="text-xl font-medium">No notes yet!</h3>
|
|
113
|
-
<p class="text-zinc-400">
|
|
114
|
-
Add a new one and see them appear here...
|
|
115
|
-
</p>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<ng-template #loading>
|
|
119
|
-
<p class="text-center mt-4">Loading...</p>
|
|
120
|
-
</ng-template>
|
|
121
|
-
</section>
|
|
122
|
-
</main>
|
|
123
|
-
`,
|
|
124
|
-
})
|
|
125
|
-
export class AnalogWelcomeComponent {
|
|
126
|
-
private _trpc = injectTrpcClient();
|
|
127
|
-
public triggerRefresh$ = new Subject<void>();
|
|
128
|
-
public notes$ = this.triggerRefresh$.pipe(
|
|
129
|
-
switchMap(() => this._trpc.note.list.query()),
|
|
130
|
-
shareReplay(1)
|
|
131
|
-
);
|
|
132
|
-
public newNote = '';
|
|
133
|
-
|
|
134
|
-
constructor() {
|
|
135
|
-
void waitFor(this.notes$);
|
|
136
|
-
this.triggerRefresh$.next();
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
public noteTrackBy = (index: number, note: Note) => {
|
|
140
|
-
return note.id;
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
public addNote(form: NgForm) {
|
|
144
|
-
if (!form.valid) {
|
|
145
|
-
form.form.markAllAsTouched();
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
this._trpc.note.create
|
|
149
|
-
.mutate({ note: this.newNote })
|
|
150
|
-
.pipe(take(1))
|
|
151
|
-
.subscribe(() => this.triggerRefresh$.next());
|
|
152
|
-
this.newNote = '';
|
|
153
|
-
form.form.reset();
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
public removeNote(id: number) {
|
|
157
|
-
this._trpc.note.remove
|
|
158
|
-
.mutate({ id })
|
|
159
|
-
.pipe(take(1))
|
|
160
|
-
.subscribe(() => this.triggerRefresh$.next());
|
|
161
|
-
}
|
|
162
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.addTrpc = addTrpc;
|
|
4
|
-
const devkit_1 = require("@nx/devkit");
|
|
5
|
-
const node_path_1 = require("node:path");
|
|
6
|
-
const trpc_dependencies_1 = require("../versions/trpc-dependencies");
|
|
7
|
-
async function addTrpc(tree, projectRoot, nxVersion, options) {
|
|
8
|
-
const dependencies = (0, trpc_dependencies_1.getTrpcDependencies)(nxVersion);
|
|
9
|
-
(0, devkit_1.addDependenciesToPackageJson)(tree, dependencies, {});
|
|
10
|
-
const templateOptions = {
|
|
11
|
-
...options,
|
|
12
|
-
template: '',
|
|
13
|
-
};
|
|
14
|
-
(0, devkit_1.generateFiles)(tree, (0, node_path_1.join)(__dirname, '..', 'files', 'trpc'), projectRoot, templateOptions);
|
|
15
|
-
}
|
|
16
|
-
//# sourceMappingURL=add-trpc.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"add-trpc.js","sourceRoot":"","sources":["../../../../../../../../../../packages/nx-plugin/src/generators/app/lib/add-trpc.ts"],"names":[],"mappings":";;AAKA,0BAmBC;AAxBD,uCAA+E;AAC/E,yCAAiC;AAEjC,qEAAoE;AAE7D,KAAK,UAAU,OAAO,CAC3B,IAAU,EACV,WAAmB,EACnB,SAAiB,EACjB,OAA0B;IAE1B,MAAM,YAAY,GAAG,IAAA,uCAAmB,EAAC,SAAS,CAAC,CAAC;IACpD,IAAA,qCAA4B,EAAC,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;IAErD,MAAM,eAAe,GAAG;QACtB,GAAG,OAAO;QACV,QAAQ,EAAE,EAAE;KACb,CAAC;IACF,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,gBAAI,EAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EACtC,WAAW,EACX,eAAe,CAChB,CAAC;AACJ,CAAC"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
declare const tRPCDependencyKeys: readonly ["@analogjs/trpc", "@trpc/client", "@trpc/server", "superjson", "isomorphic-fetch", "zod"];
|
|
2
|
-
export type TrpcDependency = (typeof tRPCDependencyKeys)[number];
|
|
3
|
-
export declare const getTrpcDependencies: (nxVersion: string) => Record<TrpcDependency, string>;
|
|
4
|
-
export {};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getTrpcDependencies = void 0;
|
|
4
|
-
const semver_1 = require("semver");
|
|
5
|
-
const devkit_1 = require("@nx/devkit");
|
|
6
|
-
const versions_1 = require("./nx_17_X/versions");
|
|
7
|
-
const versions_2 = require("./nx_18_X/versions");
|
|
8
|
-
const tRPCDependencyKeys = [
|
|
9
|
-
'@analogjs/trpc',
|
|
10
|
-
'@trpc/client',
|
|
11
|
-
'@trpc/server',
|
|
12
|
-
'superjson',
|
|
13
|
-
'isomorphic-fetch',
|
|
14
|
-
'zod',
|
|
15
|
-
];
|
|
16
|
-
const getTrpcDependencies = (nxVersion) => {
|
|
17
|
-
const escapedNxVersion = (0, semver_1.clean)(nxVersion);
|
|
18
|
-
// fail out for versions <17.0.0
|
|
19
|
-
if ((0, semver_1.lt)(escapedNxVersion, '17.0.0')) {
|
|
20
|
-
throw new Error((0, devkit_1.stripIndents) `Nx 17.0.0 or newer is required to install Analog`);
|
|
21
|
-
}
|
|
22
|
-
// install 17.x deps for versions <18.0.0
|
|
23
|
-
if ((0, semver_1.lt)(escapedNxVersion, '18.0.0')) {
|
|
24
|
-
return {
|
|
25
|
-
'@analogjs/trpc': versions_1.V17_X_ANALOG_JS_TRPC,
|
|
26
|
-
'@trpc/client': versions_1.V17_X_TRPC_CLIENT,
|
|
27
|
-
'@trpc/server': versions_1.V17_X_TRPC_SERVER,
|
|
28
|
-
superjson: versions_1.V17_X_SUPERJSON,
|
|
29
|
-
'isomorphic-fetch': versions_1.V17_X_ISOMORPHIC_FETCH,
|
|
30
|
-
zod: versions_1.V17_X_ZOD,
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
// return latest deps for versions >= 18.0.0
|
|
34
|
-
return {
|
|
35
|
-
'@analogjs/trpc': versions_2.V18_X_ANALOG_JS_TRPC,
|
|
36
|
-
'@trpc/client': versions_2.V18_X_TRPC_CLIENT,
|
|
37
|
-
'@trpc/server': versions_2.V18_X_TRPC_SERVER,
|
|
38
|
-
superjson: versions_2.V18_X_SUPERJSON,
|
|
39
|
-
'isomorphic-fetch': versions_2.V18_X_ISOMORPHIC_FETCH,
|
|
40
|
-
zod: versions_2.V18_X_ZOD,
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
exports.getTrpcDependencies = getTrpcDependencies;
|
|
44
|
-
//# sourceMappingURL=trpc-dependencies.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"trpc-dependencies.js","sourceRoot":"","sources":["../../../../../../../../../../packages/nx-plugin/src/generators/app/versions/trpc-dependencies.ts"],"names":[],"mappings":";;;AAAA,mCAAmC;AACnC,uCAA0C;AAC1C,iDAO4B;AAC5B,iDAO4B;AAE5B,MAAM,kBAAkB,GAAG;IACzB,gBAAgB;IAChB,cAAc;IACd,cAAc;IACd,WAAW;IACX,kBAAkB;IAClB,KAAK;CACG,CAAC;AAGJ,MAAM,mBAAmB,GAAG,CACjC,SAAiB,EACe,EAAE;IAClC,MAAM,gBAAgB,GAAG,IAAA,cAAK,EAAC,SAAS,CAAC,CAAC;IAE1C,gCAAgC;IAChC,IAAI,IAAA,WAAE,EAAC,gBAAgB,EAAE,QAAQ,CAAC,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,IAAA,qBAAY,EAAA,kDAAkD,CAC/D,CAAC;IACJ,CAAC;IAED,yCAAyC;IACzC,IAAI,IAAA,WAAE,EAAC,gBAAgB,EAAE,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO;YACL,gBAAgB,EAAE,+BAAoB;YACtC,cAAc,EAAE,4BAAiB;YACjC,cAAc,EAAE,4BAAiB;YACjC,SAAS,EAAE,0BAAe;YAC1B,kBAAkB,EAAE,iCAAsB;YAC1C,GAAG,EAAE,oBAAS;SACf,CAAC;IACJ,CAAC;IAED,4CAA4C;IAC5C,OAAO;QACL,gBAAgB,EAAE,+BAAoB;QACtC,cAAc,EAAE,4BAAiB;QACjC,cAAc,EAAE,4BAAiB;QACjC,SAAS,EAAE,0BAAe;QAC1B,kBAAkB,EAAE,iCAAsB;QAC1C,GAAG,EAAE,oBAAS;KACf,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,mBAAmB,uBAiC9B"}
|