JS in variables causes errors

[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.7-beta.1

Browser and Operating System:
Chrome 145.0.7632.160
Win10x64

Description of problem:

This code used to work in 1.3.7-beta.1:

      - type: custom:config-template-card
        variables:
          child: |
            const c = "Use Me";
            c;
          parent: |
            (passed_var) => {
              const p = "Please " +
                (passed_var ? passed_var : child);
              return p;
            }
        entities:
          - sun.sun
        card:
          type: entities
          entities:
            - entity: sun.sun
              name: ${parent('xxx')}
            - entity: sun.sun
              name: ${parent()}

But it did not work in 1.3.6 & does not in the latest 2.0.0-b1.

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

Error with 1.3.6:

Uncaught (in promise) ReferenceError: child is not defined
    at eval (eval at _evaluateTemplate (config-template-card.js?hacstag=172177543136:905:34), <anonymous>:3:32)
    at eval (eval at _evaluateTemplate (config-template-card.js?hacstag=172177543136:912:16), <anonymous>:3:1)
    at ConfigTemplateCard._evaluateTemplate (config-template-card.js?hacstag=172177543136:912:16)
    at config-template-card.js?hacstag=172177543136:860:40
    at Array.forEach (<anonymous>)
    at ConfigTemplateCard._evaluateConfig (config-template-card.js?hacstag=172177543136:849:32)
    at ConfigTemplateCard._evaluateArray (config-template-card.js?hacstag=172177543136:874:33)
    at config-template-card.js?hacstag=172177543136:854:40
    at Array.forEach (<anonymous>)
    at ConfigTemplateCard._evaluateConfig (config-template-card.js?hacstag=172177543136:849:32)

Error with 2.0.0-b1:

VM478375:3 Uncaught (in promise) SyntaxError: Unexpected token 'const'
    at new Function (<anonymous>)
    at h (config-template-card.js?hacstag=1721775432001:39:4725)
    at $t._evaluateTemplate (config-template-card.js?hacstag=1721775432001:39:5233)
    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._evaluateArray (config-template-card.js?hacstag=1721775432001:39:4420)
    at config-template-card.js?hacstag=1721775432001:39:4145
    at Array.forEach (<anonymous>)
    at $t._evaluateConfig (config-template-card.js?hacstag=1721775432001:39:4075)

Additional information:

[iantrich]

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

[claude]

Claude finished @iantrich's task in 9m 8s —— View job • claude/issue-192-20260515-2209 • Create PR ➔

---

Resolving Issue #192: JS in variables causes errors

Root cause:

There are two related bugs in _evaluateTemplate:

1. Cross-variable references fail — Each named variable was evaluated in a separate eval() call. When parent (an arrow function) captured its closure scope at creation time, child was not yet a named variable in that scope. TypeScript enables strict mode, where var from one eval() call does not propagate to another eval()'s scope. So even though varDef injected var child = vars['child'] in a later eval, the arrow function's closure couldn't see it.

2. const in variable code — Some compiled versions of the card wrapped variable code in new Function('return (' + code + ')'), making const c = ... a syntax error since const isn't valid as an expression.

Fix applied (src/config-template-card.ts):

Instead of evaluating each named variable in its own eval() call (separate scopes), all named variables are now:

1. Declared upfront (var ${varName};) in a single shared scope
2. Assigned via inner eval (${varName} = eval(JSON.stringify(code))) in that same scope

This means closures (like the parent arrow function) see sibling variable names (child) through their shared outer scope. Multi-statement code with const/let/var continues to work because eval() returns the last expression's value regardless of statement types.

Example that now works correctly:

variables:
  child: |
    const c = "Use Me";
    c;
  parent: |
    (passed_var) => {
      const p = "Please " + (passed_var ? passed_var : child);
      return p;
    }

${parent('xxx')} → "Please xxx", ${parent()} → "Please Use Me" ✓

Todo list:

• Read repo structure and source code
• Identify root cause
• Fix _evaluateTemplate in src/config-template-card.ts
• Commit and push fix

[ildar170975]

Fixed with #200