@analogjs/platform 1.4.0 → 1.5.0-beta.1

package/src/lib/nx-plugin/src/generators/app/files/welcome-components/css-trpc/src/app/pages/analog-welcome.component.ts__template__

@@ -1,439 +0,0 @@
-import { Component } from '@angular/core';
-import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
-import { FormsModule, NgForm } from '@angular/forms';
-import { waitFor } from '@analogjs/trpc';
-import { shareReplay, Subject, switchMap, take } from 'rxjs';
-import { injectTrpcClient } from '../../trpc-client';
-import { Note } from '../../note';
-
-@Component({
-  selector: '<%= fileName %>-analog-welcome',
-  standalone: true,
-  imports: [AsyncPipe, FormsModule, NgFor, DatePipe, NgIf],
-  styles: [
-    `
-      :host {
-        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-          'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-          'Noto Color Emoji';
-        display: flex;
-        padding: 2rem 1rem 8rem;
-        flex-direction: column;
-        background: rgb(250 250 250);
-        height: 100%;
-      }
-      a {
-        color: inherit;
-        text-decoration: inherit;
-      }
-      .main {
-        margin: 0 auto;
-        flex: 1 1 0;
-      }
-      .intro-section {
-        padding-top: 1.5rem;
-        padding-bottom: 2rem;
-      }
-      .intro-section > * + * {
-        margin-top: 1.5rem;
-      }
-      @media (min-width: 768px) {
-        .intro-section {
-          padding-top: 2.5rem;
-          padding-bottom: 3rem;
-        }
-      }
-      @media (min-width: 1024px) {
-        .intro-section {
-          padding-top: 8rem;
-          padding-bottom: 8rem;
-        }
-      }
-      .intro-container {
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-        gap: 1rem;
-        align-items: center;
-        max-width: 64rem;
-      }
-      .intro-logo {
-        height: 3rem;
-        width: 3rem;
-      }
-      .intro-badge {
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        font-weight: 500;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        padding: 0.375rem 1rem;
-        background-color: rgb(228 228 231);
-        border-radius: 1rem;
-      }
-      .intro-heading {
-        margin: 0;
-        font-weight: 500;
-      }
-
-      @media (min-width: 640px) {
-        .intro-heading {
-          font-size: 3rem;
-          line-height: 1;
-        }
-      }
-      @media (min-width: 768px) {
-        .intro-heading {
-          font-size: 3.75rem;
-          line-height: 1;
-        }
-      }
-      @media (min-width: 1024px) {
-        .intro-heading {
-          font-size: 4.5rem;
-          line-height: 1;
-        }
-      }
-      .intro-analog {
-        color: #dd0031;
-      }
-      .intro-description {
-        line-height: 1.5;
-        max-width: 42rem;
-        margin: 0;
-      }
-
-      @media (min-width: 640px) {
-        .intro-description {
-          line-height: 2rem;
-          font-size: 1.25rem;
-        }
-      }
-      .btn-container > * + * {
-        margin-left: 1rem;
-      }
-      .darkBtn {
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        color: rgb(250 250 250);
-        font-weight: 500;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        padding-left: 2rem;
-        padding-right: 2rem;
-        background-color: rgb(9 9 11);
-        border-radius: 0.375rem;
-        justify-content: center;
-        align-items: center;
-        height: 2.75rem;
-        cursor: pointer;
-        display: inline-flex;
-      }
-      .darkBtn:hover {
-        background-color: rgb(9 9 11 / 0.9);
-      }
-      .lightBtn {
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        color: rgb(24, 24, 27);
-        background: rgb(250 250 250);
-        font-weight: 500;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        padding-left: 2rem;
-        padding-right: 2rem;
-        border-radius: 0.375rem;
-        border: 1px solid rgb(229, 231, 235);
-        justify-content: center;
-        align-items: center;
-        height: 2.75rem;
-        display: inline-flex;
-        cursor: pointer;
-      }
-      .lightBtn:hover {
-        background-color: rgb(244 244 245);
-      }
-      .trpc-section {
-        padding-top: 2rem;
-        padding-bottom: 2rem;
-      }
-
-      @media (min-width: 768px) {
-        .trpc-section {
-          padding-top: 3rem;
-          padding-bottom: 3rem;
-        }
-      }
-
-      @media (min-width: 1024px) {
-        .trpc-section {
-          padding-top: 6rem;
-          padding-bottom: 6rem;
-        }
-      }
-      .trpc-container {
-        text-align: center;
-        gap: 1rem;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        max-width: 58rem;
-        display: flex;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      .trpc-heading {
-        color: #dd0031;
-        line-height: 1.1;
-        font-weight: 500;
-        font-size: 1.875rem;
-        margin: 0;
-      }
-      .trpc-description {
-        line-height: 1.5;
-        max-width: 85%;
-        margin: 0;
-      }
-
-      @media (min-width: 640px) {
-        .trpc-description {
-          line-height: 1.75rem;
-          font-size: 1.125rem;
-        }
-      }
-      .trpc-form {
-        padding-bottom: 0.5rem;
-        align-items: center;
-        display: flex;
-        margin-top: 2rem;
-        gap: 0.5rem;
-      }
-      .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-      }
-      .trpcInput {
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        font-weight: 500;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        border-radius: 0.375rem;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 2.5rem;
-        font-family: inherit;
-        font-feature-settings: inherit;
-        font-variation-settings: inherit;
-        color: inherit;
-        margin: 0;
-        border: 1px solid rgb(229, 231, 235);
-      }
-
-      .notes {
-        margin-top: 1rem;
-      }
-      .note {
-        padding: 1rem;
-        margin-bottom: 1rem;
-        border-radius: 0.375rem;
-        font-weight: 400;
-        border: 1px solid rgb(229, 231, 235);
-      }
-      .note-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .note-date {
-        font-size: 0.875rem;
-        margin: 0;
-        line-height: 1.25rem;
-        color: rgb(161, 161, 170);
-      }
-      .note-note {
-        margin: 0 0 2rem 0;
-      }
-      .noteDeleteBtn {
-        transition-property: color, background-color, border-color,
-          text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        font-weight: 500;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        border-radius: 0.375rem;
-        justify-content: center;
-        align-items: center;
-        width: 1.5rem;
-        height: 1.5rem;
-        display: inline-flex;
-        cursor: pointer;
-        background: none;
-        border: 1px solid transparent;
-      }
-      .noteDeleteBtn:hover {
-        background-color: rgb(244 244 245);
-      }
-
-      .no-notes {
-        padding: 5rem;
-        border-radius: 0.75rem;
-        text-align: center;
-      }
-      .no-notes-headline {
-        font-size: 1.25rem;
-        line-height: 1.75rem;
-        font-weight: 500;
-        margin: 0;
-      }
-      .no-notes-desc {
-        color: rgb(161 161 170);
-        margin: 0;
-      }
-
-      .loading-text {
-        margin-top: 1rem;
-        text-align: center;
-      }
-    `,
-  ],
-  template: `
-    <main class="main">
-      <section class="intro-section">
-        <div class="intro-container">
-          <img
-            class="intro-logo"
-            src="https://analogjs.org/img/logos/analog-logo.svg"
-            alt="AnalogJs logo. Two red triangles and a white analog wave in front"
-          />
-          <a
-            class="intro-badge"
-            target="_blank"
-            href="https://twitter.com/analogjs"
-            >Follow along on Twitter</a
-          >
-          <h1 class="intro-heading">
-            <span class="intro-analog">Analog.</span> The fullstack Angular
-            meta-framework
-          </h1>
-          <p class="intro-description">
-            Analog is for building applications and websites with Angular.
-            <br />Powered by Vite.
-          </p>
-          <div class="btn-container">
-            <a class="darkBtn" href="https://analogjs.org">Read the docs</a>
-            <a
-              target="_blank"
-              rel="noreferrer"
-              class="lightBtn"
-              href="https://github.com/analogjs/analog"
-              >Star on GitHub</a
-            >
-          </div>
-        </div>
-      </section>
-      <section id="trpc-demo" class="trpc-section">
-        <div class="trpc-container">
-          <h2 class="trpc-heading">Leave a note</h2>
-          <p class="trpc-description">
-            This is an example of how you can use tRPC to superpower your
-            client-server interaction.
-          </p>
-        </div>
-        <form class="trpc-form" #f="ngForm" (ngSubmit)="addNote(f)">
-          <label class="sr-only" for="newNote"> Note </label>
-          <input
-            required
-            autocomplete="off"
-            name="newNote"
-            [(ngModel)]="newNote"
-            class="trpcInput"
-          />
-          <button class="lightBtn">+</button>
-        </form>
-        <div class="notes" *ngIf="notes$ | async as notes; else loading">
-          <div
-            class="note"
-            *ngFor="let note of notes; trackBy: noteTrackBy; let i = index"
-          >
-            <div class="note-head">
-              <p class="note-date">{{ note.createdAt | date }}</p>
-              <button class="noteDeleteBtn" (click)="removeNote(note.id)">
-                x
-              </button>
-            </div>
-            <p class="note-note">{{ note.note }}</p>
-          </div>
-
-          <div class="no-notes " *ngIf="notes.length === 0">
-            <h3 class="no-notes-headline">No notes yet!</h3>
-            <p class="no-notes-desc">
-              Add a new one and see them appear here...
-            </p>
-          </div>
-        </div>
-        <ng-template #loading>
-          <p class="loading-text">Loading...</p>
-        </ng-template>
-      </section>
-    </main>
-  `,
-})
-export class AnalogWelcomeComponent {
-   private _trpc = injectTrpcClient();
-  public triggerRefresh$ = new Subject<void>();
-  public notes$ = this.triggerRefresh$.pipe(
-    switchMap(() => this._trpc.note.list.query()),
-    shareReplay(1)
-  );
-  public newNote = '';
-
-  constructor() {
-    void waitFor(this.notes$);
-    this.triggerRefresh$.next();
-  }
-
-  public noteTrackBy = (index: number, note: Note) => {
-    return note.id;
-  };
-
-  public addNote(form: NgForm) {
-    if (!form.valid) {
-      form.form.markAllAsTouched();
-      return;
-    }
-    this._trpc.note.create
-      .mutate({ note: this.newNote })
-      .pipe(take(1))
-      .subscribe(() => this.triggerRefresh$.next());
-    this.newNote = '';
-    form.form.reset();
-  }
-
-  public removeNote(id: number) {
-    this._trpc.note.remove
-      .mutate({ id })
-      .pipe(take(1))
-      .subscribe(() => this.triggerRefresh$.next());
-  }
-}

package/src/lib/nx-plugin/src/generators/app/files/welcome-components/tailwind/src/app/pages/analog-welcome.component.ts__template__

@@ -1,76 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: '<%= fileName %>-analog-welcome',
-  standalone: true,
-  host: {
-    class:
-      'flex min-h-screen flex-col text-zinc-900 bg-zinc-50 px-4 pt-8 pb-32',
-  },
-  template: `
-    <main class="flex-1 mx-auto">
-        <section class="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
-        <div
-          class="flex max-w-[64rem] flex-col items-center gap-4 text-center"
-        >
-          <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"/>
-          <a
-            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"
-            target="_blank"
-            href="https://twitter.com/analogjs"
-            >Follow along on Twitter</a
-          >
-          <h1
-            class="font-heading font-medium text-3xl sm:text-5xl md:text-6xl lg:text-7xl"
-          >
-            <span class="text-[#DD0031]">Analog.</span> The fullstack Angular
-            meta-framework
-          </h1>
-          <p
-            class="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8"
-          >
-            Analog is for building applications and websites with Angular.
-            <br />Powered by Vite.
-          </p>
-          <div class="space-x-4">
-            <a
-              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"
-              href="https://analogjs.org"
-              >Read the docs</a
-            ><a
-              target="_blank"
-              rel="noreferrer"
-              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"
-              href="https://github.com/analogjs/analog"
-              >Star on GitHub</a
-            >
-          </div>
-        </div>
-      </section>
-      <section id="counter-demo" class="container py-8 md:py-12 lg:py-24">
-        <div
-          class="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center"
-        >
-          <h2 class="text-[#DD0031] font-medium text-3xl leading-[1.1]">Counter</h2>
-          <p
-            class="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7"
-          >
-            This is a simple interactive counter. Powered by Angular.
-          </p>
-          <button
-            (click)="increment()"
-             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"
-          >
-            Count: <span class="ml-1 font-mono">{{ count }}</span>
-          </button>
-        </div>
-      </section>
-    </main>
-  `,
-})
-export class AnalogWelcomeComponent {
-  public count = 0;
-  public increment() {
-    this.count++;
-  }
-}

package/src/lib/nx-plugin/src/generators/app/files/welcome-components/tailwind-trpc/src/app/pages/analog-welcome.component.ts__template__

@@ -1,162 +0,0 @@
-import { Component } from '@angular/core';
-import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
-import { FormsModule, NgForm } from '@angular/forms';
-import { shareReplay, Subject, switchMap, take } from 'rxjs';
-import { waitFor } from '@analogjs/trpc';
-import { injectTrpcClient } from '../../trpc-client';
-import { Note } from '../../note';
-
-@Component({
-  selector: '<%= fileName %>-analog-welcome',
-  standalone: true,
-  imports: [AsyncPipe, FormsModule, NgFor, DatePipe, NgIf],
-  host: {
-    class:
-      'flex min-h-screen flex-col text-zinc-900 bg-zinc-50 px-4 pt-8 pb-32',
-  },
-  template: `
-    <main class="flex-1 mx-auto">
-      <section class="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
-        <div
-          class="flex max-w-[64rem] flex-col items-center gap-4 text-center"
-        >
-          <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"/>
-          <a
-            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"
-            target="_blank"
-            href="https://twitter.com/analogjs"
-            >Follow along on Twitter</a
-          >
-          <h1
-            class="font-heading font-medium text-3xl sm:text-5xl md:text-6xl lg:text-7xl"
-          >
-            <span class="text-[#DD0031]">Analog.</span> The fullstack Angular
-            meta-framework
-          </h1>
-          <p
-            class="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8"
-          >
-            Analog is for building applications and websites with Angular.
-            <br />Powered by Vite.
-          </p>
-          <div class="space-x-4">
-            <a
-              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"
-              href="https://analogjs.org"
-              >Read the docs</a
-            ><a
-              target="_blank"
-              rel="noreferrer"
-              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"
-              href="https://github.com/analogjs/analog"
-              >Star on GitHub</a
-            >
-          </div>
-        </div>
-      </section>
-      <section id="trpc-demo" class="py-8 md:py-12 lg:py-24">
-        <div
-          class="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center"
-        >
-          <h2 class="text-[#DD0031] font-medium text-3xl leading-[1.1]">
-            Leave a note
-          </h2>
-          <p
-            class="max-w-[85%] leading-normal sm:text-lg sm:leading-7"
-          >
-            This is an example of how you can use tRPC to superpower your
-            client-server interaction.
-          </p>
-        </div>
-        <form
-          class="mt-8 pb-2 flex items-center"
-          #f="ngForm"
-          (ngSubmit)="addNote(f)"
-        >
-          <label class="sr-only" for="newNote"> Note </label>
-          <input
-            required
-            autocomplete="off"
-            name="newNote"
-            [(ngModel)]="newNote"
-            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"
-          />
-          <button
-            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"
-          >
-            +
-          </button>
-        </form>
-        <div class="mt-4" *ngIf="notes$ | async as notes; else loading">
-          <div
-            class="note mb-4 p-4 font-normal border border-input rounded-md"
-            *ngFor="let note of notes; trackBy: noteTrackBy; let i = index"
-          >
-            <div class="flex items-center justify-between">
-              <p class="text-sm text-zinc-400">{{ note.createdAt | date }}</p>
-              <button
-                [attr.data-testid]="'removeNoteAtIndexBtn' + i"
-                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"
-                (click)="removeNote(note.id)"
-              >
-                x
-              </button>
-            </div>
-            <p class="mb-4">{{ note.note }}</p>
-          </div>
-
-          <div
-            class="no-notes text-center rounded-xl p-20"
-            *ngIf="notes.length === 0"
-          >
-            <h3 class="text-xl font-medium">No notes yet!</h3>
-            <p class="text-zinc-400">
-              Add a new one and see them appear here...
-            </p>
-          </div>
-        </div>
-        <ng-template #loading>
-          <p class="text-center mt-4">Loading...</p>
-        </ng-template>
-      </section>
-    </main>
-  `,
-})
-export class AnalogWelcomeComponent {
-  private _trpc = injectTrpcClient();
-  public triggerRefresh$ = new Subject<void>();
-  public notes$ = this.triggerRefresh$.pipe(
-    switchMap(() => this._trpc.note.list.query()),
-    shareReplay(1)
-  );
-  public newNote = '';
-
-  constructor() {
-    void waitFor(this.notes$);
-    this.triggerRefresh$.next();
-  }
-
-  public noteTrackBy = (index: number, note: Note) => {
-    return note.id;
-  };
-
-  public addNote(form: NgForm) {
-    if (!form.valid) {
-      form.form.markAllAsTouched();
-      return;
-    }
-    this._trpc.note.create
-      .mutate({ note: this.newNote })
-      .pipe(take(1))
-      .subscribe(() => this.triggerRefresh$.next());
-    this.newNote = '';
-    form.form.reset();
-  }
-
-  public removeNote(id: number) {
-    this._trpc.note.remove
-      .mutate({ id })
-      .pipe(take(1))
-      .subscribe(() => this.triggerRefresh$.next());
-  }
-}

package/src/lib/nx-plugin/src/generators/app/generator.d.ts

@@ -1,13 +0,0 @@
-import { names, Tree } from '@nx/devkit';
-import { AnalogNxApplicationGeneratorOptions } from './schema';
-export interface NormalizedOptions extends AnalogNxApplicationGeneratorOptions, ReturnType<typeof names> {
-    projectName: string;
-    projectRoot: string;
-    projectDirectory: string;
-    parsedTags: string[];
-    offsetFromRoot: string;
-    appsDir: string;
-    nxPackageNamespace: string;
-}
-export declare function appGenerator(tree: Tree, options: AnalogNxApplicationGeneratorOptions): Promise<() => void>;
-export default appGenerator;