create-absolutejs 0.2.2 → 0.3.0

package/dist/templates/svelte/pages/SvelteExample.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	type SvelteExampleProps = {
+		initialCount: number;
+		cssPath: string;
+	};
+	import Counter from '../components/Counter.svelte';
+
+	let { initialCount, cssPath }: SvelteExampleProps = $props();
+	let isOpen = $state(false);
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>AbsoluteJS + Svelte</title>
+	<meta name="description" content="AbsoluteJS Svelte Example" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="icon" href="/assets/ico/favicon.ico" />
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link
+		rel="preconnect"
+		href="https://fonts.gstatic.com"
+		crossOrigin="anonymous"
+	/>
+	<link
+		href={`https://fonts.googleapis.com/css2?family=Poppins:wght@100..900&display=swap`}
+		rel="stylesheet"
+	/>
+	<link rel="stylesheet" href={cssPath} type="text/css" />
+</svelte:head>
+
+<header>
+	<a href="/">AbsoluteJS</a>
+	<details
+		open={isOpen}
+		onpointerenter={() => (isOpen = true)}
+		onpointerleave={() => (isOpen = false)}
+	>
+		<summary>Pages</summary>
+		<nav>
+			<a href="/html">HTML</a>
+			<a href="/react">React</a>
+			<a href="/htmx">HTMX</a>
+			<a href="/svelte">Svelte</a>
+			<a href="/vue">Vue</a>
+			<a href="/angular">Angular</a>
+		</nav>
+	</details>
+</header>
+
+<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://svelte.dev" target="_blank">
+			<img
+				class="logo svelte"
+				src="/assets/svg/svelte-logo.svg"
+				alt="Svelte Logo"
+			/>
+		</a>
+	</nav>
+	<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.
+	</p>
+	<p style="color: #777; font-size: 1rem; margin-top: 2rem;">
+		Click on the AbsoluteJS and Svelte logos to learn more.
+	</p>
+</main>
+
+<style>
+	header {
+		align-items: center;
+		background-color: #1a1a1a;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		display: flex;
+		justify-content: space-between;
+		padding: 2rem;
+		text-align: center;
+	}
+
+	header a {
+		position: relative;
+		color: #5fbeeb;
+		text-decoration: none;
+	}
+
+	header a::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		height: 2px;
+		background: linear-gradient(
+			90deg,
+			#5fbeeb 0%,
+			#35d5a2 50%,
+			#ff4b91 100%
+		);
+		transform: scaleX(0);
+		transform-origin: left;
+		transition: transform 0.25s ease-in-out;
+	}
+
+	header a:hover::after {
+		transform: scaleX(1);
+	}
+
+	h1 {
+		font-size: 2.5rem;
+		margin-top: 2rem;
+	}
+
+	.logo {
+		height: 8rem;
+		width: 8rem;
+		will-change: filter;
+		transition: filter 300ms;
+	}
+
+	.logo:hover {
+		filter: drop-shadow(0 0 2rem #5fbeeb);
+	}
+
+	.logo.svelte:hover {
+		filter: drop-shadow(0 0 2rem #ff3e00);
+	}
+
+	nav {
+		display: flex;
+		gap: 4rem;
+		justify-content: center;
+	}
+
+	header details {
+		position: relative;
+	}
+
+	header details summary {
+		list-style: none;
+		appearance: none;
+		-webkit-appearance: none;
+		cursor: pointer;
+		user-select: none;
+		color: #5fbeeb;
+		font-size: 1.5rem;
+		font-weight: 500;
+		padding: 0.5rem 1rem;
+	}
+
+	header summary::after {
+		content: '▼';
+		display: inline-block;
+		margin-left: 0.5rem;
+		font-size: 0.75rem;
+		transition: transform 0.3s ease;
+	}
+
+	header details[open] summary::after {
+		transform: rotate(180deg);
+	}
+
+	header details nav {
+		position: absolute;
+		top: 100%;
+		right: -0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		background: rgba(185, 185, 185, 0.1);
+		backdrop-filter: blur(4px);
+		border: 1px solid #5fbeeb;
+		border-radius: 1rem;
+		padding: 1rem 1.5rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+		opacity: 0;
+		transform: translateY(-8px);
+		pointer-events: none;
+		transition:
+			opacity 0.3s ease,
+			transform 0.3s ease;
+		z-index: 1000;
+	}
+
+	header details[open] nav {
+		opacity: 1;
+		transform: translateY(0);
+		pointer-events: auto;
+	}
+
+	header details nav a {
+		font-size: 1.1rem;
+		padding: 0.25rem 0;
+		white-space: nowrap;
+	}
+
+	@media (prefers-color-scheme: light) {
+		header {
+			background-color: #ffffff;
+		}
+	}
+</style>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useCount } from '../composables/useCount';
+
+const props = defineProps<{ initialCount: number }>();
+const { count, increment } = useCount(props.initialCount);
+</script>
+
+<template>
+	<button @click="increment">count is {{ count }}</button>
+</template>
+
+<style scoped>
+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: #5fbeeb;
+}
+button:focus,
+button:focus-visible {
+	outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+	button {
+		background-color: #ffffff;
+	}
+}
+</style>

package/dist/templates/vue/composables/useCount.ts

@@ -0,0 +1,14 @@
+import { ref } from 'vue';
+
+export const useCount = (initialCount: number) => {
+	const count = ref(initialCount);
+
+	const increment = () => {
+		count.value++;
+	};
+
+	return {
+		count,
+		increment
+	};
+};

package/dist/templates/vue/pages/VueExample.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import CountButton from '../components/CountButton.vue';
+
+const props = defineProps<{
+	initialCount: number;
+}>();
+
+const count = ref(props.initialCount);
+const isOpen = ref(false);
+</script>
+
+<template>
+	<header>
+		<a href="/">AbsoluteJS</a>
+		<details
+			:open="isOpen"
+			@pointerenter="isOpen = true"
+			@pointerleave="isOpen = false"
+		>
+			<summary>Pages</summary>
+			<nav>
+				<a href="/html">HTML</a>
+				<a href="/react">React</a>
+				<a href="/htmx">HTMX</a>
+				<a href="/svelte">Svelte</a>
+				<a href="/vue">Vue</a>
+				<a href="/angular">Angular</a>
+			</nav>
+		</details>
+	</header>
+
+	<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://vuejs.org" target="_blank">
+				<img
+					class="logo vue"
+					src="/assets/svg/vue-logo.svg"
+					alt="Vue Logo"
+				/>
+			</a>
+		</nav>
+		<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.
+		</p>
+		<p style="color: #777; font-size: 1rem; margin-top: 2rem">
+			Click on the AbsoluteJS and Vue logos to learn more.
+		</p>
+	</main>
+</template>
+
+<style scoped>
+:global(*) {
+	box-sizing: border-box;
+	line-height: 1.5;
+	margin: 0;
+	padding: 0;
+}
+
+:global(html) {
+	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+	height: 100%;
+}
+
+:global(body) {
+	background-color: #2c2c2c;
+	color: #f5f5f5;
+	color-scheme: light dark;
+	display: flex;
+	flex-direction: column;
+	font-synthesis: none;
+	font-weight: 400;
+	height: 100%;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+}
+
+:global(#root) {
+	display: flex;
+	flex-direction: column;
+	margin: 0 auto;
+	height: 100%;
+	width: 100%;
+}
+
+:global(main) {
+	align-items: center;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+}
+
+:global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5),
+:global(h6) {
+	line-height: 1.1;
+}
+
+:global(p) {
+	font-size: 1.2rem;
+	max-width: 1280px;
+}
+
+a {
+	color: #5fbeeb;
+	font-size: 1.5rem;
+	font-weight: 500;
+	position: relative;
+	text-decoration: none;
+}
+
+header {
+	align-items: center;
+	background-color: #1a1a1a;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	display: flex;
+	justify-content: space-between;
+	padding: 2rem;
+	text-align: center;
+}
+
+header a {
+	position: relative;
+	color: #5fbeeb;
+	text-decoration: none;
+}
+
+header a::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 2px;
+	background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
+	transform: scaleX(0);
+	transform-origin: left;
+	transition: transform 0.25s ease-in-out;
+}
+
+header a:hover::after {
+	transform: scaleX(1);
+}
+
+h1 {
+	font-size: 2.5rem;
+	margin-top: 2rem;
+}
+
+.logo {
+	height: 8rem;
+	width: 8rem;
+	will-change: filter;
+	transition: filter 300ms;
+}
+.logo:hover {
+	filter: drop-shadow(0 0 2rem #5fbeeb);
+}
+.logo.vue:hover {
+	filter: drop-shadow(0 0 2rem #42b883);
+}
+
+nav {
+	display: flex;
+	gap: 4rem;
+	justify-content: center;
+}
+
+header details {
+	position: relative;
+}
+
+header details summary {
+	list-style: none;
+	appearance: none;
+	-webkit-appearance: none;
+	cursor: pointer;
+	user-select: none;
+	color: #5fbeeb;
+	font-size: 1.5rem;
+	font-weight: 500;
+	padding: 0.5rem 1rem;
+}
+
+header summary::after {
+	content: '▼';
+	display: inline-block;
+	margin-left: 0.5rem;
+	font-size: 0.75rem;
+	transition: transform 0.3s ease;
+}
+
+header details[open] summary::after {
+	transform: rotate(180deg);
+}
+
+header details nav {
+	position: absolute;
+	top: 100%;
+	right: -0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	background: rgba(128, 128, 128, 0.15);
+	backdrop-filter: blur(4px);
+	border: 1px solid #5fbeeb;
+	border-radius: 1rem;
+	padding: 1rem 1.5rem;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+	opacity: 0;
+	transform: translateY(-8px);
+	pointer-events: none;
+	transition:
+		opacity 0.3s ease,
+		transform 0.3s ease;
+	z-index: 1000;
+}
+
+header details[open] nav {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
+}
+
+header details nav a {
+	font-size: 1.1rem;
+	padding: 0.25rem 0;
+	white-space: nowrap;
+}
+
+@media (prefers-color-scheme: light) {
+	:global(body) {
+		background-color: #f5f5f5;
+		color: #1a1a1a;
+	}
+
+	header {
+		background-color: #ffffff;
+	}
+
+	button {
+		background-color: #ffffff;
+	}
+}
+</style>

package/dist/typeGuards.d.ts

@@ -0,0 +1,8 @@
+import type { AuthProvider, CodeQualityTool, DatabaseEngine, DatabaseHost, Frontend, ORM } from './types';
+export declare const isAuthProvider: (value: string | undefined) => value is AuthProvider;
+export declare const isDirectoryConfig: (value: string) => value is "default" | "custom";
+export declare const isDatabaseEngine: (value: string | undefined) => value is DatabaseEngine;
+export declare const isDatabaseHost: (value: string | undefined) => value is DatabaseHost;
+export declare const isORM: (value: string | undefined) => value is ORM;
+export declare const isCodeQualityTool: (value: string | undefined) => value is CodeQualityTool;
+export declare const isFrontend: (value: string | undefined) => value is Frontend;

package/dist/types.d.ts

@@ -0,0 +1,128 @@
+import { availableAuthProviders, availableCodeQualityTools, availableDatabaseEngines, availableDatabaseHosts, availableDirectoryConfigurations, availableFrontends, availableORMs } from './data';
+export type ScaffoldFrontendProps = {
+    targetDirectory: string;
+    templatesDirectory: string;
+    projectAssetsDirectory: string;
+    isSingleFrontend: boolean;
+};
+export type Frontend = (typeof availableFrontends)[number];
+export type FrontendLabels = Record<Frontend, string>;
+export type FrontendDirectories = Partial<Record<Frontend, string>>;
+export type ImportEntry = {
+    packageName: string;
+    isPlugin: boolean;
+    config?: Record<string, unknown> | null;
+};
+export type AvailableDependency = {
+    value: string;
+    label?: string;
+    imports?: ImportEntry[];
+    latestVersion: string;
+};
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+export type AuthProvider = (typeof availableAuthProviders)[number] | undefined;
+export type DatabaseEngine = (typeof availableDatabaseEngines)[number] | undefined;
+export type DatabaseHost = (typeof availableDatabaseHosts)[number] | undefined;
+export type DirectoryConfiguration = (typeof availableDirectoryConfigurations)[number];
+export type ORM = (typeof availableORMs)[number] | undefined;
+export type CodeQualityTool = (typeof availableCodeQualityTools)[number];
+export type TailwindConfig = {
+    input: string;
+    output: string;
+} | undefined;
+export type CreateConfiguration = {
+    assetsDirectory: string;
+    authProvider: AuthProvider;
+    buildDirectory: string;
+    directoryConfig: DirectoryConfiguration;
+    databaseEngine: DatabaseEngine;
+    frontendDirectories: FrontendDirectories;
+    frontends: Frontend[];
+    useHTMLScripts: boolean;
+    initializeGitNow: boolean;
+    installDependenciesNow: boolean;
+    codeQualityTool: CodeQualityTool;
+    orm: ORM;
+    plugins: string[];
+    projectName: string;
+    tailwind: TailwindConfig;
+    useTailwind: boolean;
+    databaseDirectory: string | undefined;
+    databaseHost: DatabaseHost;
+};
+type DeepUndefined<T> = T extends object ? {
+    [P in keyof T]: DeepUndefined<T[P]> | undefined;
+} : T | undefined;
+export type ArgumentConfiguration = {
+    [K in keyof CreateConfiguration]: DeepUndefined<CreateConfiguration[K]> | undefined;
+};
+export type PackageJson = {
+    name: string;
+    version: string;
+    description?: string;
+    keywords?: string[];
+    main?: string;
+    module?: string;
+    browser?: string | Record<string, string>;
+    types?: string;
+    typings?: string;
+    exports?: string | Record<string, string | Record<string, string>>;
+    imports?: Record<string, string>;
+    bin?: string | Record<string, string>;
+    files?: string[];
+    scripts?: Record<string, string>;
+    private?: boolean;
+    publishConfig?: {
+        registry?: string;
+        [key: string]: unknown;
+    };
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+    peerDependencies?: Record<string, string>;
+    optionalDependencies?: Record<string, string>;
+    bundledDependencies?: string[];
+    bundleDependencies?: string[];
+    engines?: {
+        node?: string;
+        npm?: string;
+        [key: string]: string | undefined;
+    };
+    os?: string[];
+    cpu?: string[];
+    workspaces?: string[] | {
+        packages: string[];
+        nohoist?: string[];
+    };
+    repository?: string | {
+        type?: 'git' | string;
+        url: string;
+        directory?: string;
+    };
+    bugs?: string | {
+        url?: string;
+        email?: string;
+    };
+    homepage?: string;
+    author?: string | {
+        name: string;
+        email?: string;
+        url?: string;
+    };
+    contributors?: Array<string | {
+        name: string;
+        email?: string;
+        url?: string;
+    }>;
+    license?: string;
+    funding?: string | Array<{
+        type?: string;
+        url: string;
+    }>;
+    preferGlobal?: boolean;
+    sideEffects?: boolean | string[];
+    config?: Record<string, unknown>;
+    resolution?: Record<string, string>;
+    resolutions?: Record<string, string>;
+    [customField: string]: unknown;
+};
+export {};

package/dist/utils/abort.d.ts

@@ -0,0 +1 @@
+export declare function abort(): never;

package/dist/utils/commandMaps.d.ts

@@ -0,0 +1,2 @@
+export declare const formatCommands: Record<string, string>;
+export declare const installCommands: Record<string, string>;

package/dist/utils/getPackageVersion.d.ts

@@ -0,0 +1 @@
+export declare const getPackageVersion: (packageName: string) => string | null;

package/dist/utils/parseCommandLineOptions.d.ts

@@ -0,0 +1,7 @@
+import type { ArgumentConfiguration } from '../types';
+export declare const parseCommandLineOptions: () => {
+    argumentConfiguration: ArgumentConfiguration;
+    debug: boolean;
+    help: boolean;
+    latest: boolean;
+};

package/dist/utils/t3-utils.d.ts

@@ -0,0 +1,7 @@
+import type { PackageManager } from '../types';
+/**
+ * @author Adapted from the create-t3-app project
+ * @see https://github.com/t3-oss/create-t3-app
+ * @license MIT
+ */
+export declare const getUserPackageManager: () => PackageManager;