create-analog 2.0.0-alpha.9 → 2.0.0-beta.10

package/template-latest/src/app/pages/index.page.ts

@@ -1,55 +1,12 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
+
+import { AnalogWelcome } from './analog-welcome';
 
 @Component({
   selector: 'app-home',
-  standalone: true,
+  imports: [AnalogWelcome],
   template: `
-    <div>
-      <a href="https://analogjs.org/" target="_blank">
-        <img alt="Analog Logo" class="logo analog" src="/analog.svg" />
-      </a>
-    </div>
-
-    <h2>Analog</h2>
-
-    <h3>The fullstack meta-framework for Angular!</h3>
-
-    <div class="card">
-      <button type="button" (click)="increment()">Count {{ count() }}</button>
-    </div>
-
-    <p class="read-the-docs">
-      <a href="https://analogjs.org" target="_blank">Docs</a> |
-      <a href="https://github.com/analogjs/analog" target="_blank">GitHub</a> |
-      <a href="https://github.com/sponsors/brandonroberts" target="_blank">
-        Sponsor
-      </a>
-    </p>
-  `,
-  styles: `
-    .logo {
-      will-change: filter;
-    }
-
-    .logo:hover {
-      filter: drop-shadow(0 0 2em #646cffaa);
-    }
-
-    .read-the-docs > * {
-      color: #fff;
-    }
-
-    @media (prefers-color-scheme: light) {
-      .read-the-docs > * {
-        color: #213547;
-      }
-    }
+     <app-analog-welcome/>
   `,
 })
-export default class HomeComponent {
-  count = signal(0);
-
-  increment() {
-    this.count.update((count) => count + 1);
-  }
-}
+export default class Home {}

package/template-latest/src/main.server.ts

@@ -2,7 +2,7 @@ import 'zone.js/node';
 import '@angular/platform-server/init';
 import { render } from '@analogjs/router/server';
 
-__APP_COMPONENT_IMPORT__
+import { App } from './app/app';
 import { config } from './app/app.config.server';
 
-export default render(__APP_COMPONENT__, config);
+export default render(App, config);

package/template-latest/src/main.ts

@@ -1,7 +1,7 @@
 import 'zone.js';
 import { bootstrapApplication } from '@angular/platform-browser';
 
-__APP_COMPONENT_IMPORT__
+import { App } from './app/app';
 import { appConfig } from './app/app.config';
 
-bootstrapApplication(__APP_COMPONENT__, appConfig);
+bootstrapApplication(App, appConfig);

package/template-latest/src/styles.css

@@ -1,80 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
+html, body {
+  display: block;
+  height: 100%;
 }

package/template-latest/src/test-setup.ts

@@ -1,12 +1,13 @@
+import '@angular/compiler';
 import '@analogjs/vitest-angular/setup-zone';
 
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing';
 import { getTestBed } from '@angular/core/testing';
 
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  BrowserTestingModule,
+  platformBrowserTesting()
 );

package/template-latest/tsconfig.json

@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -28,5 +27,8 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "references": [
+    { "path": "tsconfig.spec.json" }
+  ]
 }

package/template-latest/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "target": "es2016",
+    "target": "es2022",
     "types": ["node", "vitest/globals"]
   },
   "files": ["src/test-setup.ts"],

package/template-latest/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 
 import { defineConfig } from 'vite';
-import analog from '@analogjs/platform';
+import analog from '@analogjs/platform';__TAILWIND_IMPORT__
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -11,7 +11,9 @@ export default defineConfig(({ mode }) => ({
   resolve: {
     mainFields: ['module'],
   },
-  plugins: [analog(__ANALOG_SFC_CONFIG__)],
+  plugins: [
+    analog(),__TAILWIND_PLUGIN__
+  ],
   test: {
     globals: true,
     environment: 'jsdom',

package/template-minimal/.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template", "analogjs.vscode-analog"]
+  "recommendations": ["angular.ng-template", "analogjs.vscode-analog", "vitest.explorer"]
 }

package/template-minimal/package.json

@@ -3,29 +3,29 @@
   "version": "0.0.0",
   "type": "module",
   "engines": {
-    "node": ">=18.19.1"
+    "node": ">=20.19.1"
   },
   "scripts": {
     "ng": "ng",
-    "dev": "ng serve",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "test": "vitest",
+    "preview": "node dist/analog/server/index.mjs"
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.9",
-    "@analogjs/router": "^2.0.0-alpha.9",
-    "@angular/animations": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@angular/platform-server": "^19.0.0",
-    "@angular/router": "^19.0.0",
+    "@analogjs/content": "^2.0.0-beta.10",
+    "@analogjs/router": "^2.0.0-beta.10",
+    "@angular/animations": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-server": "^20.0.0",
+    "@angular/router": "^20.0.0",
     "front-matter": "^4.0.2",
     "marked": "^15.0.7",
     "marked-gfm-heading-id": "^4.1.1",
@@ -37,17 +37,17 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.9",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.9",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.9",
-    "@angular-devkit/build-angular": "^19.0.0",
-    "@angular/build": "^19.0.0",
-    "@angular/cli": "^19.0.0",
-    "@angular/compiler-cli": "^19.0.0",
+    "@analogjs/platform": "^2.0.0-beta.10",
+    "@analogjs/vite-plugin-angular": "^2.0.0-beta.10",
+    "@analogjs/vitest-angular": "^2.0.0-beta.10",
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular/build": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
     "jsdom": "^22.0.0",
     "typescript": "~5.8.0",
-    "vite": "^6.0.0",
+    "vite": "^7.0.0",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^3.0.0"
+    "vitest": "^4.0.0"
   }
 }

package/template-minimal/src/app/app.config.ts

@@ -3,18 +3,23 @@ import {
   withFetch,
   withInterceptors,
 } from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZoneChangeDetection
+} from '@angular/core';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 import { provideFileRouter, requestContextInterceptor } from '@analogjs/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideFileRouter(),
     provideHttpClient(
       withFetch(),
       withInterceptors([requestContextInterceptor])
     ),
-    provideClientHydration(),
+    provideClientHydration(withEventReplay()),
   ],
 };

package/template-minimal/src/app/{app.component.ts → app.ts}

@@ -3,8 +3,7 @@ import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [RouterOutlet],
   template: `<router-outlet />`,
 })
-export class AppComponent {}
+export class App {}

package/template-minimal/src/app/pages/index.page.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  standalone: true,
   template: `
     <h2>Analog</h2>
 
@@ -35,4 +34,4 @@ import { Component } from '@angular/core';
     }
   `,
 })
-export default class HomeComponent {}
+export default class Home {}

package/template-minimal/src/main.server.ts

@@ -2,7 +2,7 @@ import 'zone.js/node';
 import '@angular/platform-server/init';
 import { render } from '@analogjs/router/server';
 
-__APP_COMPONENT_IMPORT__
+import { App } from './app/app';
 import { config } from './app/app.config.server';
 
-export default render(__APP_COMPONENT__, config);
+export default render(App, config);

package/template-minimal/src/main.ts

@@ -1,7 +1,7 @@
 import 'zone.js';
 import { bootstrapApplication } from '@angular/platform-browser';
 
-__APP_COMPONENT_IMPORT__
+import { App } from './app/app';
 import { appConfig } from './app/app.config';
 
-bootstrapApplication(__APP_COMPONENT__, appConfig);
+bootstrapApplication(App, appConfig);

package/template-minimal/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 
 import { defineConfig } from 'vite';
-import analog from '@analogjs/platform';
+import analog from '@analogjs/platform';__TAILWIND_IMPORT__
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -17,7 +17,7 @@ export default defineConfig(({ mode }) => ({
       static: true,
       prerender: {
         routes: [],
-      },__ANALOG_SFC_CONFIG__
-    }),
+      },
+    }),__TAILWIND_PLUGIN__
   ],
 }));

package/files/analog-env.d.ts

@@ -1,13 +0,0 @@
-declare module '*.analog' {
-  import { Type } from '@angular/core';
-
-  const cmp: Type<unknown>;
-  export default cmp;
-}
-
-declare module '*.ag' {
-  import { Type } from '@angular/core';
-
-  const cmp: Type<unknown>;
-  export default cmp;
-}

package/template-angular-v16/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "my-app",
-  "version": "0.0.0",
-  "type": "module",
-  "private": true,
-  "engines": {
-    "node": ">=18.13.0"
-  },
-  "scripts": {
-    "dev": "ng serve",
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch",
-    "test": "ng test"
-  },
-  "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.9",
-    "@analogjs/router": "^2.0.0-alpha.9",
-    "@angular/animations": "^16.2.0",
-    "@angular/common": "^16.2.0",
-    "@angular/compiler": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "@angular/forms": "^16.2.0",
-    "@angular/platform-browser": "^16.2.0",
-    "@angular/platform-browser-dynamic": "^16.2.0",
-    "@angular/platform-server": "^16.2.0",
-    "@angular/router": "^16.2.0",
-    "@nx/angular": "~18.0.0",
-    "front-matter": "^4.0.2",
-    "marked": "^15.0.7",
-    "marked-gfm-heading-id": "^4.1.1",
-    "marked-highlight": "^2.2.1",
-    "mermaid": "^10.2.4",
-    "prismjs": "^1.29.0",
-    "rxjs": "~7.5.6",
-    "tslib": "^2.4.0",
-    "zone.js": "~0.13.0"
-  },
-  "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.9",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.9",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.9",
-    "@angular-devkit/build-angular": "^16.2.0",
-    "@angular/cli": "^16.2.0",
-    "@angular/compiler-cli": "^16.2.0",
-    "@nx/vite": "~18.0.0",
-    "nx": "~18.0.0",
-    "jsdom": "^22.1.0",
-    "typescript": "~5.0.2",
-    "vite": "^5.0.0",
-    "vitest": "^1.3.1"
-  }
-}

package/template-angular-v16/src/app/app.component.spec.ts

@@ -1,17 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-});

package/template-angular-v16/src/app/app.component.ts

@@ -1,20 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
-  template: ` <router-outlet></router-outlet> `,
-  styles: [
-    `
-      :host {
-        max-width: 1280px;
-        margin: 0 auto;
-        padding: 2rem;
-        text-align: center;
-      }
-    `,
-  ],
-})
-export class AppComponent {}

package/template-angular-v16/src/app/app.config.ts

@@ -1,12 +0,0 @@
-import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
-import { provideFileRouter } from '@analogjs/router';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideFileRouter(),
-    provideHttpClient(),
-    provideClientHydration(),
-  ],
-};

package/template-angular-v16/src/app/pages/index.page.ts

@@ -1,49 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  standalone: true,
-  template: `
-    <div>
-      <a href="https://analogjs.org/" target="_blank">
-        <img alt="Analog Logo" class="logo analog" src="/analog.svg" />
-      </a>
-    </div>
-
-    <h2>Analog</h2>
-
-    <h3>The fullstack meta-framework for Angular!</h3>
-
-    <div class="card">
-      <button type="button" (click)="increment()">Count {{ count }}</button>
-    </div>
-
-    <p class="read-the-docs">
-      For guides on how to customize this project, visit the
-      <a href="https://analogjs.org" target="_blank">Analog documentation</a>
-    </p>
-  `,
-  styles: [
-    `
-      .logo {
-        will-change: filter;
-      }
-      .logo:hover {
-        filter: drop-shadow(0 0 2em #646cffaa);
-      }
-      .logo.angular:hover {
-        filter: drop-shadow(0 0 2em #42b883aa);
-      }
-      .read-the-docs {
-        color: #888;
-      }
-    `,
-  ],
-})
-export default class HomeComponent {
-  count = 0;
-
-  increment() {
-    this.count++;
-  }
-}

package/template-angular-v16/src/main.server.ts

@@ -1,26 +0,0 @@
-import 'zone.js/node';
-import '@angular/platform-server/init';
-
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-
-import { config } from './app/app.config.server';
-import { AppComponent } from './app/app.component';
-
-if (import.meta.env.PROD) {
-  enableProdMode();
-}
-
-export function bootstrap() {
-  return bootstrapApplication(AppComponent, config);
-}
-
-export default async function render(url: string, document: string) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-  });
-
-  return html;
-}

package/template-angular-v18/src/app/app-root.ag

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { RouterOutlet } from '@angular/router' with { analog: 'imports' };
-</script>
-
-<template>
-  <router-outlet />
-</template>
-
-<style>
-  :host {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
-  }
-</style>

package/template-angular-v18/src/app/app-root.spec.ts

@@ -1,20 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
-import { provideLocationMocks } from '@angular/common/testing';
-
-import App from './app-root.ag';
-
-describe('App', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [App],
-      providers: [provideRouter([]), provideLocationMocks()],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-});