modifier-manager (#83)

add more tests
lifeart · Jan 31, 2024 · 2603f25 · 2603f25
1 parent 0a0521a
commit 2603f25
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 37 deletions.
diff --git a/plugins/converter.test.ts b/plugins/converter.test.ts
@@ -1,4 +1,11 @@
-import { expect, test, describe, beforeAll, beforeEach, afterEach } from 'vitest';
+import {
+  expect,
+  test,
+  describe,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
 import { preprocess } from '@glimmer/syntax';
 
 import { ComplexJSType, convert } from './converter';
@@ -16,6 +23,14 @@ const flags = defaultFlags();
 
 // flags.WITH_HELPER_MANAGER = false;
 
+// Maybe modifier
+function $mm(name: string, params: string = '', hash: string = '{}') {
+  if (flags.WITH_MODIFIER_MANAGER) {
+    return `$:($n) => $_maybeModifier($:${name},$n,[${params}],${hash})`;
+  } else {
+    return `$:($n) => $:${name}($n,${params.trim()})`;
+  }
+}
 // Maybe helper
 function $mh(name: string, params: string = '', hash: string = '{}') {
   if (flags.WITH_HELPER_MANAGER) {
@@ -87,16 +102,29 @@ function $node(partial: Partial<HBSNode>): HBSNode {
 describe.each([
   { glimmerCompat: true, name: 'glimmer compat mode' },
   { glimmerCompat: false, name: 'glimmer non-compat mode' },
-  { helperManager: true, glimmerCompat: true, name: 'glimmer compat mode [hm]' },
-  { helperManager: false, glimmerCompat: false, name: 'glimmer non-compat mode [hm]' },
-])('$name', ({ glimmerCompat, helperManager }) => {
+  {
+    helperManager: true,
+    glimmerCompat: true,
+    name: 'glimmer compat mode [hm]',
+  },
+  {
+    helperManager: false,
+    glimmerCompat: false,
+    name: 'glimmer non-compat mode [hm]',
+  },
+  { modifierManager: false, name: 'without modifier manager' },
+  { modifierManager: true, name: 'with modifier manager' },
+])('$name', ({ glimmerCompat, helperManager, modifierManager }) => {
   beforeAll(() => {
     if (glimmerCompat !== undefined) {
       flags.IS_GLIMMER_COMPAT_MODE = glimmerCompat;
     }
     if (helperManager !== undefined) {
       flags.WITH_HELPER_MANAGER = helperManager;
     }
+    if (modifierManager !== undefined) {
+      flags.WITH_MODIFIER_MANAGER = modifierManager;
+    }
   });
   beforeEach(() => {
     resetContextCounter();
@@ -124,13 +152,23 @@ describe.each([
       });
       test('it works for sub expression paths in mustache', () => {
         expect(
-          $t<ASTv1.ElementNode>(`<div class={{maybeClass  (if @arrowProps.className @arrowProps.className)}}></div>`),
-        ).toEqual($node({
-          tag: 'div',
-          properties: [
-            ['', `$:() => ${$mh('maybeClass', `$:$__if($:this[$args].arrowProps?.className,$:this[$args].arrowProps?.className)`)}`]
-          ]
-        }));
+          $t<ASTv1.ElementNode>(
+            `<div class={{maybeClass  (if @arrowProps.className @arrowProps.className)}}></div>`,
+          ),
+        ).toEqual(
+          $node({
+            tag: 'div',
+            properties: [
+              [
+                '',
+                `$:() => ${$mh(
+                  'maybeClass',
+                  `$:$__if($:this[$args].arrowProps?.className,$:this[$args].arrowProps?.className)`,
+                )}`,
+              ],
+            ],
+          }),
+        );
       });
       test('works for sub-expression paths', () => {
         expect(
@@ -370,7 +408,7 @@ describe.each([
           $node({
             tag: 'div',
             properties: [
-              ['', `$:() => [$:foo," bar ",${$mh('boo','$:baks')}].join('')`],
+              ['', `$:() => [$:foo," bar ",${$mh('boo', '$:baks')}].join('')`],
             ],
           }),
         );
@@ -417,15 +455,50 @@ describe.each([
         ).toEqual(
           $node({
             tag: 'div',
-            events: [['click', `$:($e, $n) => ${$mh('foo','$:bar,$:baz')}($e, $n, )`]],
+            events: [
+              ['click', `$:($e, $n) => ${$mh('foo', '$:bar,$:baz')}($e, $n, )`],
+            ],
           }),
         );
       });
       test('support custom modifiers', () => {
         expect($t<ASTv1.ElementNode>(`<div {{foo-bar}}></div>`)).toEqual(
           $node({
             tag: 'div',
-            events: [['0', '$:($n) => $:foo-bar($n, )']],
+            events: [['0', $mm('foo-bar')]],
+          }),
+        );
+      });
+      test('support custom modifiers with params ', () => {
+        expect(
+          $t<ASTv1.ElementNode>(
+            `<div {{foo-bar foo 1 true null undefined}}></div>`,
+          ),
+        ).toEqual(
+          $node({
+            tag: 'div',
+            events: [['0', $mm('foo-bar', '$:foo,1,true,null,undefined')]],
+          }),
+        );
+      });
+      test('support custom modifiers with hash params ', () => {
+        expect(
+          $t<ASTv1.ElementNode>(
+            `<div {{foo-bar a=1 b=true c=null d=undefined b="a" }}></div>`,
+          ),
+        ).toEqual(
+          $node({
+            tag: 'div',
+            events: [
+              [
+                '0',
+                $mm(
+                  'foo-bar',
+                  '',
+                  '{a: 1, b: true, c: null, d: undefined, b: "a"}',
+                ),
+              ],
+            ],
           }),
         );
       });
@@ -495,21 +568,30 @@ describe.each([
           ),
         ).toEqual(
           `$:...(() => {let self = this;let Let_bar_6c3gez6 = $:() => $:foo;let Let_k_6c3gez6 = "name";return [$_text("p"), ${
-            flags.IS_GLIMMER_COMPAT_MODE ? '() => Let_bar_6c3gez6' : 'Let_bar_6c3gez6'
-          }, ${flags.IS_GLIMMER_COMPAT_MODE ? '() => Let_k_6c3gez6' : 'Let_k_6c3gez6'}]})()`,
+            flags.IS_GLIMMER_COMPAT_MODE
+              ? '() => Let_bar_6c3gez6'
+              : 'Let_bar_6c3gez6'
+          }, ${
+            flags.IS_GLIMMER_COMPAT_MODE
+              ? '() => Let_k_6c3gez6'
+              : 'Let_k_6c3gez6'
+          }]})()`,
         );
       });
       test('it not override arg assign case', () => {
         const result = $t<ASTv1.BlockStatement>(
           `{{#let foo "name" as |bar k|}}<Div @bar={{bar}} bar={{if bar bar}} />{{/let}}`,
         );
         if (flags.IS_GLIMMER_COMPAT_MODE) {
-          expect(result).toEqual(`$:...(() => {let self = this;let Let_bar_6c3gez6 = $:() => $:foo;let Let_k_6c3gez6 = "name";return [$_c(Div,$_args({bar: () => Let_bar_6c3gez6},{},[[],[['bar', () => $:$__if($:Let_bar_6c3gez6,$:Let_bar_6c3gez6)]],[]]), this)]})()`);
+          expect(result).toEqual(
+            `$:...(() => {let self = this;let Let_bar_6c3gez6 = $:() => $:foo;let Let_k_6c3gez6 = "name";return [$_c(Div,$_args({bar: () => Let_bar_6c3gez6},{},[[],[['bar', () => $:$__if($:Let_bar_6c3gez6,$:Let_bar_6c3gez6)]],[]]), this)]})()`,
+          );
         } else {
-          expect(result).toEqual(`$:...(() => {let self = this;let Let_bar_6c3gez6 = $:() => $:foo;let Let_k_6c3gez6 = "name";return [$_c(Div,{bar: Let_bar_6c3gez6, "$:[$PROPS_SYMBOL]": [[],[['bar', () => $:$__if($:Let_bar_6c3gez6,$:Let_bar_6c3gez6)]],[]]}, this)]})()`);
+          expect(result).toEqual(
+            `$:...(() => {let self = this;let Let_bar_6c3gez6 = $:() => $:foo;let Let_k_6c3gez6 = "name";return [$_c(Div,{bar: Let_bar_6c3gez6, "$:[$PROPS_SYMBOL]": [[],[['bar', () => $:$__if($:Let_bar_6c3gez6,$:Let_bar_6c3gez6)]],[]]}, this)]})()`,
+          );
         }
-
-      })
+      });
     });
     describe('each condition', () => {
       test('it adds unstable child wrapper for simple multi-nodes', () => {

diff --git a/plugins/converter.ts b/plugins/converter.ts
@@ -93,11 +93,31 @@ export function convert(seenNodes: Set<ASTv1.Node>, flags: Flags) {
     return isPath(p) ? serializePath(p, false) : escapeString(p);
   }
 
-  function toHelper(nodePath: string, params: any[], hash: [string, PrimitiveJSType][]) {
+  function toModifier(
+    nodePath: string,
+    params: any[],
+    hash: [string, PrimitiveJSType][],
+  ) {
+    if (flags.WITH_MODIFIER_MANAGER) {
+      return `${SYMBOLS.$_maybeModifier}($:${resolvePath(nodePath)},$n,[${params
+        .map((p) => serializeParam(p))
+        .join(',')}],${toObject(hash)})`;
+    } else {
+      return `$:${resolvePath(nodePath)}($n,${params
+        .map((p) => serializeParam(p))
+        .join(',')})`;
+    }
+  }
+
+  function toHelper(
+    nodePath: string,
+    params: any[],
+    hash: [string, PrimitiveJSType][],
+  ) {
     if (flags.WITH_HELPER_MANAGER && !nodePath.startsWith('$_')) {
-      return `$:${SYMBOLS.$_maybeHelper}(${resolvePath(
-        nodePath,
-      )},[${params.map((p) => serializeParam(p)).join(',')}],${toObject(hash)})`;
+      return `$:${SYMBOLS.$_maybeHelper}(${resolvePath(nodePath)},[${params
+        .map((p) => serializeParam(p))
+        .join(',')}],${toObject(hash)})`;
     } else {
       return `$:${resolvePath(nodePath)}(${params
         .map((p) => serializeParam(p))
@@ -232,7 +252,11 @@ export function convert(seenNodes: Set<ASTv1.Node>, flags: Flags) {
         }
         return toHelper(node.path.original, [], hashArgs);
       } else {
-        return `${wrap ? `$:() => ` : ''}${toHelper(node.path.original, node.params, hashArgs)}`;
+        return `${wrap ? `$:() => ` : ''}${toHelper(
+          node.path.original,
+          node.params,
+          hashArgs,
+        )}`;
       }
     } else if (node.type === 'BlockStatement') {
       if (!node.params.length) {
@@ -333,7 +357,10 @@ export function convert(seenNodes: Set<ASTv1.Node>, flags: Flags) {
                 'name'
                 "name"
             */
-            const re = new RegExp(`(?<!\\.)\\b${key}\\b(?!(=|'|\"|:)[^ ]*)`, 'g');
+            const re = new RegExp(
+              `(?<!\\.)\\b${key}\\b(?!(=|'|\"|:)[^ ]*)`,
+              'g',
+            );
             str = str.replace(re, namesToReplace[key]);
           });
           return str;
@@ -345,7 +372,8 @@ export function convert(seenNodes: Set<ASTv1.Node>, flags: Flags) {
           serializeChildren(
             children as unknown as [string | HBSNode | HBSControlExpression],
             'this', // @todo - fix possible context floating here
-          ) )}]})()`;
+          ),
+        )}]})()`;
         return result;
       }
 
@@ -466,11 +494,23 @@ export function convert(seenNodes: Set<ASTv1.Node>, flags: Flags) {
               return null;
             }
           } else {
+            const hashArgs: [string, PrimitiveJSType][] = mod.hash.pairs.map(
+              (pair) => {
+                return [
+                  pair.key,
+                  ToJSType(pair.value, false) as unknown as PrimitiveJSType,
+                ];
+              },
+            );
+
             return [
+              // @me here
               EVENT_TYPE.ON_CREATED,
-              `$:($n) => $:${mod.path.original}($n, ${mod.params
-                .map((p) => ToJSType(p))
-                .join(',')})`,
+              `$:($n) => ${toModifier(
+                mod.path.original,
+                mod.params,
+                hashArgs,
+              )}`,
             ];
           }
         })

diff --git a/plugins/flags.ts b/plugins/flags.ts
@@ -16,6 +16,6 @@ export function defaultFlags() {
     SUPPORT_SHADOW_DOM: true,
     REACTIVE_MODIFIERS: true,
     WITH_HELPER_MANAGER: false,
-    WITH_MODIFIER_MANAGER: true,
+    WITH_MODIFIER_MANAGER: false,
   } as Flags;
 }
diff --git a/plugins/symbols.ts b/plugins/symbols.ts
@@ -20,6 +20,7 @@ export const SYMBOLS = {
   $nodes: '$nodes',
   $args: '$args',
   $_maybeHelper: '$_maybeHelper',
+  $_maybeModifier: '$_maybeModifier',
   $_inElement: '$_inElement',
   $_ucw: '$_ucw',
   $__if: '$__if',

diff --git a/plugins/utils.ts b/plugins/utils.ts
@@ -112,7 +112,9 @@ export function toSafeJSPath(str: string) {
   return result;
 }
 
-export function toOptionalChaining<T extends string | number | undefined | null>(str: T): T {
+export function toOptionalChaining<
+  T extends string | number | undefined | null,
+>(str: T): T {
   if (typeof str !== 'string') {
     return str;
   }

diff --git a/src/tests/utils.ts b/src/tests/utils.ts
@@ -9,8 +9,6 @@ export async function cleanupRender() {
   const root = getRoot();
   if (root) {
     await Promise.all(runDestructors(root));
-  } else {
-    debugger;
   }
   resetNodeCounter();
   resetRoot();