Update documentation with new state management store features (#61)

* Created new drawing depicting the state flow in the library

* Updated getting started guide with new features

* Added documentation for loading features with small api improvements

* Updated documentation for new and changed functionality

* fixes on documentation build

---------

Co-authored-by: Daniel Murrmann <9040811+fancyDevelopment@users.noreply.github.com>

Author: danielmurrmann

.github/workflows/deploy-docs.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       # Restore dependencies
       - name: Restore dependencies for lib

.github/workflows/ngrx-hateoas.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       # Restore dependencies
       - name: Restore dependencies

apps/playground/src/app/core/core.routes.ts

@@ -11,5 +11,5 @@ export const CORE_ROUTES: Routes = [{
 }, {
     path: 'home',
     component: HomeComponent,
-    canActivate: [ () => whenTrue(inject(HomeStore).homeVmState.initiallyLoaded) ]
+    canActivate: [ () => whenTrue(inject(HomeStore).homeVmState.isLoaded) ]
 }];

apps/playground/src/app/flight/flight.routes.ts

@@ -28,5 +28,5 @@ export const FLIHGT_ROUTES: Routes = [{
 }, {
     path: "create",
     component: FlightCreateComponent,
-    canActivate: [() => whenTrue(inject(FlightCreateStore).flightCreateVmState.initiallyLoaded)]
+    canActivate: [() => whenTrue(inject(FlightCreateStore).flightCreateVmState.isLoaded)]
 }];

doc/docs/guide/01-getting-started.md

@@ -86,7 +86,7 @@ You don't need to follow the exact same layout as in the example to embed metada
 
 ## What is HATEOAS?
 
-HATEOAS (Hypermedia as the Engine of Application State) is an architectural paradigm that allows clients to dynamically navigate resources through hyperlinks provided in responses. Possible state changes are provided via actions. Hyperlinks and actions are metadata sent next to the actual payload. Instead of hardcoding API endpoints, clients rely on these links to discover available actions and related resources. For example, if a user is not allowed to navigate to a linked resource or execute an action, the server would not send this metainformation to the client within its response. Finally, the client has the full state of the resource available, the actual payload, and information to related data and possible actions (or state changes). This approach decouples the client from the server, keeps domain logic away from the client and enables more flexible and evolvable APIs.
+HATEOAS (Hypermedia as the Engine of Application State) is an architectural paradigm that allows clients to dynamically navigate resources through hyperlinks provided in responses. Possible state changes are provided via actions. Hyperlinks and actions are metadata sent next to the actual payload. Instead of hardcoding API endpoints, clients rely on these links to discover available actions and related resources. For example, if a user is not allowed to navigate to a linked resource or execute an action, the server would not send this metainformation to the client within its response. Finally, the client has the full state of the resource available, the actual payload and information to related data and possible actions (or state changes). This approach decouples the client from the server, keeps domain logic away from the client and enables more flexible and evolvable APIs.
 
 ## Hypermedia at the Backend
 To create hypermedia responses you can use community libraries for the different technologies:

doc/docs/guide/02-concept.md

@@ -67,8 +67,11 @@ To use a custom hypermedia JSON format with **ngrx-hateoas** you have to impleme
 export interface MetadataProvider {
     isMetadataKey(keyName: string): boolean;
     linkLookup(resource: unknown, linkName: string): ResourceLink | undefined;
+    getAllLinks(resource: unknown): ResourceLink[];
     actionLookup(resource: unknown, actionName: string): ResourceAction | undefined;
+    getAllActions(resource: unknown): ResourceAction[];
     socketLookup(resource: unknown, socketName: string): ResourceSocket | undefined;
+    getAllSockets(resource: unknown): ResourceSocket[];
 }
 ```
 
@@ -94,7 +97,7 @@ Lets imagine our hypermedia JSON looks like the following:
         "_metadata": {
             "_link_aLinkToAResource": { "href": "/api/..." },
             "_action_anActionOnSubobject": { "href": "/api/...", "verb": "PUT" },
-            "_sockets_aSocketForSubobject": { "href": "/api/...", "event": "newMessageForSubobject" }
+            "_socket_aSocketForSubobject": { "href": "/api/...", "event": "newMessageForSubobject" }
         }
     },
     "_metadata": {
@@ -115,15 +118,39 @@ const customMetadataProvider: MetadataProvider = {
     linkLookup(resource: unknown, linkName: string): ResourceLink | undefined {
         return resource['_metadata']?.['_link_' + linkName];
     },
+    getAllLinks(resource: unknown): ResourceLink[]; {
+        const linksMetadata = resource['_metadata'];
+        if(!linksMetadata) return [];
+        return Object.keys(linksMetadata)
+                     .filter(key => key.startsWith('_link_'))
+                     .map(key => linksMetadata[key]);
+    },
     actionLookup(resource: unknown, actionName: string): ResourceAction | undefined {
         const actionMetadata = resource['_metadata']?.['_action_' + actionName];
         // ResourceAction has the two keys href and method, 
         // therefore we have to bring the metadata into the correct format
         if(actionMetadata) return { href: actionMetadata.href, method: actionMetadata.verb };
         else return undefined;
     },
+    getAllActions(resource: unknown): ResourceAction[] {
+        const actionsMetadata = resource['_metadata'];
+        if(!actionsMetadata) return [];
+        return Object.keys(actionsMetadata)
+                     .filter(key => key.startsWith('_action_'))
+                     .map(key => {
+                         const actionMetadata = actionsMetadata[key];
+                         return { href: actionMetadata.href, method: actionMetadata.verb };
+                     });
+    },
     socketLookup(resource: unknown, socketName: string): ResourceSocket | undefined {
         return resource['_metadata']?.['_socket_' + socketName];
+    },
+    getAllSockets(resource: unknown): ResourceSocket[] {
+        const socketsMetadata = resource['_metadata'];
+        if(!socketsMetadata) return [];
+        return Object.keys(socketsMetadata)
+                     .filter(key => key.startsWith('_socket_'))
+                     .map(key => socketsMetadata[key]);
     }
 }
 ```