create-absolutejs 0.11.0 → 0.12.0

package/dist/generators/angular/generateAngularPage.d.ts

@@ -1,7 +1,11 @@
 import { Frontend } from '../../types';
 export declare const generateAngularPage: (_frontends: Frontend[]) => string;
-export declare const generateAppComponent: () => string;
+export declare const generateAngularPageHtml: () => string;
+export declare const generateAppComponent: (isSingleFrontend: boolean) => string;
 export declare const generateAppComponentCss: () => string;
 export declare const generateAppComponentHtml: (frontends: Frontend[], editBasePath: string) => string;
-export declare const generateCounterComponent: () => string;
-export declare const generateDropdownComponent: (frontends: Frontend[]) => string;
+export declare const generateCounterComponent: (isSingleFrontend: boolean) => string;
+export declare const generateCounterComponentHtml: () => string;
+export declare const generateCounterComponentCss: () => string;
+export declare const generateDropdownComponent: (_frontends: Frontend[]) => string;
+export declare const generateDropdownComponentHtml: (frontends: Frontend[]) => string;

package/dist/generators/angular/generateAngularPage.js

@@ -2,6 +2,7 @@ import { formatNavLink } from '../../utils/formatNavLink';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const generateAngularPage = (_frontends) => `import { Component, inject, InjectionToken } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { defineAngularPage } from '@absolutejs/absolute/angular';
 import { DropdownComponent } from '../components/dropdown.component';
 import { AppComponent } from '../components/app.component';
 
@@ -12,16 +13,10 @@ type AngularPageProps = {
 };
 
 @Component({
+	imports: [CommonModule, DropdownComponent, AppComponent],
 	selector: 'angular-page',
 	standalone: true,
-	imports: [CommonModule, DropdownComponent, AppComponent],
-	template: \`
-		<header>
-			<a href="/">AbsoluteJS</a>
-			<app-dropdown></app-dropdown>
-		</header>
-		<app-root [initialCount]="initialCount"></app-root>
-	\`
+	templateUrl: '../templates/angular-example.html'
 })
 export class AngularExampleComponent {
 	initialCount: number = 0;
@@ -32,13 +27,17 @@ export class AngularExampleComponent {
 	}
 }
 
-export const factory = (props: AngularPageProps) => {
-	const component = new AngularExampleComponent();
-	component.initialCount = props.initialCount;
-	return component;
-};
+export const page = defineAngularPage<AngularPageProps>({
+	component: AngularExampleComponent
+});
 `;
-export const generateAppComponent = () => `import { Component, Input, ViewEncapsulation } from '@angular/core';
+export const generateAngularPageHtml = () => `<header>
+	<a href="/">AbsoluteJS</a>
+	<app-dropdown></app-dropdown>
+</header>
+<app-root [initialCount]="initialCount"></app-root>
+`;
+export const generateAppComponent = (isSingleFrontend) => `import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CounterComponent } from './counter.component';
 
@@ -46,8 +45,8 @@ import { CounterComponent } from './counter.component';
 	selector: 'app-root',
 	standalone: true,
 	imports: [CommonModule, CounterComponent],
-	templateUrl: './app.component.html',
-	styleUrls: ['./app.component.css'],
+	templateUrl: '../templates/app.component.html',
+	styleUrl: '${isSingleFrontend ? '../' : '../../'}styles/app.component.css',
 	encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
@@ -88,48 +87,15 @@ export const generateAppComponentHtml = (frontends, editBasePath) => {
 </main>
 `;
 };
-export const generateCounterComponent = () => `import { Component, Input } from '@angular/core';
+export const generateCounterComponent = (isSingleFrontend) => `import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
 	selector: 'app-counter',
 	standalone: true,
 	imports: [CommonModule],
-	template: \`
-		<button (click)="increment()">
-			count is <span class="counter-value">{{ count }}</span>
-		</button>
-	\`,
-	styles: [
-		\`
-			button {
-				background-color: #1a1a1a;
-				border: 1px solid transparent;
-				border-radius: 0.5rem;
-				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-				cursor: pointer;
-				font-family: inherit;
-				font-size: 1.1rem;
-				font-weight: 500;
-				margin: 2rem 0;
-				padding: 0.6rem 1.2rem;
-				transition: border-color 0.25s;
-			}
-			button:hover {
-				border-color: #dd0031;
-			}
-			button:focus,
-			button:focus-visible {
-				outline: 4px auto -webkit-focus-ring-color;
-			}
-
-			@media (prefers-color-scheme: light) {
-				button {
-					background-color: #ffffff;
-				}
-			}
-		\`
-	]
+	templateUrl: '../templates/counter.component.html',
+	styleUrl: '${isSingleFrontend ? '../' : '../../'}styles/counter.component.css'
 })
 export class CounterComponent {
 	@Input() initialCount: number = 0;
@@ -144,8 +110,39 @@ export class CounterComponent {
 	}
 }
 `;
-export const generateDropdownComponent = (frontends) => {
-    const navLinks = frontends.map(formatNavLink).join('\n\t\t\t\t');
+export const generateCounterComponentHtml = () => `<button (click)="increment()">
+	count is <span class="counter-value">{{ count }}</span>
+</button>
+`;
+export const generateCounterComponentCss = () => `button {
+	background-color: #1a1a1a;
+	border: 1px solid transparent;
+	border-radius: 0.5rem;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	cursor: pointer;
+	font-family: inherit;
+	font-size: 1.1rem;
+	font-weight: 500;
+	margin: 2rem 0;
+	padding: 0.6rem 1.2rem;
+	transition: border-color 0.25s;
+}
+button:hover {
+	border-color: #dd0031;
+}
+button:focus,
+button:focus-visible {
+	outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+	button {
+		background-color: #ffffff;
+	}
+}
+`;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const generateDropdownComponent = (_frontends) => {
     return `import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -153,23 +150,25 @@ import { CommonModule } from '@angular/common';
 	selector: 'app-dropdown',
 	standalone: true,
 	imports: [CommonModule],
-	template: \`
-		<details
-			class="dropdown"
-			[attr.open]="isOpen ? '' : null"
-			(mouseenter)="isOpen = true"
-			(mouseleave)="isOpen = false"
-		>
-			<summary>Pages</summary>
-			<nav class="menu">
-				${navLinks}
-			</nav>
-		</details>
-	\`,
-	styles: []
+	templateUrl: '../templates/dropdown.component.html'
 })
 export class DropdownComponent {
 	isOpen = false;
 }
 `;
 };
+export const generateDropdownComponentHtml = (frontends) => {
+    const navLinks = frontends.map(formatNavLink).join('\n\t\t');
+    return `<details
+	class="dropdown"
+	[attr.open]="isOpen ? '' : null"
+	(mouseenter)="isOpen = true"
+	(mouseleave)="isOpen = false"
+>
+	<summary>Pages</summary>
+	<nav class="menu">
+		${navLinks}
+	</nav>
+</details>
+`;
+};

package/dist/generators/angular/scaffoldAngular.d.ts

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldAngular: ({ editBasePath, isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }: ScaffoldFrontendProps) => void;
+export declare const scaffoldAngular: ({ editBasePath, isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory, stylesDirectory, stylesIndexesDirectory }: ScaffoldFrontendProps) => void;

package/dist/generators/angular/scaffoldAngular.js

@@ -1,22 +1,26 @@
 import { copyFileSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateMarkupCSS } from '../project/generateMarkupCSS';
-import { generateAngularPage, generateAppComponent, generateAppComponentCss, generateAppComponentHtml, generateCounterComponent, generateDropdownComponent } from './generateAngularPage';
-export const scaffoldAngular = ({ editBasePath, isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }) => {
+import { generateAngularPage, generateAngularPageHtml, generateAppComponent, generateAppComponentCss, generateAppComponentHtml, generateCounterComponent, generateCounterComponentCss, generateCounterComponentHtml, generateDropdownComponent, generateDropdownComponentHtml } from './generateAngularPage';
+export const scaffoldAngular = ({ editBasePath, isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory, stylesDirectory, stylesIndexesDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'angular.svg'), join(projectAssetsDirectory, 'svg', 'angular.svg'));
     const componentsDirectory = join(targetDirectory, 'components');
     mkdirSync(componentsDirectory, { recursive: true });
     const pagesDirectory = join(targetDirectory, 'pages');
     mkdirSync(pagesDirectory, { recursive: true });
-    const stylesDirectory = join(targetDirectory, 'styles');
-    mkdirSync(stylesDirectory, { recursive: true });
+    const templatesDir = join(targetDirectory, 'templates');
+    mkdirSync(templatesDir, { recursive: true });
     writeFileSync(join(pagesDirectory, 'angular-example.ts'), generateAngularPage(frontends), 'utf-8');
+    writeFileSync(join(templatesDir, 'angular-example.html'), generateAngularPageHtml(), 'utf-8');
     writeFileSync(join(componentsDirectory, 'dropdown.component.ts'), generateDropdownComponent(frontends), 'utf-8');
-    writeFileSync(join(componentsDirectory, 'app.component.ts'), generateAppComponent(), 'utf-8');
-    writeFileSync(join(componentsDirectory, 'app.component.html'), generateAppComponentHtml(frontends, editBasePath), 'utf-8');
-    writeFileSync(join(componentsDirectory, 'app.component.css'), generateAppComponentCss(), 'utf-8');
-    writeFileSync(join(componentsDirectory, 'counter.component.ts'), generateCounterComponent(), 'utf-8');
-    const angularCSS = generateMarkupCSS('angular', '#dd0031', isSingleFrontend);
+    writeFileSync(join(templatesDir, 'dropdown.component.html'), generateDropdownComponentHtml(frontends), 'utf-8');
+    writeFileSync(join(componentsDirectory, 'app.component.ts'), generateAppComponent(isSingleFrontend), 'utf-8');
+    writeFileSync(join(templatesDir, 'app.component.html'), generateAppComponentHtml(frontends, editBasePath), 'utf-8');
+    writeFileSync(join(stylesDirectory, 'app.component.css'), generateAppComponentCss(), 'utf-8');
+    writeFileSync(join(componentsDirectory, 'counter.component.ts'), generateCounterComponent(isSingleFrontend), 'utf-8');
+    writeFileSync(join(templatesDir, 'counter.component.html'), generateCounterComponentHtml(), 'utf-8');
+    writeFileSync(join(stylesDirectory, 'counter.component.css'), generateCounterComponentCss(), 'utf-8');
+    const angularCSS = generateMarkupCSS('angular', '#dd0031');
     const customElementCSS = `
 /* Flex wrappers for Angular custom elements */
 angular-page {
@@ -30,5 +34,5 @@ app-root {
 	flex: 1;
 	flex-direction: column;
 }`;
-    writeFileSync(join(stylesDirectory, 'angular-example.css'), angularCSS + customElementCSS, 'utf-8');
+    writeFileSync(join(stylesIndexesDirectory, 'angular-example.css'), angularCSS + customElementCSS, 'utf-8');
 };

package/dist/generators/configurations/generatePackageJson.js

@@ -46,6 +46,7 @@ export const createPackageJson = async ({ projectName, authOption, plugins, data
     if (flags.requiresReact) {
         packageNames.add('react');
         packageNames.add('react-dom');
+        packageNames.add('react-refresh');
         packageNames.add('@types/react');
     }
     if (flags.requiresReact && codeQualityTool === 'eslint+prettier') {
@@ -142,6 +143,7 @@ export const createPackageJson = async ({ projectName, authOption, plugins, data
         dependencies['react'] = resolveVersion('react', versions['react']);
         dependencies['react-dom'] = resolveVersion('react-dom', versions['react-dom']);
         devDependencies['@types/react'] = resolveVersion('@types/react', versions['@types/react']);
+        devDependencies['react-refresh'] = resolveVersion('react-refresh', versions['react-refresh']);
     }
     if (flags.requiresReact && codeQualityTool === 'eslint+prettier') {
         eslintReactDependencies.forEach((dep) => {

package/dist/generators/html/generateHTMLPage.d.ts

@@ -1,2 +1,2 @@
 import { CreateConfiguration, Frontend } from '../../types';
-export declare const generateHTMLPage: (frontends: Frontend[], useHTMLScripts: CreateConfiguration["useHTMLScripts"], editBasePath: string) => string;
+export declare const generateHTMLPage: (frontends: Frontend[], useHTMLScripts: CreateConfiguration["useHTMLScripts"], editBasePath: string, isSingleFrontend: boolean) => string;

package/dist/generators/html/generateHTMLPage.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateHTMLPage = (frontends, useHTMLScripts, editBasePath) => {
+export const generateHTMLPage = (frontends, useHTMLScripts, editBasePath, isSingleFrontend) => {
     const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
     const initialCount = useHTMLScripts ? '0' : 'disabled';
     const scriptTagBlock = useHTMLScripts
@@ -15,7 +15,7 @@ export const generateHTMLPage = (frontends, useHTMLScripts, editBasePath) => {
         <link
             rel="stylesheet"
             type="text/css"
-            href="../styles/html-example.css"
+            href="${isSingleFrontend ? '../../' : '../../../'}styles/indexes/html-example.css"
         />
         <link rel="icon" href="/assets/ico/favicon.ico" />
     </head>

package/dist/generators/html/scaffoldHTML.d.ts

@@ -2,5 +2,5 @@ import { ScaffoldFrontendProps } from '../../types';
 type ScaffoldHTMLProps = ScaffoldFrontendProps & {
     useHTMLScripts: boolean;
 };
-export declare const scaffoldHTML: ({ editBasePath, isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory }: ScaffoldHTMLProps) => void;
+export declare const scaffoldHTML: ({ editBasePath, isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory, stylesIndexesDirectory }: ScaffoldHTMLProps) => void;
 export {};

package/dist/generators/html/scaffoldHTML.js

@@ -2,9 +2,9 @@ import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateMarkupCSS } from '../project/generateMarkupCSS';
 import { generateHTMLPage } from './generateHTMLPage';
-export const scaffoldHTML = ({ editBasePath, isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory }) => {
+export const scaffoldHTML = ({ editBasePath, isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory, stylesIndexesDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'HTML5_Badge.svg'), join(projectAssetsDirectory, 'svg', 'HTML5_Badge.svg'));
-    const htmlPage = generateHTMLPage(frontends, useHTMLScripts, editBasePath);
+    const htmlPage = generateHTMLPage(frontends, useHTMLScripts, editBasePath, isSingleFrontend);
     const pagesDirectory = join(targetDirectory, 'pages');
     mkdirSync(pagesDirectory, { recursive: true });
     const htmlFilePath = join(pagesDirectory, 'HTMLExample.html');
@@ -13,9 +13,7 @@ export const scaffoldHTML = ({ editBasePath, isSingleFrontend, targetDirectory,
     cpSync(join(templatesDirectory, 'html', 'scripts'), scriptsDirectory, {
         recursive: true
     });
-    const cssOutputDir = join(targetDirectory, 'styles');
-    mkdirSync(cssOutputDir, { recursive: true });
-    const cssOutputFile = join(cssOutputDir, 'html-example.css');
-    const htmlCSS = generateMarkupCSS('html', '#e34f26', isSingleFrontend);
+    const cssOutputFile = join(stylesIndexesDirectory, 'html-example.css');
+    const htmlCSS = generateMarkupCSS('html', '#e34f26');
     writeFileSync(cssOutputFile, htmlCSS, 'utf-8');
 };

package/dist/generators/htmx/generateHTMXPage.js

@@ -11,7 +11,7 @@ export const generateHTMXPage = (isSingle, frontends, editBasePath) => {
 		<link
 			rel="stylesheet"
 			type="text/css"
-			href="../styles/htmx-example.css"
+			href="${isSingle ? '../../' : '../../../'}styles/indexes/htmx-example.css"
 		/>
 		<link rel="icon" href="/assets/ico/favicon.ico" />
 		<script src="${isSingle ? '' : '/htmx'}/htmx.min.js"></script>

package/dist/generators/htmx/scaffoldHTMX.d.ts

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldHTMX: ({ editBasePath, targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend }: ScaffoldFrontendProps) => void;
+export declare const scaffoldHTMX: ({ editBasePath, targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend, stylesIndexesDirectory }: ScaffoldFrontendProps) => void;

package/dist/generators/htmx/scaffoldHTMX.js

@@ -3,7 +3,7 @@ import { join } from 'path';
 import { Glob } from 'bun';
 import { generateMarkupCSS } from '../project/generateMarkupCSS';
 import { generateHTMXPage } from './generateHTMXPage';
-export const scaffoldHTMX = ({ editBasePath, targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend }) => {
+export const scaffoldHTMX = ({ editBasePath, targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend, stylesIndexesDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'htmx-logo-black.svg'), join(projectAssetsDirectory, 'svg', 'htmx-logo-black.svg'));
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'htmx-logo-white.svg'), join(projectAssetsDirectory, 'svg', 'htmx-logo-white.svg'));
     const glob = new Glob('htmx*.min.js');
@@ -20,9 +20,7 @@ export const scaffoldHTMX = ({ editBasePath, targetDirectory, templatesDirectory
     mkdirSync(pagesDirectory, { recursive: true });
     const htmxFilePath = join(pagesDirectory, 'HTMXExample.html');
     writeFileSync(htmxFilePath, htmxPage, 'utf-8');
-    const cssOutputDir = join(targetDirectory, 'styles');
-    mkdirSync(cssOutputDir, { recursive: true });
-    const cssOutputFile = join(cssOutputDir, 'htmx-example.css');
-    const htmxCSS = generateMarkupCSS('htmx', '#3465a4', isSingleFrontend);
+    const cssOutputFile = join(stylesIndexesDirectory, 'htmx-example.css');
+    const htmxCSS = generateMarkupCSS('htmx', '#3465a4');
     writeFileSync(cssOutputFile, htmxCSS, 'utf-8');
 };

package/dist/generators/project/generateBuildBlock.js

@@ -6,6 +6,7 @@ export const generateBuildBlock = ({ assetsDirectory, backendDirectory, buildDir
         `buildDirectory: '${buildDirectory}'`,
         ...Object.entries(frontendDirectories).map(([f, dir]) => `${f}Directory: 'src/frontend${dir ? `/${dir}` : ''}'`),
         `publicDirectory: '${publicDirectory}'`,
+        `stylesConfig: 'src/styles/indexes'`,
         tailwind ? `tailwind: ${JSON.stringify(tailwind)}` : ''
     ]
         .filter(Boolean)

package/dist/generators/project/generateImportsBlock.d.ts

@@ -1,7 +1,6 @@
 import type { AvailableDependency, CreateConfiguration } from '../../types';
 import type { FrameworkFlags } from './computeFlags';
 type GenerateImportsBlockProps = {
-    backendDirectory: string;
     deps: AvailableDependency[];
     flags: FrameworkFlags;
     orm: CreateConfiguration['orm'];
@@ -10,5 +9,5 @@ type GenerateImportsBlockProps = {
     databaseHost: CreateConfiguration['databaseHost'];
     frontendDirectories: CreateConfiguration['frontendDirectories'];
 };
-export declare const generateImportsBlock: ({ backendDirectory, deps, flags, orm, authOption, databaseEngine, databaseHost, frontendDirectories }: GenerateImportsBlockProps) => string;
+export declare const generateImportsBlock: ({ deps, flags, orm, authOption, databaseEngine, databaseHost, frontendDirectories }: GenerateImportsBlockProps) => string;
 export {};

package/dist/generators/project/generateImportsBlock.js

@@ -1,30 +1,20 @@
-import { mkdirSync, writeFileSync } from 'fs';
-import { join } from 'path';
 import { isDrizzleDialect } from '../../typeGuards';
-export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authOption, databaseEngine, databaseHost, frontendDirectories }) => {
+export const generateImportsBlock = ({ deps, flags, orm, authOption, databaseEngine, databaseHost, frontendDirectories }) => {
     const rawImports = [];
     const pushHandler = (cond, name, pkg = '@absolutejs/absolute') => cond && rawImports.push(`import { ${name} } from '${pkg}'`);
     pushHandler(flags.requiresAngular, 'handleAngularPageRequest', '@absolutejs/absolute/angular');
     pushHandler(flags.requiresAngular, 'generateHeadElement');
     pushHandler(flags.requiresHtml, 'handleHTMLPageRequest');
-    pushHandler(flags.requiresReact, 'handleReactPageRequest');
+    pushHandler(flags.requiresReact, 'handleReactPageRequest', '@absolutejs/absolute/react');
     pushHandler(flags.requiresSvelte, 'handleSveltePageRequest', '@absolutejs/absolute/svelte');
     pushHandler(flags.requiresVue, 'handleVuePageRequest', '@absolutejs/absolute/vue');
     pushHandler(flags.requiresVue, 'generateHeadElement');
     pushHandler(flags.requiresHtmx, 'handleHTMXPageRequest');
-    const nonFrameworkOnly = (flags.requiresHtml || flags.requiresHtmx) &&
-        !flags.requiresAngular &&
-        !flags.requiresReact &&
-        !flags.requiresSvelte &&
-        !flags.requiresVue;
     for (const dependency of deps) {
         const importsList = dependency.imports ?? [];
-        const relevantImports = nonFrameworkOnly
-            ? importsList.filter((imp) => imp.packageName !== 'asset')
-            : importsList;
-        if (relevantImports.length === 0)
+        if (importsList.length === 0)
             continue;
-        rawImports.push(`import { ${relevantImports
+        rawImports.push(`import { ${importsList
             .map((imp) => imp.packageName)
             .sort()
             .join(', ')} } from '${dependency.value}'`);
@@ -33,12 +23,15 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
     const reactDir = frontendDirectories.react;
     const svelteDir = frontendDirectories.svelte;
     const vueDir = frontendDirectories.vue;
+    const angularDir = frontendDirectories.angular;
     if (flags.requiresReact && reactDir !== undefined)
         rawImports.push(`import { ReactExample } from '${buildExamplePath(reactDir, 'ReactExample')}'`);
     if (flags.requiresSvelte && svelteDir !== undefined)
-        rawImports.push(`import SvelteExample from '${buildExamplePath(svelteDir, 'SvelteExample.svelte')}'`);
-    if (flags.requiresVue && !flags.requiresSvelte && vueDir !== undefined)
-        rawImports.push(`import VueExample from '${buildExamplePath(vueDir, 'VueExample.vue')}'`);
+        rawImports.push(`import type SvelteExample from '${buildExamplePath(svelteDir, 'SvelteExample.svelte')}'`);
+    if (flags.requiresVue && vueDir !== undefined)
+        rawImports.push(`import type VueExample from '${buildExamplePath(vueDir, 'VueExample.vue')}'`);
+    if (flags.requiresAngular && angularDir !== undefined)
+        rawImports.push(`import type * as AngularExamplePage from '${buildExamplePath(angularDir, 'angular-example')}'`);
     const connectorImports = {
         neon: [`import { neon } from '@neondatabase/serverless'`],
         planetscale: [`import { Client } from '@planetscale/database'`],
@@ -187,13 +180,6 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
         rawImports.push(`import { absoluteAuthConfig } from './utils/absoluteAuthConfig'`, `import { t } from 'elysia'`, `import { authProviderOption, providers, userSessionIdTypebox, getStatus } from '@absolutejs/auth'`);
     if (hasDatabase && (authOption === undefined || authOption === 'none'))
         rawImports.push(`import { getCountHistory, createCountHistory } from './handlers/countHistoryHandlers'`, `import { t } from 'elysia'`);
-    if (flags.requiresVue && flags.requiresSvelte) {
-        const utilsDir = join(backendDirectory, 'utils');
-        mkdirSync(utilsDir, { recursive: true });
-        const vuePathForUtils = `../../frontend${vueDir ? `/${vueDir}` : ''}/pages/VueExample.vue`;
-        writeFileSync(join(utilsDir, 'vueImporter.ts'), `import VueExample from "${vuePathForUtils}"\n\nexport const vueImports = { VueExample } as const\n`);
-        rawImports.push(`import { vueImports } from './utils/vueImporter'`);
-    }
     const importMap = new Map();
     for (const stmt of rawImports) {
         const match = stmt.match(/^import\s+(.+)\s+from\s+['"](.+)['"];?/);

package/dist/generators/project/generateMarkupCSS.d.ts

@@ -1,2 +1,2 @@
 import { Frontend } from '../../types';
-export declare const generateMarkupCSS: (frontend: Frontend, color: string, isSingleFrontend: boolean) => string;
+export declare const generateMarkupCSS: (frontend: Frontend, color: string) => string;

package/dist/generators/project/generateMarkupCSS.js

@@ -1,4 +1,4 @@
-export const generateMarkupCSS = (frontend, color, isSingleFrontend) => `@import url('${isSingleFrontend ? '../styles/reset.css' : '../../styles/reset.css'}');
+export const generateMarkupCSS = (frontend, color) => `@import url('../reset.css');
 
 header {
 	align-items: center;

package/dist/generators/project/generateRoutesBlock.d.ts

@@ -1,10 +1,8 @@
 import type { AuthOption, CreateConfiguration, FrontendDirectories } from '../../types';
-import type { FrameworkFlags } from './computeFlags';
 type GenerateRoutesBlockProps = {
     databaseEngine: CreateConfiguration['databaseEngine'];
-    flags: FrameworkFlags;
     frontendDirectories: FrontendDirectories;
     authOption: AuthOption;
 };
-export declare const generateRoutesBlock: ({ databaseEngine, flags, frontendDirectories, authOption }: GenerateRoutesBlockProps) => string;
+export declare const generateRoutesBlock: ({ databaseEngine, frontendDirectories, authOption }: GenerateRoutesBlockProps) => string;
 export {};

package/dist/generators/project/generateRoutesBlock.js

@@ -1,5 +1,5 @@
 import { isFrontend } from '../../typeGuards';
-export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories, authOption }) => {
+export const generateRoutesBlock = ({ databaseEngine, frontendDirectories, authOption }) => {
     const hasDatabase = databaseEngine !== undefined && databaseEngine !== 'none';
     const routes = [];
     const wrap = (handlerCall, isAsync = false) => authOption === 'abs'
@@ -16,61 +16,56 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
     return ${handlerCall};
   }`
         : `${isAsync ? 'async ' : ''}() => ${handlerCall}`;
-    const createHandlerCall = (frontend, directory) => {
+    const createHandlerCall = (frontend) => {
         if (frontend === 'angular')
-            return `handleAngularPageRequest(
-    () => import('../frontend${directory ? `/${directory}` : ''}/pages/angular-example'),
-    asset(manifest, 'AngularExample'),
-    asset(manifest, 'AngularExampleIndex'),
-    generateHeadElement({
+            return `handleAngularPageRequest<typeof AngularExamplePage>({
+    headTag: generateHeadElement({
       cssPath: asset(manifest, 'AngularExampleCSS'),
       title: 'AbsoluteJS + Angular'
     }),
-    { initialCount: 0 }
-  )`;
+    indexPath: asset(manifest, 'AngularExampleIndex'),
+    pagePath: asset(manifest, 'AngularExample'),
+    props: { initialCount: 0 }
+  })`;
         if (frontend === 'html')
             return `handleHTMLPageRequest(asset(manifest, 'HTMLExample'))`;
         if (frontend === 'htmx')
             return `handleHTMXPageRequest(asset(manifest, 'HTMXExample'))`;
         if (frontend === 'react') {
             const reactProps = authOption === 'abs'
-                ? `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS'), user, providerConfiguration }`
-                : `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS') }`;
-            return `handleReactPageRequest(
-    ReactExample,
-    asset(manifest, 'ReactExampleIndex'),
-    ${reactProps}
-  )`;
+                ? `{ cssPath: asset(manifest, 'ReactExampleCSS'), initialCount: 0, providerConfiguration, user }`
+                : `{ cssPath: asset(manifest, 'ReactExampleCSS'), initialCount: 0 }`;
+            return `handleReactPageRequest({
+    Page: ReactExample,
+    index: asset(manifest, 'ReactExampleIndex'),
+    props: ${reactProps}
+  })`;
         }
         if (frontend === 'svelte')
-            return `handleSveltePageRequest(
-    SvelteExample,
-    asset(manifest, 'SvelteExample'),
-    asset(manifest, 'SvelteExampleIndex'),
-    { initialCount: 0, cssPath: asset(manifest, 'SvelteExampleCSS') }
-  )`;
-        if (frontend === 'vue') {
-            const vueComponent = flags.requiresSvelte
-                ? 'vueImports.VueExample'
-                : 'VueExample';
-            return `handleVuePageRequest(
-    ${vueComponent},
-    asset(manifest, 'VueExample'),
-    asset(manifest, 'VueExampleIndex'),
-    generateHeadElement({
-      cssPath: asset(manifest, 'VueExampleCSS'),
-      title: 'AbsoluteJS + Vue',
-      description: 'A Vue.js example with AbsoluteJS'
+            return `handleSveltePageRequest<typeof SvelteExample>({
+    indexPath: asset(manifest, 'SvelteExampleIndex'),
+    pagePath: asset(manifest, 'SvelteExample'),
+    props: { cssPath: asset(manifest, 'SvelteExampleCSS'), initialCount: 0 }
+  })`;
+        if (frontend === 'vue')
+            return `handleVuePageRequest<typeof VueExample>({
+    headTag: generateHeadElement({
+      cssPath: [
+        asset(manifest, 'VueExampleCSS'),
+        asset(manifest, 'VueExampleCompiledCSS')
+      ],
+      title: 'AbsoluteJS + Vue'
     }),
-    { initialCount: 0 }
-  )`;
-        }
+    indexPath: asset(manifest, 'VueExampleIndex'),
+    pagePath: asset(manifest, 'VueExample'),
+    props: { initialCount: 0 }
+  })`;
         return '';
     };
-    Object.entries(frontendDirectories).forEach(([frontend, directory], entryIndex) => {
+    Object.entries(frontendDirectories).forEach(([frontend], entryIndex) => {
         if (!isFrontend(frontend))
             return;
-        const handlerCall = createHandlerCall(frontend, directory ?? '');
+        const handlerCall = createHandlerCall(frontend);
         if (!handlerCall)
             return;
         const isAsync = frontend === 'angular';

package/dist/generators/project/generateServer.js

@@ -12,7 +12,6 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
     const deps = collectDependencies({ authOption, flags, plugins });
     const importsBlock = generateImportsBlock({
         authOption,
-        backendDirectory,
         databaseEngine,
         databaseHost,
         deps,
@@ -61,7 +60,6 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
     const routesBlock = generateRoutesBlock({
         authOption,
         databaseEngine,
-        flags,
         frontendDirectories
     });
     const content = `${importsBlock}

package/dist/generators/project/scaffoldFrontends.js

@@ -1,5 +1,5 @@
 import { copyFileSync, cpSync, mkdirSync } from 'fs';
-import { join } from 'path';
+import { dirname, join } from 'path';
 import { scaffoldAngular } from '../angular/scaffoldAngular';
 import { scaffoldHTML } from '../html/scaffoldHTML';
 import { scaffoldHTMX } from '../htmx/scaffoldHTMX';
@@ -7,10 +7,15 @@ import { scaffoldReact } from '../react/scaffoldReact';
 import { scaffoldSvelte } from '../svelte/scaffoldSvelte';
 import { scaffoldVue } from '../vue/scaffoldVue';
 export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProviders, authOption, templatesDirectory, projectAssetsDirectory, typesDirectory, useHTMLScripts, useTailwind, frontendDirectories, frontends }) => {
-    const stylesTargetDirectory = join(frontendDirectory, 'styles');
-    cpSync(join(templatesDirectory, 'styles'), stylesTargetDirectory, {
+    const srcDirectory = dirname(frontendDirectory);
+    const globalStylesDirectory = join(srcDirectory, 'styles');
+    const stylesIndexesDirectory = join(globalStylesDirectory, 'indexes');
+    cpSync(join(templatesDirectory, 'styles'), globalStylesDirectory, {
         recursive: true
     });
+    mkdirSync(stylesIndexesDirectory, { recursive: true });
+    const stylesTargetDirectory = join(frontendDirectory, 'styles');
+    mkdirSync(stylesTargetDirectory, { recursive: true });
     if (useTailwind) {
         copyFileSync(join(templatesDirectory, 'tailwind', 'tailwind.css'), join(stylesTargetDirectory, 'tailwind.css'));
     }
@@ -39,6 +44,8 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });
@@ -52,6 +59,8 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });
@@ -64,6 +73,8 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     editBasePath,
                     frontends,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });
@@ -78,6 +89,8 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });
@@ -91,6 +104,8 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory,
                     useHTMLScripts
@@ -105,6 +120,8 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });

package/dist/generators/react/scaffoldReact.d.ts

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldReact: ({ isSingleFrontend, authOption, editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, absProviders }: ScaffoldFrontendProps) => void;
+export declare const scaffoldReact: ({ authOption, editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, absProviders, stylesIndexesDirectory }: ScaffoldFrontendProps) => void;

package/dist/generators/react/scaffoldReact.js

@@ -2,7 +2,7 @@ import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateMarkupCSS } from '../project/generateMarkupCSS';
 import { generateAppComponent, generateDropdownComponent, generateReactExamplePage, generateSignInComponent } from './generateReactComponents';
-export const scaffoldReact = ({ isSingleFrontend, authOption, editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, absProviders }) => {
+export const scaffoldReact = ({ authOption, editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, absProviders, stylesIndexesDirectory }) => {
     mkdirSync(join(projectAssetsDirectory, 'svg'), { recursive: true });
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'react.svg'), join(projectAssetsDirectory, 'svg', 'react.svg'));
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'google-logo.svg'), join(projectAssetsDirectory, 'svg', 'google-logo.svg'));
@@ -20,9 +20,7 @@ export const scaffoldReact = ({ isSingleFrontend, authOption, editBasePath, targ
     const pageComponent = generateReactExamplePage(authOption);
     mkdirSync(join(targetDirectory, 'pages'), { recursive: true });
     writeFileSync(join(targetDirectory, 'pages', 'ReactExample.tsx'), pageComponent, 'utf-8');
-    const cssOutputDir = join(targetDirectory, 'styles');
-    mkdirSync(cssOutputDir, { recursive: true });
-    const cssOutputFile = join(cssOutputDir, 'react-example.css');
-    const reactCSS = generateMarkupCSS('react', '#61dafbaa', isSingleFrontend);
+    const cssOutputFile = join(stylesIndexesDirectory, 'react-example.css');
+    const reactCSS = generateMarkupCSS('react', '#61dafbaa');
     writeFileSync(cssOutputFile, reactCSS, 'utf-8');
 };

package/dist/generators/svelte/scaffoldSvelte.d.ts

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldSvelte: ({ editBasePath, isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }: ScaffoldFrontendProps) => void;
+export declare const scaffoldSvelte: ({ editBasePath, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory, stylesIndexesDirectory }: ScaffoldFrontendProps) => void;

package/dist/generators/svelte/scaffoldSvelte.js

@@ -1,7 +1,7 @@
 import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateSveltePage } from './generateSveltePage';
-export const scaffoldSvelte = ({ editBasePath, isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }) => {
+export const scaffoldSvelte = ({ editBasePath, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory, stylesIndexesDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'svelte-logo.svg'), join(projectAssetsDirectory, 'svg', 'svelte-logo.svg'));
     cpSync(join(templatesDirectory, 'svelte'), targetDirectory, {
         recursive: true
@@ -11,9 +11,7 @@ export const scaffoldSvelte = ({ editBasePath, isSingleFrontend, targetDirectory
     mkdirSync(pagesDirectory, { recursive: true });
     const svelteFilePath = join(pagesDirectory, 'SvelteExample.svelte');
     writeFileSync(svelteFilePath, sveltePage, 'utf-8');
-    const cssOutputDirectory = join(targetDirectory, 'styles');
-    mkdirSync(cssOutputDirectory, { recursive: true });
-    const cssOutputFile = join(cssOutputDirectory, 'svelte-example.css');
-    const svelteCSS = `@import url('${isSingleFrontend ? '../' : '../../'}styles/reset.css');`;
+    const cssOutputFile = join(stylesIndexesDirectory, 'svelte-example.css');
+    const svelteCSS = `@import url('../reset.css');`;
     writeFileSync(cssOutputFile, svelteCSS, 'utf-8');
 };

package/dist/generators/vue/generateVuePage.js

@@ -75,32 +75,6 @@ ${frontends.length > 1
 </template>
 
 <style scoped>
-:global(*) {
-	box-sizing: border-box;
-	line-height: 1.5;
-	margin: 0;
-	padding: 0;
-}
-
-:global(html) {
-	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-	height: 100%;
-}
-
-:global(body) {
-	background-color: #2c2c2c;
-	color: #f5f5f5;
-	color-scheme: light dark;
-	display: flex;
-	flex-direction: column;
-	font-synthesis: none;
-	font-weight: 400;
-	height: 100%;
-	-moz-osx-font-smoothing: grayscale;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-}
-
 :global(#root) {
 	display: flex;
 	flex-direction: column;
@@ -108,225 +82,6 @@ ${frontends.length > 1
 	height: 100%;
 	width: 100%;
 }
-
-:global(main) {
-	align-items: center;
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	justify-content: center;
-	text-align: center;
-}
-
-:global(h1),
-:global(h2),
-:global(h3),
-:global(h4),
-:global(h5),
-:global(h6) {
-	line-height: 1.1;
-}
-
-:global(p) {
-	font-size: 1.2rem;
-	max-width: 1280px;
-}
-
-a {
-	color: #5fbeeb;
-	font-size: 1.5rem;
-	font-weight: 500;
-	position: relative;
-	text-decoration: none;
-}
-
-header {
-	align-items: center;
-	background-color: #1a1a1a;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-	display: flex;
-	justify-content: space-between;
-	padding: 2rem;
-	text-align: center;
-}
-
-header a {
-	position: relative;
-	color: #5fbeeb;
-	text-decoration: none;
-}
-
-header a::after {
-	content: '';
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	width: 100%;
-	height: 2px;
-	background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
-	transform: scaleX(0);
-	transform-origin: left;
-	transition: transform 0.25s ease-in-out;
-}
-
-header a:hover::after {
-	transform: scaleX(1);
-}
-
-h1 {
-	font-size: 2.5rem;
-	margin-top: 2rem;
-}
-
-.logo {
-	height: 8rem;
-	width: 8rem;
-	will-change: filter;
-	transition: filter 300ms;
-}
-.logo:hover {
-	filter: drop-shadow(0 0 2rem #5fbeeb);
-}
-.logo.vue:hover {
-	filter: drop-shadow(0 0 2rem #42b883);
-}
-
-button:hover {
-	border-color: #42b883;
-}
-
-nav {
-	display: flex;
-	gap: 4rem;
-	justify-content: center;
-}
-
-header details {
-	position: relative;
-}
-
-header details summary {
-	list-style: none;
-	appearance: none;
-	-webkit-appearance: none;
-	cursor: pointer;
-	user-select: none;
-	color: #5fbeeb;
-	font-size: 1.5rem;
-	font-weight: 500;
-	padding: 0.5rem 1rem;
-}
-
-header summary::after {
-	content: '▼';
-	display: inline-block;
-	margin-left: 0.5rem;
-	font-size: 0.75rem;
-	transition: transform 0.3s ease;
-}
-
-header details[open] summary::after {
-	transform: rotate(180deg);
-}
-
-header details nav {
-	content-visibility: visible;
-	position: absolute;
-	top: 100%;
-	right: -0.5rem;
-	display: flex;
-	flex-direction: column;
-	gap: 0.75rem;
-	background: rgba(128, 128, 128, 0.15);
-	backdrop-filter: blur(4px);
-	border: 1px solid #5fbeeb;
-	border-radius: 1rem;
-	padding: 1rem 1.5rem;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-	opacity: 0;
-	transform: translateY(-8px);
-	pointer-events: none;
-	transition:
-		opacity 0.3s ease,
-		transform 0.3s ease;
-	z-index: 1000;
-}
-
-header details[open] nav {
-	opacity: 1;
-	transform: translateY(0);
-	pointer-events: auto;
-}
-
-header details nav a {
-	font-size: 1.1rem;
-	padding: 0.25rem 0;
-	white-space: nowrap;
-}
-
-@media (max-width: 480px) {
-	:global(main) {
-		padding: 1rem;
-	}
-
-	:global(p) {
-		font-size: 1rem;
-	}
-
-	header {
-		padding: 1rem;
-	}
-
-	a {
-		font-size: 1.2rem;
-	}
-
-	h1 {
-		font-size: 1.75rem;
-	}
-
-	.logo {
-		height: 5rem;
-		width: 5rem;
-	}
-
-	nav {
-		gap: 2rem;
-	}
-
-	header details summary {
-		font-size: 1.2rem;
-	}
-}
-
-code {
-	background-color: rgba(255, 255, 255, 0.08);
-	border: 1px solid rgba(255, 255, 255, 0.1);
-	border-radius: 0.375rem;
-	font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-	font-size: 0.875em;
-	padding: 0.2rem 0.5rem;
-}
-
-@media (prefers-color-scheme: light) {
-	:global(body) {
-		background-color: #f5f5f5;
-		color: #1a1a1a;
-	}
-
-	header {
-		background-color: #ffffff;
-	}
-
-	button {
-		background-color: #ffffff;
-	}
-
-	code {
-		background-color: rgba(0, 0, 0, 0.06);
-		border-color: rgba(0, 0, 0, 0.1);
-	}
-}
 </style>
 `;
 };

package/dist/generators/vue/scaffoldVue.d.ts

@@ -1,4 +1,4 @@
 import { ScaffoldFrontendProps } from '../../types';
 type ScaffoldVueProps = Omit<ScaffoldFrontendProps, 'isSingleFrontend'>;
-export declare const scaffoldVue: ({ editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }: ScaffoldVueProps) => void;
+export declare const scaffoldVue: ({ editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, stylesIndexesDirectory }: ScaffoldVueProps) => void;
 export {};

package/dist/generators/vue/scaffoldVue.js

@@ -1,7 +1,8 @@
 import { cpSync, copyFileSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
+import { generateMarkupCSS } from '../project/generateMarkupCSS';
 import { generateVuePage } from './generateVuePage';
-export const scaffoldVue = ({ editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }) => {
+export const scaffoldVue = ({ editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, stylesIndexesDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'vue-logo.svg'), join(projectAssetsDirectory, 'svg', 'vue-logo.svg'));
     cpSync(join(templatesDirectory, 'vue'), targetDirectory, {
         recursive: true
@@ -11,4 +12,7 @@ export const scaffoldVue = ({ editBasePath, targetDirectory, templatesDirectory,
     mkdirSync(pagesDirectory, { recursive: true });
     const vueFilePath = join(pagesDirectory, 'VueExample.vue');
     writeFileSync(vueFilePath, vuePage, 'utf-8');
+    const cssOutputFile = join(stylesIndexesDirectory, 'vue-example.css');
+    const vueCSS = generateMarkupCSS('vue', '#42b883');
+    writeFileSync(cssOutputFile, vueCSS, 'utf-8');
 };

package/dist/types.d.ts

@@ -8,6 +8,8 @@ export type ScaffoldFrontendProps = {
     targetDirectory: string;
     templatesDirectory: string;
     projectAssetsDirectory: string;
+    stylesDirectory: string;
+    stylesIndexesDirectory: string;
     isSingleFrontend: boolean;
     frontends: Frontend[];
 };

package/dist/versions.d.ts

@@ -4,15 +4,15 @@
  * Run `bun run check-versions` to compare against latest npm versions.
  */
 export declare const versions: {
-    readonly '@absolutejs/absolute': "0.17.12";
+    readonly '@absolutejs/absolute': "0.19.0-beta.872";
     readonly '@absolutejs/auth': "0.22.4";
-    readonly '@angular/common': "21.0.0";
-    readonly '@angular/compiler': "21.0.0";
-    readonly '@angular/compiler-cli': "21.0.0";
-    readonly '@angular/core': "21.0.0";
-    readonly '@angular/platform-browser': "21.0.0";
-    readonly '@angular/platform-server': "21.0.0";
-    readonly '@angular/ssr': "21.0.0";
+    readonly '@angular/common': "21.2.0";
+    readonly '@angular/compiler': "21.2.0";
+    readonly '@angular/compiler-cli': "21.2.0";
+    readonly '@angular/core': "21.2.0";
+    readonly '@angular/platform-browser': "21.2.0";
+    readonly '@angular/platform-server': "21.2.0";
+    readonly '@angular/ssr': "21.2.0";
     readonly '@elysiajs/cors': "1.4.1";
     readonly '@elysiajs/eden': "1.4.8";
     readonly '@elysiajs/static': "1.4.7";
@@ -53,6 +53,7 @@ export declare const versions: {
     readonly 'prettier-plugin-svelte': "3.5.0";
     readonly react: "19.2.4";
     readonly 'react-dom': "19.2.4";
+    readonly 'react-refresh': "0.18.0";
     readonly svelte: "5.53.0";
     readonly tailwindcss: "4.2.0";
     readonly typescript: "5.9.3";

package/dist/versions.js

@@ -5,16 +5,16 @@
  */
 export const versions = {
     /* ── Core ─────────────────────────────────────────────── */
-    '@absolutejs/absolute': '0.17.12',
+    '@absolutejs/absolute': '0.19.0-beta.872',
     '@absolutejs/auth': '0.22.4',
     /* ── Angular ─────────────────────────────────────────── */
-    '@angular/common': '21.0.0',
-    '@angular/compiler': '21.0.0',
-    '@angular/compiler-cli': '21.0.0',
-    '@angular/core': '21.0.0',
-    '@angular/platform-browser': '21.0.0',
-    '@angular/platform-server': '21.0.0',
-    '@angular/ssr': '21.0.0',
+    '@angular/common': '21.2.0',
+    '@angular/compiler': '21.2.0',
+    '@angular/compiler-cli': '21.2.0',
+    '@angular/core': '21.2.0',
+    '@angular/platform-browser': '21.2.0',
+    '@angular/platform-server': '21.2.0',
+    '@angular/ssr': '21.2.0',
     '@elysiajs/cors': '1.4.1',
     /* ── Plugins ──────────────────────────────────────────── */
     '@elysiajs/eden': '1.4.8',
@@ -64,6 +64,7 @@ export const versions = {
     'prettier-plugin-svelte': '3.5.0',
     react: '19.2.4',
     'react-dom': '19.2.4',
+    'react-refresh': '0.18.0',
     svelte: '5.53.0',
     tailwindcss: '4.2.0',
     /* ── Build / TypeScript ───────────────────────────────── */

package/package.json

@@ -10,7 +10,7 @@
 	},
 	"description": "A CLI tool to create a new AbsoluteJS project",
 	"devDependencies": {
-		"@absolutejs/absolute": "0.17.12",
+		"@absolutejs/absolute": "0.19.0-beta.872",
 		"@eslint/compat": "2.0.2",
 		"@stylistic/eslint-plugin": "5.9.0",
 		"@types/bun": "1.3.8",
@@ -51,5 +51,5 @@
 		"typecheck": "bun run tsc --noEmit"
 	},
 	"type": "module",
-	"version": "0.11.0"
+	"version": "0.12.0"
 }