create-wirejs-app 2.0.63 → 2.0.65-realtime

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-wirejs-app",
-	"version": "2.0.63",
+	"version": "2.0.65-realtime",
 	"description": "Initializes a wirejs package.",
 	"author": "Jon Wire",
 	"license": "MIT",

package/templates/default/api/index.ts

@@ -3,7 +3,8 @@ import {
 	DistributedTable,
 	FileService,
 	PassThruParser,
-	withContext
+	withContext,
+	RealtimeService
 } from 'wirejs-resources';
 
 const userTodos = new DistributedTable('app', 'userTodos', {
@@ -23,6 +24,8 @@ const userTodos = new DistributedTable('app', 'userTodos', {
 const wikiPages = new FileService('app', 'wikiPages');
 const authService = new AuthenticationService('app', 'core-users');
 
+const realtimeService = new RealtimeService('app', 'realtime');
+
 export const auth = authService.buildApi();
 
 export type Todo = {
@@ -32,6 +35,15 @@ export type Todo = {
 	list: string;
 };
 
+export const messaging = withContext(context => ({
+	async publish(room: string, message: string) {
+		realtimeService.publish(room, message);
+	},
+	async getRoom(room: string) {
+		return realtimeService.getStream(room);
+	}
+}));
+
 export const todos = withContext(context => ({
 	async read(list?: string): Promise<Todo[]> {
 		const user = await auth.requireCurrentUser(context);

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.58",
-		"wirejs-components": "^0.1.1"
+		"wirejs-resources": "^0.1.60-realtime",
+		"wirejs-components": "^0.1.3-realtime"
 	},
 	"devDependencies": {
-		"wirejs-scripts": "^3.0.56",
+		"wirejs-scripts": "^3.0.58-realtime",
 		"typescript": "^5.7.3"
 	},
 	"scripts": {

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

@@ -1,4 +1,4 @@
-import { html } from 'wirejs-dom/v2';
+import { html, hydrate } from 'wirejs-dom/v2';
 import { Main } from '../layouts/main.js';
 
 export async function generate() {
@@ -10,6 +10,7 @@ export async function generate() {
 			<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,37 @@
+import { html, attribute, hydrate, list } from 'wirejs-dom/v2';
+import { Main } from '../layouts/main.js';
+import { messaging } from 'my-api';
+
+async function App() {
+	const self = html`<div id='app'>
+		<h4>Realtime Test</h4>
+		${list('messages', (message: string) => html`<div>${message}</div>`)}
+		<div>
+			<form onsubmit=${(event: Event) => {
+				event.preventDefault();
+				messaging.publish(null, 'test', self.data.message);
+				self.data.message = '';
+			}}>
+				<input type='text' value=${attribute('message', '' as string)} />
+				<input type='submit' value='Send' />
+			</form>
+		</div>
+	</div>`.onadd(async () => {
+		const roomStream = await messaging.getRoom(null, 'test');
+		roomStream.subscribe({
+			onmessage: (message: string) => {
+				self.data.messages.push(message);
+			}
+		});
+	})
+	return self;
+}
+
+export async function generate() {
+	return Main({
+		pageTitle: 'Welcome!',
+		content: await App()
+	})
+}
+
+hydrate('app', App);