create-analog 2.0.0-alpha.2 → 2.0.0-alpha.21

package/files/styles.css

@@ -1,89 +1,8 @@
-/* Tailwind directives  */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
 /* 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;
-}
-
+html,
 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;
-}
-
-.logo {
-  @apply box-content;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
+  display: block;
+  height: 100%;
 }

package/index.js

@@ -42,7 +42,7 @@ const HIGHLIGHTERS = {
     highlighter: 'withPrismHighlighter',
     entryPoint: 'prism-highlighter',
     dependencies: {
-      'marked-highlight': '^2.0.1',
+      'marked-highlight': '^2.2.1',
       prismjs: '^1.29.0',
     },
   },
@@ -50,7 +50,7 @@ const HIGHLIGHTERS = {
     highlighter: 'withShikiHighlighter',
     entryPoint: 'shiki-highlighter',
     dependencies: {
-      marked: '^7.0.0',
+      marked: '^15.0.7',
       'marked-shiki': '^1.1.0',
       shiki: '^1.6.1',
     },
@@ -65,7 +65,6 @@ async function init() {
   let targetDir = formatTargetDir(argv._[0]);
   let template = argv.template || argv.t;
   let skipTailwind = fromBoolArg(argv.skipTailwind);
-  let useAnalogSFC = fromBoolArg(argv.analogSFC);
 
   const defaultTargetDir = 'analog-project';
   const getProjectName = () =>
@@ -135,11 +134,6 @@ async function init() {
           })),
           initial: 1,
         },
-        {
-          type: useAnalogSFC === undefined ? 'confirm' : null,
-          name: 'analogSFC',
-          message: 'Would you like to use Analog SFCs?',
-        },
         {
           type: skipTailwind === undefined ? 'confirm' : null,
           name: 'tailwind',
@@ -150,7 +144,7 @@ async function init() {
         onCancel: () => {
           throw new Error(red('✖') + ' Operation cancelled');
         },
-      }
+      },
     );
   } catch (cancelled) {
     console.log(cancelled.message);
@@ -163,7 +157,6 @@ async function init() {
     overwrite,
     packageName,
     variant,
-    analogSFC,
     tailwind,
     syntaxHighlighter,
   } = result;
@@ -181,14 +174,13 @@ async function init() {
   // determine syntax highlighter
   let highlighter = syntaxHighlighter ?? (template === 'blog' ? 'prism' : null);
   skipTailwind = skipTailwind ?? !tailwind;
-  useAnalogSFC = useAnalogSFC ?? analogSFC;
 
   console.log(`\nScaffolding project in ${root}...`);
 
   const templateDir = path.resolve(
     fileURLToPath(import.meta.url),
     '..',
-    `template-${template}`
+    `template-${template}`,
   );
 
   const filesDir = path.resolve(fileURLToPath(import.meta.url), '..', `files`);
@@ -211,15 +203,20 @@ async function init() {
   }
 
   if (!skipTailwind) {
-    addTailwindConfig(write, filesDir);
-    addPostCssConfig(write, filesDir);
     addTailwindDirectives(write, filesDir);
   }
 
+  replacePlaceholders(root, 'vite.config.ts', {
+    __TAILWIND_IMPORT__: !skipTailwind
+      ? `\nimport tailwindcss from '@tailwindcss/vite';`
+      : '',
+    __TAILWIND_PLUGIN__: !skipTailwind ? '\n    tailwindcss()' : '',
+  });
+
   const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent);
   const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
   const pkg = JSON.parse(
-    fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
+    fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8'),
   );
 
   pkg.name = packageName || getProjectName();
@@ -230,7 +227,7 @@ async function init() {
   }
 
   if (!skipTailwind) {
-    addTailwindDevDependencies(pkg);
+    addTailwindDependencies(pkg);
   }
 
   if (pkgManager === 'yarn') {
@@ -243,7 +240,6 @@ async function init() {
   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 .`);
@@ -284,7 +280,7 @@ function copy(src, dest) {
  */
 function isValidPackageName(projectName) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
-    projectName
+    projectName,
   );
 }
 
@@ -366,40 +362,23 @@ function getStartCommand(pkgManager) {
 function addTailwindDirectives(write, filesDir) {
   write(
     'src/styles.css',
-    fs.readFileSync(path.join(filesDir, `styles.css`), 'utf-8')
-  );
-}
-
-function addPostCssConfig(write, filesDir) {
-  write(
-    'postcss.config.cjs',
-    fs.readFileSync(path.join(filesDir, `postcss.config.cjs`), 'utf-8')
-  );
-}
-
-function addTailwindConfig(write, filesDir) {
-  write(
-    'tailwind.config.ts',
-    fs.readFileSync(path.join(filesDir, `tailwind.config.ts`), 'utf-8')
+    fs.readFileSync(path.join(filesDir, `styles.css`), 'utf-8'),
   );
 }
 
-function addTailwindDevDependencies(pkg) {
-  ['tailwindcss@^3.3.1', 'postcss@^8.4.21', 'autoprefixer@^10.4.14'].forEach(
-    (packageName) => {
-      const [name, version] = packageName.split('@');
-      pkg.devDependencies[name] = version;
-    }
-  );
+function addTailwindDependencies(pkg) {
+  pkg.dependencies['tailwindcss'] = '^4.1.4';
+  pkg.dependencies['postcss'] = '^8.5.3';
+  pkg.dependencies['@tailwindcss/vite'] = '^4.1.4';
 }
 
 function addYarnDevDependencies(pkg, template) {
   // v18
-  if (template === 'latest' || template === 'blog') {
-    pkg.devDependencies['@nx/angular'] = '^19.1.0';
-    pkg.devDependencies['@nx/devkit'] = '^19.1.0';
-    pkg.devDependencies['@nx/vite'] = '^19.1.0';
-    pkg.devDependencies['nx'] = '^19.1.0';
+  if (template === 'latest' || template === 'blog' || template === 'minimal') {
+    pkg.devDependencies['@nx/angular'] = '^21.0.0';
+    pkg.devDependencies['@nx/devkit'] = '^21.0.0';
+    pkg.devDependencies['@nx/vite'] = '^21.0.0';
+    pkg.devDependencies['nx'] = '^21.0.0';
   } else if (template === 'angular-v17') {
     pkg.devDependencies['@angular-devkit/build-angular'] = '^17.2.0';
   }
@@ -436,47 +415,6 @@ function setProjectTitle(root, 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);
@@ -484,18 +422,12 @@ function replacePlaceholders(root, files, config) {
     const newFileContent = Object.keys(config).reduce(
       (content, placeholder) =>
         content.replace(RegExp(placeholder, 'g'), config[placeholder]),
-      fileContent
+      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();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-analog",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.21",
   "type": "module",
   "license": "MIT",
   "author": "Brandon Roberts",
@@ -10,9 +10,9 @@
   },
   "files": [
     "index.js",
-    "template-angular-v16",
     "template-angular-v17",
     "template-angular-v18",
+    "template-angular-v19",
     "template-blog",
     "template-latest",
     "template-minimal",
@@ -20,7 +20,7 @@
   ],
   "main": "index.js",
   "engines": {
-    "node": "^18.13.0 || ^20.0.0"
+    "node": ">=20.0.0"
   },
   "repository": {
     "type": "git",

package/template-angular-v17/package.json

@@ -15,8 +15,8 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.2",
-    "@analogjs/router": "^2.0.0-alpha.2",
+    "@analogjs/content": "^2.0.0-alpha.21",
+    "@analogjs/router": "^2.0.0-alpha.21",
     "@angular/animations": "^17.2.0",
     "@angular/common": "^17.2.0",
     "@angular/compiler": "^17.2.0",
@@ -28,9 +28,9 @@
     "@angular/router": "^17.2.0",
     "@nx/angular": "~18.0.0",
     "front-matter": "^4.0.2",
-    "marked": "^5.0.2",
-    "marked-gfm-heading-id": "^3.1.0",
-    "marked-highlight": "^2.0.1",
+    "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",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.2",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.2",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.2",
+    "@analogjs/platform": "^2.0.0-alpha.21",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.21",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.21",
     "@angular-devkit/build-angular": "^17.2.0",
     "@angular/cli": "^17.2.0",
     "@angular/compiler-cli": "^17.2.0",

package/template-angular-v18/package.json

@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.2",
-    "@analogjs/router": "^2.0.0-alpha.2",
+    "@analogjs/content": "^2.0.0-alpha.21",
+    "@analogjs/router": "^2.0.0-alpha.21",
     "@angular/animations": "^18.0.0",
     "@angular/build": "^18.0.0",
     "@angular/common": "^18.0.0",
@@ -28,19 +28,19 @@
     "@angular/platform-server": "^18.0.0",
     "@angular/router": "^18.0.0",
     "front-matter": "^4.0.2",
-    "marked": "^5.0.2",
-    "marked-gfm-heading-id": "^3.1.0",
-    "marked-highlight": "^2.0.1",
-    "marked-mangle": "^1.1.7",
+    "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",
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.2",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.2",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.2",
+    "@analogjs/platform": "^2.0.0-alpha.21",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.21",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.21",
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "jsdom": "^22.0.0",

package/template-angular-v18/vite.config.ts

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

package/{template-angular-v16 → template-angular-v19}/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-angular-v16 → template-angular-v19}/_gitignore

@@ -30,6 +30,8 @@ yarn-error.log
 
 # Miscellaneous
 /.angular/cache
+/.nx/cache
+/.nx/workspace-data
 .sass-cache/
 /connect.lock
 /coverage

package/{template-angular-v16 → template-angular-v19}/angular.json

@@ -5,7 +5,7 @@
   "projects": {
     "my-app": {
       "projectType": "application",
-      "root": "",
+      "root": ".",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {

package/{template-angular-v16 → template-angular-v19}/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>MyApp</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-angular-v19/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "my-app",
+  "version": "0.0.0",
+  "type": "module",
+  "engines": {
+    "node": ">=18.19.1"
+  },
+  "scripts": {
+    "ng": "ng",
+    "dev": "ng serve",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@analogjs/content": "^1.17.0-beta.6",
+    "@analogjs/router": "^1.17.0-beta.6",
+    "@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",
+    "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",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@analogjs/platform": "^1.17.0-beta.6",
+    "@analogjs/vite-plugin-angular": "^1.17.0-beta.6",
+    "@analogjs/vitest-angular": "^1.17.0-beta.6",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "jsdom": "^22.0.0",
+    "typescript": "~5.8.0",
+    "vite": "^6.0.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^3.0.0"
+  }
+}

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

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

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

@@ -1,15 +1,10 @@
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import {
-  provideServerRendering,
-  ɵSERVER_CONTEXT as SERVER_CONTEXT,
-} from '@angular/platform-server';
+import { provideServerRendering } from '@angular/platform-server';
+
 import { appConfig } from './app.config';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(),
-    { provide: SERVER_CONTEXT, useValue: 'ssr-analog' },
-  ],
+  providers: [provideServerRendering()],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

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

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

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

@@ -0,0 +1,54 @@
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  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;
+      }
+    }
+  `,
+})
+export default class HomeComponent {
+  count = signal(0);
+
+  increment() {
+    this.count.update((count) => count + 1);
+  }
+}

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

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

package/{template-angular-v16 → template-angular-v19}/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);