fix(state): shorthand camelCase support for side effects

Jordan-Hall · Jordan-Hall · commit c0b88e4ab51c · 2023-12-03T12:15:00.000Z
This repairs an issue where the on shorthand for side effects only supports single case lower case action. Repo step https://stackblitz.com/edit/stackblitz-starters-ltqcqj?file=src%2Fmain.ts,src%2Fdata%2Fstate.ts
diff --git a/libs/state/actions/src/lib/proxy.ts b/libs/state/actions/src/lib/proxy.ts
@@ -71,7 +71,11 @@ export function actionProxyHandler<T extends object, U extends object>({
 
       // the user wants to get a single EventEmitter and trigger a side effect on event emission
       if (prop.toString().startsWith('on')) {
-        const propName = prop.toString().slice(2).toLowerCase() as KeysOfT;
+        // we need to first remove the 'on' from the the prop name
+        const slicedPropName = prop.toString().slice(2);
+        // now convert the slicedPropName to camelcase
+        const propName = (slicedPropName.charAt(0).toLowerCase() +
+          slicedPropName.slice(1)) as KeysOfT;
         return (
           behaviour: OperatorFunction<T[KeysOfT], T[KeysOfT]>,
           sf: (v: T[KeysOfT]) => void
diff --git a/libs/state/actions/src/lib/rx-actions.spec.ts b/libs/state/actions/src/lib/rx-actions.spec.ts
@@ -90,11 +90,17 @@ describe('actions fn', () => {
     const t = { se: () => void 0 };
     const dummyBehaviour = (o$) => o$;
     const spyT = jest.fn((_: any) => void 0);
+    const spyF = jest.fn((_: any) => void 0);
 
-    const sub = component.actions.onProp(dummyBehaviour, spyT);
+    component.actions.onProp(dummyBehaviour, spyT);
     component.actions.prop('p');
     expect(spyT).toBeCalledTimes(1);
     expect(spyT).toBeCalledWith('p');
+
+    component.actions.onLongPropName(dummyBehaviour, spyF);
+    component.actions.longPropName('p');
+    expect(spyF).toBeCalledTimes(1);
+    expect(spyF).toBeCalledWith('p');
   });
 
   it('should apply behaviour to trigger', () => {
@@ -200,7 +206,13 @@ describe('actions fn', () => {
   });
 });
 
-type Actions = { prop: string; prop2: string; search: string; resize: number };
+type Actions = {
+  prop: string;
+  prop2: string;
+  search: string;
+  resize: number;
+  longPropName: string;
+};
 function setupComponent<
   Actions extends object,
   Transforms extends ActionTransforms<Actions> = {}
