ampproject / ampproject/amp-react-prototype

Components and AMP layout rules

Aperta
#35 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
TBD
Lingua principale
JavaScript
Stelle
36
Fork
6
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Esamina la struttura esistente dei componenti React/AMP e le responsabilità di BaseElement/AmpElement descritte nell’issue. Determina se un livello di composizione AmpLayout può fornire un layout statico, placeholder e indicatori di caricamento, preservando le regole di layout di AMP. Il completamento richiede un design dei componenti e un ambito di implementazione concordati.

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

Valutazione

Stack tecnologico
javascript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.