create-wirejs-app 2.0.94 → 2.0.96-async-api

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-wirejs-app",
-	"version": "2.0.94",
+	"version": "2.0.96-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.89",
-		"wirejs-components": "^0.1.32"
+		"wirejs-resources": "^0.1.91-async-api",
+		"wirejs-components": "^0.1.34-async-api"
 	},
 	"devDependencies": {
-		"wirejs-scripts": "^3.0.87",
+		"wirejs-scripts": "^3.0.89-async-api",
 		"typescript": "^5.7.3"
 	},
 	"scripts": {

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

@@ -18,7 +18,7 @@ async function Chat() {
 				marked.parse(`**${message.username}:** ${message.body}`
 			) as string))}`)}
 
-		<!-- Input for new messages. -->
+		<!-- New message form -->
 		<form onsubmit=${(event: Event) => {
 			event.preventDefault();
 			chat.publish(null, self.data.room, self.data.message);
@@ -31,7 +31,7 @@ async function Chat() {
 		<!-- Connection status -->
 		<span style='color: var(--color-muted)'>${text('status', 'Connecting ...')}</span>
 
-		<!-- Room selection -->
+		<!-- Room selection form -->
 		<form ${id('roomChangeForm')} onsubmit=${(event: Event) => {
 			event.preventDefault();
 			self.data.messages = [];
@@ -49,8 +49,31 @@ async function Chat() {
 			}} />
 		</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