Skip to content

Commit fc20aa6

Browse files
author
Manaday Mavani
committed
refactor: remove as prop
1 parent ca79b21 commit fc20aa6

File tree

3 files changed

+109
-54
lines changed

3 files changed

+109
-54
lines changed

‎src/components.d.ts‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,38 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
88
export namespace Components {
99
interface UcImage {
1010
/**
11-
* Render component as 'img' or 'picture'. Default is 'img'.
12-
*/
13-
"as": 'img' | 'picture';
14-
/**
15-
* Text for image's alt attribute.
11+
* Image alt text.
12+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt
1613
*/
1714
"dataAlt": string;
1815
/**
19-
* CSS classes to be added on the root (picture) element.
16+
* CSS class(es) to be added on the <img> tag inside the <picture> element.
2017
*/
2118
"dataClass": string;
2219
/**
2320
* Image height.
21+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height
2422
*/
2523
"dataHeight": string | number;
24+
/**
25+
* sizes for img tag.
26+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
27+
*/
2628
"dataSizes": string;
2729
/**
28-
* Image src.
30+
* Image URL. The value of this prop will be set on img tag's src attribute.
31+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src
2932
*/
3033
"dataSrc": string;
34+
/**
35+
* srcset for img tag.
36+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
37+
*/
3138
"dataSrcset": string;
39+
/**
40+
* Image width.
41+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width
42+
*/
3243
"dataWidth": string | number;
3344
}
3445
}
@@ -46,27 +57,38 @@ declare global {
4657
declare namespace LocalJSX {
4758
interface UcImage {
4859
/**
49-
* Render component as 'img' or 'picture'. Default is 'img'.
50-
*/
51-
"as"?: 'img' | 'picture';
52-
/**
53-
* Text for image's alt attribute.
60+
* Image alt text.
61+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt
5462
*/
5563
"dataAlt"?: string;
5664
/**
57-
* CSS classes to be added on the root (picture) element.
65+
* CSS class(es) to be added on the <img> tag inside the <picture> element.
5866
*/
5967
"dataClass"?: string;
6068
/**
6169
* Image height.
70+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height
6271
*/
6372
"dataHeight"?: string | number;
73+
/**
74+
* sizes for img tag.
75+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
76+
*/
6477
"dataSizes"?: string;
6578
/**
66-
* Image src.
79+
* Image URL. The value of this prop will be set on img tag's src attribute.
80+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src
6781
*/
6882
"dataSrc": string;
83+
/**
84+
* srcset for img tag.
85+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
86+
*/
6987
"dataSrcset"?: string;
88+
/**
89+
* Image width.
90+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width
91+
*/
7092
"dataWidth"?: string | number;
7193
}
7294
interface IntrinsicElements {

‎src/components/uc-image/readme.md‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,62 @@
11
# uc-image
22

3+
We often see browser loads tons of offscreen images when we load a webpage. This contributes to higher data-usage and slower page load times. The modern browsers like Chrome and Firefox supports native lazy loading out-of-the-box.
34

5+
The `uc-image` component can be used to defer loading the images on all browsers, including the legacy ones. It checks for the [native lazy loading](https://caniuse.com/loading-lazy-attr) support. It fallbacks to [IntersectionObserver](https://caniuse.com/intersectionobserver) when native lazy loading is not supported by the browser. The IntersectionObserver API is pollyfilled for the Jurassic Era browsers like `IE11`.
6+
7+
The component internally uses `picture` element. You can supply `source` nodes for the `Art Direction` as a slotted content. We haven't polyfilled the `picture` element so it will always fallback on to the `img` tag inside it on legacy browsers.
8+
9+
## Usage
10+
11+
### Minimum required markup
12+
13+
```html
14+
<uc-image src="https://placekitten.com/400/400"></uc-image>
15+
```
16+
17+
### Other optional attributes
18+
19+
```html
20+
<uc-image src="https://placekitten.com/400/400" width="400" height="400" alt="A cute kitten" class="lazy-image"></uc-image>
21+
```
22+
23+
### Example of `img[srcset]`
24+
25+
```html
26+
<uc-image src="https://developer.mozilla.org/static/img/favicon72.png" srcset="https://developer.mozilla.org/static/img/favicon144.png 2x" alt="MDN logo" width="410" height="410"></uc-image>
27+
```
28+
29+
### Example of `img[sizes]`
30+
31+
```html
32+
<uc-image src="https://media.prod.mdn.mozit.cloud/attachments/2019/08/29/16864/c77b83ecdb4ce4a6507da42aa7e8585e/clock-demo-200px.png" srcset="https://media.prod.mdn.mozit.cloud/attachments/2019/08/29/16864/c77b83ecdb4ce4a6507da42aa7e8585e/clock-demo-200px.png 200w, https://media.prod.mdn.mozit.cloud/attachments/2019/07/15/16797/4c169938d5f923bfa4db5ee937f24ebe/clock-demo-400px.png 400w" sizes="(max-width: 600px) 200px, 50vw" alt="Clock">
33+
</uc-image>
34+
```
35+
36+
### Source nodes for Art Direction
37+
38+
Here, the `source` node will be rendered as a slotted content of the `picture` element. The attributes set on the `uc-image` tag will be applied to the `img` tag inside the `picture` element.
39+
40+
```html
41+
<uc-image src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg" width="415" height="415">
42+
<source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)">
43+
</uc-image>
44+
```
445

546
<!-- Auto Generated Below -->
647

748

849
## Properties
950

10-
| Property | Attribute | Description | Type | Default |
11-
| ---------------------- | --------- | --------------------------------------------------------- | -------------------- | ----------- |
12-
| `as` | `as` | Render component as 'img' or 'picture'. Default is 'img'. | `"img" \| "picture"` | `'img'` |
13-
| `dataAlt` | `alt` | Text for image's alt attribute. | `string` | `undefined` |
14-
| `dataClass` | `class` | CSS classes to be added on the root (picture) element. | `string` | `undefined` |
15-
| `dataHeight` | `height` | Image height. | `number \| string` | `undefined` |
16-
| `dataSizes` | `sizes` | | `string` | `undefined` |
17-
| `dataSrc` _(required)_ | `src` | Image src. | `string` | `undefined` |
18-
| `dataSrcset` | `srcset` | | `string` | `undefined` |
19-
| `dataWidth` | `width` | | `number \| string` | `undefined` |
51+
| Property | Attribute | Description | Type | Default |
52+
| ---------------------- | --------- | ------------------------------------------------------------------------- | ------------------ | ----------- |
53+
| `dataAlt` | `alt` | Image alt text. | `string` | `undefined` |
54+
| `dataClass` | `class` | CSS class(es) to be added on the <img> tag inside the <picture> element. | `string` | `undefined` |
55+
| `dataHeight` | `height` | Image height. | `number \| string` | `undefined` |
56+
| `dataSizes` | `sizes` | sizes for img tag. | `string` | `undefined` |
57+
| `dataSrc` _(required)_ | `src` | Image URL. The value of this prop will be set on img tag's src attribute. | `string` | `undefined` |
58+
| `dataSrcset` | `srcset` | srcset for img tag. | `string` | `undefined` |
59+
| `dataWidth` | `width` | Image width. | `number \| string` | `undefined` |
2060

2161

2262
----------------------------------------------

‎src/components/uc-image/uc-image.tsx‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,7 @@ export class UcImage {
1414
// Props
1515

1616
/**
17-
* Render component as 'img' or 'picture'.
18-
* Default is 'img'.
19-
*/
20-
@Prop() as: 'img' | 'picture' = 'img';
21-
22-
/**
23-
* CSS classes to be added on the root (picture) element.
17+
* CSS class(es) to be added on the <img> tag inside the <picture> element.
2418
*/
2519
@Prop({
2620
attribute: 'class',
@@ -29,7 +23,8 @@ export class UcImage {
2923
dataClass: string;
3024

3125
/**
32-
* Text for image's alt attribute.
26+
* Image alt text.
27+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt
3328
*/
3429
@Prop({
3530
attribute: 'alt',
@@ -39,6 +34,7 @@ export class UcImage {
3934

4035
/**
4136
* Image height.
37+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height
4238
*/
4339
@Prop({
4440
attribute: 'height',
@@ -47,26 +43,39 @@ export class UcImage {
4743
dataHeight: string | number;
4844

4945
/**
50-
* Image src.
46+
* Image URL. The value of this prop will be set on img tag's src attribute.
47+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src
5148
*/
5249
@Prop({
5350
attribute: 'src',
5451
reflect: false
5552
})
5653
dataSrc!: string;
5754

55+
/**
56+
* srcset for img tag.
57+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
58+
*/
5859
@Prop({
5960
attribute: 'srcset',
6061
reflect: false
6162
})
6263
dataSrcset: string;
6364

65+
/**
66+
* sizes for img tag.
67+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
68+
*/
6469
@Prop({
6570
attribute: 'sizes',
6671
reflect: false
6772
})
6873
dataSizes: string;
6974

75+
/**
76+
* Image width.
77+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width
78+
*/
7079
@Prop({
7180
attribute: 'width',
7281
reflect: false
@@ -127,10 +136,10 @@ export class UcImage {
127136
}
128137

129138
render() {
130-
if (this.as === 'img') {
131-
return (
139+
return (
140+
<picture class={this.dataClass}>
141+
<slot>{/* All <source /> nodes will be injected here... */}</slot>
132142
<img
133-
class={this.dataClass}
134143
data-src={this.dataSrc}
135144
alt={this.dataAlt}
136145
data-srcset={this.dataSrcset}
@@ -139,23 +148,7 @@ export class UcImage {
139148
width={this.dataWidth}
140149
loading="lazy"
141150
/>
142-
);
143-
}
144-
else {
145-
return (
146-
<picture class={this.dataClass}>
147-
<slot>{/* All <source /> nodes will be injected here... */}</slot>
148-
<img
149-
data-src={this.dataSrc}
150-
alt={this.dataAlt}
151-
data-srcset={this.dataSrcset}
152-
sizes={this.dataSizes}
153-
height={this.dataHeight}
154-
width={this.dataWidth}
155-
loading="lazy"
156-
/>
157-
</picture>
158-
);
159-
}
151+
</picture>
152+
)
160153
}
161154
}

0 commit comments

Comments
 (0)