ampproject / ampproject/amp-react-prototype

Prototype AmpLayout component

Aperta
#36 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

See #35 for context.

`AmpLayout` component would provide the following features:
- Define a child component's layout using AMP rules (`layout`, `width`, `height`, etc);
- Show placeholder until the child component is loaded;
- Show loading indicator until the child component is loaded.

To implement these features The `AmpLayout` component would:
1. Wrap the "child" component into another DOM element and use it to implement main UI rules.
2. Modify the "child" component's inline `style` to achieve the right layout. For instance, with the responsive layout the wrapper component, as well as placeholder, loading indicator, etc - should all be styled with `position:absolute; inset: 0; width: 100%; height: 100%`.

There could be several possible composition styles.

#### /1/ A static [higher order component](https://reactjs.org/docs/higher-order-components.html):

```
const AmpCarouselWithLayout = withLayout(AmpCarousel, {options});
```

Main drawback: all components have to have “WithLayout” pair.

#### /2/ JSX: Child component with cloning of `children[0]`:

```jsx

...

```

Implementation:
```jsx
const child = props.children[0];
const decoratedChild = preact.cloneElement(
child,
{
style: {
// Preserve other styles:
...child.props.style,
// Make the child component take all available space:
position: 'absolute',
inset: 0,
width: '100%',
height: '100%'
}
}
);
```

Question: any negative consequences of cloning?

#### /3/ JSX: wrapper with `type` property:

```

...

```

Implementation is very similar to the cloning case, but avoids the cloning:
```jsx
const decoratedChild = preact.createElement(
props.type,
{
...props,
style: {
// Preserve other styles:
...props.style,
// Make the child component take all available space:
position: 'absolute',
inset: 0,
width: '100%',
height: '100%'
}
}
);
```

Main drawback: we lose some type information by combining two components into one.

#### /4/ CSS approach:

We use a global stylesheet like this:
```
.amp-with-layout > * {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
```

Main drawback: the global stylesheet is a global singleton side-effect and as such we'd have to correctly support server-side rendering, documents, shadow roots, embeds. We'd likely have to deal with FOUC.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dall’issue #35 per il contesto indicato, quindi confronta i quattro approcci di composizione proposti: Higher-Order Component, clonazione dei figli, una proprietà type e CSS. Chiarisci il design scelto e come supporterà le regole di layout di AMP, i placeholder e gli indicatori di caricamento senza gli svantaggi elencati. Il lavoro è completato quando il comportamento del prototipo e il modello di composizione sono concordati e dimostrati.

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

Valutazione

Stack tecnologico
javascript, react
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
20/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.