create-absolutejs 0.10.3 → 0.12.0

package/dist/generators/project/generateRoutesBlock.js

@@ -1,8 +1,8 @@
 import { isFrontend } from '../../typeGuards';
-export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories, authOption, buildDirectory }) => {
+export const generateRoutesBlock = ({ databaseEngine, frontendDirectories, authOption }) => {
     const hasDatabase = databaseEngine !== undefined && databaseEngine !== 'none';
     const routes = [];
-    const wrap = (handlerCall) => authOption === 'abs'
+    const wrap = (handlerCall, isAsync = false) => authOption === 'abs'
         ? `async ({ cookie: { auth_provider, user_session_id }, store: { session }, status }) => {
     const { user, error } = await getStatus(session, user_session_id);
 
@@ -15,55 +15,61 @@ export const generateRoutesBlock = ({ databaseEngine, flags, frontendDirectories
 
     return ${handlerCall};
   }`
-        : `() => ${handlerCall}`;
-    const createHandlerCall = (frontend, directory) => {
-        const base = `${buildDirectory}${directory ? `/${directory}` : ''}/pages`;
+        : `${isAsync ? 'async ' : ''}() => ${handlerCall}`;
+    const createHandlerCall = (frontend) => {
+        if (frontend === 'angular')
+            return `handleAngularPageRequest<typeof AngularExamplePage>({
+    headTag: generateHeadElement({
+      cssPath: asset(manifest, 'AngularExampleCSS'),
+      title: 'AbsoluteJS + Angular'
+    }),
+    indexPath: asset(manifest, 'AngularExampleIndex'),
+    pagePath: asset(manifest, 'AngularExample'),
+    props: { initialCount: 0 }
+  })`;
         if (frontend === 'html')
-            return `handleHTMLPageRequest(\`${base}/HTMLExample.html\`)`;
+            return `handleHTMLPageRequest(asset(manifest, 'HTMLExample'))`;
         if (frontend === 'htmx')
-            return `handleHTMXPageRequest(\`${base}/HTMXExample.html\`)`;
+            return `handleHTMXPageRequest(asset(manifest, 'HTMXExample'))`;
         if (frontend === 'react') {
             const reactProps = authOption === 'abs'
-                ? `{ initialCount: 0, cssPath: asset(result, 'ReactExampleCSS'), user, providerConfiguration }`
-                : `{ initialCount: 0, cssPath: asset(result, 'ReactExampleCSS') }`;
-            return `handleReactPageRequest(
-    ReactExample,
-    asset(result, 'ReactExampleIndex'),
-    ${reactProps}
-  )`;
+                ? `{ cssPath: asset(manifest, 'ReactExampleCSS'), initialCount: 0, providerConfiguration, user }`
+                : `{ cssPath: asset(manifest, 'ReactExampleCSS'), initialCount: 0 }`;
+            return `handleReactPageRequest({
+    Page: ReactExample,
+    index: asset(manifest, 'ReactExampleIndex'),
+    props: ${reactProps}
+  })`;
         }
         if (frontend === 'svelte')
-            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(result, 'VueExample'),
-    asset(result, 'VueExampleIndex'),
-    generateHeadElement({
-      cssPath: asset(result, 'VueExampleCSS'),
-      title: 'AbsoluteJS + Vue',
-      description: 'A Vue.js example with AbsoluteJS'
+            return `handleSveltePageRequest<typeof SvelteExample>({
+    indexPath: asset(manifest, 'SvelteExampleIndex'),
+    pagePath: asset(manifest, 'SvelteExample'),
+    props: { cssPath: asset(manifest, 'SvelteExampleCSS'), initialCount: 0 }
+  })`;
+        if (frontend === 'vue')
+            return `handleVuePageRequest<typeof VueExample>({
+    headTag: generateHeadElement({
+      cssPath: [
+        asset(manifest, 'VueExampleCSS'),
+        asset(manifest, 'VueExampleCompiledCSS')
+      ],
+      title: 'AbsoluteJS + Vue'
     }),
-    { initialCount: 0 }
-  )`;
-        }
+    indexPath: asset(manifest, 'VueExampleIndex'),
+    pagePath: asset(manifest, 'VueExample'),
+    props: { initialCount: 0 }
+  })`;
         return '';
     };
-    Object.entries(frontendDirectories).forEach(([frontend, directory], entryIndex) => {
+    Object.entries(frontendDirectories).forEach(([frontend], entryIndex) => {
         if (!isFrontend(frontend))
             return;
-        const handlerCall = createHandlerCall(frontend, directory);
+        const handlerCall = createHandlerCall(frontend);
         if (!handlerCall)
             return;
-        const handler = wrap(handlerCall);
+        const isAsync = frontend === 'angular';
+        const handler = wrap(handlerCall, isAsync);
         if (entryIndex === 0) {
             routes.push(`.get('/', ${handler})`);
         }

package/dist/generators/project/generateServer.js

@@ -12,7 +12,6 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
     const deps = collectDependencies({ authOption, flags, plugins });
     const importsBlock = generateImportsBlock({
         authOption,
-        backendDirectory,
         databaseEngine,
         databaseHost,
         deps,
@@ -22,6 +21,7 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
     });
     const manifestBlock = generateBuildBlock({
         assetsDirectory,
+        backendDirectory,
         buildDirectory,
         frontendDirectories,
         publicDirectory,
@@ -59,31 +59,24 @@ export const generateServerFile = ({ tailwind, authOption, plugins, buildDirecto
 		})`;
     const routesBlock = generateRoutesBlock({
         authOption,
-        buildDirectory,
         databaseEngine,
-        flags,
         frontendDirectories
     });
-    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()
+.use(absolutejs)
 ${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}
+  })
+
+export type Server = typeof server
 `;
     writeFileSync(serverFilePath, content);
 };

package/dist/generators/project/scaffoldFrontends.js

@@ -1,15 +1,21 @@
 import { copyFileSync, cpSync, mkdirSync } from 'fs';
-import { join } from 'path';
+import { dirname, join } from 'path';
+import { scaffoldAngular } from '../angular/scaffoldAngular';
 import { scaffoldHTML } from '../html/scaffoldHTML';
 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, typesDirectory, useHTMLScripts, useTailwind, frontendDirectories, frontends }) => {
-    const stylesTargetDirectory = join(frontendDirectory, 'styles');
-    cpSync(join(templatesDirectory, 'styles'), stylesTargetDirectory, {
+    const srcDirectory = dirname(frontendDirectory);
+    const globalStylesDirectory = join(srcDirectory, 'styles');
+    const stylesIndexesDirectory = join(globalStylesDirectory, 'indexes');
+    cpSync(join(templatesDirectory, 'styles'), globalStylesDirectory, {
         recursive: true
     });
+    mkdirSync(stylesIndexesDirectory, { recursive: true });
+    const stylesTargetDirectory = join(frontendDirectory, 'styles');
+    mkdirSync(stylesTargetDirectory, { recursive: true });
     if (useTailwind) {
         copyFileSync(join(templatesDirectory, 'tailwind', 'tailwind.css'), join(stylesTargetDirectory, 'tailwind.css'));
     }
@@ -25,15 +31,21 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
         const targetDirectory = join(frontendDirectory, directory);
         if (!isSingleFrontend)
             mkdirSync(targetDirectory);
+        const editBasePath = directory
+            ? `src/frontend/${directory}`
+            : 'src/frontend';
         switch (frontendName) {
             case 'react':
                 scaffoldReact({
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });
@@ -43,9 +55,12 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });
@@ -55,24 +70,42 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     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.');
+                scaffoldAngular({
+                    absProviders,
+                    assetsDirectory,
+                    authOption,
+                    editBasePath,
+                    frontends,
+                    isSingleFrontend,
+                    projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
+                    targetDirectory,
+                    templatesDirectory
+                });
                 break;
             case 'html':
                 scaffoldHTML({
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory,
                     useHTMLScripts
@@ -83,9 +116,12 @@ export const scaffoldFrontends = ({ frontendDirectory, assetsDirectory, absProvi
                     absProviders,
                     assetsDirectory,
                     authOption,
+                    editBasePath,
                     frontends,
                     isSingleFrontend,
                     projectAssetsDirectory,
+                    stylesDirectory: stylesTargetDirectory,
+                    stylesIndexesDirectory,
                     targetDirectory,
                     templatesDirectory
                 });

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

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

package/dist/generators/react/generateReactComponents.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateAppComponent = (frontends) => {
+export const generateAppComponent = (frontends, editBasePath) => {
     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>`
         : '';
@@ -33,7 +33,7 @@ export const App = ({ initialCount }: AppProps) => {
 				count is {count}
 			</button>
 			<p>
-				Edit <code>example/react/pages/ReactExample.tsx</code> and save
+				Edit <code>${editBasePath}/pages/ReactExample.tsx</code> and save
 				to test HMR.
 			</p>${exploreBlock}
 			<p
@@ -73,37 +73,6 @@ export const generateDropdownComponent = (frontends) => {
 );
 `;
 };
-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) => {
-        const logoUrl = `/assets/svg/google-logo.svg`;
-        const name = provider.charAt(0).toUpperCase() +
-            provider.slice(1).toLowerCase();
-        return `<OAuthLink provider="${provider}" logoUrl="${logoUrl}" name="${name}" mode="in" />`;
-    })
-        .join('\n\t\t\t')
-    : `<p>No OAuth providers configured</p>`}
-			</nav>
-		</details>
-);
-`;
 export const generateReactExamplePage = (authOption) => {
     const useBlockReturn = authOption === 'abs';
     const propsType = `
@@ -178,3 +147,34 @@ ${authOption === 'abs' ? extractProps : ''}
 ${closing}
 `;
 };
+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) => {
+        const logoUrl = `/assets/svg/google-logo.svg`;
+        const name = provider.charAt(0).toUpperCase() +
+            provider.slice(1).toLowerCase();
+        return `<OAuthLink provider="${provider}" logoUrl="${logoUrl}" name="${name}" mode="in" />`;
+    })
+        .join('\n\t\t\t')
+    : `<p>No OAuth providers configured</p>`}
+			</nav>
+		</details>
+);
+`;

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

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldReact: ({ isSingleFrontend, authOption, targetDirectory, templatesDirectory, frontends, assetsDirectory, projectAssetsDirectory, absProviders }: ScaffoldFrontendProps) => void;
+export declare const scaffoldReact: ({ authOption, editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, absProviders, stylesIndexesDirectory }: ScaffoldFrontendProps) => void;

package/dist/generators/react/scaffoldReact.js

@@ -2,14 +2,14 @@ import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateMarkupCSS } from '../project/generateMarkupCSS';
 import { generateAppComponent, generateDropdownComponent, generateReactExamplePage, generateSignInComponent } from './generateReactComponents';
-export const scaffoldReact = ({ isSingleFrontend, authOption, targetDirectory, templatesDirectory, frontends, assetsDirectory, projectAssetsDirectory, absProviders }) => {
+export const scaffoldReact = ({ authOption, editBasePath, targetDirectory, templatesDirectory, frontends, projectAssetsDirectory, absProviders, stylesIndexesDirectory }) => {
     mkdirSync(join(projectAssetsDirectory, 'svg'), { recursive: true });
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'react.svg'), join(projectAssetsDirectory, 'svg', 'react.svg'));
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'google-logo.svg'), join(projectAssetsDirectory, 'svg', 'google-logo.svg'));
     cpSync(join(templatesDirectory, 'react'), targetDirectory, {
         recursive: true
     });
-    const appComponent = generateAppComponent(frontends);
+    const appComponent = generateAppComponent(frontends, editBasePath);
     writeFileSync(join(targetDirectory, 'components', 'App.tsx'), appComponent, 'utf-8');
     const dropdownComponent = generateDropdownComponent(frontends);
     writeFileSync(join(targetDirectory, 'components', 'Dropdown.tsx'), dropdownComponent, 'utf-8');
@@ -20,9 +20,7 @@ export const scaffoldReact = ({ isSingleFrontend, authOption, targetDirectory, t
     const pageComponent = generateReactExamplePage(authOption);
     mkdirSync(join(targetDirectory, 'pages'), { recursive: true });
     writeFileSync(join(targetDirectory, 'pages', 'ReactExample.tsx'), pageComponent, 'utf-8');
-    const cssOutputDir = join(targetDirectory, 'styles');
-    mkdirSync(cssOutputDir, { recursive: true });
-    const cssOutputFile = join(cssOutputDir, 'react-example.css');
-    const reactCSS = generateMarkupCSS('react', '#61dafbaa', isSingleFrontend);
+    const cssOutputFile = join(stylesIndexesDirectory, 'react-example.css');
+    const reactCSS = generateMarkupCSS('react', '#61dafbaa');
     writeFileSync(cssOutputFile, reactCSS, 'utf-8');
 };

package/dist/generators/svelte/generateSveltePage.d.ts

@@ -1,2 +1,2 @@
 import { Frontend } from '../../types';
-export declare const generateSveltePage: (frontends: Frontend[]) => string;
+export declare const generateSveltePage: (frontends: Frontend[], editBasePath: string) => string;

package/dist/generators/svelte/generateSveltePage.js

@@ -1,5 +1,5 @@
 import { formatNavLink } from '../../utils/formatNavLink';
-export const generateSveltePage = (frontends) => {
+export const generateSveltePage = (frontends, editBasePath) => {
     const navLinks = frontends.map(formatNavLink).join('\n\t\t\t');
     return `<script lang="ts">
 	type SvelteExampleProps = {
@@ -77,7 +77,7 @@ export const generateSveltePage = (frontends) => {
 	<h1>AbsoluteJS + Svelte</h1>
 	<Counter {initialCount} />
 	<p>
-		Edit <code>example/svelte/pages/SvelteExample.svelte</code> and save
+		Edit <code>${editBasePath}/pages/SvelteExample.svelte</code> and save
 		to test HMR.
 	</p>
 ${frontends.length > 1
@@ -149,6 +149,10 @@ ${frontends.length > 1
 		filter: drop-shadow(0 0 2rem #ff3e00);
 	}
 
+	button:hover {
+		border-color: #ff3e00;
+	}
+
 	nav {
 		display: flex;
 		gap: 4rem;
@@ -241,10 +245,24 @@ ${frontends.length > 1
 		}
 	}
 
+	code {
+		background-color: rgba(255, 255, 255, 0.08);
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		border-radius: 0.375rem;
+		font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+		font-size: 0.875em;
+		padding: 0.2rem 0.5rem;
+	}
+
 	@media (prefers-color-scheme: light) {
 		header {
 			background-color: #ffffff;
 		}
+
+		code {
+			background-color: rgba(0, 0, 0, 0.06);
+			border-color: rgba(0, 0, 0, 0.1);
+		}
 	}
 </style>
 `;

package/dist/generators/svelte/scaffoldSvelte.d.ts

@@ -1,2 +1,2 @@
 import { ScaffoldFrontendProps } from '../../types';
-export declare const scaffoldSvelte: ({ isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }: ScaffoldFrontendProps) => void;
+export declare const scaffoldSvelte: ({ editBasePath, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory, stylesIndexesDirectory }: ScaffoldFrontendProps) => void;

package/dist/generators/svelte/scaffoldSvelte.js

@@ -1,19 +1,17 @@
 import { copyFileSync, cpSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { generateSveltePage } from './generateSveltePage';
-export const scaffoldSvelte = ({ isSingleFrontend, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory }) => {
+export const scaffoldSvelte = ({ editBasePath, targetDirectory, frontends, templatesDirectory, projectAssetsDirectory, stylesIndexesDirectory }) => {
     copyFileSync(join(templatesDirectory, 'assets', 'svg', 'svelte-logo.svg'), join(projectAssetsDirectory, 'svg', 'svelte-logo.svg'));
     cpSync(join(templatesDirectory, 'svelte'), targetDirectory, {
         recursive: true
     });
-    const sveltePage = generateSveltePage(frontends);
+    const sveltePage = generateSveltePage(frontends, editBasePath);
     const pagesDirectory = join(targetDirectory, 'pages');
     mkdirSync(pagesDirectory, { recursive: true });
     const svelteFilePath = join(pagesDirectory, 'SvelteExample.svelte');
     writeFileSync(svelteFilePath, sveltePage, 'utf-8');
-    const cssOutputDirectory = join(targetDirectory, 'styles');
-    mkdirSync(cssOutputDirectory, { recursive: true });
-    const cssOutputFile = join(cssOutputDirectory, 'svelte-example.css');
-    const svelteCSS = `@import url('${isSingleFrontend ? '../' : '../../'}styles/reset.css');`;
+    const cssOutputFile = join(stylesIndexesDirectory, 'svelte-example.css');
+    const svelteCSS = `@import url('../reset.css');`;
     writeFileSync(cssOutputFile, svelteCSS, 'utf-8');
 };

package/dist/generators/vue/generateVuePage.d.ts

@@ -1,2 +1,2 @@
 import { Frontend } from '../../types';
-export declare const generateVuePage: (frontends: Frontend[]) => string;
+export declare const generateVuePage: (frontends: Frontend[], editBasePath: string) => string;