popcodeorg / popcodeorg/popcode

Preload next iframe to use for preview

Abierto
#2,117 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

enhancement help wanted
Lenguaje dominante
JavaScript
Estrellas
191
Forks
143
Merge medio
4 d 11 h
PR fusionados (30 d)
5

Descripción

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.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza siguiendo el ciclo de vida existente del iframe, el uso de compiledProjectKey y el estado de Redux relacionado con la compilación del proyecto. Revisa preview.html y el comportamiento descrito en #2107. Se considera terminado cuando se carga un frame de preview nuevo antes de la compilación y luego se reutiliza cuando el proyecto compilado está listo, sin alterar el comportamiento de transición existente.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript
Área
frontend, web-dev
Tipo de issue
Nueva funcionalidad
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.