Adding helper, modifier, component helpers

plugins/converter.test.ts

@@ -300,6 +300,19 @@ describe.each([
         ).toEqual(`$:() => $:$__hash({foo: "bar", boo: "baz"})`);
       });
     });
+    describe('special ember composition helpers', () => {
+      test('its properly converted', () => {
+        expect($t<ASTv1.MustacheStatement>(`{{component @cmp 123 name=hash}}`)).toEqual(
+          `$:() => $:${SYMBOLS.COMPONENT_HELPER}([$:this[$args].cmp,123],{name: ${$glimmerCompat('hash')}})`,
+        );
+        expect($t<ASTv1.MustacheStatement>(`{{helper @cmp 123 name=hash}}`)).toEqual(
+          `$:() => $:${SYMBOLS.HELPER_HELPER}([$:this[$args].cmp,123],{name: ${$glimmerCompat('hash')}})`,
+        );
+        expect($t<ASTv1.MustacheStatement>(`{{modifier @cmp 123 name=hash}}`)).toEqual(
+          `$:() => $:${SYMBOLS.MODIFIER_HELPER}([$:this[$args].cmp,123],{name: ${$glimmerCompat('hash')}})`,
+        );
+      });
+    });
     describe('Builtin helpers in SubExpression', () => {
       test('fn helper properly mapped', () => {
         expect($t<ASTv1.MustacheStatement>(`{{q (fn a b (if c d))}}`)).toEqual(

plugins/converter.ts

@@ -17,6 +17,12 @@ import {
 import { EVENT_TYPE, SYMBOLS } from './symbols';
 import type { Flags } from './flags';
 
+const SPECIAL_HELPERS = [
+  SYMBOLS.HELPER_HELPER,
+  SYMBOLS.MODIFIER_HELPER,
+  SYMBOLS.COMPONENT_HELPER
+];
+
 function patchNodePath(node: ASTv1.MustacheStatement | ASTv1.SubExpression) {
   if (node.path.type !== 'PathExpression') {
     return;
@@ -120,12 +126,18 @@ export function convert(
     params: any[],
     hash: [string, PrimitiveJSType][],
   ) {
+    const fnPath = resolvePath(nodePath);
+    if (SPECIAL_HELPERS.includes(fnPath)) {
+      return `$:${fnPath}([${params
+        .map((p) => serializeParam(p))
+        .join(',')}],${toObject(hash)})`;
+    }
     if (flags.WITH_HELPER_MANAGER && !nodePath.startsWith('$_')) {
-      return `$:${SYMBOLS.$_maybeHelper}(${resolvePath(nodePath)},[${params
+      return `$:${SYMBOLS.$_maybeHelper}(${fnPath},[${params
         .map((p) => serializeParam(p))
         .join(',')}],${toObject(hash)})`;
     } else {
-      return `$:${resolvePath(nodePath)}(${params
+      return `$:${fnPath}(${params
         .map((p) => serializeParam(p))
         .join(',')})`;
     }

src/utils/dom.ts

@@ -52,14 +52,59 @@ const $_className = 'className';
 
 let ROOT: Component<any> | null = null;
 
-export function $_componentHelper(arg: any) {
-  return arg;
+export function $_componentHelper(params: any, hash: any) {
+  const componentFn = params.shift();
+
+  return function wrappedComponent(args: any) {
+    console.log('patching component args', args, hash);
+    Object.keys(hash).forEach((key) => {
+      args[key] = hash[key];
+    });
+    return new componentFn(...arguments);
+  }
 }
-export function $_modifierHelper(arg: any) {
-  return arg;
+export function $_modifierHelper(params: any, hash: any) {
+  const modifierFn = params.shift();
+  // @ts-expect-error undefined
+  if (EmberFunctionalModifiers.has(modifierFn)) {
+    function wrappedModifier (node: any, _params: any, _hash: any) {
+      console.log('callingWrapperModifier', {
+        params, _params,
+        hash, _hash
+      })
+      return $_maybeModifier(modifierFn, node, [...params, ..._params], {
+        ...hash,
+        ..._hash
+      });
+    }
+    // @ts-expect-error undefined
+    EmberFunctionalModifiers.add(wrappedModifier);
+    return wrappedModifier;
+  } else {
+    throw new Error('Unable to use modifier helper with non-ember modifiers');
+  }
 }
-export function $_helperHelper(arg: any) {
-  return arg;
+export function $_helperHelper(params: any, hash: any) {
+  const helperFn = params.shift();
+  console.log('helper-helper', params, hash);
+  // @ts-expect-error undefined
+  if (EmberFunctionalHelpers.has(helperFn)) {
+    function wrappedHelper (_params: any, _hash: any) {
+      console.log('callingWrapperHelper', {
+        params, _params,
+        hash, _hash
+      })
+      return $_maybeHelper(helperFn, [...params, ..._params], {
+        ...hash,
+        ..._hash
+      });
+    }
+    // @ts-expect-error undefined
+    EmberFunctionalHelpers.add(wrappedHelper);
+    return wrappedHelper;
+  } else {
+    throw new Error('Unable to use helper with non-ember helpers');
+  }
 }
 
 export function resetRoot() {