Merge branch 'main' into fix-js-and-linting

Author: JohananOppongAmoateng

src/django_unicorn/call_method_parser.py

@@ -119,7 +119,7 @@ def parse_kwarg(kwarg: str, *, raise_if_unparseable=False) -> dict[str, Any]:
                 # context when the templatetag is rendered, so just return the expr
                 # as a string.
                 value = _get_expr_string(assign.value)
-                return {target.id: value}  # type: ignore
+                return {key: value}  # type: ignore
         else:
             raise InvalidKwargError(f"'{kwarg}' is invalid")
     except SyntaxError as e:
@@ -157,7 +157,7 @@ def parse_call_method_name(
 
     if tree.body and isinstance(statement, ast.Call):
         call = tree.body[0].value  # type: ignore
-        method_name = call.func.id
+        method_name = _get_expr_string(call.func)
         args = [eval_value(arg) for arg in call.args]
         kwargs = {kw.arg: eval_value(kw.value) for kw in call.keywords}
 

src/django_unicorn/components/unicorn_template_response.py

@@ -15,8 +15,8 @@
     MultipleRootComponentElementError,
     NoRootComponentElementError,
 )
-from django_unicorn.settings import get_minify_html_enabled, get_script_location
-from django_unicorn.utils import generate_checksum, html_element_to_string, sanitize_html
+from django_unicorn.settings import get_minify_html_enabled
+from django_unicorn.utils import generate_checksum, html_element_to_string
 
 logger = logging.getLogger(__name__)
 
@@ -159,6 +159,7 @@ def __init__(
         using=None,
         component=None,
         init_js=False,
+        epoch="",
         **kwargs,  # noqa: ARG002
     ):
         super().__init__(
@@ -173,6 +174,7 @@ def __init__(
 
         self.component = component
         self.init_js = init_js
+        self.epoch = epoch or ""
 
     def resolve_template(self, template):
         """Override the TemplateResponseMixin to resolve a list of Templates.
@@ -213,82 +215,25 @@ def render(self):
         # Prepare Data
         frontend_context_variables = self.component.get_frontend_context_variables()
         frontend_context_variables_dict = orjson.loads(frontend_context_variables)
-        checksum = generate_checksum(frontend_context_variables_dict)
+        data_checksum = generate_checksum(frontend_context_variables_dict)
 
         # Modify Attributes
         root_element.set("unicorn:id", self.component.component_id)
         if hasattr(self.component, "component_name"):
             root_element.set("unicorn:name", self.component.component_name)
         root_element.set("unicorn:key", str(self.component.component_key or ""))
-        root_element.set("unicorn:checksum", checksum)
         root_element.set("unicorn:data", frontend_context_variables)
         root_element.set("unicorn:calls", orjson.dumps(self.component.calls).decode("utf-8"))
 
-        # Calculate content hash (without script)
+        # Calculate content hash (without script and without checksum)
         rendered_template_no_script = html_element_to_string(root_element)
         content_hash = generate_checksum(rendered_template_no_script)
+        self.component._content_hash = content_hash
 
-        rendered_template = rendered_template_no_script
-
-        # Inject Scripts
-        if self.init_js:
-            init = {
-                "id": self.component.component_id,
-                "name": self.component.component_name,
-                "key": self.component.component_key,
-                "data": orjson.loads(frontend_context_variables),
-                "calls": self.component.calls,
-                "hash": content_hash,
-            }
-            init_json = orjson.dumps(init).decode("utf-8")
-            init_json_safe = sanitize_html(init_json)
-            json_element_id = f"unicorn:data:{self.component.component_id}"
-            init_script = (
-                f"Unicorn.componentInit(JSON.parse(document.getElementById('{json_element_id}').textContent));"
-            )
+        # Set the data checksum on the root element
+        root_element.set("unicorn:meta", data_checksum)
 
-            # Create JSON script tag
-            json_tag = html.Element("script", type="application/json", id=json_element_id)
-            json_tag.text = init_json_safe
-
-            if self.component.parent:
-                self.component._init_script = init_script
-                self.component._json_tag = json_tag
-            else:
-                json_tags = [json_tag]
-
-                descendants = []
-                descendants.append(self.component)
-                while descendants:
-                    descendant = descendants.pop()
-                    for child in descendant.children:
-                        init_script = f"{init_script} {child._init_script}"
-
-                        if hasattr(child, "_json_tag"):
-                            json_tags.append(child._json_tag)
-                            del child._json_tag
-
-                        descendants.append(child)
-
-                script_tag = html.Element("script", type="module")
-                script_content = (
-                    "if (typeof Unicorn === 'undefined') { "
-                    "console.error('Unicorn is missing. Do you need {% load unicorn %} or {% unicorn_scripts %}?') "
-                    "} else { " + init_script + " }"
-                )
-                script_tag.text = script_content
-
-                if get_script_location() == "append":
-                    root_element.append(script_tag)
-                    for t in json_tags:
-                        root_element.append(t)
-                    rendered_template = html_element_to_string(root_element)
-                else:
-                    root_html = html_element_to_string(root_element)
-                    script_html = html_element_to_string(script_tag)
-                    for t in json_tags:
-                        script_html += html_element_to_string(t)
-                    rendered_template = root_html + script_html
+        rendered_template = html_element_to_string(root_element)
 
         self.component.rendered(rendered_template)
         response.content = rendered_template

src/django_unicorn/components/unicorn_view.py

@@ -411,7 +411,7 @@ def post_parse(self):
         pass
 
     @timed
-    def render(self, *, init_js=False, extra_context=None, request=None) -> str:
+    def render(self, *, init_js=False, extra_context=None, request=None, epoch=None) -> str:
         """
         Renders a UnicornView component with the public properties available. Delegates to a
         UnicornTemplateResponse to actually render a response.
@@ -422,6 +422,7 @@ def render(self, *, init_js=False, extra_context=None, request=None) -> str:
             param request: Set the `request` for rendering. Usually it will be in the context,
                 but it is missing when the component is re-rendered as a direct view, so it needs
                 to be set explicitly.
+            param epoch: Set the `epoch` for rendering.
         """
 
         if extra_context is not None:
@@ -438,6 +439,7 @@ def render(self, *, init_js=False, extra_context=None, request=None) -> str:
             context=self.get_context_data(),
             component=self,
             init_js=init_js,
+            epoch=epoch,
         )
 
         # render_to_response() could only return a HttpResponse, so check for render()

src/django_unicorn/static/unicorn/js/attribute.js

@@ -60,7 +60,7 @@ export class Attribute {
         if (
           actionEventType !== "id" &&
           actionEventType !== "name" &&
-          actionEventType !== "checksum"
+          actionEventType !== "meta"
         ) {
           this.eventType = actionEventType;
         }

src/django_unicorn/static/unicorn/js/component.js

@@ -75,7 +75,7 @@ export class Component {
       throw Error("No id found");
     }
 
-    this.refreshChecksum();
+    this.refreshMeta();
   }
 
   /**
@@ -430,10 +430,25 @@ export class Component {
   }
 
   /**
-   * Refresh the checksum.
+   * Refresh the meta.
    */
-  refreshChecksum() {
-    this.checksum = this.root.getAttribute("unicorn:checksum");
+  refreshMeta() {
+    const meta = this.root.getAttribute("unicorn:meta");
+
+    if (meta && meta.indexOf(":") > -1) {
+      const parts = meta.split(":");
+      this.checksum = parts[0];
+
+      if (parts.length > 1) {
+        this.hash = parts[1];
+      }
+
+      if (parts.length > 2) {
+        this.epoch = parts[2];
+      }
+    } else {
+      this.checksum = meta;
+    }
   }
 
   /**

src/django_unicorn/static/unicorn/js/element.js

@@ -375,7 +375,7 @@ export class Element {
    * Whether the element is a root node or not.
    */
   isRoot() {
-    // A litte hacky, but assume that an element with `unicorn:checksum` is a component root
-    return hasValue(this.el.getAttribute("unicorn:checksum"));
+    // A litte hacky, but assume that an element with `unicorn:meta` is a component root
+    return hasValue(this.el.getAttribute("unicorn:meta"));
   }
 }

src/django_unicorn/static/unicorn/js/messageSender.js

@@ -24,13 +24,12 @@ export function send(component, callback) {
   component.currentActionQueue = component.actionQueue;
   component.actionQueue = [];
 
+  const epoch = Date.now();
   const body = {
     id: component.id,
     data: component.data,
-    checksum: component.checksum,
+    meta: `${component.checksum}:${component.hash}:${epoch}`,
     actionQueue: component.currentActionQueue,
-    epoch: Date.now(),
-    hash: component.hash,
   };
 
   const headers = {
@@ -87,9 +86,20 @@ export function send(component, callback) {
         return;
       }
 
-      if (responseJson.epoch) {
-        if (responseJson.epoch > component.latestActionEpoch) {
-          component.latestActionEpoch = responseJson.epoch;
+      let { meta } = responseJson;
+      let { epoch } = responseJson;
+
+      if (meta && meta.indexOf(":") > -1) {
+        const parts = meta.split(":");
+
+        if (parts.length > 2) {
+          epoch = parts[2];
+        }
+      }
+
+      if (epoch) {
+        if (epoch > component.latestActionEpoch) {
+          component.latestActionEpoch = epoch;
         } else {
           return;
         }
@@ -151,12 +161,23 @@ export function send(component, callback) {
 
       component.errors = responseJson.errors || {};
       component.return = responseJson.return || {};
-      component.hash = responseJson.hash;
 
       let parent = responseJson.parent || {};
       const rerenderedComponent = responseJson.dom || "";
       const partials = responseJson.partials || [];
-      const { checksum } = responseJson;
+
+      if (meta && meta.indexOf(":") > -1) {
+        const parts = meta.split(":");
+        component.checksum = parts[0];
+        component.hash = parts[1];
+
+        if (parts.length > 2) {
+          component.epoch = parts[2];
+        }
+      } else {
+        component.checksum = meta;
+        component.hash = responseJson.hash;
+      }
 
       // Handle poll
       const poll = responseJson.poll || {};
@@ -203,13 +224,25 @@ export function send(component, callback) {
             });
           }
 
-          if (parent.checksum) {
+          if (parent.meta) {
+            const parentMeta = parent.meta;
+
+            if (parentMeta.indexOf(":") > -1) {
+              const parts = parentMeta.split(":");
+              parentComponent.checksum = parts[0];
+              parentComponent.hash = parts[1];
+
+              if (parts.length > 2) {
+                parentComponent.epoch = parts[2];
+              }
+            } else {
+              parentComponent.checksum = parentMeta;
+            }
+
             parentComponent.root.setAttribute(
-              "unicorn:checksum",
-              parent.checksum
+              "unicorn:meta",
+              parentComponent.checksum
             );
-
-            parentComponent.refreshChecksum();
           }
 
           // Set parent component hash
@@ -249,9 +282,8 @@ export function send(component, callback) {
           }
         }
 
-        if (checksum) {
-          component.root.setAttribute("unicorn:checksum", checksum);
-          component.refreshChecksum();
+        if (meta) {
+          component.root.setAttribute("unicorn:meta", component.checksum);
         }
       } else if (rerenderedComponent) {
         component.morphRoot(rerenderedComponent);

src/django_unicorn/static/unicorn/js/unicorn.js

@@ -49,6 +49,8 @@ export function init(
     });
   }
 
+  scan();
+
   return {
     messageUrl,
     csrfTokenHeaderName,
@@ -83,11 +85,31 @@ export function insertComponentFromDom(node) {
   const nodeId = node.getAttribute("unicorn:id");
 
   if (!components[nodeId]) {
+    const fullMeta = node.getAttribute("unicorn:meta");
+    let meta = fullMeta;
+    let hash = "";
+    let epoch = "";
+
+    if (fullMeta && fullMeta.indexOf(":") > -1) {
+      const parts = fullMeta.split(":");
+      meta = parts[0];
+
+      if (parts.length > 1) {
+        hash = parts[1];
+      }
+
+      if (parts.length > 2) {
+        epoch = parts[2];
+      }
+    }
+
     const args = {
       id: nodeId,
       name: node.getAttribute("unicorn:name"),
       key: node.getAttribute("unicorn:key"),
-      checksum: node.getAttribute("unicorn:checksum"),
+      checksum: meta,
+      hash,
+      epoch,
       data: JSON.parse(node.getAttribute("unicorn:data")),
       calls: JSON.parse(node.getAttribute("unicorn:calls")),
     };

src/django_unicorn/static/unicorn/js/utils.js

@@ -104,7 +104,7 @@ export const FilterAny = {
  */
 export const FilterSkipNested = {
   acceptNode: (node) => {
-    if (node.getAttribute("unicorn:checksum")) {
+    if (node.getAttribute("unicorn:meta")) {
       // with a tree walker, child nodes are also rejected
       return NodeFilter.FILTER_REJECT;
     }

src/django_unicorn/views/message.py

@@ -211,7 +211,7 @@ def _process_request(self, component_request: ComponentRequest) -> dict:
         self._handle_queued_messages(component, return_data)
 
         # Render
-        rendered_component = component.render(request=self.request)
+        rendered_component = component.render(request=self.request, epoch=component_request.epoch)
         component.rendered(rendered_component)
 
         # Restore queued messages