create-analog 3.0.0-alpha.94 → 3.0.0-alpha.96

package/index.js

@@ -10,7 +10,8 @@ import { fileURLToPath } from 'node:url';
 import prompts from 'prompts';
 
 /**
- * @typedef {'latest' | 'blog' | 'minimal'} Template
+ * @typedef {'latest' | 'blog' | 'minimal'} StarterTemplate
+ * @typedef {StarterTemplate | `angular-v${number}`} Template
  * @typedef {'prismjs' | 'shiki'} HighlighterId
  * @typedef {(value: string) => string} Colorizer
  *
@@ -25,8 +26,7 @@ import prompts from 'prompts';
  * @property {readonly Variant[]} variants
  *
  * @typedef {object} HighlighterConfig
- * @property {string} highlighter
- * @property {string} entryPoint
+ * @property {'prism' | 'shiki'} contentHighlighter
  * @property {Record<string, string>} dependencies
  *
  * @typedef {object} PackageJson
@@ -62,6 +62,7 @@ const DEFAULT_BLOG_HIGHLIGHTER = 'prismjs';
 
 /** @type {readonly Template[]} */
 const H3_TEMPLATES = ['latest', 'blog', 'minimal'];
+const VERSIONED_TEMPLATE = /^angular-v\d+$/;
 
 // Avoids autoconversion to number of the project name by defining that the args
 // non associated with an option ( _ ) needs to be parsed as a string. See #4606
@@ -97,16 +98,14 @@ const APPS = [
 /** @type {Readonly<Record<HighlighterId, HighlighterConfig>>} */
 const HIGHLIGHTERS = {
   prismjs: {
-    highlighter: 'withPrismHighlighter',
-    entryPoint: 'prism-highlighter',
+    contentHighlighter: 'prism',
     dependencies: {
       'marked-highlight': '^2.2.1',
       prismjs: '^1.29.0',
     },
   },
   shiki: {
-    highlighter: 'withShikiHighlighter',
-    entryPoint: 'shiki-highlighter',
+    contentHighlighter: 'shiki',
     dependencies: {
       marked: '^18.0.0',
       'marked-shiki': '^1.1.0',
@@ -532,18 +531,13 @@ function addPnpmDependencies(pkg, template) {
 function ensureSyntaxHighlighter(root, pkg, highlighter) {
   const config = HIGHLIGHTERS[highlighter];
 
-  replacePlaceholders(root, 'src/app/app.config.ts', {
-    __HIGHLIGHTER__: config.highlighter,
-    __HIGHLIGHTER_ENTRY_POINT__: config.entryPoint,
-  });
-
   pkg.dependencies ??= {};
   for (const [name, version] of Object.entries(config.dependencies)) {
     pkg.dependencies[name] = version;
   }
 
   replacePlaceholders(root, 'vite.config.ts', {
-    __CONTENT_HIGHLIGHTER__: highlighter,
+    __CONTENT_HIGHLIGHTER__: config.contentHighlighter,
   });
 }
 
@@ -631,7 +625,15 @@ function resolveTemplate(value) {
  * @returns {value is Template}
  */
 function isTemplate(value) {
-  return value === 'latest' || value === 'blog' || value === 'minimal';
+  if (value === 'latest' || value === 'blog' || value === 'minimal') {
+    return true;
+  }
+
+  return (
+    value !== undefined &&
+    VERSIONED_TEMPLATE.test(value) &&
+    fs.existsSync(path.join(CLI_DIR, `template-${value}`))
+  );
 }
 
 init().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-analog",
-  "version": "3.0.0-alpha.94",
+  "version": "3.0.0-alpha.96",
   "type": "module",
   "license": "MIT",
   "author": "Brandon Roberts",
@@ -10,10 +10,8 @@
   },
   "files": [
     "index.js",
-    "template-angular-v17",
-    "template-angular-v18",
-    "template-angular-v19",
     "template-angular-v20",
+    "template-angular-v21",
     "template-blog",
     "template-latest",
     "template-minimal",
@@ -41,9 +39,9 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@analogjs/platform": "3.0.0-alpha.94",
-    "@analogjs/vite-plugin-angular": "3.0.0-alpha.94",
-    "@analogjs/vite-plugin-nitro": "3.0.0-alpha.94",
+    "@analogjs/platform": "3.0.0-alpha.96",
+    "@analogjs/vite-plugin-angular": "3.0.0-alpha.96",
+    "@analogjs/vite-plugin-nitro": "3.0.0-alpha.96",
     "h3": "^1.15.11"
   },
   "publishConfig": {

package/template-angular-v20/package.json

@@ -16,8 +16,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^3.0.0-alpha.94",
-    "@analogjs/router": "^3.0.0-alpha.94",
+    "@analogjs/content": "^3.0.0-alpha.96",
+    "@analogjs/router": "^3.0.0-alpha.96",
     "@angular/animations": "^20.0.0",
     "@angular/common": "^20.0.0",
     "@angular/compiler": "^20.0.0",
@@ -37,9 +37,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^3.0.0-alpha.94",
-    "@analogjs/vite-plugin-angular": "^3.0.0-alpha.94",
-    "@analogjs/vitest-angular": "^3.0.0-alpha.94",
+    "@analogjs/platform": "^3.0.0-alpha.96",
+    "@analogjs/vite-plugin-angular": "^3.0.0-alpha.96",
+    "@analogjs/vitest-angular": "^3.0.0-alpha.96",
     "@angular-devkit/build-angular": "^20.0.0",
     "@angular/build": "^20.0.0",
     "@angular/cli": "^20.0.0",

package/{template-angular-v19 → template-angular-v21}/_gitignore

@@ -42,3 +42,6 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+# Environment files
+.env*

package/template-angular-v21/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "my-app",
+  "version": "0.0.0",
+  "type": "module",
+  "engines": {
+    "node": ">=20.19.1"
+  },
+  "scripts": {
+    "ng": "ng",
+    "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": "^3.0.0-alpha.96",
+    "@analogjs/router": "^3.0.0-alpha.96",
+    "@angular/animations": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-server": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "front-matter": "^4.0.2",
+    "marked": "^15.0.7",
+    "marked-gfm-heading-id": "^4.1.1",
+    "marked-highlight": "^2.2.1",
+    "marked-mangle": "^1.1.10",
+    "prismjs": "^1.29.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@analogjs/platform": "^3.0.0-alpha.96",
+    "@analogjs/vite-plugin-angular": "^3.0.0-alpha.96",
+    "@analogjs/vitest-angular": "^3.0.0-alpha.96",
+    "@angular/build": "^21.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "jsdom": "^22.0.0",
+    "typescript": "~5.9.0",
+    "vite": "^8.0.0",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.0"
+  },
+  "overrides": {
+    "vite": "$vite",
+    "vitest": "$vitest"
+  }
+}

package/{template-angular-v19 → template-angular-v21}/src/app/app.config.ts

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

package/{template-angular-v18/src/app/app.component.spec.ts → template-angular-v21/src/app/app.spec.ts}

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

package/{template-angular-v19/src/app/app.component.ts → template-angular-v21/src/app/app.ts}

@@ -14,4 +14,4 @@ import { RouterOutlet } from '@angular/router';
     }
   `,
 })
-export class AppComponent {}
+export class App {}

package/template-angular-v21/src/app/pages/analog-welcome.ts

@@ -0,0 +1,264 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-analog-welcome',
+  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);
+      }
+      .counter-section {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+      }
+
+      @media (min-width: 768px) {
+        .counter-section {
+          padding-top: 3rem;
+          padding-bottom: 3rem;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .counter-section {
+          padding-top: 6rem;
+          padding-bottom: 6rem;
+        }
+      }
+      .counter-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;
+      }
+      .counter-heading {
+        color: #dd0031;
+        line-height: 1.1;
+        font-weight: 500;
+        font-size: 1.875rem;
+        margin: 0;
+      }
+      .counter-description {
+        line-height: 1.5;
+        max-width: 85%;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .counter-description {
+          line-height: 1.75rem;
+          font-size: 1.125rem;
+        }
+      }
+      .count {
+        margin-left: 0.25rem;
+        font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+      }
+    `,
+  ],
+  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="counter-demo" class="section">
+        <div class="counter-container">
+          <h2 class="counter-heading">Counter</h2>
+          <p class="counter-description">
+            This is a simple interactive counter. Powered by Angular.
+          </p>
+          <button (click)="increment()" class="lightBtn">
+            Count: <span class="count">{{ count }}</span>
+          </button>
+        </div>
+      </section>
+    </main>
+  `,
+})
+export class AnalogWelcome {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { AnalogWelcome } from './analog-welcome';
+
+@Component({
+  selector: 'app-home',
+  imports: [AnalogWelcome],
+  template: `
+     <app-analog-welcome/>
+  `,
+})
+export default class Home {}

package/{template-angular-v19 → template-angular-v21}/src/main.server.ts

@@ -1,8 +1,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-angular-v19 → template-angular-v21}/src/main.ts

@@ -1,7 +1,6 @@
-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-angular-v21/src/server/routes/api/v1/hello.ts

@@ -0,0 +1,3 @@
+import { defineEventHandler } from 'h3';
+
+export default defineEventHandler(() => ({ message: 'Hello World' }));

package/template-angular-v21/src/styles.css

@@ -0,0 +1,4 @@
+html, body {
+  display: block;
+  height: 100%;
+}

package/template-angular-v21/src/test-setup.ts

@@ -0,0 +1,7 @@
+import '@angular/compiler';
+import '@analogjs/vitest-angular/setup-zone';
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
+
+setupTestBed({
+	zoneless: false
+});

package/{template-angular-v18 → template-angular-v21}/tsconfig.app.json

@@ -3,8 +3,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": [],
-    "rootDir": "./src"
+    "types": []
   },
   "files": ["src/main.ts", "src/main.server.ts"],
   "include": [

package/{template-angular-v18 → template-angular-v21}/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -10,8 +11,10 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
+    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "bundler",
+    "isolatedModules": true,
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
@@ -24,5 +27,8 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "references": [
+    { "path": "tsconfig.spec.json" }
+  ]
 }

package/{template-angular-v18 → template-angular-v21}/tsconfig.spec.json

@@ -3,10 +3,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "target": "es2016",
-    "types": ["node", "vitest/globals"],
-    "rootDir": "./src",
-    "composite": false
+    "target": "es2022",
+    "types": ["node", "vitest/globals"]
   },
   "files": ["src/test-setup.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]

package/{template-angular-v18 → template-angular-v21}/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 
 import { defineConfig } from 'vite';
-__TAILWIND_IMPORT__import analog from '@analogjs/platform';
+import analog from '@analogjs/platform';__TAILWIND_IMPORT__
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -12,7 +12,7 @@ export default defineConfig(({ mode }) => ({
     mainFields: ['module'],
   },
   plugins: [
-__TAILWIND_PLUGIN__    analog(),
+    analog(),__TAILWIND_PLUGIN__
   ],
   test: {
     globals: true,
@@ -21,7 +21,4 @@ __TAILWIND_PLUGIN__    analog(),
     include: ['**/*.spec.ts'],
     reporters: ['default'],
   },
-  define: {
-    'import.meta.vitest': mode !== 'production',
-  },
 }));