create-wirejs-app 2.0.62 → 2.0.63

package/package.json

@@ -1,9 +1,14 @@
 {
 	"name": "create-wirejs-app",
-	"version": "2.0.62",
+	"version": "2.0.63",
 	"description": "Initializes a wirejs package.",
 	"author": "Jon Wire",
 	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/svidgen/create-wirejs-app.git",
+		"directory": "packages/create-wirejs-app"
+	},
 	"bin": {
 		"create-wirejs-app": "./bin.js"
 	},

package/templates/default/api/index.ts

@@ -44,7 +44,7 @@ export const todos = withContext(context => ({
 					list: { eq: list ?? 'default' }
 				},
 			});
-			const todosArray = await Array.fromAsync(todos);
+			const todosArray = await fromAsync(todos);
 			return todosArray
 				.sort((a, b) => a.order - b.order)
 				.map(todo => ({
@@ -111,4 +111,15 @@ export const wiki = withContext(context => ({
 
 		return true;
 	}
-}));
+}));
+
+/**
+ * For node 20, which doesn't have `Array.fromAsync()`.
+ */
+async function fromAsync<T>(gen: AsyncGenerator<T>): Promise<T[]> {
+	const items: T[] = [];
+	for await (const item of gen) {
+		items.push(item);
+	}
+	return items;
+}

package/templates/default/package.json

@@ -10,11 +10,12 @@
 	"dependencies": {
 		"dompurify": "^3.2.3",
 		"marked": "^15.0.6",
-		"wirejs-dom": "^1.0.38",
-		"wirejs-resources": "^0.1.57"
+		"wirejs-dom": "^1.0.41",
+		"wirejs-resources": "^0.1.58",
+		"wirejs-components": "^0.1.1"
 	},
 	"devDependencies": {
-		"wirejs-scripts": "^3.0.55",
+		"wirejs-scripts": "^3.0.56",
 		"typescript": "^5.7.3"
 	},
 	"scripts": {
@@ -22,5 +23,8 @@
 		"prestart": "npm run prestart --workspaces --if-present",
 		"start": "wirejs-scripts start",
 		"build": "wirejs-scripts build"
+	},
+	"engines": {
+		"node": ">=20.0.0"
 	}
 }

package/templates/default/src/components/account-menu.ts

@@ -1,119 +1,18 @@
-import { attribute, html, node, text, id } from 'wirejs-dom/v2';
-import { authenticator } from './authenticator.js';
-import type {
-	AuthenticationApi,
-	AuthenticationMachineState,
-} from 'wirejs-resources';
-
-type Callback = (state: AuthenticationMachineState) => any;
-
-export const accountMenu = ({ api, initialState }: {
-	api: AuthenticationApi,
-	initialState?: AuthenticationMachineState
-}) => {
-	const uiState = {
-		expanded: false
-	};
-
-	const listeners = new Set<Callback>();
-
-	const listenForClose = (
-		event: (MouseEvent | KeyboardEvent)
-	) => {
-		if (
-			(event.type === 'click' && !self.data.menu.contains(event.target as any))
-			|| (event.type === 'keyup' && (event as any).key === 'Escape')
-		) {
-			close()
-		}
-	};
-
-	const close = () => {
-		uiState.expanded = false;
-		updateStyleToMatchState();
-		document.removeEventListener('click', listenForClose);
-		document.removeEventListener('keyup', listenForClose);
-	};
-
-	const removeListenForClose = () => {
-		document.removeEventListener('click', listenForClose);
-		document.removeEventListener('keyup', listenForClose);
-	};
-
-	const updateStyleToMatchState = () => {
-		self.data.menu.style.display = uiState.expanded ? '' : 'none';
-		const position = self.getBoundingClientRect();
-		self.data.menu.style.top = `${position.bottom + 1}px`;
-		self.data.menu.style.right = `${document.body.clientWidth - position.right + 16}px`;
-	};
-
-	const authenticatorNode = authenticator(api, initialState);
-	authenticatorNode.data.onchange(state => {
-		self.data.user = state.user?.username || '';
-		close();
-		for (const listener of listeners) {
-			try {
-				listener(state);
-			} catch (error) {
-				console.error("Error calling auth state listener.");
-			}
-		}
+import { html } from "wirejs-dom/v2";
+import { AccountMenu as BaseAccountMenu } from "wirejs-components";
+
+type BaseOptions = Omit<Parameters<typeof BaseAccountMenu>[0], 'topItems' | 'bottomItems'>;
+
+export function AccountMenu(options: BaseOptions) {
+	return BaseAccountMenu({
+		...options,
+		topItems: [
+			(state) => state?.state !== 'authenticated'
+				? html`<div><i>Sign in to get started!</i></div>`
+				: html`<div>Welcome!</div>`
+		],
+		bottomItems: [
+			html`<div>Made with wirejs</div>`
+		]
 	});
-
-	const self = html`<accountmenu style='display: inline-block;'>
-		<div
-			style='display: inline-block;'
-		>${node(
-			'user',
-			initialState?.user?.username || '',
-			name => name ? html`<b>${name}</b>` : html`<i>Anonymous</i>`)}</div>
-		<div style='
-				display: inline-block;
-				border: 1px solid silver;
-				border-radius: 0.25rem;
-				cursor: pointer;
-				padding: 0 0.25em;
-			'
-			onclick=${() => {
-				uiState.expanded = !uiState.expanded;
-				updateStyleToMatchState();
-				if (uiState.expanded) {
-					authenticatorNode.data.focus();
-					setTimeout(() => {
-						document.addEventListener('click', listenForClose);
-						document.addEventListener('keyup', listenForClose);
-					}, 1);
-				} else {
-					removeListenForClose()
-				}
-			}}
-		>☰</div>
-		<div ${id('menu', HTMLDivElement)} style='
-			display: none;
-			position: absolute;
-			border: 1px solid gray;
-			border-radius: 0.25rem;
-			background-color: white;
-			padding: 0.5rem;
-			box-shadow: -0.125rem 0.125rem 0.25rem lightgray;
-		'>${node('authenticator', authenticatorNode)}</div>
-	</accountmenu>`.onadd(async self => {
-		if (!initialState) {
-			const state = await api.getState(null);
-			authenticatorNode.data.setState(state);
-			self.data.user = state.user?.username || '';
-		}
-	}).extend(self => ({
-		data: {
-			onchange: (callback: Callback) => {
-				listeners.add(callback);
-			},
-
-			removeonchange: (callback: Callback) => {
-				listeners.delete(callback);
-			},
-		}
-	}));
-
-	return self;
-};
+}

package/templates/default/src/components/index.ts

@@ -0,0 +1 @@
+export { AccountMenu } from './account-menu.js';

package/templates/default/src/layouts/main.ts

@@ -0,0 +1,157 @@
+import { html, node, hydrate } from 'wirejs-dom/v2';
+import { auth } from 'my-api';
+import { AccountMenu } from '../components/index.js';
+import type { AuthenticationState } from 'wirejs-resources';
+
+const TITLE = 'My New Site';
+const SUBTITLE = 'Made with wirejs';
+const MENU_ID = 'account-menu';
+const DISCLAIMER = html`<div>
+	<p>For the purposes of awesomeness only.</p>
+</div>`;
+
+async function Account() {
+	return html`<div id='${MENU_ID}'>
+		${AccountMenu({ api: auth })}
+	</div>`;
+}
+
+export async function Main(slots: {
+	/**
+	 * Replaces the default prefix in the final page title.
+	 */
+	siteTitle?:
+		| string
+		| ((state: AuthenticationState) => string);
+
+	/**
+	 * Appears on the page under the site title.
+	 * 
+	 * Set to empty-string explicitly to omit the default.
+	 */
+	siteSubTitle?:
+		| string
+		| ((state: AuthenticationState) => string);
+
+	/**
+	 * The page title. Appears below the site title and subtitle when given.
+	 */
+	pageTitle?:
+		| string
+		| ((state: AuthenticationState) => string);
+
+	/**
+	 * Author for this page. Appears next to the title in lighter font and
+	 * in the address bar.
+	 */
+	pageAuthor?:
+		| string
+		| ((state: AuthenticationState) => string);
+
+	/**
+	 * The main content for the page.
+	 */
+	content:
+		| HTMLElement
+		| ((state: AuthenticationState) => HTMLElement);
+
+	/**
+	 * Appears in the top of the footer.
+	 */
+	disclaimer?: 
+		| string
+		| HTMLElement
+		| ((state: AuthenticationState) => string | HTMLElement);
+}) {
+
+	const pageAuthorElement = slots.pageAuthor ? html`
+		<span style='color: var(--color-muted);'>
+			: according to <a href='/wiki/view/~${slots.pageAuthor}'>${slots.pageAuthor}</a>
+		</span>
+	` : '';
+
+	const pageTitle = slots.pageTitle ? html`
+		<h2 style='font-variant: small-caps;'>
+			${slots.pageTitle} ${pageAuthorElement}
+		</h2>
+	` : '';
+
+	const browserBarTitle = [
+		slots.pageTitle,
+		slots.pageAuthor,
+		slots.siteTitle || TITLE,
+		slots.siteSubTitle || SUBTITLE,
+	].filter(Boolean).slice(0, 3).join(' - ');
+
+	const page = html`
+		<!doctype html>
+		<html id='root'>
+			<head>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<title>${browserBarTitle}</title>
+				<link rel='icon' type='image/svg+xml' href='/images/logo.svg' />
+				<link rel='stylesheet' type='text/css' href='/default.css' />
+			</head>
+			<body>
+				<div style='
+					border-width: 0 1px;
+					border-color: silver;
+					border-style: solid;
+					max-width: 1200px;
+					min-height: 100vh;
+					padding: 0 1rem;
+					margin: 0 auto;
+					overflow: hidden;
+				'>
+					<div style='
+						display: flex;
+						width: 100%;
+						padding-bottom: 0.5rem;
+						border-bottom: 1px solid var(--border-color-muted, #777);
+						margin-bottom: 1rem;
+					'>
+						<!-- source: https://www.svgrepo.com/svg/322460/greek-temple -->
+						<svg
+							style='
+								margin-top: 1.4rem;
+								margin-right: 0.5rem;
+							'
+							height='4rem'
+							viewBox="0 0 512 512"
+							xmlns="http://www.w3.org/2000/svg"
+						><path fill="#000000" d="M256 26.2L52 135h408L256 26.2zM73 153v14h366v-14H73zm16 32v206h30V185H89zm101.334 0v206h30V185h-30zm101.332 0v206h30V185h-30zM393 185v206h30V185h-30zM73 409v30h366v-30H73zm-32 48v30h430v-30H41z"/></svg>
+						
+						<div style='flex-basis: 0; flex-grow: 5;'>
+							<h1 style='font-variant: small-caps; text-shadow: silver 2px 2px 2px;'>
+								<a href='/' style='color: var(--color-strong, #000);'>${
+									slots.siteTitle || TITLE
+								}</a>
+							</h1>
+
+							<div style='
+								margin-top: -1rem;
+								color: var(--color-muted, #888);
+							'>${slots.siteSubTitle ?? SUBTITLE}</div>
+						</div>
+
+						<div style='margin-top: 3.5rem; flex-grow: 0;'>
+							${node('account', await Account())}
+						</div>
+					</div>
+
+					${pageTitle}
+
+					<div id='content'>${slots.content}</div>
+					
+					<footer>
+						${slots.disclaimer ?? DISCLAIMER}
+					</footer>
+				</div>
+			</body>
+		</html>
+	`;
+	return page;
+}
+
+// TODO: fix wirejs `hydrate()` type
+hydrate(MENU_ID, Account as any);

package/templates/default/src/ssg/index.ts

@@ -1,23 +1,16 @@
 import { html } from 'wirejs-dom/v2';
+import { Main } from '../layouts/main.js';
 
 export async function generate() {
-	const page = html`
-		<!doctype html>
-		<html>
-			<head>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<title>Welcome!</title>
-			</head>
-			<body>
-				<h1>Welcome!</h1>
-				<p>This is your wirejs app!</p>
-				<p>It comes with some sample API methods and pages.</p>
-				<ul>
-					<li><a href='/todo-app.html'>Todo App</a></li>
-					<li><a href='/simple-wiki/index.html'>Simple Wiki</a></li>
-				</ul>
-			</body>
-		</html>
-	`;
-	return page;
+	return Main({
+		pageTitle: 'Welcome!',
+		content: html`<div>
+			<p>This is your wirejs app!</p>
+			<p>It comes with some sample API methods and pages.</p>
+			<ul>
+				<li><a href='/todo-app.html'>Todo App</a></li>
+				<li><a href='/simple-wiki/index.html'>Simple Wiki</a></li>
+			</ul>
+		</div>`
+	})
 }

package/templates/default/src/ssg/todo-app.ts

@@ -1,6 +1,7 @@
 import { html, node, list, attribute, hydrate } from 'wirejs-dom/v2';
-import { accountMenu } from '../components/account-menu.js';
+import { AuthenticatedContent } from 'wirejs-components';
 import { auth, todos, Todo } from 'my-api';
+import { Main } from '../layouts/main.js';
 
 function Todos() {
 	const remove = (todo: Todo) => {
@@ -44,41 +45,23 @@ function Todos() {
 }
 
 async function App() {
-	const accountMenuNode = accountMenu({ api: auth });
-
-	accountMenuNode.data.onchange(async state => {
-		if (state.state === 'authenticated') {
-			self.data.content = Todos();
-		} else {
-			self.data.content = html`<div>You need to sign in to add your todo list.</div>`;
-		}
-	});
-
 	const self = html`<div id='app'>
-		<div style='float: right;'>${accountMenuNode}</div>
-		${node('content', html`<div>Loading ...</div>`)}
+		${await AuthenticatedContent({
+			authenticated: () => Todos(),
+			unauthenticated: () => html`<div>
+				You need to sign in to add your todo list.
+			</div>`
+		})}
 	</div>`;
 
 	return self;
 }
 
 export async function generate() {
-	const page = html`
-		<!doctype html>
-		<html>
-			<head>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<title>Todo App</title>
-			</head>
-			<body>
-				<p><a href='/'>Home</a></p>
-				<h1>Todo App</h1>
-				${await App()}
-			</body>
-		</html>
-	`;
-
-	return page;
+	return Main({
+		pageTitle: 'Todo App',
+		content: await App(),
+	});
 }
 
 hydrate('app', App as any);

package/templates/default/src/ssr/simple-wiki/%.ts

@@ -1,24 +1,11 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { html, id, text, hydrate, node, list, attribute, KindaPretty } from 'wirejs-dom/v2';
+import { html, id, hydrate, node, } from 'wirejs-dom/v2';
 import type { AuthenticationMachineState, Context } from 'wirejs-resources';
-import { accountMenu } from '../../components/account-menu.js';
 import { auth, wiki } from 'my-api';
+import { AuthMonitor } from 'wirejs-components/utils';
+import { Main } from '../../layouts/main.js';
 
-type WithoutNodes<T> = undefined | (
-	T extends object ? {
-		[K in keyof T
-			as T[K] extends Node ? never : K]: WithoutNodes<T[K]>
-	} : T
-);
-
-/**
- * Shallow check for a `data` hydration property. If present, returns the
- * argument typed according to the given `T`.
- */
-function initData<T>(arg0: any): WithoutNodes<T> | undefined {
-	return arg0;
-}
 
 async function Wiki(init: { context?: Context, data?: any }) {
 	const { context, data } = init;
@@ -31,8 +18,6 @@ async function Wiki(init: { context?: Context, data?: any }) {
 	const initialState: AuthenticationMachineState =
 		data?.initialAuthState ?? await auth.getState(context);
 
-	const accountMenuNode = accountMenu({ api: auth, initialState });
-
 	let markdown: string = content ?? `This page doesn't exist yet`;
 	const signedOutAction = html`<i>(<b>Sign in</b> to edit.)</i>`;
 	const signedInAction = html`<button onclick=${enableEditing}>edit</button>`;
@@ -40,16 +25,15 @@ async function Wiki(init: { context?: Context, data?: any }) {
 	const editor = html`<div>
 		<textarea
 			${id('textarea', HTMLTextAreaElement)}
-			style='width: 20em; height: 10em;'
 		></textarea>
 	</div>`;
 
-	accountMenuNode.data.onchange(state => {
+	AuthMonitor.subscribe(state => {
 		self.data.actions = actionsFor(state);
 	});
 
-	function actionsFor(state: AuthenticationMachineState) {
-		return state.state === 'authenticated' ? signedInAction : signedOutAction;
+	function actionsFor(state: AuthenticationMachineState | undefined) {
+		return state?.state === 'authenticated' ? signedInAction : signedOutAction;
 	}
 
 	function enableEditing() {
@@ -76,7 +60,6 @@ async function Wiki(init: { context?: Context, data?: any }) {
 	}
 
 	const self = html`<div id='wiki'>
-		<div style='float: right;'>${accountMenuNode}</div>
 		${node('content', markdown, md => 
 			html`<div>${DOMPurify.sanitize(marked.parse(md!) as string)}</div>`)
 		}
@@ -100,22 +83,11 @@ export async function generate(context: Context) {
 		.replace(/\s+/g, ' ')
 	;
 
-	const page = html`
-		<!doctype html>
-		<html>
-			<head>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<title>Wiki ${visiblePath}</title>
-			</head>
-			<body>
-				<p><a href='/'>Home</a></p>
-				<h1>Wiki ${visiblePath}</h1>
-				${await Wiki({ context })}
-			</body>
-		</html>
-	`;
-
-	return page;
+	return Main({
+		siteSubTitle: 'A simple sample wiki',
+		pageTitle: visiblePath,
+		content: await Wiki({ context }),
+	})
 }
 
 hydrate('wiki', Wiki);

package/templates/default/static/default.css

@@ -0,0 +1,108 @@
+:root {
+	--color-muted: #888;
+	--color-error: #c33;
+	--color-action: #533;
+	--border-color-muted: #777;
+	--border-color-subtle: #aaa;
+	--background-color-muted: #eee;
+}
+
+html {
+	padding: 0;
+	margin: 0
+}
+
+body {
+	font-family: math;
+	padding: 0;
+	margin: 0;
+	color: #333;
+}
+
+a {
+	font-weight: bold;
+	color: var(--color-action);
+	cursor: pointer;
+}
+
+menu {
+	padding-inline-start: 0;
+}
+
+li {
+	margin: 1rem;
+}
+
+menu li {
+	list-style: none;
+	margin: 1rem;
+}
+
+menu li a {
+	text-decoration: underline;
+}
+
+form {
+	margin: 1rem;
+}
+
+form div {
+	margin-bottom: 1rem;
+}
+
+label, input, button {
+	display: inline-block;
+	width: 9rem;
+	margin: 0.25rem;
+	border-radius: 0.125rem;
+}
+
+label {
+	font-weight: bold;
+	color: var(--color-muted);
+}
+
+input {
+	width: 20rem;
+	border: 1px solid var(--border-color-muted);
+	margin-bottom: 0.5rem;
+	padding: 0.5rem;
+	font-size: medium;
+}
+
+textarea {
+	width: calc(100% - 2rem);
+	height: 15rem;
+	font-size: medium;
+	font-family: 'Courier New', Courier, monospace;
+}
+
+button, input[type="submit"] {
+	font-family: math;
+	font-size: medium;
+	border: 1px solid var(--border-color-muted);
+	padding: 0.5rem;
+	background-color: var(--background-color-muted);
+}
+
+form span.status {
+	display: inline-block;
+	color: var(--color-muted);
+	margin-left: 0.5rem;
+}
+
+.error form span.status {
+	color: var(--color-error);
+}
+
+.section {
+	border-bottom: 1px dashed var(--border-color-subtle);
+	margin-bottom: 1.5rem;
+	padding-bottom: 1.5rem;
+}
+
+footer {
+	margin-top: 4rem;
+	border-top: 1px solid var(--border-color-muted);
+	color: var(--color-muted);
+}

package/templates/default/src/components/authenticator.ts

@@ -1,133 +0,0 @@
-import { attribute, html, node } from 'wirejs-dom/v2';
-import type {
-	AuthenticationApi,
-	AuthenticationState,
-	AuthenticationMachineState,
-	AuthenticationMachineAction,
-	AuthenticationMachineInput,
-} from 'wirejs-resources';
-
-type AuthCallback = (state: AuthenticationMachineState) => any;
-
-export const authenticatoraction = (
-	action: AuthenticationMachineAction,
-	act: (input: AuthenticationMachineInput) => void
-) => {
-	const inputs = Object.entries(action.fields || []).map(([name, { label, type }]) => {
-		const id = `input_${Math.floor(Math.random() * 1_000_000)}`;
-		const input = html`<div>
-			<label for=${id}>${label}</label>
-			<br />
-			<input
-				id=${id}
-				name=${name}
-				type=${type}
-				value=${attribute('value', '')}
-				style='width: calc(100% - 1rem); margin-bottom: 0.5rem;'
-			/>
-		</div>`.extend(self => ({
-			data: { name }
-		}));
-		return input;
-	});
-
-	const buttons = action.buttons?.map(b => html`<p>
-		<button type='submit' value='${b}'>${b}</button>
-	</p>`);
-
-	const link = buttons ? undefined : [
-		html`<p><a
-			style='cursor: pointer; font-weight: bold;'
-			onclick=${() => act({ key: action.key })}
-		>${action.name}</a></p>`
-	];
-
-	const actors = link ?? buttons;
-
-	if (action.fields && Object.keys(action.fields).length > 0) {
-		return html`<authenticatoraction>
-			<div>
-				<h4 style='margin-top: 1rem; margin-bottom: 0.5rem;'>${action.name}</h4>
-				<form
-					onsubmit=${(evt: SubmitEvent) => {
-						evt.preventDefault();
-						act({
-							key: action.key,
-							verb: (evt.submitter as any)?.value,
-							inputs: Object.fromEntries(inputs.map(input => ([
-								input.data.name,
-								input.data.value
-							])))
-						});
-					}}
-				>
-					${inputs}
-					${actors}
-				</form>
-				<hr style='width: 33%; height: 1px; border: none; background: silver;' />
-			</div>
-		</authenticatoraction>`;
-	} else {
-		return html`<authenticatoraction>
-			${actors}
-		</authenticatoraction>`;
-	}
-}
-
-export const authenticator = (
-	stateManager: AuthenticationApi,
-	initialState?: AuthenticationMachineState
-) => {
-	const listeners = new Set<AuthCallback>();
-	let lastKnownState: AuthenticationMachineState | undefined = undefined;
-
-	const self = html`<authenticator style='display: block; min-width: 15em;'>
-		${node('state', html`<span>Loading ...</span>` as HTMLElement)}
-	</authenticator>`.extend(() => ({
-		renderState(state: AuthenticationMachineState | { errors: any[] }) {
-			if ('errors' in state && state.errors) {
-				alert((state as any).errors.map((e: any) => e.message).join("\n\n"));
-			} else {
-				lastKnownState = state as AuthenticationMachineState;
-				self.data.state = html`<div>
-					<div>${lastKnownState.message || ''}</div>
-					<div>${Object.entries(lastKnownState.actions).map(([_key, action]) => {
-						return authenticatoraction({...action}, async act => {
-							self.renderState(await stateManager.setState(null, act));
-						});
-					})}</div>
-				</div>`;
-			}
-			for (const listener of listeners) {
-				try {
-					listener(state as AuthenticationMachineState);
-				} catch (error) {
-					console.error("Error calling auth state listener.");
-				}
-			}
-		}
-	})).onadd(async (self) => {
-		if (initialState) {
-			console.log('authenticator render state');
-			self.renderState(initialState)
-		}
-	}).extend(self => ({
-		data: {
-			setState: (state: AuthenticationMachineState) => self.renderState(state),
-			onchange: (callback: AuthCallback) => {
-				listeners.add(callback);
-			},
-			removeonchange: (callback: AuthCallback) => {
-				listeners.delete(callback);
-			},
-			focus: () => {
-				[...self.getElementsByTagName('input')].shift()?.focus();
-			},
-			get lastKnownState() {
-				return lastKnownState;
-			}
-		}
-	}));
-
-	return self;
-};