Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Way more diff data transfered over the wire when using Surface component than plain LV even if rendered html is very similar

Aperta
  • Qualcosa non va?
#615 2 commenti 7 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
elixir
Ambito
backend, performance

Direzione di ricerca

Start with the SurfaceBulma.Button implementation linked at lib/surface_bulma/button.ex#L97 and compare its rendered output with the plain LiveView templates in the report. Reproduce the favorite? toggle on the stated Surface and LiveView versions, inspect the rendering and diff path, and consider the issue done when equivalent component HTML no longer sends substantially more diff data.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Describe the bug

Can't tell if this is a bug, more likely a flaw or technical debt, but I hope it's not the intended behavior.

Altering a SurfaceBulma.Button disabled attribute (only) produces way too much data and I don't think this has anything to do with the component itself, but rather the rendering engine.

Please note that in both cases (Surface and plain LiveView) the provided code is part of a component in a prepended list of such components, thus only the changed component is sent in each case.

1. Plain LiveView

Template code

<button phx-click="add_favorite" disabled={@card.favorite?} size="large" phx-target={@myself}>Add to Favorites</button>
<button phx-click="remove_favorite" disabled={[email protected]?} size="large" phx-target={@myself}>Remove from favorites</button>

Rendered html

<button phx-click="add_favorite" size="large" phx-target="1">Add to Favorites</button>
<button phx-click="remove_favorite" size="large" phx-target="1" disabled="">Remove from favorites</button>

Diffs when @card.favorite? toggles:

{
  "2": {
    "5": {
      "d": [
        [
          2
        ]
      ]
    },
    "8": "3"
  },
  "c": {
    "2": {
      "4": " disabled",
      "7": ""
    }
  }
}
2. SurfaceBulma.Button

Template code:

<Button click="add_favorite" disabled={@card.favorite?} size="large">Add to Favorites</Button>
<Button click="remove_favorite" disabled={[email protected]?} size="large">Remove from favorites</Button>

Rendered html:

<button phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;add_favorite&quot;,&quot;target&quot;:1}]]" type="button" class="button is-large">
    Add to Favorites
  </button>
<button phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;remove_favorite&quot;,&quot;target&quot;:1}]]" type="button" class="button is-large" disabled="">
    Remove from favorites
  </button>

Diffs when @card.favorite? toggles:

{
  "2": {
    "5": {
      "d": [
        [
          1
        ]
      ]
    },
    "8": "1"
  },
  "c": {
    "1": {
      "3": {
        "0": {
          "0": {
            "0": {
              "0": {
                "0": " phx-click=\"[[&quot;push&quot;,{&quot;event&quot;:&quot;add_favorite&quot;,&quot;target&quot;:1}]]\"",
                "1": "",
                "2": " type=\"button\"",
                "3": "",
                "4": "",
                "5": "",
                "6": " class=\"button is-large\""
              }
            }
          }
        }
      },
      "4": {
        "0": {
          "0": {
            "0": {
              "0": {
                "0": " phx-click=\"[[&quot;push&quot;,{&quot;event&quot;:&quot;remove_favorite&quot;,&quot;target&quot;:1}]]\"",
                "1": "",
                "2": " type=\"button\"",
                "3": "",
                "4": " disabled",
                "5": "",
                "6": " class=\"button is-large\""
              }
            }
          }
        }
      }
    }
  }
}

How to reproduce it

Suffice changing LiveView code to using SurfaceBulma.Button component (or vice-versa).

The behavior you expected

The size of the diffs should be virtually identical, especially given that nothing except for disabled changes and the rendered html code has the same number of elements in both cases i.e. 1 per button.

Your Environment

Surface: v0.7.4
LiveView: v0.17.9
Elixir: v1.13.4

Lingua principale
Elixir
Stelle
2.1k
Fork
146
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di surface-ui/surface

Tutte le issue di surface-ui/surface

Issue simili

Altre issue su Elixir

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.