Optimize page state to have smaller payload

app/javascript/drivers/index.js

@@ -23,7 +23,7 @@ function find(element) {
       invokeCommand: formDriver.invokeCommand
     }
 
-  if (turboMethod && turboMethod.length > 0)
+  if (turboMethod?.length)
     return {
       name: 'method',
       reason: 'Element defines data-turbo-method.',

app/javascript/index.js

@@ -32,7 +32,7 @@ function buildCommandPayload(id, element) {
     csrfToken: document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'), // -- Rails CSRF token
     id, //-------------------------------------------------------------------------------------- Uniquely identifies the command invocation
     name: element.getAttribute(schema.commandAttribute), //------------------------------------- Command name
-    elementId: element.id.length > 0 ? element.id : null, //------------------------------------ ID of the element that triggered the command
+    elementId: element.id.length ? element.id : null, //---------------------------------------- ID of the element that triggered the command
     elementAttributes: elements.buildAttributePayload(element), //------------------------------ Attributes of the element that triggered the command
     startedAt: Date.now(), //------------------------------------------------------------------- Start time of when the command was invoked
     state: {

app/javascript/state/index.js

@@ -26,7 +26,11 @@ const save = () => {
     pages: { ...saved.pages }
   }
 
-  fresh.pages[location.pathname] = { ...fresh.pages[location.pathname], ...page.buildState() }
+  // update the current page's state entry
+  const pageKey = location.pathname
+  const pageState = page.buildState()
+  Object.values(pageState).length ? (fresh.pages[pageKey] = pageState) : delete fresh.pages[pageKey]
+
   storage.save(key, fresh)
 }
 

app/javascript/state/page.js

@@ -12,10 +12,11 @@ const buildState = () => {
   return elements.reduce((memo, element) => {
     const attributes = JSON.parse(element.getAttribute(schema.stateAttributesAttribute))
     if (element.id) {
-      memo[element.id] = attributes.reduce((acc, name) => {
+      const stateAttributes = attributes.reduce((acc, name) => {
         if (element.hasAttribute(name)) acc[name] = element.getAttribute(name) || name
         return acc
       }, {})
+      if (Object.values(stateAttributes).length) memo[element.id] = stateAttributes
     }
     return memo
   }, {})

test/dummy/db/schema.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # This file is auto-generated from the current state of the database. Instead
 # of editing this file, please use the migrations feature of Active Record to
 # incrementally modify your database, and then regenerate this schema definition.