create-absolutejs 0.10.3 → 0.11.0

package/dist/generators/project/scaffoldFrontends.js

@@ -1,5 +1,6 @@
 import { copyFileSync, cpSync, mkdirSync } from 'fs';
 import { join } from 'path';
+import { scaffoldAngular } from '../angular/scaffoldAngular';
 import { scaffoldHTML } from '../html/scaffoldHTML';
 import { scaffoldHTMX } from '../htmx/scaffoldHTMX';
 import { scaffoldReact } from '../react/scaffoldReact';
@@ -25,12 +26,16 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
         const targetDirectory = join(frontendDirectory, directory);
         if (!isSingleFrontend)
             mkdirSync(targetDirectory);
+        const editBasePath = directory
+            ? `src/frontend/${directory}`
+            : 'src/frontend';
         switch (frontendName) {
             case 'react':
                 scaffoldReact({
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
@@ -43,6 +48,7 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
@@ -55,6 +61,7 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     projectAssetsDirectory,
                     targetDirectory,
@@ -63,13 +70,24 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                 copyFileSync(join(templatesDirectory, 'types', 'vue-shim.d.ts'), join(typesDirectory, 'vue-shim.d.ts'));
                 break;
             case 'angular':
-                console.warn('Angular is not yet supported. Refer to the documentation for more information.');
+                scaffoldAngular({
+                    absProviders,
+                    assetsDirectory,
+                    authOption,
+                    editBasePath,
+                    frontends,
+                    isSingleFrontend,
+                    projectAssetsDirectory,
+                    targetDirectory,
+                    templatesDirectory
+                });
                 break;
             case 'html':
                 scaffoldHTML({
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
@@ -83,6 +101,7 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,

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

@@ -1,6 +1,6 @@
 import { ProviderOption } from '@absolutejs/auth';
 import { AuthOption, Frontend } from '../../types';
-export declare const generateAppComponent: (frontends: Frontend[]) => string;
+export declare const generateAppComponent: (frontends: Frontend[], editBasePath: string) => string;
 export declare const generateDropdownComponent: (frontends: Frontend[]) => string;
-export declare const generateSignInComponent: (absProviders: ProviderOption[] | undefined) => string;
 export declare const generateReactExamplePage: (authOption: AuthOption) => string;
+export declare const generateSignInComponent: (absProviders: ProviderOption[] | undefined) => string;

package/dist/generators/react/generateReactComponents.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateAppComponent = (frontends) => {
+export const generateAppComponent = (frontends, editBasePath) => {
     const exploreBlock = frontends.length > 1
         ? `\n\t\t\t<p style={{ marginTop: '2rem' }}>\n\t\t\t\tExplore the other pages to see multiple frameworks running\n\t\t\t\ttogether.\n\t\t\t</p>`
         : '';
@@ -33,7 +33,7 @@ export const App = ({ initialCount }: AppProps) => {
 				count is {count}
 			</button>
 			<p>
-				Edit <code>example/react/pages/ReactExample.tsx</code> and save
+				Edit <code>${editBasePath}/pages/ReactExample.tsx</code> and save
 				to test HMR.
 			</p>${exploreBlock}
 			<p
@@ -73,37 +73,6 @@ export const generateDropdownComponent = (frontends) => {
 );
 `;
 };
-export const generateSignInComponent = (absProviders) => `import { OAuthLink } from './OAuthLink';
-
-export const SignIn = () => (
-	<details
-		onPointerEnter={(event) => {
-			if (event.pointerType === 'mouse') {
-				event.currentTarget.open = true;
-			}
-		}}
-		onPointerLeave={(event) => {
-			if (event.pointerType === 'mouse') {
-				event.currentTarget.open = false;
-			}
-		}}
-	>
-		<summary>Sign In</summary>
-		<nav>
-				${absProviders && absProviders.length > 0
-    ? absProviders
-        .map((provider) => {
-        const logoUrl = `/assets/svg/google-logo.svg`;
-        const name = provider.charAt(0).toUpperCase() +
-            provider.slice(1).toLowerCase();
-        return `<OAuthLink provider="${provider}" logoUrl="${logoUrl}" name="${name}" mode="in" />`;
-    })
-        .join('\n\t\t\t')
-    : `<p>No OAuth providers configured</p>`}
-			</nav>
-		</details>
-);
-`;
 export const generateReactExamplePage = (authOption) => {
     const useBlockReturn = authOption === 'abs';
     const propsType = `
@@ -178,3 +147,34 @@ ${authOption === 'abs' ? extractProps : ''}
 ${closing}
 `;
 };
+export const generateSignInComponent = (absProviders) => `import { OAuthLink } from './OAuthLink';
+
+export const SignIn = () => (
+	<details
+		onPointerEnter={(event) => {
+			if (event.pointerType === 'mouse') {
+				event.currentTarget.open = true;
+			}
+		}}
+		onPointerLeave={(event) => {
+			if (event.pointerType === 'mouse') {
+				event.currentTarget.open = false;
+			}
+		}}
+	>
+		<summary>Sign In</summary>
+		<nav>
+				${absProviders && absProviders.length > 0
+    ? absProviders
+        .map((provider) => {
+        const logoUrl = `/assets/svg/google-logo.svg`;
+        const name = provider.charAt(0).toUpperCase() +
+            provider.slice(1).toLowerCase();
+        return `<OAuthLink provider="${provider}" logoUrl="${logoUrl}" name="${name}" mode="in" />`;
+    })
+        .join('\n\t\t\t')
+    : `<p>No OAuth providers configured</p>`}
+			</nav>
+		</details>
+);
+`;

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

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

package/dist/generators/react/scaffoldReact.js

@@ -2,14 +2,14 @@ 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, targetDirectory, templatesDirectory, frontends, assetsDirectory, projectAssetsDirectory, absProviders }) => {
+export const scaffoldReact = ({ isSingleFrontend, authOption, editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, absProviders }) => {
     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'));
     cpSync(join(templatesDirectory, 'react'), targetDirectory, {
         recursive: true
     });
-    const appComponent = generateAppComponent(frontends);
+    const appComponent = generateAppComponent(frontends, editBasePath);
     writeFileSync(join(targetDirectory, 'components', 'App.tsx'), appComponent, 'utf-8');
     const dropdownComponent = generateDropdownComponent(frontends);
     writeFileSync(join(targetDirectory, 'components', 'Dropdown.tsx'), dropdownComponent, 'utf-8');

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

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

package/dist/generators/svelte/generateSveltePage.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateSveltePage = (frontends) => {
+export const generateSveltePage = (frontends, editBasePath) => {
     const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
     return `<script lang="ts">
 	type SvelteExampleProps = {
@@ -77,7 +77,7 @@ export const generateSveltePage = (frontends) => {
 	<h1>AbsoluteJS + Svelte</h1>
 	<Counter {initialCount} />
 	<p>
-		Edit <code>example/svelte/pages/SvelteExample.svelte</code> and save
+		Edit <code>${editBasePath}/pages/SvelteExample.svelte</code> and save
 		to test HMR.
 	</p>
 ${frontends.length > 1
@@ -149,6 +149,10 @@ ${frontends.length > 1
 		filter: drop-shadow(0 0 2rem #ff3e00);
 	}
 
+	button:hover {
+		border-color: #ff3e00;
+	}
+
 	nav {
 		display: flex;
 		gap: 4rem;
@@ -241,10 +245,24 @@ ${frontends.length > 1
 		}
 	}
 
+	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) {
 		header {
 			background-color: #ffffff;
 		}
+
+		code {
+			background-color: rgba(0, 0, 0, 0.06);
+			border-color: rgba(0, 0, 0, 0.1);
+		}
 	}
 </style>
 `;

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

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

package/dist/generators/svelte/scaffoldSvelte.js

@@ -1,12 +1,12 @@
 import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateSveltePage } from './generateSveltePage';
-export const scaffoldSvelte = ({ isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }) => {
+export const scaffoldSvelte = ({ editBasePath, isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'svelte-logo.svg'), join(projectAssetsDirectory, 'svg', 'svelte-logo.svg'));
     cpSync(join(templatesDirectory, 'svelte'), targetDirectory, {
         recursive: true
     });
-    const sveltePage = generateSveltePage(frontends);
+    const sveltePage = generateSveltePage(frontends, editBasePath);
     const pagesDirectory = join(targetDirectory, 'pages');
     mkdirSync(pagesDirectory, { recursive: true });
     const svelteFilePath = join(pagesDirectory, 'SvelteExample.svelte');

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

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

package/dist/generators/vue/generateVuePage.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateVuePage = (frontends) => {
+export const generateVuePage = (frontends, editBasePath) => {
     const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
     return `<script setup lang="ts">
 import CountButton from '../components/CountButton.vue';
@@ -60,7 +60,7 @@ const closeDropdown = (event: PointerEvent) => {
 		<h1>AbsoluteJS + Vue</h1>
 		<CountButton :initialCount="count" />
 		<p>
-			Edit <code>example/vue/pages/VueExample.vue</code> and save
+			Edit <code>${editBasePath}/pages/VueExample.vue</code> and save
 			to test HMR.
 		</p>
 ${frontends.length > 1
@@ -191,6 +191,10 @@ h1 {
 	filter: drop-shadow(0 0 2rem #42b883);
 }
 
+button:hover {
+	border-color: #42b883;
+}
+
 nav {
 	display: flex;
 	gap: 4rem;
@@ -295,6 +299,15 @@ header details nav a {
 	}
 }
 
+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;
@@ -308,6 +321,11 @@ header details nav a {
 	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: ({ targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }: ScaffoldVueProps) => void;
+export declare const scaffoldVue: ({ editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }: ScaffoldVueProps) => void;
 export {};

package/dist/generators/vue/scaffoldVue.js

@@ -1,12 +1,12 @@
 import { cpSync, copyFileSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateVuePage } from './generateVuePage';
-export const scaffoldVue = ({ targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }) => {
+export const scaffoldVue = ({ editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'vue-logo.svg'), join(projectAssetsDirectory, 'svg', 'vue-logo.svg'));
     cpSync(join(templatesDirectory, 'vue'), targetDirectory, {
         recursive: true
     });
-    const vuePage = generateVuePage(frontends);
+    const vuePage = generateVuePage(frontends, editBasePath);
     const pagesDirectory = join(targetDirectory, 'pages');
     mkdirSync(pagesDirectory, { recursive: true });
     const vueFilePath = join(pagesDirectory, 'VueExample.vue');

package/dist/questions/databaseEngine.d.ts

@@ -1 +1 @@
-export declare const getDatabaseEngine: () => Promise<"gel" | "mysql" | "postgresql" | "sqlite" | "singlestore" | "mariadb" | "mongodb" | "cockroachdb" | "mssql" | undefined>;
+export declare const getDatabaseEngine: () => Promise<"gel" | "mariadb" | "mssql" | "mysql" | "postgresql" | "singlestore" | "sqlite" | "mongodb" | "cockroachdb" | undefined>;

package/dist/questions/frontendDirectoryConfigurations.d.ts

@@ -1,2 +1,2 @@
 import type { DirectoryConfiguration, Frontend } from '../types';
-export declare const getFrontendDirectoryConfigurations: (directoryConfiguration: DirectoryConfiguration, frontends: Frontend[], passedFrontendDirectories: Partial<Record<Frontend, string>> | undefined) => Promise<Partial<Record<"react" | "html" | "svelte" | "vue" | "htmx", string>>>;
+export declare const getFrontendDirectoryConfigurations: (directoryConfiguration: DirectoryConfiguration, frontends: Frontend[], passedFrontendDirectories: Partial<Record<Frontend, string>> | undefined) => Promise<Partial<Record<"react" | "html" | "svelte" | "vue" | "htmx" | "angular", string>>>;

package/dist/questions/frontends.d.ts

@@ -1 +1 @@
-export declare const getFrontends: () => Promise<("react" | "html" | "svelte" | "vue" | "htmx")[]>;
+export declare const getFrontends: () => Promise<("react" | "html" | "svelte" | "vue" | "htmx" | "angular")[]>;

package/dist/questions/frontends.js

@@ -1,12 +1,12 @@
 import { multiselect, isCancel } from '@clack/prompts';
-import { frontendLabels } from '../data';
+import { availableFrontends, frontendLabels } from '../data';
 import { isFrontend } from '../typeGuards';
 import { abort } from '../utils/abort';
 export const getFrontends = async () => {
     const frontends = await multiselect({
         message: 'Frontend(s) (space to select, enter to finish):',
-        options: Object.entries(frontendLabels).map(([value, label]) => ({
-            label,
+        options: availableFrontends.map((value) => ({
+            label: frontendLabels[value],
             value
         }))
     });

package/dist/scaffold.js

@@ -1,4 +1,4 @@
-import { copyFileSync } from 'fs';
+import { copyFileSync, mkdirSync, writeFileSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { formatProject } from './commands/formatProject';
@@ -66,7 +66,7 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
             projectName,
             typesDirectory
         });
-        dockerFreshInstall = result.dockerFreshInstall;
+        ({ dockerFreshInstall } = result);
     }
     scaffoldFrontends({
         absProviders,
@@ -81,6 +81,18 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
         useHTMLScripts,
         useTailwind
     });
+    const utilsDirectory = join(frontendDirectory, 'utils');
+    mkdirSync(utilsDirectory, { recursive: true });
+    writeFileSync(join(utilsDirectory, 'edenTreaty.ts'), `import { treaty } from '@elysiajs/eden'
+import type { Server } from '../../backend/server'
+
+const serverUrl =
+	typeof window !== 'undefined'
+		? window.location.origin
+		: 'http://localhost:3000'
+
+export const server = treaty<Server>(serverUrl)
+`);
     if (installDependenciesNow) {
         await installDependencies(packageManager, projectName);
     }

package/dist/templates/assets/svg/angular.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="a" x1="64" y1="128" x2="64" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e40035"/>
+      <stop offset=".24" stop-color="#f60a48"/>
+      <stop offset=".352" stop-color="#f20755"/>
+      <stop offset=".494" stop-color="#dc087d"/>
+      <stop offset=".745" stop-color="#9717e7"/>
+      <stop offset="1" stop-color="#6c00f5"/>
+    </linearGradient>
+    <linearGradient id="b" x1="64" y1="128" x2="64" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff31d9" stop-opacity=".8"/>
+      <stop offset="1" stop-color="#ff5be1" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <path fill="url(#a)" d="M7.9 89.9 3.5 21.3 49.7 0ZM124.5 21.3 120.1 89.9 78.3 0ZM64 34.1 80.5 74.3 47.5 74.3ZM95.5 110 64 128 32.5 110 38.9 94.5 89.2 94.5Z"/>
+  <path fill="url(#b)" d="M7.9 89.9 3.5 21.3 49.7 0ZM124.5 21.3 120.1 89.9 78.3 0ZM64 34.1 80.5 74.3 47.5 74.3ZM95.5 110 64 128 32.5 110 38.9 94.5 89.2 94.5Z"/>
+</svg>

package/dist/templates/configurations/tsconfig.example.json

@@ -1,10 +1,5 @@
 {
 	"compilerOptions": {
-		/* Visit https://aka.ms/tsconfig to read more about this file */
-
-		/* Projects */
-		"incremental": true,
-		"tsBuildInfoFile": ".absolutejs/tsconfig.tsbuildinfo",
 		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
 		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
 		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
@@ -50,9 +45,13 @@
 		/* Interop Constraints */
 		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
 		// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-		"esModuleInterop": true, // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-		/* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ "forceConsistentCasingInFileNames": true, // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-		/* Ensure that casing is correct in imports. */ "jsx": "react-jsx", // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+		"esModuleInterop": true, // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */,
+		/* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ "forceConsistentCasingInFileNames": true, // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		/* Visit https://aka.ms/tsconfig to read more about this file */
+
+		/* Projects */
+		"incremental": true,
+		/* Ensure that casing is correct in imports. */ "jsx": "react-jsx", // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */,
 		/* Specify what JSX code is generated. */ // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
 		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
@@ -62,8 +61,8 @@
 		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 		/* Modules */
-		"module": "ESNext", // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-		/* Specify what module code is generated. */ "moduleResolution": "bundler", // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+		"module": "ESNext", // "rootDir": "./",                                  /* Specify the root folder within your source files. */,
+		/* Specify what module code is generated. */ "moduleResolution": "bundler", // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
 		/* Specify how TypeScript looks up a file from a given module specifier. */ // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
 		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
@@ -76,7 +75,7 @@
 		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-		"noUncheckedIndexedAccess": true, // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+		"noUncheckedIndexedAccess": true, // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */,
 		/* Add 'undefined' to a type when accessed using an index. */ // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
 		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
 		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
@@ -86,7 +85,8 @@
 		/* Skip type checking all .d.ts files. */ "strict": true /* Visit https://aka.ms/tsconfig to read more about this file */,
 		/* Enable all strict type-checking options. */ /* Projects */
 		/* Language and Environment */
-		"target": "ESNext"
+		"target": "ESNext",
+		"tsBuildInfoFile": ".absolutejs/tsconfig.tsbuildinfo"
 		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ /* Skip type checking all .d.ts files. */
 	}
 }

package/dist/templates/react/components/App.tsx

@@ -10,16 +10,16 @@ export const App = ({ initialCount }: AppProps) => {
 			<nav>
 				<a href="https://absolutejs.com" target="_blank">
 					<img
+						alt="AbsoluteJS Logo"
 						className="logo"
 						src="/assets/png/absolutejs-temp.png"
-						alt="AbsoluteJS Logo"
 					/>
 				</a>
 				<a href="https://react.dev/">
 					<img
+						alt="React Logo"
 						className="logo react"
 						src="/assets/svg/react.svg"
-						alt="React Logo"
 					/>
 				</a>
 			</nav>

package/dist/templates/react/components/Head.tsx

@@ -16,19 +16,19 @@ export const Head = ({
 	<head>
 		<meta charSet="utf-8" />
 		<title>{title}</title>
-		<meta name="description" content={description} />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="icon" href={icon} />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<meta content={description} name="description" />
+		<meta content="width=device-width, initial-scale=1" name="viewport" />
+		<link href={icon} rel="icon" />
+		<link href="https://fonts.googleapis.com" rel="preconnect" />
 		<link
-			rel="preconnect"
-			href="https://fonts.gstatic.com"
 			crossOrigin="anonymous"
+			href="https://fonts.gstatic.com"
+			rel="preconnect"
 		/>
 		<link
 			href={`https://fonts.googleapis.com/css2?family=${font}:wght@100..900&display=swap`}
 			rel="stylesheet"
 		/>
-		{cssPath && <link rel="stylesheet" href={cssPath} type="text/css" />}
+		{cssPath && <link href={cssPath} rel="stylesheet" type="text/css" />}
 	</head>
 );

package/dist/templates/react/components/OAuthLink.tsx

@@ -17,18 +17,18 @@ export const OAuthLink = ({
 
 	return (
 		<a
+			href={provider ? `/oauth2/${provider}/authorization` : undefined}
 			style={{
 				alignItems: 'center',
 				display: 'flex',
 				gap: '0.5rem'
 			}}
-			href={provider ? `/oauth2/${provider}/authorization` : undefined}
 		>
 			{provider ? (
 				<img
-					style={{ height: '2rem', width: '2rem' }}
 					alt={`${name} logo`}
 					src={logoUrl}
+					style={{ height: '2rem', width: '2rem' }}
 				/>
 			) : (
 				<p>Provider not configured</p>

package/dist/templates/styles/colors.ts

@@ -1,11 +1,9 @@
-export const primaryColor = '#5FBEEB';
-export const secondaryColor = '#35d5a2';
-export const tertiaryColor = '#ff4b91';
-
-export const lightPrimaryColor = '#ffffff';
-export const lightSecondaryColor = '#f5f5f5';
-export const lightTertiaryColor = '#e0e0e0';
-
 export const darkPrimaryColor = '#1a1a1a';
 export const darkSecondaryColor = '#2c2c2c';
 export const darkTertiaryColor = '#3c3c3c';
+export const lightPrimaryColor = '#ffffff';
+export const lightSecondaryColor = '#f5f5f5';
+export const lightTertiaryColor = '#e0e0e0';
+export const primaryColor = '#5FBEEB';
+export const secondaryColor = '#35d5a2';
+export const tertiaryColor = '#ff4b91';

package/dist/templates/styles/reset.css

@@ -76,6 +76,16 @@ button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
+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 (max-width: 480px) {
 	main {
 		padding: 1rem;
@@ -95,4 +105,9 @@ button:focus-visible {
 		background-color: #f5f5f5;
 		color: #1a1a1a;
 	}
+
+	code {
+		background-color: rgba(0, 0, 0, 0.06);
+		border-color: rgba(0, 0, 0, 0.1);
+	}
 }

package/dist/templates/svelte/components/Counter.svelte

@@ -11,6 +11,10 @@
 <button onclick={increment}>count is {getCount()}</button>
 
 <style>
+	button:hover {
+		border-color: #ff3e00;
+	}
+
 	@media (prefers-color-scheme: light) {
 		button {
 			background-color: #ffffff;

package/dist/templates/vue/components/CountButton.vue

@@ -24,7 +24,7 @@ button {
 	transition: border-color 0.25s;
 }
 button:hover {
-	border-color: #5fbeeb;
+	border-color: #42b883;
 }
 button:focus,
 button:focus-visible {