fix(websocket-plugin): WebSocket title casing should be consistent (#…

…2115)

This commit updates all instances of `Websocket` (with a lowercase "s") to `WebSocket`
to ensure consistent title casing across the package.

docs/community/sponsors.md

@@ -22,5 +22,5 @@ Thank you to all our backers! [Become a backer](https://opencollective.com/ngxs#
 
 ## Other Contributions
 
-- [DataFrameworks](https://dataframeworks.com/) - Websocket Plugin
+- [DataFrameworks](https://dataframeworks.com/) - WebSocket Plugin
 - [Marian Stoica](https://twitter.com/MarianStoica19) - NGXS.io domain name

docs/plugins/websocket.md

@@ -13,16 +13,16 @@ yarn add @ngxs/websocket-plugin
 
 ## Configuration
 
-Add the `NgxsWebsocketPluginModule` plugin to your root app module:
+Add the `NgxsWebSocketPluginModule` plugin to your root app module:
 
 ```ts
 import { NgxsModule } from '@ngxs/store';
-import { NgxsWebsocketPluginModule } from '@ngxs/websocket-plugin';
+import { NgxsWebSocketPluginModule } from '@ngxs/websocket-plugin';
 
 @NgModule({
   imports: [
     NgxsModule.forRoot([]),
-    NgxsWebsocketPluginModule.forRoot({
+    NgxsWebSocketPluginModule.forRoot({
       url: 'ws://localhost:4200'
     })
   ]
@@ -32,7 +32,7 @@ export class AppModule {}
 
 The plugin has a variety of options that can be passed:
 
-- `url`: Url of the web socket connection. Can be passed here or by the `ConnectWebsocket` action.
+- `url`: Url of the web socket connection. Can be passed here or by the `ConnectWebSocket` action.
 - `typeKey`: Object property that maps the web socket message to a action type. Default: `type`
 - `serializer`: Serializer used before sending objects to the web socket. Default: `JSON.stringify`
 - `deserializer`: Deserializer used for messages arriving from the web socket. Default: `JSON.parse`
@@ -148,7 +148,7 @@ ws.on('connection', socket => {
 Notice that you have to specify `type` property on server side, otherwise you will get an error - `Type ... not found on message`. If you don't want to use a property called `type` as the key then you can specify your own property name when calling `forRoot`:
 
 ```ts
-NgxsWebsocketPluginModule.forRoot({
+NgxsWebSocketPluginModule.forRoot({
   url: 'ws://localhost:4200',
   typeKey: 'myAwesomeTypeKey'
 });
@@ -182,7 +182,7 @@ Here is a list of all the available actions you have:
 - `WebSocketConnected`: Action dispatched when a web socket is connected.
 - `WebSocketDisconnected`: Action dispatched when a web socket is disconnected. Use its handler for reconnecting.
 - `SendWebSocketMessage`: Send a message to the server.
-- `WebsocketMessageError`: Action dispatched by this plugin when an error ocurrs upon receiving a message.
+- `WebSocketMessageError`: Action dispatched by this plugin when an error ocurrs upon receiving a message.
 - `WebSocketConnectionUpdated`: Action dispatched by this plugin when a new connection is created on top of an existing one. Existing connection is closing.
 
 In summary - your server-side sockets should send objects that have a `type` property (or another key that you can provide in the `typeKey` property when calling `forRoot`). This plugin will receive a message from the server and dispatch the message as an action with the corresponding `type` value. If the `type` property doesn't match any client-side `@Action` methods (with an Action with the corresponding `static type` property value) then no State will respond to the message.

integrations/hello-world-ng16/src/app/store/store.module.ts

@@ -4,7 +4,7 @@ import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsFormPluginModule } from '@ngxs/form-plugin';
 import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
-import { NgxsWebsocketPluginModule } from '@ngxs/websocket-plugin';
+import { NgxsWebSocketPluginModule } from '@ngxs/websocket-plugin';
 import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
 
 import { CounterState } from './counter/counter.state';
@@ -17,7 +17,7 @@ import { environment } from '../../environments/environment';
     NgxsFormPluginModule.forRoot(),
     NgxsLoggerPluginModule.forRoot({ disabled: environment.production }),
     NgxsStoragePluginModule.forRoot({ keys: '*' }),
-    NgxsWebsocketPluginModule.forRoot(),
+    NgxsWebSocketPluginModule.forRoot(),
     NgxsRouterPluginModule.forRoot()
   ]
 })

integrations/hello-world-ng17/src/app/store/store.module.ts

@@ -4,7 +4,7 @@ import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsFormPluginModule } from '@ngxs/form-plugin';
 import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
-import { NgxsWebsocketPluginModule } from '@ngxs/websocket-plugin';
+import { NgxsWebSocketPluginModule } from '@ngxs/websocket-plugin';
 import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
 
 import { CounterState } from './counter/counter.state';
@@ -17,7 +17,7 @@ import { environment } from '../../environments/environment';
     NgxsFormPluginModule.forRoot(),
     NgxsLoggerPluginModule.forRoot({ disabled: environment.production }),
     NgxsStoragePluginModule.forRoot({ keys: '*' }),
-    NgxsWebsocketPluginModule.forRoot(),
+    NgxsWebSocketPluginModule.forRoot(),
     NgxsRouterPluginModule.forRoot()
   ]
 })

packages/store/schematics/src/ng-add/add-declaration.ts

@@ -117,7 +117,7 @@ const pluginData: ReadonlyMap<LIBRARIES, { module?: string; standalone: string }
   [
     LIBRARIES.WEBSOCKET,
     {
-      module: 'NgxsWebsocketPluginModule',
+      module: 'NgxsWebSocketPluginModule',
       standalone: 'withNgxsWebSocketPlugin'
     }
   ]

packages/websocket-plugin/README.md

@@ -1,3 +1,3 @@
 # @ngxs/websocket-plugin
 
-Websocket plugin for NGXS. See [repo](https://github.com/ngxs/store) for more info.
+WebSocket plugin for NGXS. See [repo](https://github.com/ngxs/store) for more info.

packages/websocket-plugin/index.ts

@@ -2,3 +2,8 @@
  * The public api for consumers of @ngxs/websocket-plugin
  */
 export * from './src/public_api';
+
+/**
+ * The private api for consumers of @ngxs/websocket-plugin
+ */
+export * from './src/private_api';

packages/websocket-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxs/websocket-plugin",
-  "description": "Websocket plugin for @ngxs/store",
+  "description": "WebSocket plugin for @ngxs/store",
   "version": "0.0.0",
   "sideEffects": true,
   "peerDependencies": {

packages/websocket-plugin/src/private_api.ts

@@ -0,0 +1 @@
+export { NGXS_WEBSOCKET_OPTIONS as ɵNGXS_WEBSOCKET_OPTIONS } from './symbols';

packages/websocket-plugin/src/providers.ts

@@ -1,9 +1,9 @@
 import { APP_INITIALIZER } from '@angular/core';
 
 import { WebSocketHandler } from './websocket-handler';
-import { USER_OPTIONS, NGXS_WEBSOCKET_OPTIONS, NgxsWebsocketPluginOptions } from './symbols';
+import { USER_OPTIONS, NGXS_WEBSOCKET_OPTIONS, NgxsWebSocketPluginOptions } from './symbols';
 
-export function ɵwebsocketOptionsFactory(options: NgxsWebsocketPluginOptions) {
+export function ɵwebsocketOptionsFactory(options: NgxsWebSocketPluginOptions) {
   return {
     reconnectInterval: 5000,
     reconnectAttempts: 10,
@@ -18,7 +18,7 @@ export function ɵwebsocketOptionsFactory(options: NgxsWebsocketPluginOptions) {
   };
 }
 
-export function ɵgetProviders(options?: NgxsWebsocketPluginOptions) {
+export function ɵgetProviders(options?: NgxsWebSocketPluginOptions) {
   return [
     { provide: USER_OPTIONS, useValue: options },
     {

packages/websocket-plugin/src/public_api.ts

@@ -1,9 +1,7 @@
-export { NgxsWebsocketPluginModule, withNgxsWebSocketPlugin } from './websocket.module';
+export { NgxsWebSocketPluginModule, withNgxsWebSocketPlugin } from './websocket.module';
 export {
-  NGXS_WEBSOCKET_OPTIONS,
-  NgxsWebsocketPluginOptions,
   ConnectWebSocket,
-  WebsocketMessageError,
+  WebSocketMessageError,
   DisconnectWebSocket,
   WebSocketDisconnected,
   SendWebSocketMessage,

packages/websocket-plugin/src/symbols.ts

@@ -4,13 +4,13 @@ declare const ngDevMode: boolean;
 
 const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode;
 
-export const NGXS_WEBSOCKET_OPTIONS = new InjectionToken<NgxsWebsocketPluginOptions>(
+export const NGXS_WEBSOCKET_OPTIONS = new InjectionToken<NgxsWebSocketPluginOptions>(
   NG_DEV_MODE ? 'NGXS_WEBSOCKET_OPTIONS' : ''
 );
 
 export const USER_OPTIONS = new InjectionToken(NG_DEV_MODE ? 'USER_OPTIONS' : '');
 
-export interface NgxsWebsocketPluginOptions {
+export interface NgxsWebSocketPluginOptions {
   /**
    * URL of the websocket.
    */
@@ -66,13 +66,13 @@ export interface NgxsWebsocketPluginOptions {
 export class ConnectWebSocket {
   static readonly type = '[WebSocket] Connect';
 
-  constructor(public payload?: NgxsWebsocketPluginOptions) {}
+  constructor(public payload?: NgxsWebSocketPluginOptions) {}
 }
 
 /**
  * Action triggered when a error ocurrs
  */
-export class WebsocketMessageError {
+export class WebSocketMessageError {
   static readonly type = '[WebSocket] Message Error';
 
   constructor(public payload: any) {}

packages/websocket-plugin/src/websocket-handler.ts

@@ -9,8 +9,8 @@ import {
   DisconnectWebSocket,
   SendWebSocketMessage,
   NGXS_WEBSOCKET_OPTIONS,
-  NgxsWebsocketPluginOptions,
-  WebsocketMessageError,
+  NgxsWebSocketPluginOptions,
+  WebSocketMessageError,
   WebSocketDisconnected,
   TypeKeyPropertyMissingError,
   WebSocketConnectionUpdated,
@@ -31,7 +31,7 @@ export class WebSocketHandler implements OnDestroy {
     private _store: Store,
     private _ngZone: NgZone,
     private _actions$: Actions,
-    @Inject(NGXS_WEBSOCKET_OPTIONS) private _options: NgxsWebsocketPluginOptions
+    @Inject(NGXS_WEBSOCKET_OPTIONS) private _options: NgxsWebSocketPluginOptions
   ) {
     this._setupActionsListeners();
   }
@@ -61,7 +61,7 @@ export class WebSocketHandler implements OnDestroy {
       });
   }
 
-  private connect(options?: NgxsWebsocketPluginOptions): void {
+  private connect(options?: NgxsWebSocketPluginOptions): void {
     if (this._socket) {
       this._closeConnection(/* forcelyCloseSocket */ true);
       this._store.dispatch(new WebSocketConnectionUpdated());
@@ -118,7 +118,7 @@ export class WebSocketHandler implements OnDestroy {
           // This ensures that the WebSocket connection is properly closed to prevent
           // potential resource leaks.
           this._disconnect(/* forcelyCloseSocket */ true);
-          this._store.dispatch(new WebsocketMessageError(error));
+          this._store.dispatch(new WebSocketMessageError(error));
         });
 
       fromEvent<CloseEvent>(socket, 'close')
@@ -137,7 +137,7 @@ export class WebSocketHandler implements OnDestroy {
             // We should call `socket.close()` in this scenario, we can ensure that
             // the WebSocket connection is properly closed.
             this._disconnect(/* forcelyCloseSocket */ true);
-            this._store.dispatch(new WebsocketMessageError(event));
+            this._store.dispatch(new WebSocketMessageError(event));
           }
         });
     });
@@ -158,7 +158,7 @@ export class WebSocketHandler implements OnDestroy {
     try {
       this._socket.send(this._options.serializer!(data));
     } catch (error) {
-      this._store.dispatch(new WebsocketMessageError(error));
+      this._store.dispatch(new WebSocketMessageError(error));
     }
   }
 

packages/websocket-plugin/src/websocket.module.ts

@@ -6,22 +6,22 @@ import {
 } from '@angular/core';
 
 import { ɵgetProviders } from './providers';
-import { NgxsWebsocketPluginOptions } from './symbols';
+import { NgxsWebSocketPluginOptions } from './symbols';
 
 @NgModule()
-export class NgxsWebsocketPluginModule {
+export class NgxsWebSocketPluginModule {
   static forRoot(
-    options?: NgxsWebsocketPluginOptions
-  ): ModuleWithProviders<NgxsWebsocketPluginModule> {
+    options?: NgxsWebSocketPluginOptions
+  ): ModuleWithProviders<NgxsWebSocketPluginModule> {
     return {
-      ngModule: NgxsWebsocketPluginModule,
+      ngModule: NgxsWebSocketPluginModule,
       providers: ɵgetProviders(options)
     };
   }
 }
 
 export function withNgxsWebSocketPlugin(
-  options?: NgxsWebsocketPluginOptions
+  options?: NgxsWebSocketPluginOptions
 ): EnvironmentProviders {
   return makeEnvironmentProviders(ɵgetProviders(options));
 }

packages/websocket-plugin/tests/websocket-handler-cleanup.spec.ts

@@ -9,7 +9,7 @@ import { Server } from 'mock-socket';
 
 import { mockWebSocket } from './utils';
 import { WebSocketHandler } from '../src/websocket-handler';
-import { NgxsWebsocketPluginModule, ConnectWebSocket } from '../';
+import { NgxsWebSocketPluginModule, ConnectWebSocket } from '../';
 
 describe('WebSocketHandler cleanup', () => {
   mockWebSocket();
@@ -26,7 +26,7 @@ describe('WebSocketHandler cleanup', () => {
     imports: [
       BrowserModule,
       NgxsModule.forRoot([]),
-      NgxsWebsocketPluginModule.forRoot({ url })
+      NgxsWebSocketPluginModule.forRoot({ url })
     ],
     declarations: [TestComponent],
     bootstrap: [TestComponent]

packages/websocket-plugin/tests/websocket.module.spec.ts

@@ -16,19 +16,19 @@ import { tap, first } from 'rxjs/operators';
 import { Server, WebSocket } from 'mock-socket';
 
 import {
-  NgxsWebsocketPluginModule,
+  NgxsWebSocketPluginModule,
   ConnectWebSocket,
   SendWebSocketMessage,
   DisconnectWebSocket,
   WebSocketDisconnected,
-  WebsocketMessageError,
+  WebSocketMessageError,
   WebSocketConnectionUpdated,
   WebSocketConnected
 } from '../';
 
 import { mockWebSocket } from './utils';
 
-describe('NgxsWebsocketPlugin', () => {
+describe('NgxsWebSocketPlugin', () => {
   mockWebSocket();
 
   const url = 'ws://localhost:8080';
@@ -38,7 +38,7 @@ describe('NgxsWebsocketPlugin', () => {
 
   const createModuleAndServer = (states: any[] = []) => {
     TestBed.configureTestingModule({
-      imports: [NgxsModule.forRoot(states), NgxsWebsocketPluginModule.forRoot({ url })]
+      imports: [NgxsModule.forRoot(states), NgxsWebSocketPluginModule.forRoot({ url })]
     });
 
     return new Server(url);
@@ -140,9 +140,9 @@ describe('NgxsWebsocketPlugin', () => {
       mockServer.emit('error', new Error('just an error'));
     });
 
-    actions$.pipe(ofActionDispatched(WebsocketMessageError)).subscribe(action => {
+    actions$.pipe(ofActionDispatched(WebSocketMessageError)).subscribe(action => {
       // Assert
-      expect(action).toBeInstanceOf(WebsocketMessageError);
+      expect(action).toBeInstanceOf(WebSocketMessageError);
       mockServer.stop(done);
     });
   });
@@ -152,7 +152,7 @@ describe('NgxsWebsocketPlugin', () => {
     TestBed.configureTestingModule({
       imports: [
         NgxsModule.forRoot(),
-        NgxsWebsocketPluginModule.forRoot({
+        NgxsWebSocketPluginModule.forRoot({
           url,
           deserializer: () => null,
           serializer: () => ''