create-absolutejs 0.9.0 → 0.10.0

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/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/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/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/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.15.27";
     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.15.27',
     '@absolutejs/auth': '0.22.0',
     '@elysiajs/static': '1.4.7',
     elysia: '1.4.22',

package/package.json

@@ -4,12 +4,12 @@
 		"create-absolutejs": "dist/index.js"
 	},
 	"dependencies": {
+		"@absolutejs/auth": "0.22.0",
 		"@clack/prompts": "1.0.0",
 		"picocolors": "1.1.1"
 	},
 	"description": "A CLI tool to create a new AbsoluteJS project",
 	"devDependencies": {
-		"@absolutejs/auth": "0.22.0",
 		"@stylistic/eslint-plugin-ts": "4.2.0",
 		"@types/bun": "1.3.8",
 		"@types/react": "19.2.13",
@@ -32,7 +32,7 @@
 		"dist",
 		"dist/templates"
 	],
-	"license": "CC BY-NC 4.0",
+	"license": "BSL-1.1",
 	"main": "dist/index.js",
 	"name": "create-absolutejs",
 	"peerDependencies": {
@@ -49,5 +49,5 @@
 		"typecheck": "bun run tsc --noEmit"
 	},
 	"type": "module",
-	"version": "0.9.0"
+	"version": "0.10.0"
 }