feat: allow using live directive in LitRenderer (#6068)

* feat: allow using `live` directive in LitRenderer Inject the `live` directive into the closure where the render is executed. It's beneficial for cases where components can have their state changed by users to reset their value when the render is called.
vaadin · Feb 20, 2024 · deb0639 · deb0639
1 parent f05d103
commit deb0639
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/...-integration-tests/src/main/java/com/vaadin/flow/data/renderer/tests/LitRendererPage.java b/...-integration-tests/src/main/java/com/vaadin/flow/data/renderer/tests/LitRendererPage.java
@@ -50,6 +50,15 @@ public LitRendererPage() {
         setSimpleLitRendererButton.setId("setSimpleLitRendererButton");
         add(setSimpleLitRendererButton);
 
+        NativeButton setCheckboxRenderer = new NativeButton(
+                "Set LitRenderer with checkbox", e -> {
+                    component.setRenderer(LitRenderer.<String> of(
+                            "<input type='checkbox' .checked='${live(item.checked)}'>")
+                            .withProperty("checked", "2"::equals));
+                });
+        setCheckboxRenderer.setId("setCheckboxRenderer");
+        add(setCheckboxRenderer);
+
         NativeButton removeRendererButton = new NativeButton("Remove renderer",
                 e -> component.setRenderer(null));
         removeRendererButton.setId("removeRendererButton");
@@ -86,7 +95,6 @@ public LitRendererPage() {
                 });
         toggleAttachedButton.setId("toggleAttachedButton");
         add(toggleAttachedButton);
-
     }
 
     private void setLitRenderer(LitRendererTestComponent component) {

diff --git a/...ow-integration-tests/src/test/java/com/vaadin/flow/data/renderer/tests/LitRendererIT.java b/...ow-integration-tests/src/test/java/com/vaadin/flow/data/renderer/tests/LitRendererIT.java
@@ -129,6 +129,16 @@ public void shouldSupportRendererInstanceSpecificProperties() {
         Assert.assertEquals("Details: 0 (details)", details.getText());
     }
 
+    @Test
+    public void shouldBeAbleToUseLiveDirective() {
+        clickElementWithJs("setCheckboxRenderer");
+        WebElement checkbox = findElement(By.cssSelector("#item-0 input"));
+        checkbox.click();
+        clickElementWithJs("longRefreshButton");
+        checkbox = findElement(By.cssSelector("#item-0 input"));
+        Assert.assertFalse(checkbox.isSelected());
+    }
+
     private String getFirstClientCallableLogMessage() {
         return getLogEntries(Level.WARNING).stream()
                 // Discard all but event messages

diff --git a/...arent/vaadin-renderer-flow/src/main/resources/META-INF/resources/frontend/lit-renderer.ts b/...arent/vaadin-renderer-flow/src/main/resources/META-INF/resources/frontend/lit-renderer.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable max-params */
 import { html, render } from 'lit';
+import { live } from 'lit/directives/live.js';
 
 type RenderRoot = HTMLElement & { __litRenderer?: Renderer; _$litPart$?: any };
 
@@ -39,7 +40,7 @@ _window.Vaadin.setLitRenderer = (
   const renderFunction = Function(`
     "use strict";
 
-    const [render, html, returnChannel] = arguments;
+    const [render, html, live, returnChannel] = arguments;
 
     return (root, model, itemKey) => {
       const { item, index } = model;
@@ -57,7 +58,7 @@ _window.Vaadin.setLitRenderer = (
 
       render(html\`${templateExpression}\`, root)
     }
-  `)(render, html, returnChannel);
+  `)(render, html, live, returnChannel);
 
   const renderer: Renderer = (root, _, model) => {
     const { item } = model;