create-absolutejs 0.9.1 → 0.10.1

package/LICENSE

@@ -1,24 +1,80 @@
-```
-# Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0)
+# Business Source License 1.1
 
-By using this project, you agree to the following terms under the Creative Commons Attribution-NonCommercial 4.0 International License.
+**Licensor:** Alex Kahn
 
-## License Summary
-This license allows you to:
-- **Share**: Copy and redistribute the material in any medium or format.
-- **Adapt**: Remix, transform, and build upon the material.
+**Licensed Work:** AbsoluteJS (https://github.com/absolutejs/create-absolutejs)
 
-**Under the following conditions**:
-- **Attribution**: You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
-- **Non-Commercial**: You may not use the material for commercial purposes.
+**Change Date:** February 16, 2036
 
-## Full License Text
-The full license text can be found at: https://creativecommons.org/licenses/by-nc/4.0/legalcode
+**Change License:** Apache License, Version 2.0
 
-## Contact Information for Commercial Use
-For commercial use, licensing inquiries, or additional permissions, please contact:
-Alex Kahn
-alexkahndev@gmail.com
-alexkahndev.github.io
-```
+---
 
+## Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative
+works, redistribute, and make non-production use of the Licensed Work. The
+Licensor may make an Additional Use Grant, permitting limited production use.
+
+### Additional Use Grant
+
+You may use the Licensed Work in production, provided your use does not include
+any of the following:
+
+1. **Offering a Competing Service.** You may not offer the Licensed Work, or
+   any derivative of it, to third parties as a hosted or managed service that
+   competes with the Licensed Work itself (for example, a "framework-as-a-service"
+   platform, deployment service, or cloud offering where AbsoluteJS or a
+   substantial portion of its functionality is a primary component of the value
+   provided to users).
+
+2. **Resale or Redistribution as a Standalone Product.** You may not sell,
+   license, or distribute the Licensed Work, or any derivative or fork of it,
+   as a standalone commercial product or framework.
+
+3. **Removal of Attribution.** Any derivative work, fork, or redistribution of
+   the Licensed Work must prominently credit AbsoluteJS and include a link to
+   the original project repository (https://github.com/absolutejs/absolutejs).
+
+For clarity, the following uses are expressly permitted:
+
+- Using AbsoluteJS to build and deploy your own applications, websites, or
+  SaaS products (whether commercial or non-commercial).
+- Using AbsoluteJS as a dependency in commercial software that you build and sell,
+  as long as the software is not itself a competing framework or hosting service.
+- Providing consulting, development, or professional services to clients using
+  AbsoluteJS.
+- Forking and modifying the Licensed Work for your own internal use, provided
+  attribution is maintained.
+
+### Change Date and Change License
+
+On the Change Date specified above, or on such other date as the Licensor may
+specify by written notice, the Licensed Work will be made available under the
+Change License (Apache License, Version 2.0). Until the Change Date, the terms
+of this Business Source License 1.1 apply.
+
+### Notices
+
+You must not remove or obscure any licensing, copyright, or other notices
+included in the Licensed Work.
+
+### No Warranty
+
+THE LICENSED WORK IS PROVIDED "AS IS". THE LICENSOR HEREBY DISCLAIMS ALL
+WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE LICENSOR BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR
+IN CONNECTION WITH THE LICENSED WORK OR THE USE OR OTHER DEALINGS IN THE
+LICENSED WORK.
+
+---
+
+## Contact
+
+For commercial licensing inquiries or additional permissions, contact:
+
+- **Alex Kahn**
+- alexkahndev@gmail.com
+- alexkahndev.github.io

package/README.md

@@ -176,4 +176,4 @@ Contributions are welcome! Feel free to open issues or submit pull requests to i
 
 ## License
 
-Licensed under CC BY-NC 4.0.
+**Business Source License 1.1 (BSL-1.1)** – see [`LICENSE`](./LICENSE) for details.

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

@@ -3,5 +3,5 @@ type CreatePackageJsonProps = Pick<CreateConfiguration, 'authOption' | 'useTailw
     projectName: string;
     latest: boolean;
 };
-export declare const createPackageJson: ({ projectName, authOption, plugins, databaseEngine, orm, databaseHost, useTailwind, latest, frontendDirectories, codeQualityTool }: CreatePackageJsonProps) => void;
+export declare const createPackageJson: ({ projectName, authOption, plugins, databaseEngine, orm, databaseHost, useTailwind, latest, frontendDirectories, codeQualityTool }: CreatePackageJsonProps) => Promise<void>;
 export {};

package/dist/generators/configurations/generatePackageJson.js

@@ -3,7 +3,7 @@ import { join } from 'path';
 import { spinner } from '@clack/prompts';
 import { green } from 'picocolors';
 import { absoluteAuthPlugin, availablePlugins, defaultDependencies, defaultPlugins, eslintAndPrettierDependencies, eslintReactDependencies } from '../../data';
-import { getPackageVersion } from '../../utils/getPackageVersion';
+import { getPackageVersions } from '../../utils/getPackageVersion';
 import { versions } from '../../versions';
 import { computeFlags } from '../project/computeFlags';
 const dbClientCommands = {
@@ -16,15 +16,93 @@ const dbClientCommands = {
     postgresql: 'psql -h localhost -U user -d database',
     singlestore: 'singlestore -u root -ppassword -D database'
 };
-export const createPackageJson = ({ projectName, authOption, plugins, databaseEngine, orm, databaseHost, useTailwind, latest, frontendDirectories, codeQualityTool }) => {
+export const createPackageJson = async ({ projectName, authOption, plugins, databaseEngine, orm, databaseHost, useTailwind, latest, frontendDirectories, codeQualityTool }) => {
+    const flags = computeFlags(frontendDirectories);
+    const isLocal = !databaseHost || databaseHost === 'none';
+    /* ── Collect all package names that need versions ─────────── */
+    const packageNames = new Set();
+    packageNames.add('typescript');
+    for (const p of defaultPlugins)
+        packageNames.add(p.value);
+    for (const dep of defaultDependencies)
+        packageNames.add(dep.value);
+    if (authOption === 'abs')
+        packageNames.add(absoluteAuthPlugin.value);
+    for (const pluginValue of plugins) {
+        const meta = availablePlugins.find((p) => p.value === pluginValue);
+        if (meta)
+            packageNames.add(meta.value);
+    }
+    if (codeQualityTool === 'eslint+prettier') {
+        for (const dep of eslintAndPrettierDependencies)
+            packageNames.add(dep.value);
+    }
+    if (useTailwind) {
+        packageNames.add('autoprefixer');
+        packageNames.add('postcss');
+        packageNames.add('tailwindcss');
+        packageNames.add('@tailwindcss/cli');
+    }
+    if (flags.requiresReact) {
+        packageNames.add('react');
+        packageNames.add('react-dom');
+        packageNames.add('@types/react');
+    }
+    if (flags.requiresReact && codeQualityTool === 'eslint+prettier') {
+        for (const dep of eslintReactDependencies)
+            packageNames.add(dep.value);
+    }
+    if (flags.requiresSvelte)
+        packageNames.add('svelte');
+    if (flags.requiresSvelte && codeQualityTool === 'eslint+prettier')
+        packageNames.add('prettier-plugin-svelte');
+    if (flags.requiresVue)
+        packageNames.add('vue');
+    if (flags.requiresHtmx)
+        packageNames.add('elysia-scoped-state');
+    if (orm === 'drizzle')
+        packageNames.add('drizzle-orm');
+    switch (databaseHost) {
+        case 'neon':
+            packageNames.add('@neondatabase/serverless');
+            break;
+        case 'planetscale':
+            packageNames.add('@planetscale/database');
+            break;
+        case 'turso':
+            packageNames.add('@libsql/client');
+            break;
+    }
+    if (isLocal &&
+        (databaseEngine === 'mysql' || databaseEngine === 'mariadb') &&
+        orm === 'drizzle')
+        packageNames.add('mysql2');
+    if (isLocal && databaseEngine === 'singlestore')
+        packageNames.add('mysql2');
+    if (databaseEngine === 'postgresql' && databaseHost === 'planetscale') {
+        packageNames.add('pg');
+        packageNames.add('@types/pg');
+    }
+    if (isLocal && databaseEngine === 'mssql') {
+        packageNames.add('mssql');
+        packageNames.add('@types/mssql');
+    }
+    if (isLocal && databaseEngine === 'gel')
+        packageNames.add('gel');
+    if (databaseEngine === 'mongodb')
+        packageNames.add('mongodb');
+    /* ── Fetch all versions in parallel ──────────────────────── */
     const s = spinner();
-    if (latest)
+    let latestVersions = new Map();
+    if (latest) {
         s.start('Resolving package versions…');
-    const resolveVersion = (name, listed) => latest ? (getPackageVersion(name) ?? listed) : listed;
+        latestVersions = await getPackageVersions([...packageNames]);
+    }
+    const resolveVersion = (name, listed) => latest ? (latestVersions.get(name) ?? listed) : listed;
+    /* ── Build dependency maps ───────────────────────────────── */
     const dependencies = {};
     const devDependencies = {};
     devDependencies['typescript'] = resolveVersion('typescript', versions['typescript']);
-    const flags = computeFlags(frontendDirectories);
     for (const p of defaultPlugins) {
         dependencies[p.value] = resolveVersion(p.value, p.latestVersion);
     }
@@ -91,13 +169,13 @@ export const createPackageJson = ({ projectName, authOption, plugins, databaseEn
         s.stop(green('Package versions resolved'));
     const scripts = {
         dev: 'absolutejs dev',
-        format: `prettier --write "./**/*.{js,ts,css,json,mjs,md${flags.requiresReact ? ',jsx,tsx' : ''}${flags.requiresSvelte ? ',svelte' : ''}${flags.requiresVue ? ',vue' : ''}${flags.requiresHtml || flags.requiresHtmx ? ',html' : ''}}"`,
-        lint: 'eslint ./src',
+        format: `absolutejs prettier --write "./**/*.{js,ts,css,json,mjs,md${flags.requiresReact ? ',jsx,tsx' : ''}${flags.requiresSvelte ? ',svelte' : ''}${flags.requiresVue ? ',vue' : ''}${flags.requiresHtml || flags.requiresHtmx ? ',html' : ''}}"`,
+        lint: 'absolutejs eslint',
         test: 'echo "Error: no test specified" && exit 1',
         typecheck: 'bun run tsc --noEmit'
     };
-    const isLocal = !databaseHost || databaseHost === 'none';
-    if (isLocal &&
+    const isLocalDb = isLocal;
+    if (isLocalDb &&
         databaseEngine !== undefined &&
         databaseEngine !== 'none' &&
         databaseEngine !== 'sqlite') {
@@ -111,29 +189,29 @@ export const createPackageJson = ({ projectName, authOption, plugins, databaseEn
         scripts[`predb:${databaseEngine}`] = 'bun db:up';
         scripts[`postdb:${databaseEngine}`] = 'bun db:down';
     }
-    if (isLocal &&
+    if (isLocalDb &&
         (databaseEngine === 'mysql' || databaseEngine === 'mariadb') &&
         orm === 'drizzle') {
         dependencies['mysql2'] = resolveVersion('mysql2', versions['mysql2']);
     }
-    if (isLocal && databaseEngine === 'singlestore') {
+    if (isLocalDb && databaseEngine === 'singlestore') {
         dependencies['mysql2'] = resolveVersion('mysql2', versions['mysql2']);
     }
     if (databaseEngine === 'postgresql' && databaseHost === 'planetscale') {
         dependencies['pg'] = resolveVersion('pg', versions['pg']);
         devDependencies['@types/pg'] = resolveVersion('@types/pg', versions['@types/pg']);
     }
-    if (isLocal && databaseEngine === 'mssql') {
+    if (isLocalDb && databaseEngine === 'mssql') {
         dependencies['mssql'] = resolveVersion('mssql', versions['mssql']);
         devDependencies['@types/mssql'] = resolveVersion('@types/mssql', versions['@types/mssql']);
     }
-    if (isLocal && databaseEngine === 'gel') {
+    if (isLocalDb && databaseEngine === 'gel') {
         dependencies['gel'] = resolveVersion('gel', versions['gel']);
     }
     if (databaseEngine === 'mongodb') {
         dependencies['mongodb'] = resolveVersion('mongodb', versions['mongodb']);
     }
-    if (isLocal && databaseEngine === 'sqlite') {
+    if (isLocalDb && databaseEngine === 'sqlite') {
         scripts['db:sqlite'] = 'sqlite3 db/database.sqlite';
         scripts['db:init'] = 'sqlite3 db/database.sqlite < db/init.sql';
     }

package/dist/generators/html/generateHTMLPage.js

@@ -22,7 +22,10 @@ export const generateHTMLPage = (frontends, useHTMLScripts) => {
     <body>
         <header>
             <a href="/">AbsoluteJS</a>
-            <details>
+            <details
+                onpointerenter="if(event.pointerType==='mouse')this.open=true"
+                onpointerleave="if(event.pointerType==='mouse')this.open=false"
+            >
                 <summary>Pages</summary>
                 <nav>
                     ${navLinks}
@@ -51,15 +54,15 @@ export const generateHTMLPage = (frontends, useHTMLScripts) => {
                 count is <span id="counter">${initialCount}</span>
             </button>
             <p>
-                Edit <code>example/html/pages/HtmlExample.html</code> save and
-                rebuild to update the page.
+                Edit <code>example/html/pages/HtmlExample.html</code> and save
+                to test HMR.
             </p>
-            <p style="color: #777">( Hot Module Reloading is coming soon )</p>
-            <p style="margin-top: 2rem">
-                Explore the other pages to see how AbsoluteJS seamlessly unifies
-                multiple frameworks on a single server.
-            </p>
-            <p style="margin-top: 2rem; font-size: 1rem; color: #777">
+${frontends.length > 1
+        ? `            <p style="margin-top: 2rem">
+                Explore the other pages to see multiple frameworks running
+                together.
+            </p>\n`
+        : ''}            <p style="margin-top: 2rem; font-size: 1rem; color: #777">
                 Click on the AbsoluteJS and HTML logos to learn more.
             </p>
         </main>

package/dist/generators/htmx/generateHTMXPage.js

@@ -24,8 +24,8 @@ export const generateHTMXPage = (isSingle, frontends) => {
 		<header>
 			<a href="/">AbsoluteJS</a>
 			<details
-				hx-on:pointerenter="this.open = true"
-				hx-on:pointerleave="this.open = false"
+				onpointerenter="if(event.pointerType==='mouse')this.open=true"
+				onpointerleave="if(event.pointerType==='mouse')this.open=false"
 			>
 				<summary>Pages</summary>
 				<nav>
@@ -73,15 +73,15 @@ export const generateHTMXPage = (isSingle, frontends) => {
 				>
 			</button>
 			<p>
-				Edit <code>example/htmx/pages/HtmxHome.html</code> save and
-				rebuild to update the page.
+				Edit <code>example/htmx/pages/HtmxHome.html</code> and save
+				to test HMR.
 			</p>
-			<p style="color: #777">( Hot Module Reloading is coming soon )</p>
-			<p style="margin-top: 2rem">
-				Explore the other pages to see how AbsoluteJS seamlessly unifies
-				multiple frameworks on a single server.
-			</p>
-			<p style="margin-top: 2rem; font-size: 1rem; color: #777">
+${frontends.length > 1
+        ? `			<p style="margin-top: 2rem">
+				Explore the other pages to see multiple frameworks running
+				together.
+			</p>\n`
+        : ''}			<p style="margin-top: 2rem; font-size: 1rem; color: #777">
 				Click on the AbsoluteJS and HTML logos to learn more.
 			</p>
 		</main>

package/dist/generators/project/generateMarkupCSS.js

@@ -88,6 +88,7 @@ header details[open] summary::after {
 }
 
 header details nav {
+	content-visibility: visible;
 	position: absolute;
 	top: 100%;
 	right: -0.5rem;
@@ -121,6 +122,29 @@ header details nav a {
 	white-space: nowrap;
 }
 
+@media (max-width: 480px) {
+	header {
+		padding: 1rem;
+	}
+
+	h1 {
+		font-size: 1.75rem;
+	}
+
+	.logo {
+		height: 5rem;
+		width: 5rem;
+	}
+
+	nav {
+		gap: 2rem;
+	}
+
+	header details summary {
+		font-size: 1.2rem;
+	}
+}
+
 @media (prefers-color-scheme: light) {
 	header {
 		background-color: #ffffff;

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

@@ -3,6 +3,7 @@ type ScaffoldFrontendsProps = Pick<CreateConfiguration, 'useHTMLScripts' | 'fron
     frontendDirectory: string;
     templatesDirectory: string;
     projectAssetsDirectory: string;
+    typesDirectory: string;
 };
-export declare const scaffoldFrontends: ({ frontendDirectory, assetsDirectory, absProviders, authOption, templatesDirectory, projectAssetsDirectory, useHTMLScripts, useTailwind, frontendDirectories, frontends }: ScaffoldFrontendsProps) => void;
+export declare const scaffoldFrontends: ({ frontendDirectory, assetsDirectory, absProviders, authOption, templatesDirectory, projectAssetsDirectory, typesDirectory, useHTMLScripts, useTailwind, frontendDirectories, frontends }: ScaffoldFrontendsProps) => void;
 export {};

package/dist/generators/project/scaffoldFrontends.js

@@ -5,7 +5,7 @@ import { scaffoldHTMX } from '../htmx/scaffoldHTMX';
 import { scaffoldReact } from '../react/scaffoldReact';
 import { scaffoldSvelte } from '../svelte/scaffoldSvelte';
 import { scaffoldVue } from '../vue/scaffoldVue';
-export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProviders, authOption, templatesDirectory, projectAssetsDirectory, useHTMLScripts, useTailwind, frontendDirectories, frontends }) => {
+export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProviders, authOption, templatesDirectory, projectAssetsDirectory, typesDirectory, useHTMLScripts, useTailwind, frontendDirectories, frontends }) => {
     const stylesTargetDirectory = join(frontendDirectory, 'styles');
     cpSync(join(templatesDirectory, 'styles'), stylesTargetDirectory, {
         recursive: true
@@ -60,6 +60,7 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     targetDirectory,
                     templatesDirectory
                 });
+                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.');

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

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

package/dist/generators/react/generateReactComponents.js

@@ -1,40 +1,95 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateDropdownComponent = (frontends) => {
-    const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
+export const generateAppComponent = (frontends) => {
+    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>`
+        : '';
     return `import { useState } from 'react';
-      
-      export const Dropdown = () => {
-        const [isOpen, setIsOpen] = useState(false);
-      
-        return (
-            <details
-                onPointerEnter={() => setIsOpen(true)}
-                onPointerLeave={() => setIsOpen(false)}
-                open={isOpen}
-            >
-                <summary>Pages</summary>
-                <nav>
-                    ${navLinks}
-                </nav>
-            </details>
-        );
-      };
-      `;
-};
-export const generateSignInComponent = (absProviders) => `import { useState } from 'react';
-import { OAuthLink } from './OAuthLink';
 
-export const SignIn = () => {
-	const [isOpen, setIsOpen] = useState(false);
-	
+type AppProps = { initialCount: number };
+
+export const App = ({ initialCount }: AppProps) => {
+	const [count, setCount] = useState(initialCount);
+
 	return (
-		<details
-			onPointerEnter={() => setIsOpen(true)}
-			onPointerLeave={() => setIsOpen(false)}
-			open={isOpen}
-		>
-			<summary>Sign In</summary>
+		<main>
 			<nav>
+				<a href="https://absolutejs.com" target="_blank">
+					<img
+						className="logo"
+						src="/assets/png/absolutejs-temp.png"
+						alt="AbsoluteJS Logo"
+					/>
+				</a>
+				<a href="https://react.dev/">
+					<img
+						className="logo react"
+						src="/assets/svg/react.svg"
+						alt="React Logo"
+					/>
+				</a>
+			</nav>
+			<h1>AbsoluteJS + React</h1>
+			<button onClick={() => setCount(count + 1)}>
+				count is {count}
+			</button>
+			<p>
+				Edit <code>example/react/pages/ReactExample.tsx</code> and save
+				to test HMR.
+			</p>${exploreBlock}
+			<p
+				style={{
+					color: '#777',
+					fontSize: '1rem',
+					marginTop: '2rem'
+				}}
+			>
+				Click on the AbsoluteJS and React logos to learn more.
+			</p>
+		</main>
+	);
+};
+`;
+};
+export const generateDropdownComponent = (frontends) => {
+    const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
+    return `export const Dropdown = () => (
+	<details
+		onPointerEnter={(event) => {
+			if (event.pointerType === 'mouse') {
+				event.currentTarget.open = true;
+			}
+		}}
+		onPointerLeave={(event) => {
+			if (event.pointerType === 'mouse') {
+				event.currentTarget.open = false;
+			}
+		}}
+	>
+		<summary>Pages</summary>
+		<nav>
+			${navLinks}
+		</nav>
+	</details>
+);
+`;
+};
+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) => {
@@ -47,8 +102,7 @@ export const SignIn = () => {
     : `<p>No OAuth providers configured</p>`}
 			</nav>
 		</details>
-	);
-}
+);
 `;
 export const generateReactExamplePage = (authOption) => {
     const useBlockReturn = authOption === 'abs';

package/dist/generators/react/scaffoldReact.js

@@ -1,7 +1,7 @@
 import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateMarkupCSS } from '../project/generateMarkupCSS';
-import { generateDropdownComponent, generateReactExamplePage, generateSignInComponent } from './generateReactComponents';
+import { generateAppComponent, generateDropdownComponent, generateReactExamplePage, generateSignInComponent } from './generateReactComponents';
 export const scaffoldReact = ({ isSingleFrontend, authOption, targetDirectory, templatesDirectory, frontends, assetsDirectory, projectAssetsDirectory, absProviders }) => {
     mkdirSync(join(projectAssetsDirectory, 'svg'), { recursive: true });
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'react.svg'), join(projectAssetsDirectory, 'svg', 'react.svg'));
@@ -9,6 +9,8 @@ export const scaffoldReact = ({ isSingleFrontend, authOption, targetDirectory, t
     cpSync(join(templatesDirectory, 'react'), targetDirectory, {
         recursive: true
     });
+    const appComponent = generateAppComponent(frontends);
+    writeFileSync(join(targetDirectory, 'components', 'App.tsx'), appComponent, 'utf-8');
     const dropdownComponent = generateDropdownComponent(frontends);
     writeFileSync(join(targetDirectory, 'components', 'Dropdown.tsx'), dropdownComponent, 'utf-8');
     if (authOption === 'abs') {

package/dist/generators/svelte/generateSveltePage.js

@@ -9,7 +9,19 @@ export const generateSveltePage = (frontends) => {
 	import Counter from '../components/Counter.svelte';
 
 	let { initialCount, cssPath }: SvelteExampleProps = $props();
-	let isOpen = $state(false);
+	let dropdown: HTMLDetailsElement;
+
+	const openDropdown = (event: PointerEvent) => {
+		if (event.pointerType === 'mouse') {
+			dropdown.open = true;
+		}
+	};
+
+	const closeDropdown = (event: PointerEvent) => {
+		if (event.pointerType === 'mouse') {
+			dropdown.open = false;
+		}
+	};
 </script>
 
 <svelte:head>
@@ -34,9 +46,9 @@ export const generateSveltePage = (frontends) => {
 <header>
 	<a href="/">AbsoluteJS</a>
 	<details
-		open={isOpen}
-		onpointerenter={() => (isOpen = true)}
-		onpointerleave={() => (isOpen = false)}
+		bind:this={dropdown}
+		onpointerenter={openDropdown}
+		onpointerleave={closeDropdown}
 	>
 		<summary>Pages</summary>
 		<nav>
@@ -65,15 +77,15 @@ export const generateSveltePage = (frontends) => {
 	<h1>AbsoluteJS + Svelte</h1>
 	<Counter {initialCount} />
 	<p>
-		Edit <code>example/svelte/pages/SvelteExample.svelte</code> then save and
-		refresh to update the page.
-	</p>
-	<p style="color: #777">( Hot Module Reloading is coming soon )</p>
-	<p style="margin-top: 2rem;">
-		Explore the other pages to see how AbsoluteJS seamlessly unifies
-		multiple frameworks on a single server.
+		Edit <code>example/svelte/pages/SvelteExample.svelte</code> and save
+		to test HMR.
 	</p>
-	<p style="color: #777; font-size: 1rem; margin-top: 2rem;">
+${frontends.length > 1
+        ? `	<p style="margin-top: 2rem;">
+		Explore the other pages to see multiple frameworks running
+		together.
+	</p>\n`
+        : ''}	<p style="color: #777; font-size: 1rem; margin-top: 2rem;">
 		Click on the AbsoluteJS and Svelte logos to learn more.
 	</p>
 </main>
@@ -172,6 +184,7 @@ export const generateSveltePage = (frontends) => {
 	}
 
 	header details nav {
+		content-visibility: visible;
 		position: absolute;
 		top: 100%;
 		right: -0.5rem;
@@ -205,6 +218,29 @@ export const generateSveltePage = (frontends) => {
 		white-space: nowrap;
 	}
 
+	@media (max-width: 480px) {
+		header {
+			padding: 1rem;
+		}
+
+		h1 {
+			font-size: 1.75rem;
+		}
+
+		.logo {
+			height: 5rem;
+			width: 5rem;
+		}
+
+		nav {
+			gap: 2rem;
+		}
+
+		header details summary {
+			font-size: 1.2rem;
+		}
+	}
+
 	@media (prefers-color-scheme: light) {
 		header {
 			background-color: #ffffff;

package/dist/generators/vue/generateVuePage.js

@@ -2,24 +2,36 @@ import { formatNavLink } from '../../utils/formatNavLink';
 export const generateVuePage = (frontends) => {
     const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
     return `<script setup lang="ts">
-import { ref } from 'vue';
 import CountButton from '../components/CountButton.vue';
+import { ref } from 'vue';
 
 const props = defineProps<{
 	initialCount: number;
 }>();
 
 const count = ref(props.initialCount);
-const isOpen = ref(false);
+const dropdown = ref<HTMLDetailsElement>();
+
+const openDropdown = (event: PointerEvent) => {
+	if (event.pointerType === 'mouse' && dropdown.value) {
+		dropdown.value.open = true;
+	}
+};
+
+const closeDropdown = (event: PointerEvent) => {
+	if (event.pointerType === 'mouse' && dropdown.value) {
+		dropdown.value.open = false;
+	}
+};
 </script>
 
 <template>
 	<header>
 		<a href="/">AbsoluteJS</a>
 		<details
-			:open="isOpen"
-			@pointerenter="isOpen = true"
-			@pointerleave="isOpen = false"
+			ref="dropdown"
+			@pointerenter="openDropdown"
+			@pointerleave="closeDropdown"
 		>
 			<summary>Pages</summary>
 			<nav>
@@ -48,15 +60,15 @@ const isOpen = ref(false);
 		<h1>AbsoluteJS + Vue</h1>
 		<CountButton :initialCount="count" />
 		<p>
-			Edit <code>example/vue/pages/VueExample.vue</code> then save and
-			refresh to update the page.
-		</p>
-		<p style="color: #777">( Hot Module Reloading is coming soon )</p>
-		<p style="margin-top: 2rem">
-			Explore the other pages to see how AbsoluteJS seamlessly unifies
-			multiple frameworks on a single server.
+			Edit <code>example/vue/pages/VueExample.vue</code> and save
+			to test HMR.
 		</p>
-		<p style="color: #777; font-size: 1rem; margin-top: 2rem">
+${frontends.length > 1
+        ? `		<p style="margin-top: 2rem">
+			Explore the other pages to see multiple frameworks running
+			together.
+		</p>\n`
+        : ''}		<p style="color: #777; font-size: 1rem; margin-top: 2rem">
 			Click on the AbsoluteJS and Vue logos to learn more.
 		</p>
 	</main>
@@ -214,6 +226,7 @@ header details[open] summary::after {
 }
 
 header details nav {
+	content-visibility: visible;
 	position: absolute;
 	top: 100%;
 	right: -0.5rem;
@@ -247,6 +260,41 @@ header details nav a {
 	white-space: nowrap;
 }
 
+@media (max-width: 480px) {
+	:global(main) {
+		padding: 1rem;
+	}
+
+	:global(p) {
+		font-size: 1rem;
+	}
+
+	header {
+		padding: 1rem;
+	}
+
+	a {
+		font-size: 1.2rem;
+	}
+
+	h1 {
+		font-size: 1.75rem;
+	}
+
+	.logo {
+		height: 5rem;
+		width: 5rem;
+	}
+
+	nav {
+		gap: 2rem;
+	}
+
+	header details summary {
+		font-size: 1.2rem;
+	}
+}
+
 @media (prefers-color-scheme: light) {
 	:global(body) {
 		background-color: #f5f5f5;

package/dist/scaffold.js

@@ -26,7 +26,7 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
         tailwind,
         templatesDirectory
     });
-    createPackageJson({
+    await createPackageJson({
         authOption,
         codeQualityTool,
         databaseEngine,
@@ -77,6 +77,7 @@ export const scaffold = async ({ response: { projectName, codeQualityTool, initi
         frontends,
         projectAssetsDirectory,
         templatesDirectory,
+        typesDirectory,
         useHTMLScripts,
         useTailwind
     });

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

@@ -3,9 +3,9 @@
 		/* Visit https://aka.ms/tsconfig to read more about this file */
 
 		/* Projects */
-		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+		"incremental": true,
+		"tsBuildInfoFile": ".absolutejs/tsconfig.tsbuildinfo",
 		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
 		// "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. */
 		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
@@ -85,12 +85,6 @@
 		"skipLibCheck": true /* Type Checking */,
 		/* 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 */
-		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-		// "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. */
-		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 		/* Language and Environment */
 		"target": "ESNext"
 		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ /* Skip type checking all .d.ts files. */

package/dist/templates/html/scripts/typescript-example.ts

@@ -12,10 +12,14 @@ button.addEventListener('click', () => {
 	counter.textContent = (++count).toString();
 });
 
-details.addEventListener('pointerenter', () => {
-	details.open = true;
+details.addEventListener('pointerenter', (event) => {
+	if (event.pointerType === 'mouse') {
+		details.open = true;
+	}
 });
 
-details.addEventListener('pointerleave', () => {
-	details.open = false;
+details.addEventListener('pointerleave', (event) => {
+	if (event.pointerType === 'mouse') {
+		details.open = false;
+	}
 });

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

@@ -28,15 +28,12 @@ export const App = ({ initialCount }: AppProps) => {
 				count is {count}
 			</button>
 			<p>
-				Edit <code>example/react/pages/ReactExample.tsx</code> then save
-				and refresh to update the page.
-			</p>
-			<p style={{ color: '#777' }}>
-				( Hot Module Reloading is coming soon )
+				Edit <code>example/react/pages/ReactExample.tsx</code> and save
+				to test HMR.
 			</p>
 			<p style={{ marginTop: '2rem' }}>
-				Explore the other pages to see how AbsoluteJS seamlessly unifies
-				multiple frameworks on a single server.
+				Explore the other pages to see multiple frameworks running
+				together.
 			</p>
 			<p
 				style={{

package/dist/templates/styles/reset.css

@@ -76,6 +76,20 @@ button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
+@media (max-width: 480px) {
+	main {
+		padding: 1rem;
+	}
+
+	p {
+		font-size: 1rem;
+	}
+
+	a {
+		font-size: 1.2rem;
+	}
+}
+
 @media (prefers-color-scheme: light) {
 	body {
 		background-color: #f5f5f5;

package/dist/templates/types/vue-shim.d.ts

@@ -0,0 +1,10 @@
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+
+	const component: DefineComponent<
+		Record<string, unknown>,
+		Record<string, unknown>,
+		unknown
+	>;
+	export default component;
+}

package/dist/utils/getPackageVersion.d.ts

@@ -1 +1 @@
-export declare const getPackageVersion: (packageName: string) => string | null;
+export declare const getPackageVersions: (packageNames: string[]) => Promise<Map<string, string>>;

package/dist/utils/getPackageVersion.js

@@ -1,12 +1,18 @@
-import { execSync } from 'child_process';
-export const getPackageVersion = (packageName) => {
-    try {
-        const raw = execSync(`curl -s https://registry.npmjs.org/${packageName}/latest`);
-        const { version } = JSON.parse(raw.toString());
-        return version;
-    }
-    catch (err) {
-        console.error(`Error fetching version for ${packageName}:`, err);
-        return null;
+export const getPackageVersions = async (packageNames) => {
+    const results = await Promise.all(packageNames.map(async (name) => {
+        try {
+            const res = await fetch(`https://registry.npmjs.org/${name}/latest`);
+            const data = (await res.json());
+            return [name, data.version];
+        }
+        catch {
+            return [name, null];
+        }
+    }));
+    const map = new Map();
+    for (const [name, version] of results) {
+        if (version)
+            map.set(name, version);
     }
+    return map;
 };

package/dist/versions.d.ts

@@ -4,7 +4,7 @@
  * Run `bun run check-versions` to compare against latest npm versions.
  */
 export declare const versions: {
-    readonly '@absolutejs/absolute': "0.15.7";
+    readonly '@absolutejs/absolute': "0.16.9";
     readonly '@absolutejs/auth': "0.22.0";
     readonly '@elysiajs/static': "1.4.7";
     readonly elysia: "1.4.22";

package/dist/versions.js

@@ -5,7 +5,7 @@
  */
 export const versions = {
     /* ── Core ─────────────────────────────────────────────── */
-    '@absolutejs/absolute': '0.15.7',
+    '@absolutejs/absolute': '0.16.9',
     '@absolutejs/auth': '0.22.0',
     '@elysiajs/static': '1.4.7',
     elysia: '1.4.22',

package/package.json

@@ -10,6 +10,7 @@
 	},
 	"description": "A CLI tool to create a new AbsoluteJS project",
 	"devDependencies": {
+		"@absolutejs/absolute": "0.16.9",
 		"@stylistic/eslint-plugin-ts": "4.2.0",
 		"@types/bun": "1.3.8",
 		"@types/react": "19.2.13",
@@ -32,7 +33,7 @@
 		"dist",
 		"dist/templates"
 	],
-	"license": "CC BY-NC 4.0",
+	"license": "BSL-1.1",
 	"main": "dist/index.js",
 	"name": "create-absolutejs",
 	"peerDependencies": {
@@ -49,5 +50,5 @@
 		"typecheck": "bun run tsc --noEmit"
 	},
 	"type": "module",
-	"version": "0.9.1"
+	"version": "0.10.1"
 }