create-absolutejs 0.8.2 → 0.9.0

package/dist/generators/project/generateMarkupCSS.js

@@ -1,148 +1,148 @@
-export const generateMarkupCSS = (frontend, color, isSingleFrontend) => `@import url('${isSingleFrontend ? '../styles/reset.css' : '../../styles/reset.css'}');
-
-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.${frontend}:hover {
-	filter: drop-shadow(0 0 2rem ${color});
-}
-
-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;
-	}
-
-	button {
-		background-color: #ffffff;
-	}
-}
+export const generateMarkupCSS = (frontend, color, isSingleFrontend) => `@import url('${isSingleFrontend ? '../styles/reset.css' : '../../styles/reset.css'}');
+
+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.${frontend}:hover {
+	filter: drop-shadow(0 0 2rem ${color});
+}
+
+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;
+	}
+
+	button {
+		background-color: #ffffff;
+	}
+}
 ${frontend === 'react'
-    ? `\n@keyframes logo-spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-@media (prefers-reduced-motion: no-preference) {
-	a:nth-of-type(2) .logo {
-		animation: logo-spin infinite 20s linear;
-	}
+    ? `\n@keyframes logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
 }`
     : ''}`;

package/dist/generators/project/generateRoutesBlock.js

@@ -3,17 +3,17 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
     const hasDatabase = databaseEngine !== undefined && databaseEngine !== 'none';
     const routes = [];
     const wrap = (handlerCall) => authOption === 'abs'
-        ? `async ({ cookie: { auth_provider, user_session_id }, store: { session }, status }) => {
-    const { user, error } = await getStatus(session, user_session_id);
-
-    if (error) {
-      return status(error.code, error.message);
-    }
-
-    const providerConfiguration =
-      auth_provider.value && providers[auth_provider.value];
-
-    return ${handlerCall};
+        ? `async ({ cookie: { auth_provider, user_session_id }, store: { session }, status }) => {
+    const { user, error } = await getStatus(session, user_session_id);
+
+    if (error) {
+      return status(error.code, error.message);
+    }
+
+    const providerConfiguration =
+      auth_provider.value && providers[auth_provider.value];
+
+    return ${handlerCall};
   }`
         : `() => ${handlerCall}`;
     const createHandlerCall = (frontend, directory) => {
@@ -24,35 +24,35 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
             return `handleHTMXPageRequest(\`${base}/HTMXExample.html\`)`;
         if (frontend === 'react') {
             const reactProps = authOption === 'abs'
-                ? `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS'), user, providerConfiguration }`
-                : `{ initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS') }`;
-            return `handleReactPageRequest(
-    ReactExample,
-    asset(manifest, 'ReactExampleIndex'),
-    ${reactProps}
+                ? `{ initialCount: 0, cssPath: asset(result, 'ReactExampleCSS'), user, providerConfiguration }`
+                : `{ initialCount: 0, cssPath: asset(result, 'ReactExampleCSS') }`;
+            return `handleReactPageRequest(
+    ReactExample,
+    asset(result, 'ReactExampleIndex'),
+    ${reactProps}
   )`;
         }
         if (frontend === 'svelte')
-            return `handleSveltePageRequest(
-    SvelteExample,
-    asset(manifest, 'SvelteExample'),
-    asset(manifest, 'SvelteExampleIndex'),
-    { initialCount: 0, cssPath: asset(manifest, 'SvelteExampleCSS') }
+            return `handleSveltePageRequest(
+    SvelteExample,
+    asset(result, 'SvelteExample'),
+    asset(result, 'SvelteExampleIndex'),
+    { initialCount: 0, cssPath: asset(result, 'SvelteExampleCSS') }
   )`;
         if (frontend === 'vue') {
             const vueComponent = flags.requiresSvelte
                 ? 'vueImports.VueExample'
                 : 'VueExample';
-            return `handleVuePageRequest(
-    ${vueComponent},
-    asset(manifest, 'VueExample'),
-    asset(manifest, 'VueExampleIndex'),
-    generateHeadElement({
-      cssPath: asset(manifest, 'VueExampleCSS'),
-      title: 'AbsoluteJS + Vue',
-      description: 'A Vue.js example with AbsoluteJS'
-    }),
-    { initialCount: 0 }
+            return `handleVuePageRequest(
+    ${vueComponent},
+    asset(result, 'VueExample'),
+    asset(result, 'VueExampleIndex'),
+    generateHeadElement({
+      cssPath: asset(result, 'VueExampleCSS'),
+      title: 'AbsoluteJS + Vue',
+      description: 'A Vue.js example with AbsoluteJS'
+    }),
+    { initialCount: 0 }
   )`;
         }
         return '';
@@ -76,10 +76,10 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
         }
     });
     if (hasDatabase && (authOption === undefined || authOption === 'none')) {
-        routes.push(`.get('/count/:uid', ({ params: { uid } }) => getCountHistory(db, uid), {
-    params: t.Object({ uid: t.Number() })
-  })`, `.post('/count', ({ body: { count } }) => createCountHistory(db, count), {
-    body: t.Object({ count: t.Number() })
+        routes.push(`.get('/count/:uid', ({ params: { uid } }) => getCountHistory(db, uid), {
+    params: t.Object({ uid: t.Number() })
+  })`, `.post('/count', ({ body: { count } }) => createCountHistory(db, count), {
+    body: t.Object({ count: t.Number() })
   })`);
     }
     return routes.join('\n  ');

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

@@ -1,6 +1,7 @@
 import type { CreateConfiguration } from '../../types';
 type CreateServerFileProps = Pick<CreateConfiguration, 'tailwind' | 'authOption' | 'databaseEngine' | 'plugins' | 'buildDirectory' | 'databaseHost' | 'orm' | 'assetsDirectory' | 'frontendDirectories'> & {
     backendDirectory: string;
+    publicDirectory: string;
 };
-export declare const generateServerFile: ({ tailwind, authOption, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory }: CreateServerFileProps) => void;
+export declare const generateServerFile: ({ tailwind, authOption, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory, publicDirectory }: CreateServerFileProps) => void;
 export {};

package/dist/generators/project/generateServer.js

@@ -6,7 +6,7 @@ import { generateBuildBlock } from './generateBuildBlock';
 import { generateDBBlock } from './generateDBBlock';
 import { generateImportsBlock } from './generateImportsBlock';
 import { generateRoutesBlock } from './generateRoutesBlock';
-export const generateServerFile = ({ tailwind, authOption, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory }) => {
+export const generateServerFile = ({ tailwind, authOption, plugins, buildDirectory, databaseEngine, databaseHost, orm, assetsDirectory, frontendDirectories, backendDirectory, publicDirectory }) => {
     const serverFilePath = join(backendDirectory, 'server.ts');
     const flags = computeFlags(frontendDirectories);
     const deps = collectDependencies({ authOption, flags, plugins });
@@ -24,6 +24,7 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
         assetsDirectory,
         buildDirectory,
         frontendDirectories,
+        publicDirectory,
         tailwind
     });
     let dbBlock = '';
@@ -32,7 +33,8 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
     }
     const useBlock = deps
         .flatMap((dependency) => dependency.imports ?? [])
-        .filter((pluginImport) => pluginImport.isPlugin)
+        .filter((pluginImport) => pluginImport.isPlugin &&
+        pluginImport.packageName !== 'networking')
         .map((pluginImport) => {
         if (pluginImport.packageName === 'absoluteAuth') {
             const hasDatabase = databaseEngine !== undefined && databaseEngine !== 'none';
@@ -49,11 +51,11 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
         return `.use(${pluginImport.packageName}(${JSON.stringify(pluginImport.config)}))`;
     })
         .join('\n');
-    const guardBlock = `.guard({
-			cookie: t.Cookie({
-				auth_provider: t.Optional(authProviderOption),
-				user_session_id: userSessionIdTypebox
-			})
+    const guardBlock = `.guard({
+			cookie: t.Cookie({
+				auth_provider: t.Optional(authProviderOption),
+				user_session_id: userSessionIdTypebox
+			})
 		})`;
     const routesBlock = generateRoutesBlock({
         authOption,
@@ -62,18 +64,26 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
         flags,
         frontendDirectories
     });
-    const content = `${importsBlock}
-
-${manifestBlock}
-${dbBlock}
-new Elysia()
-${useBlock}
-${authOption === 'abs' ? guardBlock : ''}
-  ${routesBlock}
-  .on('error', err => {
-    const { request } = err
-    console.error(\`Server error on \${request.method} \${request.url}: \${err.message}\`)
-  });
+    const hmrBlock = `
+if (
+  typeof result.hmrState !== 'string' &&
+  typeof result.manifest === 'object'
+) {
+  server.use(hmr(result.hmrState, result.manifest));
+}`;
+    const content = `${importsBlock}
+
+${manifestBlock}
+${dbBlock ? `${dbBlock}\n` : ''}
+const server = new Elysia()
+${useBlock}${authOption === 'abs' ? `\n${guardBlock}` : ''}
+  ${routesBlock}
+  .use(networking)
+  .on('error', err => {
+    const { request } = err
+    console.error(\`Server error on \${request.method} \${request.url}: \${err.message}\`)
+  });
+${hmrBlock}
 `;
     writeFileSync(serverFilePath, content);
 };

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

@@ -1,6 +1,7 @@
 import { CreateConfiguration } from '../../types';
 type ScaffoldBackendProps = Pick<CreateConfiguration, 'assetsDirectory' | 'absProviders' | 'authOption' | 'buildDirectory' | 'databaseEngine' | 'databaseHost' | 'frontendDirectories' | 'orm' | 'plugins' | 'tailwind'> & {
     backendDirectory: string;
+    publicDirectory: string;
 };
-export declare const scaffoldBackend: ({ assetsDirectory, authOption, absProviders, backendDirectory, buildDirectory, databaseEngine, databaseHost, frontendDirectories, orm, plugins, tailwind }: ScaffoldBackendProps) => void;
+export declare const scaffoldBackend: ({ assetsDirectory, authOption, absProviders, backendDirectory, buildDirectory, databaseEngine, databaseHost, frontendDirectories, orm, plugins, publicDirectory, tailwind }: ScaffoldBackendProps) => void;
 export {};

package/dist/generators/project/scaffoldBackend.js

@@ -2,7 +2,7 @@ import { mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateAbsoluteAuthConfig } from './generateAbsoluteAuthConfig';
 import { generateServerFile } from './generateServer';
-export const scaffoldBackend = ({ assetsDirectory, authOption, absProviders, backendDirectory, buildDirectory, databaseEngine, databaseHost, frontendDirectories, orm, plugins, tailwind }) => {
+export const scaffoldBackend = ({ assetsDirectory, authOption, absProviders, backendDirectory, buildDirectory, databaseEngine, databaseHost, frontendDirectories, orm, plugins, publicDirectory, tailwind }) => {
     generateServerFile({
         assetsDirectory,
         authOption,
@@ -13,6 +13,7 @@ export const scaffoldBackend = ({ assetsDirectory, authOption, absProviders, bac
         frontendDirectories,
         orm,
         plugins,
+        publicDirectory,
         tailwind
     });
     if (authOption === 'abs') {