create-absolutejs 0.10.3 → 0.12.0

package/dist/generators/db/generateDatabaseTypes.js

@@ -34,6 +34,11 @@ export const generateDatabaseTypes = ({ databaseEngine, databaseHost, authOption
                 dbTypeLine =
                     'export type DatabaseType = Mysql2Database<SchemaType>;';
                 break;
+            case 'mssql':
+                dbImport = `import { NodeMssqlDatabase } from 'drizzle-orm/node-mssql';`;
+                dbTypeLine =
+                    'export type DatabaseType = NodeMssqlDatabase<SchemaType>;';
+                break;
             case 'postgresql':
                 dbImport = `import { BunSQLDatabase } from 'drizzle-orm/bun-sql';`;
                 dbTypeLine =

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, isSingleFrontend: boolean) => 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, 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) => {
         <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>
@@ -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, 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 = ({ 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);
+    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 = ({ isSingleFrontend, targetDirectory, frontends, use
     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.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>
@@ -11,7 +11,7 @@ export const generateHTMXPage = (isSingle, frontends) => {
 		<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>
@@ -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, 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 = ({ 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');
@@ -15,14 +15,12 @@ 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');
     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/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,17 +1,22 @@
-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}'`,
         ...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)
-        .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.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,42 +1,37 @@
-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.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}'`);
     }
-    rawImports.push(`import { env } from 'bun'`);
     const buildExamplePath = (dir, file) => `../frontend${dir ? `/${dir}` : ''}/pages/${file}`;
     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'`],
@@ -63,6 +58,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 +81,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 +104,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 +150,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 +165,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]);
@@ -175,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;
@@ -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

@@ -1,11 +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;
-    buildDirectory: string;
 };
-export declare const generateRoutesBlock: ({ databaseEngine, flags, frontendDirectories, authOption, buildDirectory }: GenerateRoutesBlockProps) => string;
+export declare const generateRoutesBlock: ({ databaseEngine, frontendDirectories, authOption }: GenerateRoutesBlockProps) => string;
 export {};