popcodeorg / popcodeorg/popcode

Preload next iframe to use for preview

Offen
#2,117 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

enhancement help wanted
Vorherrschende Sprache
JavaScript
Sterne
191
Forks
143
Ø Merge
4 T. 11 Std.
Gemergte PRs (30 T.)
5

Beschreibung

Each time the current project changes, we load up a new project in a fresh iframe. We also keep the previous iteration of the preview frame in the DOM until the new one is fully ready, to ensure the smoothest possible transition.

However, with #2107, loading the next frame is a bit heavier weight, because it loads an actual HTML page with a JavaScript bundle attached. While all the loaded content is static and should be thoroughly cached, the browser still needs to parse everything every time. So, let’s proactively load a fresh iframe with preview.html before we are ready to put a compiled project in it.

One wrinkle here is that the collection of frames we are showing currently is keyed on compiledProjectKey, which is only generated when we start to compile an iteration of the current project. However we want to render this preloaded frame in advance of any compilation starting. Having given it only a little thought, I think the move is probably to shift our semantics a little bit and rename compiledProjectKey to previewFrameKey (if I’m not mistaken this fits all current usage of that property); and then add a nextPreviewFrameKey to Redux state, which is “popped” off each time we initiate project compilation, and replaced with a freshly-generated one.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, den bestehenden iframe-Lebenszyklus, die Verwendung von compiledProjectKey und den Redux-Zustand rund um die Projektkompilierung nachzuverfolgen. Prüfe preview.html und das in #2107 beschriebene Verhalten. Als abgeschlossen gilt die Aufgabe, wenn vor der Kompilierung ein frischer Preview-Frame geladen und anschließend wiederverwendet wird, sobald das kompilierte Projekt bereit ist, ohne das bestehende Übergangsverhalten zu beeinträchtigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
frontend, web-dev
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.