create-absolutejs 0.10.2 → 0.11.0

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const UNFOUND_INDEX = -1;
 export declare const DEFAULT_ARG_LENGTH = 2;
-export declare const TWO_THIRDS: number;
 export declare const HOURS_IN_DAY = 24;
+export declare const TWO_THIRDS: number;
+export declare const UNFOUND_INDEX = -1;

package/dist/constants.js

@@ -1,4 +1,4 @@
-export const UNFOUND_INDEX = -1;
 export const DEFAULT_ARG_LENGTH = 2;
-export const TWO_THIRDS = 2 / 3;
 export const HOURS_IN_DAY = 24;
+export const TWO_THIRDS = 2 / 3;
+export const UNFOUND_INDEX = -1;

package/dist/data.d.ts

@@ -1,18 +1,18 @@
 import type { FrontendLabels, AvailableDependency } from './types';
-export declare const availableFrontends: readonly ["react", "html", "svelte", "vue", "htmx"];
+export declare const absoluteAuthPlugin: AvailableDependency;
 export declare const availableAuthProviders: readonly ["abs", "none"];
-export declare const availableDrizzleDialects: readonly ["gel", "mysql", "postgresql", "sqlite", "singlestore", "mariadb"];
-export declare const availablePrismaDialects: readonly ["mysql", "postgresql", "sqlite", "mongodb", "mariadb", "cockroachdb", "mssql"];
+export declare const availableCodeQualityTools: readonly ["eslint+prettier", "biome"];
 export declare const availableDatabaseEngines: readonly ["postgresql", "mysql", "sqlite", "mongodb", "mariadb", "gel", "singlestore", "cockroachdb", "mssql", "none"];
+export declare const availableDatabaseHosts: readonly ["neon", "planetscale", "turso", "none"];
 export declare const availableDirectoryConfigurations: readonly ["default", "custom"];
+export declare const availableDrizzleDialects: readonly ["gel", "mariadb", "mssql", "mysql", "postgresql", "singlestore", "sqlite"];
+export declare const availableFrontends: readonly ["react", "html", "svelte", "vue", "htmx", "angular"];
 export declare const availableORMs: readonly ["drizzle", "prisma", "none"];
-export declare const availableDatabaseHosts: readonly ["neon", "planetscale", "turso", "none"];
-export declare const availableCodeQualityTools: readonly ["eslint+prettier", "biome"];
-export declare const frontendLabels: FrontendLabels;
 export declare const availablePlugins: AvailableDependency[];
-export declare const absoluteAuthPlugin: AvailableDependency;
-export declare const scopedStatePlugin: AvailableDependency;
-export declare const eslintAndPrettierDependencies: AvailableDependency[];
-export declare const eslintReactDependencies: AvailableDependency[];
+export declare const availablePrismaDialects: readonly ["mysql", "postgresql", "sqlite", "mongodb", "mariadb", "cockroachdb", "mssql"];
 export declare const defaultDependencies: AvailableDependency[];
 export declare const defaultPlugins: AvailableDependency[];
+export declare const eslintAndPrettierDependencies: AvailableDependency[];
+export declare const eslintReactDependencies: AvailableDependency[];
+export declare const frontendLabels: FrontendLabels;
+export declare const scopedStatePlugin: AvailableDependency;

package/dist/data.js

@@ -1,31 +1,20 @@
-import { cyan, green, magenta } from 'picocolors';
+import { cyan, green, magenta, red } from 'picocolors';
 import { versions } from './versions';
-export const availableFrontends = [
-    'react',
-    'html',
-    'svelte',
-    // 'angular',
-    'vue',
-    'htmx'
-];
+export const absoluteAuthPlugin = {
+    imports: [
+        {
+            config: {
+                providersConfiguration: {}
+            },
+            isPlugin: true,
+            packageName: 'absoluteAuth'
+        }
+    ],
+    latestVersion: versions['@absolutejs/auth'],
+    value: '@absolutejs/auth'
+};
 export const availableAuthProviders = ['abs', 'none'];
-export const availableDrizzleDialects = [
-    'gel',
-    'mysql',
-    'postgresql',
-    'sqlite',
-    'singlestore',
-    'mariadb'
-];
-export const availablePrismaDialects = [
-    'mysql',
-    'postgresql',
-    'sqlite',
-    'mongodb',
-    'mariadb',
-    'cockroachdb',
-    'mssql'
-];
+export const availableCodeQualityTools = ['eslint+prettier', 'biome'];
 export const availableDatabaseEngines = [
     'postgresql',
     'mysql',
@@ -38,25 +27,31 @@ export const availableDatabaseEngines = [
     'mssql',
     'none'
 ];
-export const availableDirectoryConfigurations = ['default', 'custom'];
-export const availableORMs = ['drizzle', 'prisma', 'none'];
 export const availableDatabaseHosts = [
     'neon',
     'planetscale',
     'turso',
     'none'
 ];
-export const availableCodeQualityTools = ['eslint+prettier', 'biome'];
-/* eslint-disable absolute/sort-keys-fixable */
-export const frontendLabels = {
-    react: cyan('React'),
-    html: 'HTML',
-    htmx: 'HTMX',
-    svelte: magenta('Svelte'),
-    vue: green('Vue')
-    // angular: red('Angular'),
-};
-/* eslint-enable absolute/sort-keys-fixable */
+export const availableDirectoryConfigurations = ['default', 'custom'];
+export const availableDrizzleDialects = [
+    'gel',
+    'mariadb',
+    'mssql',
+    'mysql',
+    'postgresql',
+    'singlestore',
+    'sqlite'
+];
+export const availableFrontends = [
+    'react',
+    'html',
+    'svelte',
+    'vue',
+    'htmx',
+    'angular'
+];
+export const availableORMs = ['drizzle', 'prisma', 'none'];
 export const availablePlugins = [
     {
         imports: [{ config: null, isPlugin: true, packageName: 'cors' }],
@@ -77,42 +72,65 @@ export const availablePlugins = [
         value: 'elysia-rate-limit'
     }
 ];
-export const absoluteAuthPlugin = {
-    imports: [
-        {
-            config: {
-                providersConfiguration: {}
-            },
-            isPlugin: true,
-            packageName: 'absoluteAuth'
-        }
-    ],
-    latestVersion: versions['@absolutejs/auth'],
-    value: '@absolutejs/auth'
-};
-export const scopedStatePlugin = {
-    imports: [
-        {
-            config: { count: { value: 0 } },
-            isPlugin: true,
-            packageName: 'scopedState'
-        }
-    ],
-    latestVersion: versions['elysia-scoped-state'],
-    value: 'elysia-scoped-state'
-};
+export const availablePrismaDialects = [
+    'mysql',
+    'postgresql',
+    'sqlite',
+    'mongodb',
+    'mariadb',
+    'cockroachdb',
+    'mssql'
+];
+export const defaultDependencies = [
+    {
+        imports: [{ isPlugin: false, packageName: 'Elysia' }],
+        latestVersion: versions['elysia'],
+        value: 'elysia'
+    }
+];
+export const defaultPlugins = [
+    {
+        imports: [
+            { isPlugin: false, packageName: 'asset' },
+            { isPlugin: true, packageName: 'networking' },
+            { isPlugin: false, packageName: 'prepare' }
+        ],
+        latestVersion: versions['@absolutejs/absolute'],
+        value: '@absolutejs/absolute'
+    },
+    {
+        latestVersion: versions['@elysiajs/eden'],
+        value: '@elysiajs/eden'
+    },
+    {
+        latestVersion: versions['@elysiajs/static'],
+        value: '@elysiajs/static'
+    }
+];
 export const eslintAndPrettierDependencies = [
+    {
+        latestVersion: versions['@eslint/compat'],
+        value: '@eslint/compat'
+    },
+    {
+        latestVersion: versions['@eslint/js'],
+        value: '@eslint/js'
+    },
     {
         latestVersion: versions['eslint'],
         value: 'eslint'
     },
+    {
+        latestVersion: versions['globals'],
+        value: 'globals'
+    },
     {
         latestVersion: versions['prettier'],
         value: 'prettier'
     },
     {
-        latestVersion: versions['@stylistic/eslint-plugin-ts'],
-        value: '@stylistic/eslint-plugin-ts'
+        latestVersion: versions['@stylistic/eslint-plugin'],
+        value: '@stylistic/eslint-plugin'
     },
     {
         latestVersion: versions['@typescript-eslint/parser'],
@@ -155,37 +173,28 @@ export const eslintReactDependencies = [
     {
         latestVersion: versions['eslint-plugin-react-hooks'],
         value: 'eslint-plugin-react-hooks'
-    }
-];
-export const defaultDependencies = [
-    {
-        imports: [{ isPlugin: false, packageName: 'Elysia' }],
-        latestVersion: versions['elysia'],
-        value: 'elysia'
-    }
-];
-export const defaultPlugins = [
-    {
-        imports: [
-            { isPlugin: false, packageName: 'BuildConfig' },
-            { isPlugin: false, packageName: 'asset' },
-            { isPlugin: false, packageName: 'build' },
-            { isPlugin: false, packageName: 'devBuild' },
-            { isPlugin: false, packageName: 'hmr' },
-            { isPlugin: true, packageName: 'networking' }
-        ],
-        latestVersion: versions['@absolutejs/absolute'],
-        value: '@absolutejs/absolute'
     },
     {
-        imports: [
-            {
-                config: { assets: './build', prefix: '' },
-                isPlugin: true,
-                packageName: 'staticPlugin'
-            }
-        ],
-        latestVersion: versions['@elysiajs/static'],
-        value: '@elysiajs/static'
+        latestVersion: versions['zod-validation-error'],
+        value: 'zod-validation-error'
     }
 ];
+export const frontendLabels = {
+    angular: red('Angular'),
+    html: 'HTML',
+    htmx: 'HTMX',
+    react: cyan('React'),
+    svelte: magenta('Svelte'),
+    vue: green('Vue')
+};
+export const scopedStatePlugin = {
+    imports: [
+        {
+            config: { count: { value: 0 } },
+            isPlugin: true,
+            packageName: 'scopedState'
+        }
+    ],
+    latestVersion: versions['elysia-scoped-state'],
+    value: 'elysia-scoped-state'
+};

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

@@ -0,0 +1,7 @@
+import { Frontend } from '../../types';
+export declare const generateAngularPage: (_frontends: Frontend[]) => string;
+export declare const generateAppComponent: () => 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;

package/dist/generators/angular/generateAngularPage.js

@@ -0,0 +1,175 @@
+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 { DropdownComponent } from '../components/dropdown.component';
+import { AppComponent } from '../components/app.component';
+
+export const INITIAL_COUNT = new InjectionToken<number>('INITIAL_COUNT');
+
+type AngularPageProps = {
+	initialCount: number;
+};
+
+@Component({
+	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>
+	\`
+})
+export class AngularExampleComponent {
+	initialCount: number = 0;
+
+	constructor() {
+		const initialCountToken = inject(INITIAL_COUNT, { optional: true });
+		this.initialCount = initialCountToken ?? 0;
+	}
+}
+
+export const factory = (props: AngularPageProps) => {
+	const component = new AngularExampleComponent();
+	component.initialCount = props.initialCount;
+	return component;
+};
+`;
+export const generateAppComponent = () => `import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CounterComponent } from './counter.component';
+
+@Component({
+	selector: 'app-root',
+	standalone: true,
+	imports: [CommonModule, CounterComponent],
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.css'],
+	encapsulation: ViewEncapsulation.None
+})
+export class AppComponent {
+	@Input() initialCount: number = 0;
+}
+`;
+export const generateAppComponentCss = () => ``;
+export const generateAppComponentHtml = (frontends, editBasePath) => {
+    const exploreBlock = frontends.length > 1
+        ? `\n\t<p style="margin-top: 2rem">\n\t\tExplore the other pages to see multiple frameworks running\n\t\ttogether.\n\t</p>`
+        : '';
+    return `<main>
+	<nav>
+		<a href="https://absolutejs.com" target="_blank">
+			<img
+				class="logo"
+				src="/assets/png/absolutejs-temp.png"
+				alt="AbsoluteJS Logo"
+			/>
+		</a>
+		<a href="https://angular.dev/">
+			<img
+				class="logo angular"
+				src="/assets/svg/angular.svg"
+				alt="Angular Logo"
+			/>
+		</a>
+	</nav>
+	<h1>AbsoluteJS + Angular</h1>
+	<app-counter [initialCount]="initialCount"></app-counter>
+	<p>
+		Edit <code>${editBasePath}/pages/angular-example.ts</code> and save to
+		test HMR.
+	</p>${exploreBlock}
+	<p style="color: #777; font-size: 1rem; margin-top: 2rem">
+		Click on the AbsoluteJS and Angular logos to learn more.
+	</p>
+</main>
+`;
+};
+export const generateCounterComponent = () => `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;
+				}
+			}
+		\`
+	]
+})
+export class CounterComponent {
+	@Input() initialCount: number = 0;
+	count: number = 0;
+
+	ngOnInit() {
+		this.count = this.initialCount;
+	}
+
+	increment() {
+		this.count++;
+	}
+}
+`;
+export const generateDropdownComponent = (frontends) => {
+    const navLinks = frontends.map(formatNavLink).join('\n\t\t\t\t');
+    return `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+	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: []
+})
+export class DropdownComponent {
+	isOpen = false;
+}
+`;
+};

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

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

package/dist/generators/angular/scaffoldAngular.js

@@ -0,0 +1,34 @@
+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 }) => {
+    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 });
+    writeFileSync(join(pagesDirectory, 'angular-example.ts'), generateAngularPage(frontends), '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);
+    const customElementCSS = `
+/* Flex wrappers for Angular custom elements */
+angular-page {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+}
+
+app-root {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+}`;
+    writeFileSync(join(stylesDirectory, 'angular-example.css'), angularCSS + customElementCSS, 'utf-8');
+};

package/dist/generators/configurations/generateEslintConfig.d.ts

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