ampproject / ampproject/amp-react-prototype

Components and AMP layout rules

Abierto
#35 0 comentarios 0 reacciones 0 asignados Ver en GitHub
TBD
Lenguaje dominante
JavaScript
Estrellas
36
Forks
6
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

Currently AMP elements are structured like this:

```
<- AmpElement (custom element wrapper)
<- defines layout/size
<- BaseElement (implementation)
<- adheres to the layout defined by AmpElement
```

Some of the most critical layout styles are:
- `display: block|etc` (but not "inline");
- proxies for width and height;
- `position: relative|absolute|etc` (but not "static");
- `overflow: hidden`.

React components follow AMP's `BaseElement` layer which means that they accept layout, but normally do not define their own static layout.

Besides layout, `AmpElement` is also responsible for showing placeholder and loading indicator. This is especially important since the placeholder and loading indicator are shown this way even before the `BaseElement` implementation script has been downloaded.

To still allow static layout in the React/AMP layer, we could provide `AmpLayout` component that could implement layout/placeholder/loading-indicator features via composition.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Revisa la estructura existente de componentes React/AMP y las responsabilidades de BaseElement/AmpElement descritas en el issue. Determina si una capa de composición AmpLayout puede proporcionar un layout estático, placeholders e indicadores de carga, preservando las reglas de layout de AMP. La tarea requiere un diseño de componentes y un alcance de implementación acordados.

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

Evaluación

Stack tecnológico
javascript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
30/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.