feat: add ll_replicate_default_ctx as a flag

Author: rajiteh

README.md

@@ -43,6 +43,7 @@ Add through [HACS](https://github.com/custom-components/hacs)
 | ll_context        | object  | **Optional** | An object that can be accessed inside of EtaJS as `context`| ``                  |
 | ll_template_engine| string  | **Optional** | Template processor ('etajs', 'jinja2')                     | 'etajs'             |
 | ll_card_config    | string  | **Optional** | Template returning a JSON object, merged to linked card    | ``                  |
+| ll_replicate_ctx  | boolean | **Optional** | Replicate context values to linked card on first render    | `true`              |
 
 | Name              | Type    | Requirement  | Description                                                                                               | Default             |
 | ----------------- | ------- | ------------ | --------------------------------------------------------------------------------------------------------- | ------------------- |

docs_site/create-your-first-template.md

@@ -136,6 +136,7 @@ By default, Linked Lovelace uses the EtaJS template engine for all template rend
 
 ```yaml
 ll_key: jinja2-example
+ll_template_engine: jinja2
 show_name: true
 type: button
 tap_action:

rollup.config.js

@@ -11,7 +11,8 @@ import nodePolyfills from 'rollup-plugin-node-polyfills'
 
 
 
-const dev = process.env.ROLLUP_WATCH;
+const watch = process.env.ROLLUP_WATCH;
+const dev = process.env.NODE_ENV === 'development';
 
 const serveopts = {
   contentBase: ['./dist'],
@@ -36,7 +37,7 @@ const plugins = [
       // left-hand side can be an absolute path, a path
       // relative to the current directory, or the name
       // of a module in node_modules
-      'yaml': [ 'parse' ],
+      'yaml': ['parse'],
     }
   }),
   typescript({
@@ -48,12 +49,12 @@ const plugins = [
   babel({
     exclude: ['node_modules/**', 'src/**/*.test.ts'],
   }),
-  dev && serve(serveopts),
-  !dev && terser(),
+  watch && serve(serveopts),
+  !watch && !dev && terser(),
   eta({
     include: ['**/*.eta', '**/*.html'], // optional, '**/*.eta' by default
     exclude: ['**/index.html'], // optional, undefined by default
-}),
+  }),
 ];
 
 export default [

src/helpers/templates.test.ts

@@ -770,7 +770,6 @@ describe('[function] updateCardTemplate', () => {
     expect(await updateCardTemplate(card, { template })).toStrictEqual({
       type: 'template',
       ll_template: 'template',
-      ll_context: {},
       number: 3,
       ll_keys: { 'number': 'number' },
     });
@@ -1382,7 +1381,6 @@ describe('[function] updateCardTemplate v2', () => {
     expect(await updateCardTemplate(card, { template })).toStrictEqual({
       type: 'template',
       ll_template: 'template',
-      ll_context: {},
       number: 3,
       ll_keys: { 'number': 'number' },
     });
@@ -1445,6 +1443,115 @@ describe('[function] updateCardTemplate v2', () => {
     expect(oldTemplate).toStrictEqual(template)
   });
 
+  test('Not Overriding linked LL_Context when ll_replicate_ctx is true', async () => {
+    const template: DashboardCard = {
+      type: "custom_collapsable-cards",
+      ll_key: "test_card",
+      ll_context: {
+        group: "sensor.tempratures_koelkasten",
+        name: "Temperatuur"
+      },
+      title_card: {
+        type: "tile",
+        name: "<%= context.name %>",
+        entity: "<%= context.group %>"
+      },
+    };
+    const card: DashboardCard = {
+      type: "text",
+      ll_template: "test_card",
+      ll_context: {
+        group: "sensor.tempratures_another",
+      }
+    };
+    const oldTemplate = JSON.parse(JSON.stringify(template))
+    expect(await updateCardTemplate(card, { [template.ll_key!]: template })).toStrictEqual({
+      type: "custom_collapsable-cards",
+      ll_template: "test_card",
+      ll_context: {
+        group: "sensor.tempratures_another",
+        name: "Temperatuur"
+      },
+      title_card: {
+        type: "tile",
+        name: "Temperatuur",
+        entity: "sensor.tempratures_another"
+      },
+    });
+    expect(oldTemplate).toStrictEqual(template)
+  });
+
+
+  test('Not Replicating LL_Context when ll_replicate_ctx is false', async () => {
+    const template: DashboardCard = {
+      type: "custom_collapsable-cards",
+      ll_replicate_ctx: false,
+      ll_key: "test_card",
+      ll_context: {
+        group: "sensor.tempratures_koelkasten",
+        name: "Temperatuur"
+      },
+      title_card: {
+        type: "tile",
+        name: "<%= context.name %>",
+        entity: "<%= context.group %>"
+      },
+    };
+    const card: DashboardCard = {
+      type: "text",
+      ll_template: "test_card"
+    };
+    const oldTemplate = JSON.parse(JSON.stringify(template))
+    expect(await updateCardTemplate(card, { [template.ll_key!]: template })).toStrictEqual({
+      type: "custom_collapsable-cards",
+      ll_template: "test_card",
+      title_card: {
+        type: "tile",
+        name: "Temperatuur",
+        entity: "sensor.tempratures_koelkasten"
+      },
+    });
+    expect(oldTemplate).toStrictEqual(template)
+  });
+
+  test('Not Overriding linked LL_Context when ll_replicate_ctx is false', async () => {
+    const template: DashboardCard = {
+      type: "custom_collapsable-cards",
+      ll_replicate_ctx: false,
+      ll_key: "test_card",
+      ll_context: {
+        group: "sensor.tempratures_koelkasten",
+        name: "Temperatuur"
+      },
+      title_card: {
+        type: "tile",
+        name: "<%= context.name %>",
+        entity: "<%= context.group %>"
+      },
+    };
+    const card: DashboardCard = {
+      type: "text",
+      ll_template: "test_card",
+      ll_context: {
+        group: "sensor.tempratures_another",
+      },
+    };
+    const oldTemplate = JSON.parse(JSON.stringify(template))
+    expect(await updateCardTemplate(card, { [template.ll_key!]: template })).toStrictEqual({
+      type: "custom_collapsable-cards",
+      ll_template: "test_card",
+      ll_context: {
+        group: "sensor.tempratures_another",
+      },
+      title_card: {
+        type: "tile",
+        name: "Temperatuur",
+        entity: "sensor.tempratures_another"
+      },
+    });
+    expect(oldTemplate).toStrictEqual(template)
+  });
+
   test('merges ll_card_config complex object into main card config', async () => {
     const template: DashboardCard = {
       type: 'custom:complex-card',
@@ -1508,15 +1615,52 @@ describe('[function] updateCardTemplate v2', () => {
     };
     const spy = jest.spyOn(console, 'error').mockImplementation(() => { });
     const result = await updateCardTemplate(card, { complex_card: template });
-    expect(result).toMatchObject({
+    expect(result).toStrictEqual({
       type: 'custom:complex-card',
       ll_template: 'complex_card',
-      foo: 'bar'
+      foo: 'bar',
+      ll_error: "Error rendering template 'complex_card': Error: Failed to parse ll_card_config for template 'complex_card': SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)",
+      ll_template_card: {
+        foo: "bar",
+        ll_card_config: "{invalid json}",
+        ll_key: "complex_card",
+        ll_replicate_ctx: true,
+        type: "custom:complex-card",
+      }
     });
-    expect(result.ll_card_config).toBe('{invalid json}');
+    expect(result.ll_template_card.ll_card_config).toBe('{invalid json}');
     expect(spy).toHaveBeenCalledWith(
       new Error("Failed to parse ll_card_config for template 'complex_card': SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)"),
     );
     spy.mockRestore();
   });
+
+
+  test('linked card error information is removed when error is resolved', async () => {
+    const template: DashboardCard = {
+      type: 'custom:complex-card',
+      ll_key: 'complex_card',
+      ll_card_config: '{"foo": "barbaz"}',
+      foo: 'bar'
+    };
+    const card: DashboardCard = {
+      type: 'custom:complex-card',
+      ll_template: 'complex_card',
+      foo: 'bar',
+      ll_error: "some error from previous state",
+      ll_template_card: {
+        foo: "bar",
+        ll_card_config: "{invalid json}",
+        ll_key: "complex_card",
+        ll_replicate_ctx: true,
+        type: "custom:complex-card",
+      }
+    };
+    const result = await updateCardTemplate(card, { complex_card: template });
+    expect(result).toStrictEqual({
+      type: 'custom:complex-card',
+      ll_template: 'complex_card',
+      foo: 'barbaz',
+    });
+  });
 });

src/helpers/templates.ts

@@ -38,15 +38,23 @@ export const updateCardTemplate = async (
   }
 
   const llKeys = targetCard.ll_keys;
-  const llContext = targetCard.ll_context;
+  const llContext = { ...templateContext };
   const llTemplate = targetCard.ll_template;
-  const templateCard = templateCards[llTemplate];
+  const templateCard = { ...templateCards[llTemplate] };
+
+  if (templateCard.ll_replicate_ctx === undefined) {
+    templateCard.ll_replicate_ctx = true;
+  }
 
   let engineType: TemplateEngineType = 'eta';
   if (templateCard.ll_template_engine === 'jinja2') engineType = 'jinja2';
 
   // destination card context should override template context
-  templateContext = { ...(templateCard?.ll_context || {}), ...templateContext };
+  templateContext = { ...(templateCard.ll_context || {}), ...templateContext };
+
+  // Delete last error if it exists
+  delete targetCard.ll_error;
+  delete targetCard.ll_template_card;
 
   try {
     // Render the template with the context
@@ -68,36 +76,34 @@ export const updateCardTemplate = async (
   } catch (e) {
     console.error(e);
     targetCard.ll_error = `Error rendering template '${llTemplate}': ${e}`;
+    targetCard.ll_template_card = templateCard;
   }
 
-  // Set a deterministic key order to avoid noisy diffs
-  targetCard = {
-    ll_error: targetCard.ll_error,
-    ll_template: llTemplate,
-    ll_context: llContext,
-    ll_keys: llKeys,
-    ...targetCard
-  };
+  // Set special keys
+  targetCard.ll_template = llTemplate;
+  targetCard.ll_context = templateCard.ll_replicate_ctx ? templateContext : llContext;
+  targetCard.ll_keys = llKeys;
 
   // Clean up empty, unused or undefined properties
-  delete targetCard.ll_key;
-
-  if (!targetCard.ll_keys) {
-    delete targetCard.ll_keys;
-  }
+  if (!targetCard.ll_keys || Object.keys(targetCard.ll_keys).length === 0) delete targetCard.ll_keys;
+  if (!targetCard.ll_context || Object.keys(targetCard.ll_context).length === 0) delete targetCard.ll_context;
 
-  if (!targetCard.ll_context) {
-    delete targetCard.ll_context;
-  }
-
-  if (!targetCard.ll_error) {
-    delete targetCard.ll_error;
+  // Clean up other properties that should not be in the final card
+  delete targetCard.ll_key;
+  delete targetCard.ll_card_config;
+  delete targetCard.ll_template_engine;
+  delete targetCard.ll_replicate_ctx;
+
+  // Ensure keys are sorted in a deterministic order to avoid noisy diffs
+  const orderedKeys = ['ll_template', 'll_context', 'll_keys', 'll_error'].filter(k => k in targetCard);
+  const otherKeys = Object.keys(targetCard).filter(k => !orderedKeys.includes(k));
+  const sortedTargetCard: any = {};
+  for (const key of [...orderedKeys, ...otherKeys]) {
+    sortedTargetCard[key] = targetCard[key];
   }
+  targetCard = sortedTargetCard as DashboardCard;
 
-
-  targetCard = await handleLLKeys(targetCard, templateCards, templateContext);
-
-  return targetCard
+  return await handleLLKeys(targetCard, templateCards, templateContext);
 };
 
 const handleLLKeys = async (targetCard: DashboardCard,

src/types.ts

@@ -41,6 +41,8 @@ export interface LLCard extends LovelaceCardConfig {
   ll_template?: string
   sections?: LovelaceCardConfig[]
   ll_context?: Record<string, any>
+  // A boolean to indicate if the default context values should be replicated in the ll_context of dashboard cards (defaults to true)
+  ll_replicate_ctx?: boolean
   ll_template_engine?: 'eta' | 'jinja2'
   // A template string for the card configuration that may return a complex object in JSON, it will
   // be merged with the main card config