Allow each without block params (#86)

* feat: allow each without block params

* +

Author: lifeart

plugins/converter.test.ts

@@ -302,14 +302,26 @@ describe.each([
     });
     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>(`{{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>(`{{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')}})`,
+        expect(
+          $t<ASTv1.MustacheStatement>(`{{modifier @cmp 123 name=hash}}`),
+        ).toEqual(
+          `$:() => $:${
+            SYMBOLS.MODIFIER_HELPER
+          }([$:this[$args].cmp,123],{name: ${$glimmerCompat('hash')}})`,
         );
       });
     });
@@ -633,6 +645,24 @@ describe.each([
       });
     });
     describe('each condition', () => {
+      test('it support block-less case', () => {
+        const converted = $t<ASTv1.BlockStatement>(
+          `{{#each smf}}<div></div>{{/each}}`,
+        );
+        expect(converted).toEqual<HBSControlExpression>(
+          $control({
+            type: 'each',
+            condition: $glimmerCompat('$:smf'),
+            blockParams: [],
+            children: [$node({ tag: 'div' })],
+          }),
+        );
+        expect($s(converted)).toEqual(
+          `$_each(${$glimmerCompat(
+            'smf',
+          )}, ($noop,$index,ctx0) => [$_tag('div', $_edp, [], ctx0)], null, this)`,
+        );
+      });
       test('it adds unstable child wrapper for simple multi-nodes', () => {
         const converted = $t<ASTv1.BlockStatement>(
           `{{#each foo as |bar|}}<div></div><span></span>{{/each}}`,

plugins/converter.ts

@@ -20,7 +20,7 @@ import type { Flags } from './flags';
 const SPECIAL_HELPERS = [
   SYMBOLS.HELPER_HELPER,
   SYMBOLS.MODIFIER_HELPER,
-  SYMBOLS.COMPONENT_HELPER
+  SYMBOLS.COMPONENT_HELPER,
 ];
 
 function patchNodePath(node: ASTv1.MustacheStatement | ASTv1.SubExpression) {
@@ -137,9 +137,7 @@ export function convert(
         .map((p) => serializeParam(p))
         .join(',')}],${toObject(hash)})`;
     } else {
-      return `$:${fnPath}(${params
-        .map((p) => serializeParam(p))
-        .join(',')})`;
+      return `$:${fnPath}(${params.map((p) => serializeParam(p)).join(',')})`;
     }
     /*
       params.map(el => {

plugins/utils.ts

@@ -362,6 +362,9 @@ export function serializeNode(
         newCtxName,
       )}], ${ctxName})`;
     } else if (key === '@each') {
+      if (paramNames.length === 0) {
+        paramNames.push('$noop');
+      }
       if (paramNames.length === 1) {
         // @todo - add compiler param to mark there is no index here
         // likely we  need to import $getIndex function and pass it as a param for each constructor

src/tests/integration/each-test.gts

@@ -12,6 +12,20 @@ module('Integration | InternalComponent | each', function (hooks) {
     users = cell([{ name: cell('Uef') }, { name: cell('Bi') }]);
   });
 
+  test('it support iteration without block params', async function (assert) {
+    const list = new Array(10).fill(undefined);
+    await render(
+      <template>
+        <ul>
+          {{#each list}}
+            <li></li>
+          {{/each}}
+        </ul>
+      </template>,
+    );
+    assert.dom('li').exists({ count: 10 });
+  });
+
   test('it runs async element destructors for Components with context', async function (assert) {
     const animationDelay = 100;
     const items = cell([{ id: '1' }, { id: '2' }]);

src/utils/dom.ts

@@ -61,20 +61,22 @@ export function $_componentHelper(params: any, hash: any) {
       args[key] = hash[key];
     });
     return new componentFn(...arguments);
-  }
+  };
 }
 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) {
+    function wrappedModifier(node: any, _params: any, _hash: any) {
       console.log('callingWrapperModifier', {
-        params, _params,
-        hash, _hash
-      })
+        params,
+        _params,
+        hash,
+        _hash,
+      });
       return $_maybeModifier(modifierFn, node, [...params, ..._params], {
         ...hash,
-        ..._hash
+        ..._hash,
       });
     }
     // @ts-expect-error undefined
@@ -89,14 +91,16 @@ export function $_helperHelper(params: any, hash: any) {
   console.log('helper-helper', params, hash);
   // @ts-expect-error undefined
   if (EmberFunctionalHelpers.has(helperFn)) {
-    function wrappedHelper (_params: any, _hash: any) {
+    function wrappedHelper(_params: any, _hash: any) {
       console.log('callingWrapperHelper', {
-        params, _params,
-        hash, _hash
-      })
+        params,
+        _params,
+        hash,
+        _hash,
+      });
       return $_maybeHelper(helperFn, [...params, ..._params], {
         ...hash,
-        ..._hash
+        ..._hash,
       });
     }
     // @ts-expect-error undefined

src/utils/list.ts

@@ -117,6 +117,9 @@ class BasicListComponent<T extends { id: number }> {
       const map: WeakMap<T, string> = new WeakMap();
       this.keyForItem = (item: T) => {
         if (IS_DEV_MODE) {
+          if (typeof item === 'undefined' || item === null) {
+            return Math.random().toString(36).slice(2);
+          }
           if (isPrimitive(item)) {
             console.warn(`Iteration over primitives is not supported yet`);
             return String(item);