feat(store): remove forbidden chars and empty str checks from createActionGroup (#3857)

Author: markostanimirovic

modules/store/spec/types/action_group_creator.spec.ts

@@ -127,32 +127,6 @@ describe('createActionGroup', () => {
         );
       });
 
-      it('should fail when event name is an empty string', () => {
-        expectSnippet(`
-          const booksApiActions = createActionGroup({
-            source: 'Books API',
-            events: {
-              '': emptyProps(),
-            },
-          });
-        `).toFail(
-          /event name cannot be an empty string or contain only spaces/
-        );
-      });
-
-      it('should fail when event name contains only spaces', () => {
-        expectSnippet(`
-          const booksApiActions = createActionGroup({
-            source: 'Books API',
-            events: {
-              ' ': emptyProps(),
-            },
-          });
-        `).toFail(
-          /event name cannot be an empty string or contain only spaces/
-        );
-      });
-
       it('should fail when event name is not a string literal type', () => {
         expectSnippet(`
           const booksApiActions = createActionGroup({
@@ -164,70 +138,6 @@ describe('createActionGroup', () => {
         `).toFail(/event name must be a string literal type/);
       });
 
-      describe('forbidden characters', () => {
-        [
-          String.raw`\\`,
-          '/',
-          '|',
-          '<',
-          '>',
-          '[',
-          ']',
-          '{',
-          '}',
-          '(',
-          ')',
-          '.',
-          ',',
-          '!',
-          '?',
-          '#',
-          '%',
-          '^',
-          '&',
-          '*',
-          '+',
-          '-',
-          '~',
-          '"',
-          String.raw`\'`,
-          '`',
-        ].forEach((char) => {
-          it(`should fail when event name contains ${char} in the beginning`, () => {
-            expectSnippet(`
-              const booksApiActions = createActionGroup({
-                source: 'Books API',
-                events: {
-                  '${char}Load Books Success': emptyProps(),
-                },
-              });
-          `).toFail(/event name cannot contain the following characters:/);
-          });
-
-          it(`should fail when event name contains ${char} in the middle`, () => {
-            expectSnippet(`
-              const booksApiActions = createActionGroup({
-                source: 'Books API',
-                events: {
-                  'Load Books ${char} Success': emptyProps(),
-                },
-              });
-          `).toFail(/event name cannot contain the following characters:/);
-          });
-
-          it(`should fail when event name contains ${char} in the end`, () => {
-            expectSnippet(`
-              const booksApiActions = createActionGroup({
-                source: 'Books API',
-                events: {
-                  'Load Books Success${char}': emptyProps(),
-                },
-              });
-          `).toFail(/event name cannot contain the following characters:/);
-          });
-        });
-      });
-
       it('should fail when two event names are mapped to the same action name', () => {
         expectSnippet(`
           const booksApiActions = createActionGroup({

modules/store/src/action_group_creator_models.ts

@@ -18,39 +18,10 @@ type Join<
   ? Join<`${First}${Rest}`, Separator>
   : Str;
 
-type Trim<Str extends string> = Str extends ` ${infer S}`
-  ? Trim<S>
-  : Str extends `${infer S} `
-  ? Trim<S>
-  : Str;
-
-type TitleCase<Str extends string> = Str extends `${infer First} ${infer Rest}`
-  ? `${Capitalize<First>} ${TitleCase<Rest>}`
-  : Capitalize<Str>;
-
-type ForbiddenCharactersStr =
-  '/ \\ | < > [ ] { } ( ) . , ! ? # % ^ & * + - ~ \' " `';
-
-type ForbiddenCharacters<Str extends string = ForbiddenCharactersStr> =
+type CapitalizeWords<Str extends string> =
   Str extends `${infer First} ${infer Rest}`
-    ? First | ForbiddenCharacters<Rest>
-    : Str extends ''
-    ? never
-    : Str;
-
-type ForbiddenCharactersCheck<
-  Str extends string,
-  Name extends string
-> = Str extends `${infer _}${ForbiddenCharacters}${infer _}`
-  ? `${Name} cannot contain the following characters: ${ForbiddenCharactersStr}`
-  : unknown;
-
-type EmptyStringCheck<
-  Str extends string,
-  Name extends string
-> = Trim<Str> extends ''
-  ? `${Name} cannot be an empty string or contain only spaces`
-  : unknown;
+    ? `${Capitalize<First>} ${CapitalizeWords<Rest>}`
+    : Capitalize<Str>;
 
 type StringLiteralCheck<
   Str extends string,
@@ -95,7 +66,7 @@ type EventCreator<
   : never;
 
 export type ActionName<EventName extends string> = Uncapitalize<
-  Join<TitleCase<EventName>>
+  Join<CapitalizeWords<EventName>>
 >;
 
 export interface ActionGroupConfig<
@@ -104,12 +75,10 @@ export interface ActionGroupConfig<
 > {
   source: Source & StringLiteralCheck<Source, 'source'>;
   events: Events & {
-    [EventName in keyof Events]: EmptyStringCheck<
+    [EventName in keyof Events]: StringLiteralCheck<
       EventName & string,
       'event name'
     > &
-      StringLiteralCheck<EventName & string, 'event name'> &
-      ForbiddenCharactersCheck<EventName & string, 'event name'> &
       UniqueEventNameCheck<keyof Events & string, EventName & string> &
       NotAllowedEventPropsCheck<Events[EventName]>;
   };

projects/ngrx.io/content/guide/store/action-groups.md

@@ -69,13 +69,14 @@ export class ProductsComponent implements OnInit {
 
 ```
 
-## Limitations and Restrictions
+## Limitations
 
-An action group uses the event descriptions to create properties within the group that represent the action(s). 
-The property names are auto-generated and are the camelCased version of the event description. For example `Query Changed` becomes `queryChanged`.
-This has the drawback that not all characters can be used to describe an event because some characters can't be used to create a valid name. For example, any of the following characters are not allowed and result in a compile error `/ \\ | < > [ ] { } ( ) . , ! ? # % ^ & * + - ~ \' "`.
+An action group uses the event names to create properties within the group that represent the action creators. 
+The action creator names are generated and are the camelCased version of the event names.
+For example, for the event name `Query Changed`, the action creator name will be `queryChanged`.
+Therefore, it is not possible to define action creators whose names differ from their event names using the `createActionGroup` function.
 
 You can read more about Action Groups:
 
 - [NgRx Action Group Creator](https://dev.to/ngrx/ngrx-action-group-creator-1deh)
-- [Creating Actions with NgRx Just Got Even Easier](https://www.youtube.com/watch?v=rk83ZMqEDV4)
+- [Creating Actions with NgRx Just Got Even Easier](https://www.youtube.com/watch?v=rk83ZMqEDV4)