create-absolutejs 0.2.2 → 0.3.0

package/dist/messages.d.ts

@@ -0,0 +1,14 @@
+import type { CreateConfiguration } from './types';
+export declare const helpMessage: string;
+type OutroMessageProps = {
+    projectName: string;
+    packageManager: string;
+    installDependenciesNow: boolean;
+};
+export declare const getOutroMessage: ({ projectName, packageManager, installDependenciesNow }: OutroMessageProps) => string;
+type DebugMessageProps = {
+    response: CreateConfiguration;
+    packageManager: string;
+};
+export declare const getDebugMessage: ({ response: { projectName, codeQualityTool, directoryConfig, useTailwind, tailwind, frontends, useHTMLScripts, frontendDirectories, buildDirectory, assetsDirectory, databaseEngine, databaseHost, databaseDirectory, orm, authProvider, plugins, initializeGitNow, installDependenciesNow }, packageManager }: DebugMessageProps) => string;
+export {};

package/dist/prompt.d.ts

@@ -0,0 +1,2 @@
+import type { ArgumentConfiguration, CreateConfiguration } from './types';
+export declare const prompt: (argumentConfiguration: ArgumentConfiguration) => Promise<CreateConfiguration>;

package/dist/questions/authProvider.d.ts

@@ -0,0 +1 @@
+export declare const getAuthProvider: () => Promise<"absoluteAuth" | undefined>;

package/dist/questions/codeQualityTool.d.ts

@@ -0,0 +1 @@
+export declare const getCodeQualityTool: () => Promise<"eslint+prettier" | "biome">;

package/dist/questions/configurationType.d.ts

@@ -0,0 +1 @@
+export declare const getConfigurationType: () => Promise<"default" | "custom">;

package/dist/questions/databaseEngine.d.ts

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

package/dist/questions/databaseHost.d.ts

@@ -0,0 +1,2 @@
+import type { DatabaseEngine } from '../types';
+export declare const getDatabaseHost: (databaseEngine: DatabaseEngine) => Promise<"neon" | "planetscale" | "supabase" | "turso" | "upstash" | "atlas" | undefined>;

package/dist/questions/directoryConfiguration.d.ts

@@ -0,0 +1,14 @@
+import type { ArgumentConfiguration, CreateConfiguration } from '../types';
+type GetDirectoryConfigurationProps = Pick<CreateConfiguration, 'directoryConfig' | 'useTailwind' | 'databaseEngine'> & {
+    argumentConfiguration: ArgumentConfiguration;
+};
+export declare const getDirectoryConfiguration: ({ directoryConfig, useTailwind, databaseEngine, argumentConfiguration }: GetDirectoryConfigurationProps) => Promise<{
+    assetsDirectory: string;
+    buildDirectory: string;
+    databaseDirectory: string | undefined;
+    tailwind: {
+        input: string;
+        output: string;
+    } | undefined;
+}>;
+export {};

package/dist/questions/frontendDirectoryConfigurations.d.ts

@@ -0,0 +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>>>;

package/dist/questions/frontends.d.ts

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

package/dist/questions/htmlScriptingOption.d.ts

@@ -0,0 +1 @@
+export declare const getHtmlScriptingOption: () => Promise<boolean>;

package/dist/questions/initializeGitNow.d.ts

@@ -0,0 +1 @@
+export declare const getInitializeGit: () => Promise<boolean>;

package/dist/questions/installDependenciesNow.d.ts

@@ -0,0 +1 @@
+export declare const getInstallDependencies: () => Promise<boolean>;

package/dist/questions/orm.d.ts

@@ -0,0 +1 @@
+export declare const getORM: () => Promise<"drizzle" | "prisma" | undefined>;

package/dist/questions/plugins.d.ts

@@ -0,0 +1 @@
+export declare const getPlugins: () => Promise<string[]>;

package/dist/questions/projectName.d.ts

@@ -0,0 +1 @@
+export declare const getProjectName: () => Promise<string>;

package/dist/questions/useTailwind.d.ts

@@ -0,0 +1 @@
+export declare const getUseTailwind: () => Promise<boolean>;

package/dist/scaffold.d.ts

@@ -0,0 +1,8 @@
+import type { PackageManager, CreateConfiguration } from './types';
+type ScaffoldProps = {
+    response: CreateConfiguration;
+    packageManager: PackageManager;
+    latest: boolean;
+};
+export declare const scaffold: ({ response: { projectName, codeQualityTool, initializeGitNow, databaseEngine, useHTMLScripts, useTailwind, databaseDirectory, orm, frontends, plugins, authProvider, buildDirectory, assetsDirectory, tailwind, installDependenciesNow, frontendDirectories }, latest, packageManager }: ScaffoldProps) => void;
+export {};

package/dist/templates/assets/svg/HTML5_Badge.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <title>HTML5 Logo Badge</title>
+  <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
+  <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
+  <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
+  <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
+</svg>

package/dist/templates/assets/svg/htmx-logo-black.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="168px" viewBox="0 0 256 168" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+    <title>htmx</title>
+    <g>
+        <polygon fill="#111111" points="181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689"></polygon>
+        <polygon fill="#111111" points="74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689"></polygon>
+        <polygon fill="#4065C5" points="144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525"></polygon>
+    </g>
+</svg>

package/dist/templates/assets/svg/htmx-logo-white.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="168px" viewBox="0 0 256 168" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+    <title>htmx</title>
+    <g>
+        <polygon fill="#ffffff" points="181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689"></polygon>
+        <polygon fill="#ffffff" points="74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689"></polygon>
+        <polygon fill="#4065C5" points="144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525"></polygon>
+    </g>
+</svg>

package/dist/templates/assets/svg/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

package/dist/templates/assets/svg/vue-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.32 170.02">
+  <path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z"/>
+  <path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z"/>
+</svg>

package/dist/templates/html/pages/HTMLExample.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html>
+	<head>
+		<title>AbsoluteJS + HTML</title>
+		<meta name="description" content="AbsoluteJS HTML Example" />
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link
+			rel="stylesheet"
+			type="text/css"
+			href="../styles/html-example.css"
+		/>
+		<link rel="icon" href="/assets/ico/favicon.ico" />
+	</head>
+	<body>
+		<header>
+			<a href="/">AbsoluteJS</a>
+			<details>
+				<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://html.spec.whatwg.org/multipage/">
+					<img
+						class="logo html"
+						src="/assets/svg/HTML5_Badge.svg"
+						alt="HTML Logo"
+					/>
+				</a>
+			</nav>
+			<h1>AbsoluteJS + HTML</h1>
+			<button id="counter-button">
+				count is <span id="counter">0</span>
+			</button>
+			<p>
+				Edit <code>example/html/pages/HtmlExample.html</code> save and
+				rebuild 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="margin-top: 2rem; font-size: 1rem; color: #777">
+				Click on the AbsoluteJS and HTML logos to learn more.
+			</p>
+		</main>
+		<script src="../scripts/typescript-example.ts"></script>
+	</body>
+</html>

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

@@ -0,0 +1,21 @@
+const button = document.querySelector<HTMLButtonElement>('#counter-button');
+const counter = document.querySelector<HTMLSpanElement>('#counter');
+const details = document.querySelector<HTMLDetailsElement>('header details');
+
+if (!button || !counter || !details) {
+	throw new Error('Required elements not found');
+}
+
+let count = 0;
+
+button.addEventListener('click', () => {
+	counter.textContent = (++count).toString();
+});
+
+details.addEventListener('pointerenter', () => {
+	details.open = true;
+});
+
+details.addEventListener('pointerleave', () => {
+	details.open = false;
+});

package/dist/templates/htmx/pages/HTMXExample.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<html>
+	<head>
+		<title>AbsoluteJS + HTMX</title>
+		<meta name="description" content="AbsoluteJS HTMX Example" />
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link
+			rel="stylesheet"
+			type="text/css"
+			href="../styles/htmx-example.css"
+		/>
+		<link rel="icon" href="/assets/ico/favicon.ico" />
+		<!-- TODO : Download htmx instead of from CDN -->
+		<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
+	</head>
+	<body
+		hx-post="/htmx/reset"
+		hx-trigger="beforeunload from:window once"
+		hx-swap="none"
+	>
+		<header>
+			<a href="/">AbsoluteJS</a>
+			<details
+				hx-on:pointerenter="this.open = true"
+				hx-on:pointerleave="this.open = 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://htmx.org" target="_blank">
+					<picture>
+						<source
+							srcset="/assets/svg/htmx-logo-white.svg"
+							media="(prefers-color-scheme: dark)"
+						/>
+
+						<img
+							src="/assets/svg/htmx-logo-black.svg"
+							alt="HTMX logo"
+							class="logo htmx"
+						/>
+					</picture>
+				</a>
+			</nav>
+			<h1>AbsoluteJS + HTMX</h1>
+			<button
+				hx-post="/htmx/increment"
+				hx-target="#count"
+				hx-swap="innerHTML"
+			>
+				count is
+				<span
+					id="count"
+					hx-get="/htmx/count"
+					hx-trigger="load"
+					hx-swap="innerHTML"
+					>0</span
+				>
+			</button>
+			<p>
+				Edit <code>example/htmx/pages/HtmxHome.html</code> save and
+				rebuild 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="margin-top: 2rem; font-size: 1rem; color: #777">
+				Click on the AbsoluteJS and HTML logos to learn more.
+			</p>
+		</main>
+	</body>
+</html>

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

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+type AppProps = { initialCount: number };
+
+export const App = ({ initialCount }: AppProps) => {
+	const [count, setCount] = useState(initialCount);
+
+	return (
+		<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> then save
+				and refresh to update the page.
+			</p>
+			<p style={{ color: '#777' }}>
+				( Hot Module Reloading is coming soon )
+			</p>
+			<p style={{ marginTop: '2rem' }}>
+				Explore the other pages to see how AbsoluteJS seamlessly unifies
+				multiple frameworks on a single server.
+			</p>
+			<p
+				style={{
+					color: '#777',
+					fontSize: '1rem',
+					marginTop: '2rem'
+				}}
+			>
+				Click on the AbsoluteJS and React logos to learn more.
+			</p>
+		</main>
+	);
+};

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

@@ -0,0 +1,23 @@
+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>
+				<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>
+	);
+};

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

@@ -0,0 +1,34 @@
+type HeadProps = {
+	title?: string;
+	description?: string;
+	icon?: string;
+	font?: string;
+	cssPath?: string;
+};
+
+export const Head = ({
+	title = 'AbsoluteJS + React',
+	description = 'AbsoluteJS React Example',
+	icon = '/assets/ico/favicon.ico',
+	font = 'Poppins',
+	cssPath
+}: HeadProps) => (
+	<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" />
+		<link
+			rel="preconnect"
+			href="https://fonts.gstatic.com"
+			crossOrigin="anonymous"
+		/>
+		<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" />}
+	</head>
+);

package/dist/templates/react/pages/ReactExample.tsx

@@ -0,0 +1,18 @@
+import { App } from '../components/App';
+import { Dropdown } from '../components/Dropdown';
+import { Head } from '../components/Head';
+
+type ReactExampleProps = { initialCount: number; cssPath: string };
+
+export const ReactExample = ({ initialCount, cssPath }: ReactExampleProps) => (
+	<html>
+		<Head cssPath={cssPath} />
+		<body>
+			<header>
+				<a href="/">AbsoluteJS</a>
+				<Dropdown />
+			</header>
+			<App initialCount={initialCount} />
+		</body>
+	</html>
+);

package/dist/templates/styles/colors.ts

@@ -0,0 +1,11 @@
+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';

package/dist/templates/styles/reset.css

@@ -0,0 +1,84 @@
+* {
+	box-sizing: border-box;
+	line-height: 1.5;
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+	height: 100%;
+}
+
+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;
+}
+
+main {
+	align-items: center;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	line-height: 1.1;
+}
+
+p {
+	font-size: 1.2rem;
+	max-width: 1280px;
+}
+
+a {
+	color: #5fbeeb;
+	font-size: 1.5rem;
+	font-weight: 500;
+	position: relative;
+	text-decoration: none;
+}
+
+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) {
+	body {
+		background-color: #f5f5f5;
+		color: #1a1a1a;
+	}
+}

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	type CounterProps = {
+		initialCount: number;
+	};
+
+	let { initialCount }: CounterProps = $props();
+	import { counter } from '../composables/counter.svelte';
+	const { getCount, increment } = counter(initialCount);
+</script>
+
+<button onclick={increment}>count is {getCount()}</button>
+
+<style>
+	@media (prefers-color-scheme: light) {
+		button {
+			background-color: #ffffff;
+		}
+	}
+</style>

package/dist/templates/svelte/composables/counter.svelte.ts

@@ -0,0 +1,14 @@
+export const counter = (initialCount: number) => {
+	let count = $state(initialCount);
+
+	const getCount = () => count;
+
+	const increment = () => {
+		count += 1;
+	};
+
+	return {
+		getCount,
+		increment
+	};
+};