ampproject / ampproject/amp-react-prototype

Components and AMP layout rules

Offen
#35 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
TBD
Vorherrschende Sprache
JavaScript
Sterne
36
Forks
6
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Überprüfe die im Issue beschriebene bestehende React/AMP-Komponentenstruktur und die Zuständigkeiten von BaseElement/AmpElement. Ermittle, ob eine AmpLayout-Kompositionsebene statisches Layout, Platzhalter und Ladeanzeigen bereitstellen kann und dabei die AMP-Layoutregeln einhält. Als abgeschlossen gilt die Aufgabe, wenn ein abgestimmtes Komponentendesign und ein Implementierungsumfang vorliegen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

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