@typetron/framework 0.5.20 → 0.5.22

package/Frontend/Angular/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@typetron/angular",
+	"description": "Frontend tools for Angular from Typetron",
+	"license": "MIT",
+    "version": "16.2.4",
+	"author": {
+		"email": "ionel@typetron.org",
+		"name": "Ionel Lupu"
+	},
+	"scripts": {
+		"build": "tsc",
+		"version": "npm run build"
+	},
+	"engines": {
+        "node": ">= 18.12.0"
+	},
+	"dependencies": {
+        "@typetron/framework": "^0.4.0-rc9"
+	},
+	"peerDependencies": {
+        "@angular/common": "^16.2.4",
+        "@angular/core": "^16.2.4",
+        "@angular/forms": "^16.2.4"
+	},
+	"devDependencies": {
+        "typescript": "5.2.2"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/typetron/angular.git"
+	},
+	"files": [
+		"**/*.ts",
+		"**/*.js",
+		"**/*.ts.map",
+		"**/*.js.map"
+	]
+}

package/Frontend/Angular/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+        "module": "ES2020",
+        "outDir": "build",
+		"baseUrl": ".",
+        "moduleResolution": "node",
+        "paths": {
+			"@Typetron/*": [
+				"node_modules/@typetron/framework/*"
+			]
+		},
+		"lib": [
+			"dom"
+		]
+	},
+    "files": [
+        "index.ts"
+    ]
+}
+

package/Frontend/Websockets/Readme.md

@@ -0,0 +1,86 @@
+# Typetron WebSockets
+
+This library is used to easily listen and emit WebSockets action from the browser client to a Typetron app.
+
+#### Installation
+
+```bash
+$ npm install @typetron/websockets
+```
+
+Note: you need to have a module loader in your app for this to work (webpack, rollup, babel, parcel, etc.)
+
+#### Listening for actions
+
+You can listen to a WebSocket action sent from the server using the _on('Action name')_ method like this on the socket
+connection:
+
+```ts
+socket.on('actionName').subscribe(response => {
+    console.log('Backend response', response)
+})
+socket.on<User>('user.update').subscribe(user => {
+    console.log('User updated', user)
+})
+```
+
+The _on_ method will return an observable (see [RxJS](https://rxjs.dev/) for more details) that you can use to subscribe
+to.
+
+#### Emitting actions
+
+If you want to signal the server with an action or when you want to send some data to it, you can use the _emit('action
+name', data)_ method:
+
+```ts
+socket.emit('actionName');
+socket.emit('actionName', "my message here");
+socket.emit('actionName', {my: {message: "here"}});
+```
+
+Be aware that if you are expecting a response from the backend, you need to subscribe to the same action (or the action
+the server is emitting to) using the _.on_ method.
+
+#### Emitting and listening for server response
+
+If you want to make a single "request" to the server, meaning that you want to emit and wait for a response at the same
+time, you can use the _request('action name', data?)_ method. This will essentially make an _emit_ and listen to its
+response using the _on_ method for you:
+
+```ts
+const users = await socket.request<User[]>('users.list')
+const savedUser = await socket.request<User>('users.save', {name: 'John'})
+```
+
+#### Message format of the WebSocket actions
+
+The Typetron WebSocket server uses a specific message format when exchanging information between it and the clients.
+These message have the following format:
+_When sending a message:_
+
+```json
+{
+    "action": "action name",
+	"message": {
+		// optional
+		"body": "content sent to the controllers",
+		"parameters": [
+			"param1",
+			"param1"
+		]
+		// controller method parameters (optional)
+	}
+}
+```
+
+_When receiving a message:_
+
+```json
+{
+    "action": "action name",
+    "status": "OK",
+    // or "Error",
+    "message": "backend response"
+    // optional
+}
+```

package/Frontend/Websockets/index.ts

@@ -0,0 +1,99 @@
+import { Observable, of, ReplaySubject, Subject, throwError } from 'rxjs'
+import { filter, map, switchMap, take } from 'rxjs/operators'
+import type { ActionErrorResponse, ActionRequest, ActionResponse } from '@Typetron/Router/Websockets'
+
+export class Websocket {
+    socket?: WebSocket
+
+    actionMessages$ = new Subject<ActionResponse<unknown>>()
+    queuedActions$ = new ReplaySubject<ActionRequest>()
+    errors$ = new Subject<ActionErrorResponse>()
+    onConnectCallback: () => void
+    onDisconnectCallback: () => void
+
+    constructor(public url: string, public protocols?: string | string[]) {
+        this.connect(url, protocols)
+    }
+
+    get isConnected() {
+        return this.socket?.readyState === WebSocket.OPEN
+    }
+
+    getRequestId() {
+        return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+    }
+
+    connect(url?: string, protocols?: string | string[]): void {
+        const socket = new WebSocket(url ?? this.url, protocols ?? this.protocols)
+        this.socket = socket
+
+        socket.onmessage = (action) => {
+            const message = JSON.parse(action.data)
+            this.actionMessages$.next(message)
+        }
+        socket.onopen = () => {
+            this.onConnectCallback?.()
+            this.queuedActions$.subscribe(message => {
+                message['$id'] = this.getRequestId()
+                socket.send(JSON.stringify(message))
+            })
+        }
+
+        socket.onclose = (action) => {
+            this.onDisconnectCallback?.()
+            this.queuedActions$ = new ReplaySubject<ActionRequest>()
+            this.reconnect()
+        }
+    }
+
+    onConnect(callback: () => void) {
+        this.onConnectCallback = callback
+    }
+
+    onDisconnect(callback: () => void) {
+        this.onDisconnectCallback = callback
+    }
+
+    reconnect(): void {
+        if (this.socket?.readyState === WebSocket.CLOSED) {
+            window.setTimeout(() => {
+                this.connect(this.url, this.protocols)
+            }, 1000)
+        }
+    }
+
+    emit(action: string, request?: ActionRequest['message']) {
+        const actionMessage: ActionRequest = {'$id': this.getRequestId(), action, message: request}
+        this.queuedActions$.next(actionMessage)
+
+        return actionMessage
+    }
+
+    on<T>(action: string, id?: string): Observable<T> {
+        return this.actionMessages$.pipe(
+            filter(actionMessage => actionMessage.action === action && (!id || actionMessage['$id'] === id)),
+            switchMap(actionMessage => {
+                if (actionMessage.status === 'Error') {
+                    this.errors$.next(actionMessage as ActionErrorResponse)
+                    return throwError(actionMessage)
+                }
+                return of(actionMessage)
+            }),
+            map(actionMessage => actionMessage.message)
+        ) as Observable<T>
+    }
+
+    onError({except}: {except?: string[]}): Observable<ActionResponse<unknown>> {
+        return this.errors$.pipe(filter(actionMessage => !(except || []).includes(actionMessage.action)))
+    }
+
+    async request<T>(action: string, message?: ActionRequest['message']): Promise<T> {
+        const actionMessage = this.emit(action, message)
+        return new Promise((resolve, reject) => {
+            this.on<T>(action, actionMessage['$id']).pipe(take(1)).subscribe({
+                next: resolve,
+                error: reject
+            })
+        })
+    }
+}