create-analog 1.8.2 → 1.9.0-beta.10

package/files/analog-env.d.ts

@@ -0,0 +1,13 @@
+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/files/styles.css

@@ -26,6 +26,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -54,9 +55,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -75,9 +78,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }

package/files/tailwind.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./index.html', './src/**/*.{html,ts,md,analog,ag}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

package/index.js

@@ -4,8 +4,8 @@
 import { blue, green, red, reset, yellow } from 'kolorist';
 import minimist from 'minimist';
 import { execSync } from 'node:child_process';
-import fs, { readdirSync } from 'node:fs';
-import path, { join } from 'node:path';
+import fs from 'node:fs';
+import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import prompts from 'prompts';
 
@@ -64,7 +64,8 @@ const renameFiles = {
 async function init() {
   let targetDir = formatTargetDir(argv._[0]);
   let template = argv.template || argv.t;
-  let skipTailwind = argv.skipTailwind || false;
+  let skipTailwind = fromBoolArg(argv.skipTailwind);
+  let useAnalogSFC = fromBoolArg(argv.analogSFC);
 
   const defaultTargetDir = 'analog-project';
   const getProjectName = () =>
@@ -135,7 +136,12 @@ async function init() {
           initial: 1,
         },
         {
-          type: skipTailwind ? null : 'confirm',
+          type: useAnalogSFC === undefined ? 'confirm' : null,
+          name: 'analogSFC',
+          message: 'Would you like to use Analog SFCs?',
+        },
+        {
+          type: skipTailwind === undefined ? 'confirm' : null,
           name: 'tailwind',
           message: 'Would you like to add Tailwind to your project?',
         },
@@ -157,6 +163,7 @@ async function init() {
     overwrite,
     packageName,
     variant,
+    analogSFC,
     tailwind,
     syntaxHighlighter,
   } = result;
@@ -173,7 +180,8 @@ async function init() {
   template = variant || framework || template;
   // determine syntax highlighter
   let highlighter = syntaxHighlighter ?? (template === 'blog' ? 'prism' : null);
-  skipTailwind = !tailwind || skipTailwind;
+  skipTailwind = skipTailwind ?? !tailwind;
+  useAnalogSFC = useAnalogSFC ?? analogSFC;
 
   console.log(`\nScaffolding project in ${root}...`);
 
@@ -221,13 +229,22 @@ async function init() {
     ensureSyntaxHighlighter(root, pkg, highlighter);
   }
 
-  if (!skipTailwind) addTailwindDevDependencies(pkg);
+  if (!skipTailwind) {
+    addTailwindDevDependencies(pkg);
+  }
+
   if (pkgManager === 'yarn') {
     addYarnDevDependencies(pkg, template);
   }
 
+  pkg.dependencies = sortObjectKeys(pkg.dependencies);
+  pkg.devDependencies = sortObjectKeys(pkg.devDependencies);
+
   write('package.json', JSON.stringify(pkg, null, 2));
 
+  setProjectTitle(root, getProjectName());
+  setComponentFormat(root, filesDir, write, template, useAnalogSFC);
+
   console.log(`\nInitializing git repository:`);
   execSync(`git init ${targetDir} && cd ${targetDir} && git add .`);
 
@@ -362,8 +379,8 @@ function addPostCssConfig(write, filesDir) {
 
 function addTailwindConfig(write, filesDir) {
   write(
-    'tailwind.config.cjs',
-    fs.readFileSync(path.join(filesDir, `tailwind.config.cjs`), 'utf-8')
+    'tailwind.config.ts',
+    fs.readFileSync(path.join(filesDir, `tailwind.config.ts`), 'utf-8')
   );
 }
 
@@ -389,31 +406,104 @@ function addYarnDevDependencies(pkg, template) {
 }
 
 function ensureSyntaxHighlighter(root, pkg, highlighter) {
-  const appConfigPath = path.join(root, 'src/app/app.config.ts');
-  const appConfigContent = fs.readFileSync(appConfigPath, 'utf-8');
-
-  fs.writeFileSync(
-    appConfigPath,
-    appConfigContent
-      .replace(/__HIGHLIGHTER__/g, HIGHLIGHTERS[highlighter].highlighter)
-      .replace(
-        /__HIGHLIGHTER_ENTRY_POINT__/g,
-        HIGHLIGHTERS[highlighter].entryPoint
-      )
-  );
+  replacePlaceholders(root, 'src/app/app.config.ts', {
+    __HIGHLIGHTER__: HIGHLIGHTERS[highlighter].highlighter,
+    __HIGHLIGHTER_ENTRY_POINT__: HIGHLIGHTERS[highlighter].entryPoint,
+  });
 
   const dependencies = HIGHLIGHTERS[highlighter].dependencies;
   for (const [name, version] of Object.entries(dependencies)) {
     pkg.dependencies[name] = version;
   }
 
-  const viteConfigPath = path.join(root, 'vite.config.ts');
-  const viteConfigContent = fs.readFileSync(viteConfigPath, 'utf-8');
+  replacePlaceholders(root, 'vite.config.ts', {
+    __CONTENT_HIGHLIGHTER__: highlighter,
+  });
+}
 
-  fs.writeFileSync(
-    viteConfigPath,
-    viteConfigContent.replace(/__CONTENT_HIGHLIGHTER__/g, highlighter)
-  );
+function sortObjectKeys(obj) {
+  return Object.keys(obj)
+    .sort()
+    .reduce((result, key) => {
+      result[key] = obj[key];
+      return result;
+    }, {});
+}
+
+function setProjectTitle(root, title) {
+  replacePlaceholders(root, ['index.html', 'README.md'], {
+    __PROJECT_TITLE__: title,
+  });
+}
+
+function setComponentFormat(root, filesDir, write, template, useAnalogSFC) {
+  const getSFCConfig = () => {
+    const sfcConfigOption =
+      'vite: { experimental: { supportAnalogFormat: true } }';
+
+    return template === 'latest'
+      ? `{ ${sfcConfigOption} }`
+      : `\n      ${sfcConfigOption},`;
+  };
+
+  replacePlaceholders(root, 'vite.config.ts', {
+    __ANALOG_SFC_CONFIG__: useAnalogSFC ? getSFCConfig() : '',
+  });
+  replacePlaceholders(root, ['src/main.ts', 'src/main.server.ts'], {
+    __APP_COMPONENT__: useAnalogSFC ? 'App' : 'AppComponent',
+    __APP_COMPONENT_IMPORT__: useAnalogSFC
+      ? "import App from './app/app-root.ag';"
+      : "import { AppComponent } from './app/app.component';",
+  });
+
+  const cmpForDelete = useAnalogSFC ? 'app.component' : 'app-root';
+  const deleteExt = useAnalogSFC ? 'ts' : 'ag';
+  deleteFiles(root, [
+    useAnalogSFC ? `src/app/${cmpForDelete}.ts` : `src/app/${cmpForDelete}.ag`,
+    template === 'blog'
+      ? [
+          `src/app/pages/blog/index.page.${deleteExt}`,
+          `src/app/pages/blog/[slug].page.${deleteExt}`,
+        ]
+      : `src/app/pages/index.page.${deleteExt}`,
+    template !== 'minimal' && `src/app/${cmpForDelete}.spec.ts`,
+  ]);
+
+  if (useAnalogSFC) {
+    write(
+      'src/analog-env.d.ts',
+      fs.readFileSync(path.join(filesDir, 'analog-env.d.ts'), 'utf-8')
+    );
+  }
+}
+
+function replacePlaceholders(root, files, config) {
+  for (const file of toFlatArray(files)) {
+    const filePath = path.join(root, file);
+    const fileContent = fs.readFileSync(filePath, 'utf-8');
+    const newFileContent = Object.keys(config).reduce(
+      (content, placeholder) =>
+        content.replace(RegExp(placeholder, 'g'), config[placeholder]),
+      fileContent
+    );
+    fs.writeFileSync(filePath, newFileContent);
+  }
+}
+
+function deleteFiles(root, files) {
+  for (const file of toFlatArray(files)) {
+    fs.unlinkSync(path.join(root, file));
+  }
+}
+
+function toFlatArray(value) {
+  return (Array.isArray(value) ? value : [value]).filter(Boolean).flat();
+}
+
+function fromBoolArg(arg) {
+  return ['boolean', 'undefined'].includes(typeof arg)
+    ? arg
+    : ['', 'true'].includes(arg);
 }
 
 init().catch((e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-analog",
-  "version": "1.8.2",
+  "version": "1.9.0-beta.10",
   "type": "module",
   "license": "MIT",
   "author": "Brandon Roberts",

package/template-angular-v16/package.json

@@ -15,8 +15,8 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^1.8.2",
-    "@analogjs/router": "^1.8.2",
+    "@analogjs/content": "^1.9.0-beta.10",
+    "@analogjs/router": "^1.9.0-beta.10",
     "@angular/animations": "^16.2.0",
     "@angular/common": "^16.2.0",
     "@angular/compiler": "^16.2.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^1.8.2",
-    "@analogjs/vite-plugin-angular": "^1.8.2",
-    "@analogjs/vitest-angular": "^1.8.2",
+    "@analogjs/platform": "^1.9.0-beta.10",
+    "@analogjs/vite-plugin-angular": "^1.9.0-beta.10",
+    "@analogjs/vitest-angular": "^1.9.0-beta.10",
     "@angular-devkit/build-angular": "^16.2.0",
     "@angular/cli": "^16.2.0",
     "@angular/compiler-cli": "^16.2.0",

package/template-angular-v17/package.json

@@ -15,8 +15,8 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^1.8.2",
-    "@analogjs/router": "^1.8.2",
+    "@analogjs/content": "^1.9.0-beta.10",
+    "@analogjs/router": "^1.9.0-beta.10",
     "@angular/animations": "^17.2.0",
     "@angular/common": "^17.2.0",
     "@angular/compiler": "^17.2.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^1.8.2",
-    "@analogjs/vite-plugin-angular": "^1.8.2",
-    "@analogjs/vitest-angular": "^1.8.2",
+    "@analogjs/platform": "^1.9.0-beta.10",
+    "@analogjs/vite-plugin-angular": "^1.9.0-beta.10",
+    "@analogjs/vitest-angular": "^1.9.0-beta.10",
     "@angular-devkit/build-angular": "^17.2.0",
     "@angular/cli": "^17.2.0",
     "@angular/compiler-cli": "^17.2.0",

package/template-blog/README.md

@@ -1,4 +1,4 @@
-# Analog App
+# __PROJECT_TITLE__
 
 This project was generated with [Analog](https://analogjs.org), the fullstack meta-framework for Angular.
 

package/template-blog/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>My Blog</title>
+    <title>__PROJECT_TITLE__</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />

package/template-blog/package.json

@@ -15,8 +15,8 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^1.8.2",
-    "@analogjs/router": "^1.8.2",
+    "@analogjs/content": "^1.9.0-beta.10",
+    "@analogjs/router": "^1.9.0-beta.10",
     "@angular/animations": "^18.0.0",
     "@angular/build": "^18.0.0",
     "@angular/common": "^18.0.0",
@@ -36,9 +36,9 @@
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^1.8.2",
-    "@analogjs/vite-plugin-angular": "^1.8.2",
-    "@analogjs/vitest-angular": "^1.8.2",
+    "@analogjs/platform": "^1.9.0-beta.10",
+    "@analogjs/vite-plugin-angular": "^1.9.0-beta.10",
+    "@analogjs/vitest-angular": "^1.9.0-beta.10",
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "jsdom": "^22.1.0",

package/template-blog/src/app/app-root.ag

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

package/template-blog/src/app/app-root.spec.ts

@@ -0,0 +1,20 @@
+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();
+  });
+});

package/template-blog/src/app/app.component.spec.ts

@@ -1,11 +1,14 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { provideRouter } from '@angular/router';
+import { provideLocationMocks } from '@angular/common/testing';
+
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
+      imports: [AppComponent],
+      providers: [provideRouter([]), provideLocationMocks()],
     }).compileComponents();
   });
 

package/template-blog/src/app/app.component.ts

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

package/template-blog/src/app/pages/blog/[slug].page.ag

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { AsyncPipe } from '@angular/common' with { analog: 'imports' };
+  import { MarkdownComponent } from '@analogjs/content' with { analog: 'imports' };
+  import { injectContent } from '@analogjs/content';
+
+  import PostAttributes from '../../post-attributes';
+
+  const post$ = injectContent<PostAttributes>('slug');
+</script>
+
+<template>
+  @if (post$ | async; as post) {
+  <article>
+    <img class="post__image" [src]="post.attributes.coverImage" />
+    <analog-markdown [content]="post.content" />
+  </article>
+  }
+</template>
+
+<style>
+  .post__image {
+    max-height: 40vh;
+  }
+</style>

package/template-blog/src/app/pages/blog/[slug].page.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { injectContent, MarkdownComponent } from '@analogjs/content';
 import { AsyncPipe } from '@angular/common';
+import { injectContent, MarkdownComponent } from '@analogjs/content';
 
 import PostAttributes from '../../post-attributes';
 
@@ -16,13 +16,11 @@ import PostAttributes from '../../post-attributes';
     </article>
     }
   `,
-  styles: [
-    `
-      .post__image {
-        max-height: 40vh;
-      }
-    `,
-  ],
+  styles: `
+    .post__image {
+      max-height: 40vh;
+    }
+  `,
 })
 export default class BlogPostComponent {
   readonly post$ = injectContent<PostAttributes>('slug');

package/template-blog/src/app/pages/blog/index.page.ag

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { RouterLink } from '@angular/router' with { analog: 'imports' };
+  import { injectContentFiles } from '@analogjs/content';
+
+  import PostAttributes from '../../post-attributes';
+
+  const posts = injectContentFiles<PostAttributes>();
+</script>
+
+<template>
+  <h1>Blog Archive</h1>
+
+  @for (post of posts; track post.attributes.slug) {
+  <a [routerLink]="['/blog/', post.attributes.slug]">
+    <h2 class="post__title">{{ post.attributes.title }}</h2>
+    <p class="post__desc">{{ post.attributes.description }}</p>
+  </a>
+  }
+</template>
+
+<style>
+  a {
+    text-align: left;
+    display: block;
+    margin-bottom: 2rem;
+  }
+
+  .post__title,
+  .post__desc {
+    margin: 0;
+  }
+</style>

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

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { injectContentFiles } from '@analogjs/content';
+
 import PostAttributes from '../../post-attributes';
-import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-blog',
@@ -9,27 +10,26 @@ import { RouterLink } from '@angular/router';
   imports: [RouterLink],
   template: `
     <h1>Blog Archive</h1>
-    @for (post of posts;track post.attributes.slug) {
+
+    @for (post of posts; track post.attributes.slug) {
     <a [routerLink]="['/blog/', post.attributes.slug]">
       <h2 class="post__title">{{ post.attributes.title }}</h2>
       <p class="post__desc">{{ post.attributes.description }}</p>
     </a>
     }
   `,
-  styles: [
-    `
-      a {
-        text-align: left;
-        display: block;
-        margin-bottom: 2rem;
-      }
+  styles: `
+    a {
+      text-align: left;
+      display: block;
+      margin-bottom: 2rem;
+    }
 
-      .post__title,
-      .post__desc {
-        margin: 0;
-      }
-    `,
-  ],
+    .post__title,
+    .post__desc {
+      margin: 0;
+    }
+  `,
 })
 export default class BlogComponent {
   readonly posts = injectContentFiles<PostAttributes>();

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

@@ -6,15 +6,15 @@ import { renderApplication } from '@angular/platform-server';
 import { provideServerContext } from '@analogjs/router/server';
 import { ServerContext } from '@analogjs/router/tokens';
 
+__APP_COMPONENT_IMPORT__
 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);
+  return bootstrapApplication(__APP_COMPONENT__, config);
 }
 
 export default async function render(

package/template-blog/src/main.ts

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

package/template-blog/vite.config.ts

@@ -18,7 +18,7 @@ export default defineConfig(({ mode }) => ({
       },
       prerender: {
         routes: ['/blog', '/blog/2022-12-27-my-first-post'],
-      },
+      },__ANALOG_SFC_CONFIG__
     }),
   ],
   test: {

package/template-latest/README.md

@@ -1,4 +1,4 @@
-# Analog App
+# __PROJECT_TITLE__
 
 This project was generated with [Analog](https://analogjs.org), the fullstack meta-framework for Angular.
 

package/template-latest/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>My App</title>
+    <title>__PROJECT_TITLE__</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />

package/template-latest/package.json

@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^1.8.2",
-    "@analogjs/router": "^1.8.2",
+    "@analogjs/content": "^1.9.0-beta.10",
+    "@analogjs/router": "^1.9.0-beta.10",
     "@angular/animations": "^18.0.0",
     "@angular/build": "^18.0.0",
     "@angular/common": "^18.0.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@analogjs/platform": "^1.8.2",
-    "@analogjs/vite-plugin-angular": "^1.8.2",
-    "@analogjs/vitest-angular": "^1.8.2",
+    "@analogjs/platform": "^1.9.0-beta.10",
+    "@analogjs/vite-plugin-angular": "^1.9.0-beta.10",
+    "@analogjs/vitest-angular": "^1.9.0-beta.10",
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "jsdom": "^22.0.0",

package/template-latest/src/app/app-root.ag

@@ -0,0 +1,16 @@
+<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-latest/src/app/app-root.spec.ts

@@ -0,0 +1,20 @@
+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();
+  });
+});

package/template-latest/src/app/app.component.ts

@@ -5,16 +5,14 @@ import { RouterOutlet } from '@angular/router';
   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;
-      }
-    `,
-  ],
+  template: `<router-outlet />`,
+  styles: `
+    :host {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      text-align: center;
+    }
+  `,
 })
 export class AppComponent {}

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { signal } from '@angular/core';
+
+  const count = signal(0);
+
+  function increment() {
+    this.count.update((count) => count + 1);
+  }
+</script>
+
+<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>
+</template>
+
+<style>
+  .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;
+    }
+  }
+</style>

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

@@ -21,30 +21,30 @@ import { Component, signal } from '@angular/core';
     <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
-      >
+      <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;
-      }
+  styles: `
+    .logo {
+      will-change: filter;
+    }
 
-      @media (prefers-color-scheme: light) {
-        .read-the-docs > * {
-          color: #213547;
-        }
+    .logo:hover {
+      filter: drop-shadow(0 0 2em #646cffaa);
+    }
+
+    .read-the-docs > * {
+      color: #fff;
+    }
+
+    @media (prefers-color-scheme: light) {
+      .read-the-docs > * {
+        color: #213547;
       }
-    `,
-  ],
+    }
+  `,
 })
 export default class HomeComponent {
   count = signal(0);

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

@@ -6,15 +6,15 @@ import { renderApplication } from '@angular/platform-server';
 import { provideServerContext } from '@analogjs/router/server';
 import { ServerContext } from '@analogjs/router/tokens';
 
+__APP_COMPONENT_IMPORT__
 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);
+  return bootstrapApplication(__APP_COMPONENT__, config);
 }
 
 export default async function render(

package/template-latest/src/main.ts

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

package/template-latest/src/styles.css

@@ -21,6 +21,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -49,9 +50,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -66,9 +69,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }

package/template-latest/vite.config.ts

@@ -11,7 +11,7 @@ export default defineConfig(({ mode }) => ({
   resolve: {
     mainFields: ['module'],
   },
-  plugins: [analog()],
+  plugins: [analog(__ANALOG_SFC_CONFIG__)],
   test: {
     globals: true,
     environment: 'jsdom',

package/template-minimal/README.md

@@ -1,4 +1,4 @@
-# Analog App
+# __PROJECT_TITLE__
 
 This project was generated with [Analog](https://analogjs.org), the fullstack meta-framework for Angular.
 

package/template-minimal/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>My App</title>
+    <title>__PROJECT_TITLE__</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />

package/template-minimal/package.json

@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^1.7.3-beta.1",
-    "@analogjs/router": "^1.7.3-beta.1",
+    "@analogjs/content": "^1.9.0-beta.10",
+    "@analogjs/router": "^1.9.0-beta.10",
     "@angular/animations": "^18.0.0",
     "@angular/build": "^18.0.0",
     "@angular/common": "^18.0.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@analogjs/platform": "^1.7.3-beta.1",
-    "@analogjs/vite-plugin-angular": "^1.7.3-beta.1",
-    "@analogjs/vitest-angular": "^1.7.3-beta.1",
+    "@analogjs/platform": "^1.9.0-beta.10",
+    "@analogjs/vite-plugin-angular": "^1.9.0-beta.10",
+    "@analogjs/vitest-angular": "^1.9.0-beta.10",
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "typescript": "~5.4.2",

package/template-minimal/src/app/app-root.ag

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { RouterOutlet } from '@angular/router' with { analog: 'imports' };
+</script>
+
+<template>
+  <router-outlet />
+</template>

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

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

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

@@ -0,0 +1,32 @@
+<template>
+  <h2>Analog</h2>
+
+  <h3>The fullstack meta-framework for Angular!</h3>
+
+  <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>
+</template>
+
+<style>
+  :host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .read-the-docs > * {
+    color: #fff;
+  }
+
+  @media (prefers-color-scheme: light) {
+    .read-the-docs > * {
+      color: #213547;
+    }
+  }
+</style>

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

@@ -11,9 +11,9 @@ import { Component } from '@angular/core';
     <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
-      >
+      <a href="https://github.com/sponsors/brandonroberts" target="_blank">
+        Sponsor
+      </a>
     </p>
   `,
   styles: `
@@ -23,6 +23,7 @@ import { Component } from '@angular/core';
       justify-content: center;
       align-items: center;
     }
+
     .read-the-docs > * {
       color: #fff;
     }

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

@@ -6,15 +6,15 @@ import { renderApplication } from '@angular/platform-server';
 import { provideServerContext } from '@analogjs/router/server';
 import { ServerContext } from '@analogjs/router/tokens';
 
+__APP_COMPONENT_IMPORT__
 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);
+  return bootstrapApplication(__APP_COMPONENT__, config);
 }
 
 export default async function render(

package/template-minimal/src/main.ts

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

package/template-minimal/vite.config.ts

@@ -17,7 +17,7 @@ export default defineConfig(({ mode }) => ({
       static: true,
       prerender: {
         routes: [],
-      },
+      },__ANALOG_SFC_CONFIG__
     }),
   ],
 }));

package/files/tailwind.config.cjs

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./index.html', './src/**/*.{html,ts,md}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};