Dynamic content of a Grid card stopped working

[ildar170975]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
2.0.0-b1

Last working release (if known):
1.3.6
1.3.7-beta.1

Browser and Operating System:
Chrome 145.0.7632.160
Win10x64

Description of problem:

This code used to work before 2.0.0-b1:

type: custom:config-template-card
variables:
  LIGHTS: |-
    Object.keys(states).filter(
      k => k.startsWith('light')
    )
entities: ${LIGHTS}
card:
  type: grid
  square: false
  columns: 3
  title: CTC
  cards: |-
    ${
      let cards = [];
      LIGHTS.map(entity =>
        cards = cards.concat(
          {
            'type': 'tile',
            'entity': entity,
            'tap_action': {'action': 'toggle'}
          }
        )
      );
      cards;
    }

Now it shows nothing, only errors in a console.

Javascript errors shown in the web inspector (if applicable):

Uncaught (in promise) SyntaxError: Unexpected identifier 'cards'
    at new Function (<anonymous>)
    at h (config-template-card.js?hacstag=1721775432001:39:4725)
    at $t._evaluateTemplate (config-template-card.js?hacstag=1721775432001:39:5255)
    at config-template-card.js?hacstag=1721775432001:39:4260
    at Array.forEach (<anonymous>)
    at $t._evaluateConfig (config-template-card.js?hacstag=1721775432001:39:4075)
    at $t.render (config-template-card.js?hacstag=1721775432001:39:2733)
    at $t.update (config-template-card.js?hacstag=1721775432001:23:236)
    at $t.performUpdate (config-template-card.js?hacstag=1721775432001:12:4877)
    at $t.scheduleUpdate (config-template-card.js?hacstag=1721775432001:12:4397)

Additional information:

[iantrich]

@claude take a look at resolving this issue within the beta branch

[claude]

Claude finished @iantrich's task in 9m 10s —— View job • claude/issue-191-20260515-2208 • Create PR ➔

---

Analyzing Issue #191

• Read CLAUDE.md and explore codebase
• Identify the root cause of the template evaluation bug
• Implement the fix
• Commit and push changes

Root Cause

The error SyntaxError: Unexpected identifier 'cards' at new Function in 2.0.0-b1 comes from the template evaluator using new Function('return (' + code + ')'). This fails for multi-statement templates with let/const declarations because return (let x = ...) is a syntax error in JavaScript.

Changes Made

1. _evaluateTemplate — fixed multi-statement block template support (src/config-template-card.ts)

Replaced the bare eval(varDef + code) with new Function(..., varDef + 'return eval(__code)'). The key insight:

• new Function provides explicit variable scoping (passes states, user, vars as named parameters, avoiding reliance on closure capture that bundlers can break)
• return eval(__code) inside the function uses eval's natural behavior of returning the last expression value from a statement block
• This means templates like ${ let cards = []; ...; cards; } work correctly — return (let x = ...) would be a syntax error, but return eval('let x = ...; x;') works fine

2. shouldUpdate — fixed template-based entities handling

When entities is a template expression like entities: ${LIGHTS}, the old code did for (const entity of "${LIGHTS}") which iterated over individual characters (string is iterable), causing the card to never re-render on state changes. The fix evaluates the template first if entities is a string.

|