[Perf] Partial updates

assets/svelte/components/PageAstNode.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {
+    selectedAstElementId,
     selectedAstElement,
     slotTargetElement,
     highlightedAstElement,
@@ -8,7 +9,7 @@
     setSelectedDom,
   } from "$lib/stores/page"
   import { draggedComponentDefinition } from "$lib/stores/dragAndDrop"
-  import { updateNodeContent, updateAst } from "$lib/utils/ast-manipulation"
+  import { updateNodeContent, updateNode } from "$lib/utils/ast-manipulation"
   import { elementCanBeDroppedInTarget } from "$lib/utils/drag-helpers"
   import type { AstNode } from "$lib/types"
   export let node: AstNode
@@ -88,7 +89,7 @@
     }
     if (children.length === 0) {
       if (target.innerText !== node.content) {
-        updateNodeContent(node, target.innerText)
+        updateNodeContent($selectedAstElementId, node, target.innerText)
       }
     } else {
       let tmpClone = target.cloneNode(true) as HTMLElement
@@ -97,7 +98,7 @@
       let newText = tmpClone.textContent?.trim() || ""
       if (node.content[stringChildIndex] !== newText) {
         node.content[stringChildIndex] = newText
-        updateAst()
+        updateNode($selectedAstElementId, node)
       }
     }
   }

assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte

@@ -6,6 +6,8 @@
     selectedAstElementId,
     parentOfSelectedAstElement,
     grandParentOfSelectedAstElement,
+    parentSelectedAstElementId,
+    grandParentSelectedAstElementId,
   } from "$lib/stores/page"
   import { findHoveredSiblingIndex, getBoundingRect, getDragDirection, type Coords } from "$lib/utils/drag-helpers"
   import { live } from "$lib/stores/live"
@@ -168,7 +170,9 @@
   }
 
   function applyNewOrder() {
-    let parent = isParent ? $grandParentOfSelectedAstElement : $parentOfSelectedAstElement
+    let [parent, parentId] = isParent
+      ? [$grandParentOfSelectedAstElement, $grandParentSelectedAstElementId]
+      : [$parentOfSelectedAstElement, $parentSelectedAstElementId]
 
     if (newIndex !== null && newIndex !== dragElementInfo.selectedIndex && !!parent) {
       // Reordering happened, apply new order
@@ -188,9 +192,8 @@
         parts[parts.length - 1] = newSelectedIndex.toString()
         $selectedAstElementId = parts.join(".")
       }
-      $pageAst = [...$pageAst]
       // Update in the server
-      $live.pushEvent("update_page_ast", { id: $pageInfo.id, ast: $pageAst })
+      $live.pushEvent("update_page_node", { id: $pageInfo.id, node_id: parentId, node: parent })
     }
   }
 

assets/svelte/utils/ast-manipulation.ts

@@ -4,10 +4,10 @@ import { get } from "svelte/store"
 import type { AstNode, Page, PageInfo } from "$lib/types"
 import { getParentNodeId } from "./ast-helpers"
 
-export function updateNodeContent(node, text) {
+export function updateNodeContent(path, node, text) {
   if (node && isAstElement(node)) {
     node.content = [text]
-    updateAst()
+    updateNode(path, node)
   }
 }
 
@@ -18,15 +18,32 @@ export function updateAst() {
   live.pushEvent("update_page_ast", { id: info.id, ast })
 }
 
+export function updateNode(path, node) {
+  let live = get(liveStore)
+  let info: PageInfo = get(pageInfo)
+  live.pushEvent("update_page_node", { id: info.id, node_id: path, node: node })
+}
+
 export function deleteAstNode(astElementId: string) {
   let ast: AstNode[] = get(pageAst)
 
   let astElement = findAstElement(ast, astElementId)
   let parentId = getParentNodeId(astElementId)
-  let content = parentId && parentId !== "root" ? findAstElement(ast, parentId)?.content : ast
+  let content
+  let parentNode
+  if (parentId && parentId !== "root") {
+    parentNode = findAstElement(ast, parentId)
+    content = parentNode.content
+  } else {
+    content = ast
+  }
   if (content) {
     let targetIndex = (content as unknown[]).indexOf(astElement)
     content.splice(targetIndex, 1)
-    updateAst()
+    if (parentNode) {
+      updateNode(parentId, parentNode)
+    } else {
+      updateAst()
+    }
   }
 }

lib/beacon/live_admin/live/page_editor_live/edit.ex

@@ -55,6 +55,16 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Edit do
     {:noreply, socket}
   end
 
+  def handle_event("update_page_node", %{"node_id" => path, "node" => node}, socket) do
+    send_update(Beacon.LiveAdmin.PageEditorLive.FormComponent,
+      id: "page-editor-form",
+      path: path,
+      node: node
+    )
+
+    {:noreply, socket}
+  end
+
   def handle_event(
         "render_component_in_page",
         %{"component_id" => component_id, "page_id" => page_id},

lib/beacon/live_admin/live/page_editor_live/form_component.ex

@@ -88,7 +88,17 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do
     deleted_attrs = Map.get(payload, :deleted, [])
     ast = VisualEditor.update_node(socket.assigns.builder_page_ast, path, attrs, deleted_attrs)
 
-    # TODO: Don't save immediately. Debounce serializing this to a template
+    update_template_later(socket, ast)
+  end
+
+  # changed element from visual editor control
+  def update(%{path: path, node: node}, %{assigns: %{editor: "visual"}} = socket) do
+    ast = VisualEditor.replace_node(socket.assigns.builder_page_ast, path, node)
+
+    update_template_later(socket, ast)
+  end
+
+  defp update_template_later(socket, ast) do
     template = Beacon.Template.HEEx.HEExDecoder.decode(ast)
     params = Map.merge(socket.assigns.form.params, %{"template" => template})
     changeset = Content.change_page(socket.assigns.site, socket.assigns.page, params)

lib/beacon/live_admin/live/page_editor_live/new.ex

@@ -88,6 +88,16 @@ defmodule Beacon.LiveAdmin.PageEditorLive.New do
     {:noreply, socket}
   end
 
+  def handle_event("update_page_node", %{"node_id" => path, "node" => node}, socket) do
+    send_update(Beacon.LiveAdmin.PageEditorLive.FormComponent,
+      id: "page-editor-form",
+      path: path,
+      node: node
+    )
+
+    {:noreply, socket}
+  end
+
   def handle_event("select_element", %{"path" => path}, socket) do
     ElementSelection.select_element(path, socket)
   end