create-absolutejs 0.10.3 → 0.11.0

package/dist/generators/db/generateDockerContainer.js

@@ -104,6 +104,7 @@ const templates = {
             test: 'singlestore -u root -ppassword -e "SELECT 1" >/dev/null 2>&1'
         },
         image: 'ghcr.io/singlestore-labs/singlestoredb-dev', // NOTE: No tag specified due to data persistence
+        platform: 'linux/amd64', // Required for ARM64 (Apple Silicon); no-op on amd64
         port: '3306:3306',
         volumePath: '/data'
     }
@@ -114,14 +115,15 @@ export const generateDockerContainer = (databaseEngine) => {
         databaseEngine === 'sqlite') {
         throw new Error('Internal type error: Expected a valid local database engine');
     }
-    const { command, env, healthcheck, image, port, volumePath } = templates[databaseEngine];
+    const { command, env, healthcheck, image, platform, port, volumePath } = templates[databaseEngine];
     const commandLine = command ? `\n        command: ${command}` : '';
+    const platformLine = platform ? `\n        platform: ${platform}` : '';
     const envLines = Object.entries(env)
         .map(([key, value]) => `            ${key}: ${value}`)
         .join('\n');
     return `services:
     db:
-        image: ${image}
+        image: ${image}${platformLine}
         restart: always
         environment:
 ${envLines}

package/dist/generators/db/generateDrizzleSchema.js

@@ -15,6 +15,14 @@ const DIALECTS = {
         table: 'mysqlTable',
         time: 'timestamp()'
     },
+    mssql: {
+        builders: ['datetime2', 'int', 'mssqlTable', 'nvarchar', 'json'],
+        json: "nvarchar({ length: 'max', mode: 'json' })",
+        pkg: 'mssql-core',
+        string: 'nvarchar({ length: 255 })',
+        table: 'mssqlTable',
+        time: 'datetime2()'
+    },
     mysql: {
         builders: ['json', 'mysqlTable', 'timestamp', 'varchar', 'int'],
         json: 'json()',
@@ -51,9 +59,10 @@ const DIALECTS = {
 const builder = (expr) => expr.split('(')[0];
 export const generateDrizzleSchema = ({ databaseEngine, authOption }) => {
     const cfg = DIALECTS[databaseEngine];
-    const intBuilder = databaseEngine === 'mysql' ||
-        databaseEngine === 'singlestore' ||
-        databaseEngine === 'mariadb'
+    const intBuilder = databaseEngine === 'mariadb' ||
+        databaseEngine === 'mssql' ||
+        databaseEngine === 'mysql' ||
+        databaseEngine === 'singlestore'
         ? 'int'
         : 'integer';
     const timeBuilder = builder(cfg.time);
@@ -68,9 +77,10 @@ export const generateDrizzleSchema = ({ databaseEngine, authOption }) => {
         ? `import { sql } from 'drizzle-orm';\n`
         : '';
     let uidColumn;
-    if (databaseEngine === 'mysql' ||
-        databaseEngine === 'singlestore' ||
-        databaseEngine === 'mariadb') {
+    if (databaseEngine === 'mariadb' ||
+        databaseEngine === 'mssql' ||
+        databaseEngine === 'mysql' ||
+        databaseEngine === 'singlestore') {
         uidColumn = `${intBuilder}('uid').primaryKey().autoincrement()`;
     }
     else if (databaseEngine === 'sqlite') {

package/dist/generators/db/handlerTemplates.d.ts

@@ -35,6 +35,11 @@ declare const driverConfigurations: {
         readonly importLines: "";
         readonly queries: QueryOperations;
     };
+    readonly 'mssql:drizzle:local': {
+        readonly dbType: "NodeMssqlDatabase<SchemaType>";
+        readonly importLines: "import { eq } from 'drizzle-orm'\nimport { schema } from '../../../db/schema'";
+        readonly queries: QueryOperations;
+    };
     readonly 'mssql:sql:local': {
         readonly dbType: "ConnectionPool";
         readonly importLines: "";

package/dist/generators/db/handlerTemplates.js

@@ -353,6 +353,12 @@ import { schema } from '../../../db/schema'`,
         importLines: ``,
         queries: mongodbQueryOperations
     },
+    'mssql:drizzle:local': {
+        dbType: 'NodeMssqlDatabase<SchemaType>',
+        importLines: `import { eq } from 'drizzle-orm'
+import { schema } from '../../../db/schema'`,
+        queries: drizzleQueryOperations
+    },
     'mssql:sql:local': {
         dbType: 'ConnectionPool',
         importLines: ``,

package/dist/generators/db/scaffoldDocker.js

@@ -6,6 +6,33 @@ import { green, red } from 'picocolors';
 import { checkDockerInstalled, ensureDockerDaemonRunning, resolveDockerExe, shutdownDockerDaemon } from '../../utils/checkDockerInstalled';
 import { countHistoryTables, initTemplates, userTables } from './dockerInitTemplates';
 import { generateDockerContainer } from './generateDockerContainer';
+const initDockerSchema = async ({ authOption, databaseEngine, docker, projectName, spin }) => {
+    const dbKey = databaseEngine;
+    const { wait, cli } = initTemplates[dbKey];
+    const usesAuth = authOption !== undefined && authOption !== 'none';
+    const dbCommand = usesAuth ? userTables[dbKey] : countHistoryTables[dbKey];
+    await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml up -d db`
+        .cwd(projectName)
+        .quiet();
+    spin.message(`Initializing ${databaseEngine} schema`);
+    await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml exec -T db \
+  bash -lc '${wait} && ${cli} "${dbCommand}"'`
+        .cwd(projectName)
+        .quiet();
+    spin.message(`Stopping ${databaseEngine} container`);
+    await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml down`
+        .cwd(projectName)
+        .quiet();
+};
+const verifyDockerContainer = async ({ databaseEngine, docker, projectName, spin }) => {
+    await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml up -d --wait db`
+        .cwd(projectName)
+        .quiet();
+    spin.message(`Stopping ${databaseEngine} container`);
+    await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml down`
+        .cwd(projectName)
+        .quiet();
+};
 export const scaffoldDocker = async ({ databaseEngine, projectDatabaseDirectory, projectName, authOption }) => {
     if (databaseEngine === undefined ||
         databaseEngine === 'none' ||
@@ -19,37 +46,22 @@ export const scaffoldDocker = async ({ databaseEngine, projectDatabaseDirectory,
     const docker = resolveDockerExe();
     const spin = spinner();
     spin.start(`Starting ${databaseEngine} container`);
+    const dockerAction = databaseEngine in userTables
+        ? () => initDockerSchema({
+            authOption,
+            databaseEngine,
+            docker,
+            projectName,
+            spin
+        })
+        : () => verifyDockerContainer({
+            databaseEngine,
+            docker,
+            projectName,
+            spin
+        });
     try {
-        const hasSchemaInit = databaseEngine in userTables;
-        if (hasSchemaInit) {
-            const dbKey = databaseEngine;
-            const { wait, cli } = initTemplates[dbKey];
-            const usesAuth = authOption !== undefined && authOption !== 'none';
-            const dbCommand = usesAuth
-                ? userTables[dbKey]
-                : countHistoryTables[dbKey];
-            await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml up -d db`
-                .cwd(projectName)
-                .quiet();
-            spin.message(`Initializing ${databaseEngine} schema`);
-            await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml exec -T db \
-  bash -lc '${wait} && ${cli} "${dbCommand}"'`
-                .cwd(projectName)
-                .quiet();
-            spin.message(`Stopping ${databaseEngine} container`);
-            await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml down`
-                .cwd(projectName)
-                .quiet();
-        }
-        else {
-            await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml up -d --wait db`
-                .cwd(projectName)
-                .quiet();
-            spin.message(`Stopping ${databaseEngine} container`);
-            await $ `${docker} compose -p ${databaseEngine} -f db/docker-compose.db.yml down`
-                .cwd(projectName)
-                .quiet();
-        }
+        await dockerAction();
         spin.stop(green('Docker container verified'));
     }
     catch (err) {

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"]) => string;
+export declare const generateHTMLPage: (frontends: Frontend[], useHTMLScripts: CreateConfiguration["useHTMLScripts"], editBasePath: string) => string;

package/dist/generators/html/generateHTMLPage.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateHTMLPage = (frontends, useHTMLScripts) => {
+export const generateHTMLPage = (frontends, useHTMLScripts, editBasePath) => {
     const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
     const initialCount = useHTMLScripts ? '0' : 'disabled';
     const scriptTagBlock = useHTMLScripts
@@ -54,7 +54,7 @@ export const generateHTMLPage = (frontends, useHTMLScripts) => {
                 count is <span id="counter">${initialCount}</span>
             </button>
             <p>
-                Edit <code>example/html/pages/HtmlExample.html</code> and save
+                Edit <code>${editBasePath}/pages/HTMLExample.html</code> and save
                 to test HMR.
             </p>
 ${frontends.length > 1

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

@@ -2,5 +2,5 @@ import { ScaffoldFrontendProps } from '../../types';
 type ScaffoldHTMLProps = ScaffoldFrontendProps & {
     useHTMLScripts: boolean;
 };
-export declare const scaffoldHTML: ({ isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory }: ScaffoldHTMLProps) => void;
+export declare const scaffoldHTML: ({ editBasePath, isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory }: 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 = ({ isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory }) => {
+export const scaffoldHTML = ({ editBasePath, isSingleFrontend, targetDirectory, frontends, useHTMLScripts, templatesDirectory, projectAssetsDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'HTML5_Badge.svg'), join(projectAssetsDirectory, 'svg', 'HTML5_Badge.svg'));
-    const htmlPage = generateHTMLPage(frontends, useHTMLScripts);
+    const htmlPage = generateHTMLPage(frontends, useHTMLScripts, editBasePath);
     const pagesDirectory = join(targetDirectory, 'pages');
     mkdirSync(pagesDirectory, { recursive: true });
     const htmlFilePath = join(pagesDirectory, 'HTMLExample.html');

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

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

package/dist/generators/htmx/generateHTMXPage.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateHTMXPage = (isSingle, frontends) => {
+export const generateHTMXPage = (isSingle, frontends, editBasePath) => {
     const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
     return `<!doctype html>
 <html>
@@ -73,7 +73,7 @@ export const generateHTMXPage = (isSingle, frontends) => {
 				>
 			</button>
 			<p>
-				Edit <code>example/htmx/pages/HtmxHome.html</code> and save
+				Edit <code>${editBasePath}/pages/HTMXExample.html</code> and save
 				to test HMR.
 			</p>
 ${frontends.length > 1

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

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldHTMX: ({ targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend }: ScaffoldFrontendProps) => void;
+export declare const scaffoldHTMX: ({ editBasePath, targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend }: 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 = ({ targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend }) => {
+export const scaffoldHTMX = ({ editBasePath, targetDirectory, templatesDirectory, projectAssetsDirectory, frontends, isSingleFrontend }) => {
     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');
@@ -15,7 +15,7 @@ export const scaffoldHTMX = ({ targetDirectory, templatesDirectory, projectAsset
         copyFileSync(src, dest);
         break;
     }
-    const htmxPage = generateHTMXPage(isSingleFrontend, frontends);
+    const htmxPage = generateHTMXPage(isSingleFrontend, frontends, editBasePath);
     const pagesDirectory = join(targetDirectory, 'pages');
     mkdirSync(pagesDirectory, { recursive: true });
     const htmxFilePath = join(pagesDirectory, 'HTMXExample.html');

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

@@ -1,6 +1,7 @@
 import type { FrontendDirectories } from '../../types';
 export type FrameworkFlags = ReturnType<typeof computeFlags>;
 export declare const computeFlags: (dirs: FrontendDirectories) => {
+    requiresAngular: boolean;
     requiresHtml: boolean;
     requiresHtmx: boolean;
     requiresReact: boolean;

package/dist/generators/project/computeFlags.js

@@ -1,4 +1,5 @@
 export const computeFlags = (dirs) => ({
+    requiresAngular: dirs.angular !== undefined,
     requiresHtml: dirs.html !== undefined,
     requiresHtmx: dirs.htmx !== undefined,
     requiresReact: dirs.react !== undefined,

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

@@ -1,10 +1,11 @@
 import type { CreateConfiguration, FrontendDirectories } from '../../types';
 type GenerateBuildBlockProps = {
     assetsDirectory: string;
+    backendDirectory: string;
     buildDirectory: string;
     frontendDirectories: FrontendDirectories;
     publicDirectory: string;
     tailwind: CreateConfiguration['tailwind'];
 };
-export declare const generateBuildBlock: ({ assetsDirectory, buildDirectory, frontendDirectories, publicDirectory, tailwind }: GenerateBuildBlockProps) => string;
+export declare const generateBuildBlock: ({ assetsDirectory, backendDirectory, buildDirectory, frontendDirectories, publicDirectory, tailwind }: GenerateBuildBlockProps) => string;
 export {};

package/dist/generators/project/generateBuildBlock.js

@@ -1,4 +1,6 @@
-export const generateBuildBlock = ({ assetsDirectory, buildDirectory, frontendDirectories, publicDirectory, tailwind }) => {
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+export const generateBuildBlock = ({ assetsDirectory, backendDirectory, buildDirectory, frontendDirectories, publicDirectory, tailwind }) => {
     const configEntries = [
         `assetsDirectory: '${assetsDirectory}'`,
         `buildDirectory: '${buildDirectory}'`,
@@ -7,11 +9,13 @@ export const generateBuildBlock = ({ assetsDirectory, buildDirectory, frontendDi
         tailwind ? `tailwind: ${JSON.stringify(tailwind)}` : ''
     ]
         .filter(Boolean)
-        .join(',\n  ');
-    return `const buildConfig: BuildConfig = {
-  ${configEntries}
-};
+        .join(',\n\t');
+    const configContent = `import { defineConfig } from '@absolutejs/absolute'
 
-const isDev = env.NODE_ENV === 'development';
-const result = isDev ? await devBuild(buildConfig) : await build(buildConfig);`;
+export default defineConfig({
+\t${configEntries}
+})
+`;
+    writeFileSync(join(backendDirectory, '..', '..', 'absolute.config.ts'), configContent);
+    return `const { absolutejs, manifest } = await prepare()`;
 };

package/dist/generators/project/generateDBBlock.js

@@ -64,6 +64,12 @@ export const generateDBBlock = ({ databaseEngine, orm, databaseHost }) => {
         return `
 const pool = createPool(getEnv("DATABASE_URL"))
 const db = drizzle(pool, { schema, mode: 'default' })
+`;
+    }
+    if (databaseEngine === 'mssql' && hostKey === 'none') {
+        return `
+const pool = await connect(getEnv("DATABASE_URL"))
+const db = drizzle({ client: pool }, { schema })
 `;
     }
     if (databaseEngine === 'postgresql' && databaseHost === 'neon') {

package/dist/generators/project/generateImportsBlock.js

@@ -4,6 +4,8 @@ import { isDrizzleDialect } from '../../typeGuards';
 export const generateImportsBlock = ({ backendDirectory, 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.requiresSvelte, 'handleSveltePageRequest', '@absolutejs/absolute/svelte');
@@ -11,6 +13,7 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
     pushHandler(flags.requiresVue, 'generateHeadElement');
     pushHandler(flags.requiresHtmx, 'handleHTMXPageRequest');
     const nonFrameworkOnly = (flags.requiresHtml || flags.requiresHtmx) &&
+        !flags.requiresAngular &&
         !flags.requiresReact &&
         !flags.requiresSvelte &&
         !flags.requiresVue;
@@ -26,7 +29,6 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
             .sort()
             .join(', ')} } from '${dependency.value}'`);
     }
-    rawImports.push(`import { env } from 'bun'`);
     const buildExamplePath = (dir, file) => `../frontend${dir ? `/${dir}` : ''}/pages/${file}`;
     const reactDir = frontendDirectories.react;
     const svelteDir = frontendDirectories.svelte;
@@ -63,6 +65,19 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
                 : [`import { schema } from '../../db/schema'`])
         ]
     };
+    const getPostgresqlOrmDatabaseImports = () => {
+        if (!isRemoteHost)
+            return [
+                `import { SQL } from 'bun'`,
+                `import { drizzle } from 'drizzle-orm/bun-sql'`
+            ];
+        if (databaseHost === 'planetscale')
+            return [
+                `import { drizzle } from 'drizzle-orm/node-postgres'`,
+                `import { Pool } from 'pg'`
+            ];
+        return [];
+    };
     const ormDatabaseImports = {
         drizzle: {
             gel: [
@@ -73,23 +88,17 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
                 `import { drizzle } from 'drizzle-orm/mysql2'`,
                 `import { createPool } from 'mysql2/promise'`
             ],
+            mssql: [
+                `import { connect } from 'mssql'`,
+                `import { drizzle } from 'drizzle-orm/node-mssql'`
+            ],
             mysql: !isRemoteHost
                 ? [
                     `import { drizzle } from 'drizzle-orm/mysql2'`,
                     `import { createPool } from 'mysql2/promise'`
                 ]
                 : [],
-            postgresql: !isRemoteHost
-                ? [
-                    `import { SQL } from 'bun'`,
-                    `import { drizzle } from 'drizzle-orm/bun-sql'`
-                ]
-                : isRemoteHost && databaseHost === 'planetscale'
-                    ? [
-                        `import { drizzle } from 'drizzle-orm/node-postgres'`,
-                        `import { Pool } from 'pg'`
-                    ]
-                    : [],
+            postgresql: getPostgresqlOrmDatabaseImports(),
             singlestore: [
                 `import { drizzle } from 'drizzle-orm/singlestore'`,
                 `import { createPool } from 'mysql2/promise'`
@@ -102,6 +111,22 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
                 : []
         }
     };
+    const getPostgresqlNoOrmImports = () => {
+        if (isRemoteHost && databaseHost === 'neon')
+            return [
+                ...connectorImports[databaseHost],
+                `import { getEnv } from '@absolutejs/absolute'`
+            ];
+        if (isRemoteHost && databaseHost === 'planetscale')
+            return [
+                `import { Pool } from 'pg'`,
+                `import { getEnv } from '@absolutejs/absolute'`
+            ];
+        return [
+            `import { SQL } from 'bun'`,
+            `import { getEnv } from '@absolutejs/absolute'`
+        ];
+    };
     const noOrmImports = {
         cockroachdb: [
             `import { SQL } from 'bun'`,
@@ -132,20 +157,7 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
                 `import { SQL } from 'bun'`,
                 `import { getEnv } from '@absolutejs/absolute'`
             ],
-        postgresql: isRemoteHost && databaseHost === 'neon'
-            ? [
-                ...connectorImports[databaseHost],
-                `import { getEnv } from '@absolutejs/absolute'`
-            ]
-            : isRemoteHost && databaseHost === 'planetscale'
-                ? [
-                    `import { Pool } from 'pg'`,
-                    `import { getEnv } from '@absolutejs/absolute'`
-                ]
-                : [
-                    `import { SQL } from 'bun'`,
-                    `import { getEnv } from '@absolutejs/absolute'`
-                ],
+        postgresql: getPostgresqlNoOrmImports(),
         singlestore: [
             `import { createPool } from 'mysql2/promise'`,
             `import { getEnv } from '@absolutejs/absolute'`
@@ -160,7 +172,7 @@ export const generateImportsBlock = ({ backendDirectory, deps, flags, orm, authO
     if (orm === 'drizzle') {
         rawImports.push(...ormImports[orm]);
     }
-    if (orm == 'drizzle' &&
+    if (orm === 'drizzle' &&
         isRemoteHost &&
         !(databaseEngine === 'postgresql' && databaseHost === 'planetscale')) {
         rawImports.push(...connectorImports[databaseHost], ...dialectImports[databaseHost]);

package/dist/generators/project/generateMarkupCSS.js

@@ -53,6 +53,10 @@ h1 {
 	filter: drop-shadow(0 0 2rem ${color});
 }
 
+button:hover {
+	border-color: ${color};
+}
+
 nav {
 	display: flex;
 	gap: 4rem;

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

@@ -5,7 +5,6 @@ type GenerateRoutesBlockProps = {
     flags: FrameworkFlags;
     frontendDirectories: FrontendDirectories;
     authOption: AuthOption;
-    buildDirectory: string;
 };
-export declare const generateRoutesBlock: ({ databaseEngine, flags, frontendDirectories, authOption, buildDirectory }: GenerateRoutesBlockProps) => string;
+export declare const generateRoutesBlock: ({ databaseEngine, flags, frontendDirectories, authOption }: GenerateRoutesBlockProps) => string;
 export {};

package/dist/generators/project/generateRoutesBlock.js

@@ -1,8 +1,8 @@
 import { isFrontend } from '../../typeGuards';
-export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories, authOption, buildDirectory }) => {
+export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories, authOption }) => {
     const hasDatabase = databaseEngine !== undefined && databaseEngine !== 'none';
     const routes = [];
-    const wrap = (handlerCall) => authOption === 'abs'
+    const wrap = (handlerCall, isAsync = false) => authOption === 'abs'
         ? `async ({ cookie: { auth_provider, user_session_id }, store: { session }, status }) => {
     const { user, error } = await getStatus(session, user_session_id);
 
@@ -15,29 +15,39 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
 
     return ${handlerCall};
   }`
-        : `() => ${handlerCall}`;
+        : `${isAsync ? 'async ' : ''}() => ${handlerCall}`;
     const createHandlerCall = (frontend, directory) => {
-        const base = `${buildDirectory}${directory ? `/${directory}` : ''}/pages`;
+        if (frontend === 'angular')
+            return `handleAngularPageRequest(
+    () => import('../frontend${directory ? `/${directory}` : ''}/pages/angular-example'),
+    asset(manifest, 'AngularExample'),
+    asset(manifest, 'AngularExampleIndex'),
+    generateHeadElement({
+      cssPath: asset(manifest, 'AngularExampleCSS'),
+      title: 'AbsoluteJS + Angular'
+    }),
+    { initialCount: 0 }
+  )`;
         if (frontend === 'html')
-            return `handleHTMLPageRequest(\`${base}/HTMLExample.html\`)`;
+            return `handleHTMLPageRequest(asset(manifest, 'HTMLExample'))`;
         if (frontend === 'htmx')
-            return `handleHTMXPageRequest(\`${base}/HTMXExample.html\`)`;
+            return `handleHTMXPageRequest(asset(manifest, 'HTMXExample'))`;
         if (frontend === 'react') {
             const reactProps = authOption === 'abs'
-                ? `{ initialCount: 0, cssPath: asset(result, 'ReactExampleCSS'), user, providerConfiguration }`
-                : `{ initialCount: 0, cssPath: asset(result, 'ReactExampleCSS') }`;
+                ? `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS'), user, providerConfiguration }`
+                : `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS') }`;
             return `handleReactPageRequest(
     ReactExample,
-    asset(result, 'ReactExampleIndex'),
+    asset(manifest, 'ReactExampleIndex'),
     ${reactProps}
   )`;
         }
         if (frontend === 'svelte')
             return `handleSveltePageRequest(
     SvelteExample,
-    asset(result, 'SvelteExample'),
-    asset(result, 'SvelteExampleIndex'),
-    { initialCount: 0, cssPath: asset(result, 'SvelteExampleCSS') }
+    asset(manifest, 'SvelteExample'),
+    asset(manifest, 'SvelteExampleIndex'),
+    { initialCount: 0, cssPath: asset(manifest, 'SvelteExampleCSS') }
   )`;
         if (frontend === 'vue') {
             const vueComponent = flags.requiresSvelte
@@ -45,10 +55,10 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
                 : 'VueExample';
             return `handleVuePageRequest(
     ${vueComponent},
-    asset(result, 'VueExample'),
-    asset(result, 'VueExampleIndex'),
+    asset(manifest, 'VueExample'),
+    asset(manifest, 'VueExampleIndex'),
     generateHeadElement({
-      cssPath: asset(result, 'VueExampleCSS'),
+      cssPath: asset(manifest, 'VueExampleCSS'),
       title: 'AbsoluteJS + Vue',
       description: 'A Vue.js example with AbsoluteJS'
     }),
@@ -60,10 +70,11 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
     Object.entries(frontendDirectories).forEach(([frontend, directory], entryIndex) => {
         if (!isFrontend(frontend))
             return;
-        const handlerCall = createHandlerCall(frontend, directory);
+        const handlerCall = createHandlerCall(frontend, directory ?? '');
         if (!handlerCall)
             return;
-        const handler = wrap(handlerCall);
+        const isAsync = frontend === 'angular';
+        const handler = wrap(handlerCall, isAsync);
         if (entryIndex === 0) {
             routes.push(`.get('/', ${handler})`);
         }

package/dist/generators/project/generateServer.js

@@ -22,6 +22,7 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
     });
     const manifestBlock = generateBuildBlock({
         assetsDirectory,
+        backendDirectory,
         buildDirectory,
         frontendDirectories,
         publicDirectory,
@@ -59,31 +60,25 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
 		})`;
     const routesBlock = generateRoutesBlock({
         authOption,
-        buildDirectory,
         databaseEngine,
         flags,
         frontendDirectories
     });
-    const hmrBlock = `
-if (
-  typeof result.hmrState !== 'string' &&
-  typeof result.manifest === 'object'
-) {
-  server.use(hmr(result.hmrState, result.manifest));
-}`;
     const content = `${importsBlock}
 
 ${manifestBlock}
 ${dbBlock ? `${dbBlock}\n` : ''}
 const server = new Elysia()
+.use(absolutejs)
 ${useBlock}${authOption === 'abs' ? `\n${guardBlock}` : ''}
   ${routesBlock}
   .use(networking)
   .on('error', err => {
     const { request } = err
     console.error(\`Server error on \${request.method} \${request.url}: \${err.message}\`)
-  });
-${hmrBlock}
+  })
+
+export type Server = typeof server
 `;
     writeFileSync(serverFilePath, content);
 };