Merge pull request #115 from hydrostack/add-key-to-component-elements

Add key to component elements

docs/content/features/parameters.md

@@ -150,17 +150,6 @@ You can also use `key` to force re-render of your component:
 Where `CalculateHashCode` is an extension method returning unique hash code for the collection.
 Now, whenever `Model.Items` changes, Hydro will re-render the component `Items` and pass new parameter.
 
-### Key attribute behavior in the UI
-
-By default, when a component with the same key attribute is
-re-rendered, its HTML is replaced (not morphed). Since `key` is also used to force re-render of the component,
-there might be a case where you want to morph the component HTML instead, for example when the rendered component
-is the one where might be the focus. To do that, use `key-behavior` attribute:
-
-```razor
-<currency key="PL" key-behavior="Morph" />
-```
-
 ## Caching
 
 Let's imagine you need to show list of customers in a table. It's good to use caching per request for such rows data,

src/HydroComponent.cs

@@ -565,7 +565,7 @@ private async Task<string> RenderOnlineNestedComponent(IPersistentState persiste
 
         if (IsComponentIdRendered(componentId))
         {
-            return GetComponentPlaceholderTemplate(componentId, Key, KeyBehavior);
+            return GetComponentPlaceholderTemplate(componentId);
         }
 
         if (!await AuthorizeAsync())
@@ -580,12 +580,8 @@ private async Task<string> RenderOnlineNestedComponent(IPersistentState persiste
         return await GenerateComponentHtml(componentId, persistentState, includeScripts: true);
     }
 
-    private static string GetComponentPlaceholderTemplate(string componentId, string key, KeyBehavior keyBehavior)
-    {
-        var useKey = !string.IsNullOrWhiteSpace(key) && keyBehavior == KeyBehavior.Replace;
-
-        return $"<div id=\"{componentId}\" {(useKey ? $"key=\"{key}\"" : "")} hydro hydro-placeholder></div>";
-    }
+    private static string GetComponentPlaceholderTemplate(string componentId) =>
+        $"<div id=\"{componentId}\" key=\"{componentId}\" hydro hydro-placeholder></div>";
 
     private async Task<string> RenderStaticComponent(IPersistentState persistentState)
     {
@@ -636,11 +632,7 @@ private async Task<string> GenerateComponentHtml(string componentId, IPersistent
         rootElement.SetAttributeValue("id", componentId);
         rootElement.SetAttributeValue("hydro-name", GetType().Name);
         rootElement.SetAttributeValue("x-data", "hydro");
-
-        if (!string.IsNullOrWhiteSpace(Key) && KeyBehavior == KeyBehavior.Replace)
-        {
-            rootElement.SetAttributeValue("key", Key);
-        }
+        rootElement.SetAttributeValue("key", componentId);
 
         var hydroAttribute = rootElement.SetAttributeValue("hydro", null);
         hydroAttribute.QuoteType = AttributeValueQuote.WithoutValue;

src/PropertyInjector.cs

@@ -34,7 +34,7 @@ private static IEnumerable<PropertyInfo> GetPropertyInfos(Type type)
         var viewComponentType = typeof(TagHelper);
         var hydroComponentType = typeof(HydroComponent);
 
-        var baseProps = new[] { "Key", "KeyBehavior" };
+        var baseProps = new[] { "Key", "IsModelTouched", "TouchedProperties" };
 
         var propertyInfos = type.GetProperties(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic)
             .Where(p => (baseProps.Contains(p.Name) && p.DeclaringType == hydroComponentType)