create-wirejs-app 2.0.93 → 2.0.95-async-api

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-wirejs-app",
-	"version": "2.0.93",
+	"version": "2.0.95-async-api",
 	"description": "Initializes a wirejs package.",
 	"author": "Jon Wire",
 	"license": "MIT",

package/templates/default/api/apps/chat.ts

@@ -1,16 +1,33 @@
-import { withContext, RealtimeService, AuthenticationApi } from "wirejs-resources";
+import {
+	AuthenticationApi,
+	BackgroundJob,
+	RealtimeService,
+	withContext,
+} from "wirejs-resources";
 
 const realtimeService = new RealtimeService<{
 	username: string;
 	body: string;
 }>('app', 'realtime');
 
-function sanitizedRoomName(room: string | null): string {
-	if (room === null || room === '') {
-		return 'default';
-	}
-	return room.replace(/[^-_a-zA-Z0-9]/g, '-').slice(0, 50);
-}
+const counter = new BackgroundJob('app', 'countdowns', {
+	handler: async (room: string, seconds: number) => {
+		return new Promise<void>((resolve) => {
+			let remaining = seconds;
+			const interval = setInterval(() => {
+				if (remaining <= 0) {
+					clearInterval(interval);
+					resolve();
+				} else {
+					realtimeService.publish(sanitizedRoomName(room), [{
+						username: 'Countdown',
+						body: `Time remaining: ${remaining--} seconds`
+					}]);
+				}
+			}, 1000);
+		});
+	},
+});
 
 export const Chat = (auth: AuthenticationApi) => withContext(context => ({
 	async publish(room: string, message: string) {
@@ -23,5 +40,19 @@ export const Chat = (auth: AuthenticationApi) => withContext(context => ({
 	async getRoom(room: string) {
 		await auth.requireCurrentUser(context);
 		return realtimeService.getStream(sanitizedRoomName(room));
+	},
+	async startCountdown(room: string, seconds: number) {
+		await auth.requireCurrentUser(context);
+		if (seconds < 5 || seconds > 600) {
+			throw new Error('Countdown must be between 5 and 60 seconds.');
+		}
+		await counter.start(sanitizedRoomName(room), seconds);
 	}
-}));
+}));
+
+function sanitizedRoomName(room: string | null): string {
+	if (room === null || room === '') {
+		return 'default';
+	}
+	return room.replace(/[^-_a-zA-Z0-9]/g, '-').slice(0, 50);
+}

package/templates/default/package.json

@@ -11,11 +11,11 @@
 		"dompurify": "^3.2.3",
 		"marked": "^15.0.6",
 		"wirejs-dom": "^1.0.41",
-		"wirejs-resources": "^0.1.88",
-		"wirejs-components": "^0.1.31"
+		"wirejs-resources": "^0.1.90-async-api",
+		"wirejs-components": "^0.1.33-async-api"
 	},
 	"devDependencies": {
-		"wirejs-scripts": "^3.0.86",
+		"wirejs-scripts": "^3.0.88-async-api",
 		"typescript": "^5.7.3"
 	},
 	"scripts": {

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

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

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/package.json

@@ -0,0 +1,10 @@
+{
+	"name": "src",
+	"version": "2.0.0",
+	"private": true,
+	"type": "module",
+	"dependencies": {
+		"wirejs-dom": "*",
+		"my-api": "*"
+	}
+}

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

@@ -0,0 +1,17 @@
+import { html } from 'wirejs-dom/v2';
+import { Main } from '../layouts/main.js';
+
+export async function generate() {
+	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>
+				<li><a href='/realtime-test.html'>Realtime Test</a></li>
+			</ul>
+		</div>`
+	})
+}

package/templates/default/src/ssg/realtime-test.ts

@@ -0,0 +1,121 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { html, attribute, hydrate, list, text, id } from 'wirejs-dom/v2';
+import { AuthenticatedContent } from 'wirejs-components';
+import { Main } from '../layouts/main.js';
+import { chat } from 'my-api';
+
+type RoomMessage = {
+	username: string;
+	body: string;
+};
+
+async function Chat() {
+	const self = html`<div id='chat'>
+		<!-- All messages. Markdown formatted. Sanitized. -->
+		${list('messages', (message: RoomMessage) =>
+			html`${DOMPurify.sanitize((
+				marked.parse(`**${message.username}:** ${message.body}`
+			) as string))}`)}
+
+		<!-- New message form -->
+		<form onsubmit=${(event: Event) => {
+			event.preventDefault();
+			chat.publish(null, self.data.room, self.data.message);
+			self.data.message = '';
+		}}>
+			<input type='text' value=${attribute('message', '' as string)} />
+			<input type='submit' value='Send' />
+		</form>
+
+		<!-- Connection status -->
+		<span style='color: var(--color-muted)'>${text('status', 'Connecting ...')}</span>
+
+		<!-- Room selection form -->
+		<form ${id('roomChangeForm')} onsubmit=${(event: Event) => {
+			event.preventDefault();
+			self.data.messages = [];
+			self.disconnect();
+			self.data.status = `Connecting to "${self.data.room}" ...`;
+			self.connect();
+		}}>Join another room:
+			<input type='text' style='width: 10rem;'
+				value=${attribute('room', 'test' as string)} />
+			<input type='submit' style='width: 10rem;' value='Join' />
+			<input type='button' style='width: 10rem;' value='Random' onclick=${() => {
+				const randomRoom = Math.random().toString(36).substring(2, 10);
+				self.data.room = randomRoom;
+				self.data.roomChangeForm.dispatchEvent(new Event('submit'));
+			}} />
+		</form>
+
+		<!-- Countdown form -->
+		<form ${id('countdownForm')} onsubmit=${(event: Event) => {
+			event.preventDefault();
+			if (self.data.countdownDisabled) {
+				// discourage spamming the countdown
+				alert('Countdown is already running. One at a time please!');
+				return;
+			}
+			self.data.countdownDisabled = true;
+			chat.startCountdown(null, self.data.room, self.data.countdownSeconds);
+			self.data.countdownSeconds = 10;
+			setTimeout(() => {
+				self.data.countdownDisabled = false;
+			}, self.data.countdownSeconds * 1000);
+		}}>
+			<input type='hidden' value=${attribute('countdownDisabled', false as boolean)} />
+			<input type='number' style='width: 10rem;'
+				value=${attribute('countdownSeconds', 10 as number)}
+				min='5' max='60' />
+			<input type='submit' style='width: 10rem;' value='Start Counting' />
+		</form>
+
+		<!-- Description -->
+		<p>A simple example of realtime messaging. Messages are 100% ephemeral. If you reload the page, messages are lost. If you're not connected when a message it sent, you won't receive it.</p>
+		<p>The countdown feature is a simple background job that sends a message every second until the countdown reaches zero.</p>
+	</div>`.extend(() => ({
+		disconnect() {
+			// no implementation until connected
+		},
+		async connect() {
+			const roomStream = await chat.getRoom(null, self.data.room);
+			self.disconnect = roomStream.subscribe({
+				onopen() {
+					self.data.status = `Connected to "${self.data.room}".`;
+				},
+				onmessage(message) {
+					self.data.messages.push(message);
+				},
+				onclose(reason) {
+					if (reason !== 'unsubscribed') {
+						self.data.status = 'Disconnected. (Refresh the page to reconnect.)';
+					}
+				}
+			});
+		}
+	}))
+	.onadd(async () => {
+		self.connect();
+	});
+	return self;
+}
+
+async function App() {
+	return html`<div id='app'>
+		<h4>Realtime Demo</h4>
+		${await AuthenticatedContent({
+			authenticated: Chat,
+			unauthenticated: () => html`<p>Sign in for the realtime demo.</p>`
+		})}
+	</div>`;
+}
+
+export async function generate() {
+	return Main({
+		pageTitle: 'Welcome!',
+		content: await App()
+	})
+}
+
+hydrate('app', App as any);

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

@@ -0,0 +1,67 @@
+import { html, list, attribute, hydrate } from 'wirejs-dom/v2';
+import { AuthenticatedContent } from 'wirejs-components';
+import { todos, Todo } from 'my-api';
+import { Main } from '../layouts/main.js';
+
+function Todos() {
+	const remove = (todo: Todo) => {
+		self.data.todos = self.data.todos.filter(t => t.id !== todo.id);
+		todos.remove(null, todo.id);
+	}
+
+	const newid = () => crypto.randomUUID();
+	
+	const self = html`<div>
+		<h4>Your Todos</h4>
+		<ol>${list('todos', (todo: Todo) => html`<li>
+			${todo.text} : <span
+				style='color: darkred; font-weight: bold; cursor: pointer;'
+				onclick=${() => remove(todo)}
+			>X</span>
+		</li>`)}</ol>
+		<div>
+			<form onsubmit=${(event: Event) => {
+				event.preventDefault();
+				const todo = {
+					id: newid(),
+					list: 'default',
+					text: self.data.newTodoText,
+					order: (self.data.todos[
+						self.data.todos.length - 1
+					]?.order ?? 0) + 1,
+				};
+				self.data.todos.push(todo);
+				self.data.newTodoText = '';
+				todos.save(null, todo).catch((e: any) => alert(e.message));
+			}}>
+				<input type='text' value=${attribute('newTodoText', '' as string)} />
+				<input type='submit' value='Add' />
+			</form>
+		</div>
+	<div>`.onadd(async self => {
+		self.data.todos = await todos.read(null, 'default');
+	});
+	return self;
+}
+
+async function App() {
+	const self = html`<div id='app'>
+		${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() {
+	return Main({
+		pageTitle: 'Todo App',
+		content: await App(),
+	});
+}
+
+hydrate('app', App as any);

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

@@ -0,0 +1,93 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { html, id, hydrate, node, } from 'wirejs-dom/v2';
+import type { AuthenticationMachineState, Context } from 'wirejs-resources';
+import { auth, wiki } from 'my-api';
+import { AuthMonitor } from 'wirejs-components/utils';
+import { Main } from '../../layouts/main.js';
+
+
+async function Wiki(init: { context?: Context, data?: any }) {
+	const { context, data } = init;
+
+	const filepath = (context || window).location.pathname;
+
+	const content: string =
+		data?.content ?? await wiki.read(context, filepath);
+
+	const initialState: AuthenticationMachineState =
+		data?.initialAuthState ?? await auth.getState(context);
+
+	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>`;
+	const invisibleDiv = html`<div style='display: none;'></div>`;
+	const editor = html`<div>
+		<textarea
+			${id('textarea', HTMLTextAreaElement)}
+		></textarea>
+	</div>`;
+
+	AuthMonitor.subscribe(state => {
+		self.data.actions = actionsFor(state);
+	});
+
+	function actionsFor(state: AuthenticationMachineState | undefined) {
+		return state?.state === 'authenticated' ? signedInAction : signedOutAction;
+	}
+
+	function enableEditing() {
+		editor.data.textarea.value = markdown;
+		self.data.editor = editor;
+		self.data.actions = html`<div>
+			<button onclick=${submitChanges}>save</button>
+			<button onclick=${cancelChanges}>cancel</button>
+		</div>`;
+	}
+
+	async function submitChanges() {
+		markdown = editor.data.textarea.value;
+		await wiki.write(context, filepath, markdown);
+		self.data.content = markdown;
+		self.data.actions = signedInAction;
+		self.data.editor = invisibleDiv;
+	}
+
+	function cancelChanges() {
+		self.data.actions = signedInAction;
+		self.data.editor = html`<div style='display: none;'></div>`;
+		self.data.content = markdown;
+	}
+
+	const self = html`<div id='wiki'>
+		${node('content', markdown, md => 
+			html`<div>${DOMPurify.sanitize(marked.parse(md!) as string)}</div>`)
+		}
+		${node('editor', invisibleDiv)}
+		${node('actions', actionsFor(initialState))}
+	</div>`.extend(_ => ({
+		data: {
+			initialAuthState: initialState
+		}
+	}));
+
+	return self;
+}
+
+export async function generate(context: Context) {
+	const visiblePath = context.location.pathname
+		.replaceAll('/', ' > ')
+		.replaceAll('<', '&lt;')
+		.replaceAll('>', '&gt;')
+		.replaceAll('-', ' ')
+		.replace(/\s+/g, ' ')
+	;
+
+	return Main({
+		siteSubTitle: 'A simple sample wiki',
+		pageTitle: visiblePath,
+		content: await Wiki({ context }),
+	})
+}
+
+hydrate('wiki', Wiki);

package/templates/default/apps/chat.ts

@@ -1,27 +0,0 @@
-import { withContext, RealtimeService, AuthenticationApi } from "wirejs-resources";
-
-const realtimeService = new RealtimeService<{
-	username: string;
-	body: string;
-}>('app', 'realtime');
-
-function sanitizedRoomName(room: string | null): string {
-	if (room === null || room === '') {
-		return 'default';
-	}
-	return room.replace(/[^-_a-zA-Z0-9]/g, '-').slice(0, 50);
-}
-
-export const Chat = (auth: AuthenticationApi) => withContext(context => ({
-	async publish(room: string, message: string) {
-		const user = await auth.requireCurrentUser(context);
-		return realtimeService.publish(sanitizedRoomName(room), [{
-			username: user.displayName,
-			body: message
-		}]);
-	},
-	async getRoom(room: string) {
-		await auth.requireCurrentUser(context);
-		return realtimeService.getStream(sanitizedRoomName(room));
-	}
-}));

package/templates/default/apps/todos.ts

@@ -1,97 +0,0 @@
-import {
-	AuthenticationApi,
-	DistributedTable,
-	PassThruParser,
-	withContext
-} from 'wirejs-resources';
-
-export type Todo = {
-	id: string;
-	text: string;
-	order: number;
-	list: string;
-};
-
-
-const userTodos = new DistributedTable('app', 'userTodos', {
-	parse: PassThruParser<Todo & { userId: string }>,
-	key: {
-		partition: { field: 'userId', type: 'string' },
-		sort: { field: 'id', type: 'string' }
-	},
-	indexes: [
-		{
-			partition: { field: 'userId', type: 'string' },
-			sort: { field: 'list', type: 'string' },
-		}
-	]
-});
-
-export const Todos = (auth: AuthenticationApi) => withContext(context => ({
-	async read(list?: string): Promise<Todo[]> {
-		const user = await auth.requireCurrentUser(context);
-
-		try {
-			const todos = userTodos.query({
-				by: 'userId-list',
-				where: {
-					userId: { eq: user.id },
-					list: { eq: list ?? 'default' }
-				},
-			});
-			const todosArray = await fromAsync(todos);
-			return todosArray
-				.sort((a, b) => a.order - b.order)
-				.map(todo => ({
-					id: todo.id,
-					text: todo.text,
-					order: todo.order,
-					list: todo.list || 'default'
-				}));
-		} catch (error) {
-			return [];
-		}
-	},
-
-	async save(todo: Todo) {
-		const user = await auth.requireCurrentUser(context);
-
-		if (typeof todo.id !== 'string' || typeof todo.text !== 'string') {
-			throw new Error("Invalid todo!");
-		}
-
-		const finalTodo = {
-			userId: user.id,
-			id: todo.id,
-			text: todo.text,
-			order: todo.order,
-			list: todo.list || 'default'
-		};
-		await userTodos.save(finalTodo);
-
-		return true;
-	},
-
-	async remove(todoId: string) {
-		const user = await auth.requireCurrentUser(context);
-
-		if (typeof todoId !== 'string') {
-			throw new Error("Invalid todo ID!");
-		}
-
-		await userTodos.delete({ userId: user.id, id: todoId });
-
-		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/apps/wiki.ts

@@ -1,25 +0,0 @@
-import { withContext, FileService, AuthenticationApi } from "wirejs-resources";
-const wikiPages = new FileService('app', 'wikiPages');
-
-function normalizeWikiPageFilename(page: string) {
-	return page.replace(/[^-_a-zA-Z0-9/]/g, '-') + '.md';
-}
-
-export const Wiki = (auth: AuthenticationApi) => withContext(context => ({
-	async read(page: string) {
-		const filename = normalizeWikiPageFilename(page);
-		try {
-			return await wikiPages.read(filename);
-		} catch (error) {
-			return null;
-		}
-	},
-	async write(page: string, content: string) {
-		await auth.requireCurrentUser(context);
-
-		const filename = normalizeWikiPageFilename(page);
-		await wikiPages.write(filename, content);
-
-		return true;
-	}
-}));

package/templates/default/index.ts

@@ -1,13 +0,0 @@
-import { AuthenticationService} from 'wirejs-resources';
-import { Chat } from './apps/chat.js';
-import { Todos } from './apps/todos.js';
-import { Wiki } from './apps/wiki.js';
-
-export type { Todo } from './apps/todos.js';
-
-const authService = new AuthenticationService('app', 'core-users');
-
-export const auth = authService.buildApi();
-export const chat = Chat(auth);
-export const todos = Todos(auth);
-export const wiki = Wiki(auth);