profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/styfle/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Steven styfle @vercel ::1 https://styfle.dev 🐏Software Shepherd, 🛡️TypeScript enthusiast, ✏️@markedjs maintainer, 💚@nodejs contributor, ⚛️@reactjs user, 🤵husband of @ksnydes, ✝️Jesus lover

markedjs/marked 25892

A markdown parser and compiler. Built for speed.

styfle/awesome-online-ide 2457

🌩️ A list of awesome online development environments

styfle/awesome-desktop-js 594

🖥️ A list of awesome packages and frameworks for implementing javascript applications on the desktop

mafintosh/docker-remote-api 59

Basic http wrapper to call the docker remote api from node

styfle/alexa-wunderground 1

🗣️ WIP - An Amazon Alexa skill for Weather Underground

styfle/aws-xray-bug 1

aws xray issue #60

josephdpurcell/slack-invite-automation 0

A tiny web application to invite a user into your slack team, revised to work with zeit.co.

ksnydes/one-click-hugo-cms 0

Example hugo blog

styfle/acorn-private-class-elements 0

Helpers for supporting private class methods and fields in acorn

push eventstyfle/packagephobia

dependabot[bot]

commit sha a94947fda7df91ade265e8159dd135f5e61f87c4

Bump @types/node from 16.9.1 to 16.9.2 (#823) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 16.9.1 to 16.9.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

push time in 2 hours

delete branch styfle/packagephobia

delete branch : dependabot/npm_and_yarn/types/node-16.9.2

delete time in 2 hours

PR merged styfle/packagephobia

Bump @types/node from 16.9.1 to 16.9.2 dependencies

Bumps @types/node from 16.9.1 to 16.9.2. <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

</details>

+4 -4

1 comment

2 changed files

dependabot[bot]

pr closed time in 2 hours

push eventstyfle/packagephobia

dependabot[bot]

commit sha 884b14c56957f1369b37786b8406d539568d7fe7

Bump @types/react from 17.0.20 to 17.0.21 (#821) Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 17.0.20 to 17.0.21. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

push time in 2 hours

delete branch styfle/packagephobia

delete branch : dependabot/npm_and_yarn/types/react-17.0.21

delete time in 2 hours

PR merged styfle/packagephobia

Bump @types/react from 17.0.20 to 17.0.21 dependencies

Bumps @types/react from 17.0.20 to 17.0.21. <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

</details>

+4 -4

1 comment

2 changed files

dependabot[bot]

pr closed time in 2 hours

pull request commentvercel/next.js

Update Gatsby migration guide to use image imports.

@kara Sounds good! Let’s add a link from @atcastle ’s PR

leerob

comment created time in 2 hours

PullRequestReviewEvent
PullRequestReviewEvent
PullRequestReviewEvent

delete branch styfle/tsconfig-to-swcconfig

delete branch : patch-1

delete time in 5 hours

delete branch styfle/packagephobia

delete branch : dependabot/npm_and_yarn/prettier-2.4.1

delete time in 5 hours

push eventstyfle/packagephobia

dependabot[bot]

commit sha add780a73206008f7d984a8f263f329fb0e52702

Bump prettier from 2.4.0 to 2.4.1 (#822) Bumps [prettier](https://github.com/prettier/prettier) from 2.4.0 to 2.4.1. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/2.4.0...2.4.1) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

push time in 5 hours

PR merged styfle/packagephobia

Bump prettier from 2.4.0 to 2.4.1 dependencies

Bumps prettier from 2.4.0 to 2.4.1. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p> <blockquote> <h2>2.4.1</h2> <p>🔗 <a href="https://github.com/prettier/prettier/blob/main/CHANGELOG.md#241">Changelog</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/main/CHANGELOG.md">prettier's changelog</a>.</em></p> <blockquote> <h1>2.4.1</h1> <p><a href="https://github.com/prettier/prettier/compare/2.4.0...2.4.1">diff</a></p> <h4>Fix wildcard syntax in <code>@forward</code> (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/11482">#11482</a>) (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/11487">#11487</a> by <a href="https://github.com/niksy"><code>@​niksy</code></a>)</h4> <!-- raw HTML omitted --> <pre lang="scss"><code>// Input @forward "library" as btn-*; <p>// Prettier 2.4.0 <a href="https://github.com/forward"><code>@​forward</code></a> "library" as btn- ;</p> <p>// Prettier 2.4.1 <a href="https://github.com/forward"><code>@​forward</code></a> "library" as btn-; </code></pre></p> <h4>Add new CLI option <code>debug-print-ast</code> (<a href="https://github-redirect.dependabot.com/prettier/prettier/pull/11514">#11514</a> by <a href="https://github.com/sosukesuzuki"><code>@​sosukesuzuki</code></a>)</h4> <p>A new <code>--debug-print-ast</code> CLI flag for debugging.</p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/prettier/prettier/commit/7ced9e66549b8d5a8e3a74473af462f86fb0245c"><code>7ced9e6</code></a> Release 2.4.1</li> <li><a href="https://github.com/prettier/prettier/commit/59b5eb4e1faf912dd46759c98b45cfe5807e7a9f"><code>59b5eb4</code></a> Fix wildcard syntax in <code>@forward</code> (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11482">#11482</a>) (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11487">#11487</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/aa63269743e510ed1eaedaa4e9465430c9ff807d"><code>aa63269</code></a> Add new CLI option <code>debug-print-ast</code> (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11514">#11514</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ae33e494a91ced3e80f139ca075cb27bc645acb2"><code>ae33e49</code></a> fix(docs): lint-staged install instructions (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11363">#11363</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/a1a7502f4f77498d24085862e9fd40f46c056f1e"><code>a1a7502</code></a> Update integrating-with-linters.md (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11399">#11399</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/f63e15d1cd37167984dc329a34fc050343e3a91b"><code>f63e15d</code></a> Build(deps): Bump typescript from 4.4.2 to 4.4.3 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11507">#11507</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/dec24722d65ea45afcf63af30857bea35ade4ed5"><code>dec2472</code></a> Build(deps-dev): Bump <code>@​babel/preset-env</code> from 7.15.4 to 7.15.6 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11499">#11499</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ac3912cd4725b104290c8b1b95b801bbdfcce404"><code>ac3912c</code></a> Build(deps-dev): Bump eslint-plugin-unicorn from 35.0.0 to 36.0.0 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11504">#11504</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/bf5a027794316f3df2ea47dd06cee2f22940a735"><code>bf5a027</code></a> Revert workaround for node 16.9 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11493">#11493</a>)</li> <li><a href="https://github.com/prettier/prettier/commit/ddee8dbaaecac095c9e2951bd6a1bddfb60fdfeb"><code>ddee8db</code></a> Build(deps): Bump espree from 8.0.0 to 9.0.0 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/11509">#11509</a>)</li> <li>Additional commits viewable in <a href="https://github.com/prettier/prettier/compare/2.4.0...2.4.1">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

</details>

+4 -4

1 comment

2 changed files

dependabot[bot]

pr closed time in 5 hours

issue openedSongkeys/tsconfig-to-swcconfig

Publish 1.2.0 to npm

npm version is 1.1.0: https://www.npmjs.com/package/tsconfig-to-swcconfig

github version is 1.2.0: https://github.com/Songkeys/tsconfig-to-swcconfig/blob/e826573677606b9fcd9db70d684d4cf6bac28284/package.json#L3

created time in a day

PR opened Songkeys/tsconfig-to-swcconfig

Fix typo in readme

convert should be convertTsConfig

+2 -2

0 comment

1 changed file

pr created time in a day

push eventstyfle/tsconfig-to-swcconfig

Steven

commit sha 208eb40ba88fa024eb6304d5a9f66c2df9835737

Fix typo in readme

view details

push time in a day

push eventvercel/ncc

Steven

commit sha 4a2ed8f5cf62b061eb51074c33f27b9b13c09231

Add back missing assets

view details

push time in a day

push eventvercel/ncc

Steven

commit sha c68542c1cefee95923e96e17b8368f4aa40aeb9b

Fallback to undefined for resolve.modules instead of empty array

view details

push time in a day

pull request commentvercel/ncc

Major: use `swc-loader` for TypeScript compilation

@guybedford @sokra @kdy1 @huozhi Any thoughts on how to solve this one?

Looks like module.exports = require("shebang-loader");

is being converted into module.exports = eval("require")("shebang-loader");

But I would expect the contents of the shebang-loader package instead.

styfle

comment created time in a day

Pull request review commentvercel/next.js

[DRAFT] Overhaul image component documentation

 description: Next.js supports built-in image optimization, as well as third part   </ul> </details> -Since version **10.0.0**, Next.js has a built-in Image Component and Automatic Image Optimization.+The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good [Core Web Vitals](https://web.dev/vitals/) scores. These scores are an important measurement of user experience on your website, and are [factored into Google's search rankings](https://developers.google.com/search/blog/2020/05/evaluating-page-experience). -The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web.+Some of the optimizations built into the image component include:+* Automatic `srcset` generation so you always send users correctly-sized images+* Support for sending modern image formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) to the browsers that support them+* Layout shift prevention+* Lazy-loading for offscreen images+* Blurry placeholders+* On-demand image resizing, even for images stored on remote servers -The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats. -Automatic Image Optimization works with any image source. Even if the image is hosted by an external data source, like a CMS, it can still be optimized.+## Using the Image Component -Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.+To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component: -Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.+```jsx+import Image from 'next/image'+``` -Images are always rendered in such a way as to avoid [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google [uses in search ranking](https://developers.google.com/search/blog/2020/05/evaluating-page-experience).+From there, the way you use the component will be slightly different depending on if you're including an image that lives locally in your project, or one from a remote server. -## Image Component+### Local Images -To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component:+You can save time by using a static `import` statement with images that live in your project:  ```jsx+import profilePic from '../public/me.png'+```++Dynamic `await import()` or `require()` are _not_ supported.++The benefit to static `import`s is that several of the required props are taken care of for you. The `width`, `height`, and `blurDataURL` props will automatically be populated:++```js import Image from 'next/image'+import profilePic from '../public/me.png'  function Home() {   return (     <>       <h1>My Homepage</h1>       <Image-        src="/me.png"+        src={profilePic}         alt="Picture of the author"-        width={500}-        height={500}+        // width={500} automatically provided+        // height={500} automatically provided+        // blurDataURL="data:..." automatically provided+        // placeholder="blur" // Optional blur-up while loading       />       <p>Welcome to my homepage!</p>     </>   ) }--export default Home ``` -## Image Imports--You can statically `import` images that live in your project. Dynamic `await import()` or `require()` are _not_ supported.+### Remote Images -With static `import`s, you only need to provide the `src` prop. The `width`, `height`, and `blurDataURL` props will automatically be populated. Alt text is still needed separately.+For remote images, the `src` property should be set to a string containing a URL, which can be [relative](#loaders) or [absolute](#domains). Because Next.js does not have access to remote files during the build proccess, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and optional [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually, as seen below. -```js+```jsx import Image from 'next/image'-import profilePic from '../public/me.png'  function Home() {   return (     <>       <h1>My Homepage</h1>       <Image-        src={profilePic}+        src="/me.png"         alt="Picture of the author"-        // width={500} automatically provided-        // height={500} automatically provided-        // blurDataURL="data:..." automatically provided-        // placeholder="blur" // Optional blur-up while loading+        width={500}+        height={500}       />       <p>Welcome to my homepage!</p>     </>   ) }++export default Home ``` -For remote images, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually.+>(For additional information about the sizing requirement in next/image, [see here](#image-sizing)) -## Properties+### Loaders -[View all properties](/docs/api-reference/next/image.md) available to the `next/image` component.+Note that in the example above, a relative URL (`"/me.png"`) is provided for a remote image. This is possible because of the `next/image` [loader](/docs/api-reference/next/image.md#loader) architecture. A loader is a function that takes the information you provide to the image component properties, and generates the URLs needed to serve optimized images.  -## Configuration+The default loader for all new applications integrates with the Next.js Image Optimizer, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you'd like to serve your images directly from a CDN or image server, you can use one of the [built-in loaders](/docs/api-reference/next/image.md#built-in-loaders) or write your own with just a few lines of JavaScript. -In addition to [using properties](/docs/api-reference/next/image.md) available to the `next/image` component, you can optionally configure Image Optimization for more advanced use cases via `next.config.js`.+Loaders can be defined per-image, or at the application level.   ### Domains -To enable Image Optimization for images hosted on an external website, use an absolute url for the Image `src` and specify which-`domains` are allowed to be optimized. This is needed to ensure that external urls can't be abused. When `loader` is set to an external image service, this option is ignored.+Sometimes you may want to access a remote image, but still use the built-in Next.js Image Optimizer. To do this, simply leave the `loader` at it's default setting and enter an absolute url for the Image `src`.
Sometimes you may want to access a remote image, but still use the built-in Next.js Image Optimization API. To do this, simply leave the `loader` at it's default setting and enter an absolute url for the Image `src`.
atcastle

comment created time in a day

Pull request review commentvercel/next.js

[DRAFT] Overhaul image component documentation

 Other properties on the `<Image />` component will be passed to the underlying  - `style`. Use `className` instead. - `srcSet`. Use-  [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes)+  [Device Sizes](#device-sizes)   instead. - `ref`. Use [`onLoadingComplete`](#onloadingcomplete) instead. - `decoding`. It is always `"async"`. -## Styling+## Configuration Options++### Set Default Loader -`next/image` wraps the `img` element with a single `div` element to maintain the aspect ratio of the image and prevent [Cumulative Layout Shift](https://vercel.com/blog/core-web-vitals#cumulative-layout-shift).+If you want to use a cloud provider to optimize images instead of using the Next.js built-in Image Optimization, you can configure the loader and path prefix. This allows you to use relative urls for the Image `src` and automatically generate the correct absolute url for your provider.++```js+module.exports = {+  images: {+    loader: 'imgix',+    path: 'https://example.com/myaccount/',+  },+}+```+### Built-in Loaders++The following Image Optimization cloud providers are included:++- [Vercel](https://vercel.com): Works automatically when you deploy on Vercel, no configuration necessary. [Learn more](https://vercel.com/docs/next.js/image-optimization)+- [Imgix](https://www.imgix.com): `loader: 'imgix'`+- [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`+- [Akamai](https://www.akamai.com): `loader: 'akamai'`+- Custom: `loader: 'custom'` use a custom cloud provider by implementing the [`loader`](/docs/api-reference/next/image.md#loader) prop on the `next/image` component+- Default: Works automatically with `next dev`, `next start`, or a custom server++If you need a different provider, you can use the [`loader`](/docs/api-reference/next/image.md#loader) prop with `next/image`.++> The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work.++> The `next/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. When using `next start` in your production environment, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. This is not necessary for Vercel deployments, as `sharp` is installed automatically.++## Advanced++The following configuration is for advanced use cases and is usually not necessary. If you choose to configure the properties below, you will override any changes to the Next.js defaults in future updates.++### Domains++To protect your application from abuse, you must define a list of remote domains with images that you want to let the Next.jd Image Optimizer process. This is done in your `next.config` file, as shown below:
To protect your application from abuse, you must define a list of image provider domains that you want to be served from the Next.js Image Optimization API. This is configured in your `next.config` file, as shown below:
atcastle

comment created time in a day

Pull request review commentvercel/next.js

[DRAFT] Overhaul image component documentation

 description: Next.js supports built-in image optimization, as well as third part   </ul> </details> -Since version **10.0.0**, Next.js has a built-in Image Component and Automatic Image Optimization.+The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good [Core Web Vitals](https://web.dev/vitals/) scores. These scores are an important measurement of user experience on your website, and are [factored into Google's search rankings](https://developers.google.com/search/blog/2020/05/evaluating-page-experience). -The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web.+Some of the optimizations built into the image component include:+* Automatic `srcset` generation so you always send users correctly-sized images+* Support for sending modern image formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) to the browsers that support them+* Layout shift prevention+* Lazy-loading for offscreen images+* Blurry placeholders+* On-demand image resizing, even for images stored on remote servers -The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats. -Automatic Image Optimization works with any image source. Even if the image is hosted by an external data source, like a CMS, it can still be optimized.+## Using the Image Component -Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.+To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component: -Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.+```jsx+import Image from 'next/image'+``` -Images are always rendered in such a way as to avoid [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google [uses in search ranking](https://developers.google.com/search/blog/2020/05/evaluating-page-experience).+From there, the way you use the component will be slightly different depending on if you're including an image that lives locally in your project, or one from a remote server. -## Image Component+### Local Images -To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component:+You can save time by using a static `import` statement with images that live in your project:  ```jsx+import profilePic from '../public/me.png'+```++Dynamic `await import()` or `require()` are _not_ supported.++The benefit to static `import`s is that several of the required props are taken care of for you. The `width`, `height`, and `blurDataURL` props will automatically be populated:++```js import Image from 'next/image'+import profilePic from '../public/me.png'  function Home() {   return (     <>       <h1>My Homepage</h1>       <Image-        src="/me.png"+        src={profilePic}         alt="Picture of the author"-        width={500}-        height={500}+        // width={500} automatically provided+        // height={500} automatically provided+        // blurDataURL="data:..." automatically provided+        // placeholder="blur" // Optional blur-up while loading       />       <p>Welcome to my homepage!</p>     </>   ) }--export default Home ``` -## Image Imports--You can statically `import` images that live in your project. Dynamic `await import()` or `require()` are _not_ supported.+### Remote Images -With static `import`s, you only need to provide the `src` prop. The `width`, `height`, and `blurDataURL` props will automatically be populated. Alt text is still needed separately.+For remote images, the `src` property should be set to a string containing a URL, which can be [relative](#loaders) or [absolute](#domains). Because Next.js does not have access to remote files during the build proccess, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and optional [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually, as seen below. -```js+```jsx import Image from 'next/image'-import profilePic from '../public/me.png'  function Home() {   return (     <>       <h1>My Homepage</h1>       <Image-        src={profilePic}+        src="/me.png"         alt="Picture of the author"-        // width={500} automatically provided-        // height={500} automatically provided-        // blurDataURL="data:..." automatically provided-        // placeholder="blur" // Optional blur-up while loading+        width={500}+        height={500}       />       <p>Welcome to my homepage!</p>     </>   ) }++export default Home ``` -For remote images, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually.+>(For additional information about the sizing requirement in next/image, [see here](#image-sizing)) -## Properties+### Loaders -[View all properties](/docs/api-reference/next/image.md) available to the `next/image` component.+Note that in the example above, a relative URL (`"/me.png"`) is provided for a remote image. This is possible because of the `next/image` [loader](/docs/api-reference/next/image.md#loader) architecture. A loader is a function that takes the information you provide to the image component properties, and generates the URLs needed to serve optimized images.  -## Configuration+The default loader for all new applications integrates with the Next.js Image Optimizer, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you'd like to serve your images directly from a CDN or image server, you can use one of the [built-in loaders](/docs/api-reference/next/image.md#built-in-loaders) or write your own with just a few lines of JavaScript. -In addition to [using properties](/docs/api-reference/next/image.md) available to the `next/image` component, you can optionally configure Image Optimization for more advanced use cases via `next.config.js`.+Loaders can be defined per-image, or at the application level.   ### Domains -To enable Image Optimization for images hosted on an external website, use an absolute url for the Image `src` and specify which-`domains` are allowed to be optimized. This is needed to ensure that external urls can't be abused. When `loader` is set to an external image service, this option is ignored.+Sometimes you may want to access a remote image, but still use the built-in Next.js Image Optimizer. To do this, simply leave the `loader` at it's default setting and enter an absolute url for the Image `src`. -```js-module.exports = {-  images: {-    domains: ['example.com'],-  },-}-```--### Loader--If you want to use a cloud provider to optimize images instead of using the Next.js' built-in Image Optimization, you can configure the loader and path prefix. This allows you to use relative urls for the Image `src` and automatically generate the correct absolute url for your provider.+To protect your application from abuse, you must define a list of remote domains that you intend to access this way. This is done in your `next.config.js` file, as shown below:  ```js module.exports = {   images: {-    loader: 'imgix',-    path: 'https://example.com/myaccount/',+    domains: ['example.com', 'example2.com'],   }, } ``` -The following Image Optimization cloud providers are included:--- [Vercel](https://vercel.com): Works automatically when you deploy on Vercel, no configuration necessary. [Learn more](https://vercel.com/docs/next.js/image-optimization)-- [Imgix](https://www.imgix.com): `loader: 'imgix'`-- [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`-- [Akamai](https://www.akamai.com): `loader: 'akamai'`-- Custom: `loader: 'custom'` use a custom cloud provider by implementing the [`loader`](/docs/api-reference/next/image.md#loader) prop on the `next/image` component-- Default: Works automatically with `next dev`, `next start`, or a custom server--If you need a different provider, you can use the [`loader`](/docs/api-reference/next/image.md#loader) prop with `next/image`.--> The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work.--> The `next/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. When using `next start` in your production environment, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. This is not necessary for Vercel deployments, as `sharp` is installed automatically.+## Image Sizing -## Caching+One of the ways that images most commonly hurt performance is through *layout shift*, where the image pushes other elements around on the page as it loads in. This performance problem is so annoying to users that it has it's own Core Web Vital, called [Cumulative Layout Shift](https://web.dev/cls/).  The way to avoid image-based layout shifts is to [always size your images](https://web.dev/optimize-cls/#images-without-dimensions). This allows the browser to reserve precisely enough space for the image before it loads. -The following describes the caching algorithm for the default [loader](#loader). For all other loaders, please refer to your cloud provider's documentation.+Because `next/image` is designed to guarantee good performance results, it cannot be used in a way that will contribute to layout shift, and **must** be sized in one of three ways:+1) Automatically, using a [static import](#local-images)+2) Explicitly, by including a `height` **and** `width` property+3) By using the `fill` layout mode, which causes the image to expand to fill its parent element.  -Images are optimized dynamically upon request and stored in the `<distDir>/cache/images` directory. The optimized image file will be served for subsequent requests until the expiration is reached. When a request is made that matches a cached but expired file, the cached file is deleted before generating a new optimized image and caching the new file.+>### What if I don't know the size of my images?+>+>If you are accessing images from a source without knowledge of the images' sizes, there are several things you can do:+>+>**Use `layout='fill'`**+>+>The `fill` layout mode allows your image to be sized by its parent element. Consider using CSS to give the image's parent element space on the page, then using the [`objectFit property`](/docs/api-reference/next/image.md#objectfit) with `fill`, `contain`, or `cover`, along with the [`objectPosition property`](/docs/api-reference/next/image.md#objectposition) to define how the image should occupy that space. +>+>**Normalize your images**+>+>If you're serving images from a source that you control, consider modifying your image pipeline to normalize the images to a specific size.+>+>**Modify your API calls**+>+>If your application is retrieving image URLs using an API call (such as to a CMS), you may be able to modify the API call to return the image dimensions along with the URL. -The expiration (or rather Max Age) is defined by the upstream server's `Cache-Control` header.+If none of the suggested methods works for sizing your images, the `next/image` component is designed to work well on a page alongside standard `<img>` elements.  -If `s-maxage` is found in `Cache-Control`, it is used. If no `s-maxage` is found, then `max-age` is used. If no `max-age` is found, then [`minimumCacheTTL`](#minimum-cache-ttl) is used.+## Styling -You can configure [`minimumCacheTTL`](#minimum-cache-ttl) to increase the cache duration when the upstream image does not include `max-age`.+Styling the image component is not that different from styling a norrmal `<img>` element, but there are a few guidelines to keep in mind: -You can also configure [`deviceSizes`](#device-sizes) and [`imageSizes`](#device-sizes) to reduce the total number of possible generated images.+**Pick the correct layout mode** -## Advanced+The image component has several different [layout modes](/docs/api-reference/next/image.md#layout) that define how it is sized on the page. Familiarize yourself with the various modes, and consider experimenting with other modes if your styling isn't working as you think it should. -The following configuration is for advanced use cases and is usually not necessary. If you choose to configure the properties below, you will override any changes to the Next.js defaults in future updates.+**Target the image with className, not based on DOM structure** -### Device Sizes+The image component has a somewhat more complicated DOM structure than a standard `<img>`. Regardless of layout mode used, the inner `<img>` element will always be wrapped by exactly one `<div>`. It may have a sibling `<div>` for spacing, depending on layout. These additional `<div>`s are what allows us to provide the different layout modes, while ensuring no layout shift. -In some cases, where you know the expected device widths from the users of your website, you can specify a list of device width breakpoints using the `deviceSizes` property. These widths are used when the [`next/image`](/docs/api-reference/next/image.md) component uses `layout="responsive"` or `layout="fill"` so that the correct image is served for the device visiting your website.+The easiest way to style the inner `<img>` rendered by the image element is to **apply a class to your images using the `className` property** on the Image element and then target that class with your styles. The value of className will be automatically applied to the underlying `<img>` element. -If no configuration is provided, the default below is used.+**When using `layout='fill'`, the parent element must have `position: relative`** -```js-module.exports = {-  images: {-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],-  },-}-```--### Image Sizes+This is necessary for the proper rendering of the image element in that layout mode. -You can specify a list of image widths using the `imageSizes` property. These widths should be different (usually smaller) than the widths defined in `deviceSizes` because the arrays will be concatenated. These widths are used when the [`next/image`](/docs/api-reference/next/image.md) component uses `layout="fixed"` or `layout="intrinsic"`.+**When using `layout='intrinsic'`, the parent element must have `display: block`** -If no configuration is provided, the default below is used.+This is the default for `<div>` elements but should be specified otherwise. -```js-module.exports = {-  images: {-    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],-  },-}-```+## Properties -### Minimum Cache TTL+[**View all properties available to the `next/image` component.**](/docs/api-reference/next/image.md) -You can configure the time to live (TTL) in seconds for cached optimized images. In many cases, its better to use a [Static Image Import](#image-Imports) which will handle hashing file contents and caching the file forever.+### Styling Examples -```js-module.exports = {-  images: {-    minimumCacheTTL: 60,-  },-}-```+For examples of the Image Component used with the various fill modes, see the [Image Component Example App](https://image-component.nextjs.gallery/). -If you need to add a `Cache-Control` header for the browser (not recommended), you can configure [`headers`](/docs/api-reference/next.config.js/headers) on the upstream image e.g. `/some-asset.jpg` not `/_next/image` itself. -### Disable Static Imports--The default behavior allows you to import static files such as `import icon from './icon.png` and then pass that to the `src` property.--In some cases, you may wish to disable this feature if it conflicts with other plugins that expect the import to behave differently.+## Configuration -You can disable static image imports with the following configuration below.+The `next/image` component and Next.js Image Optimizer can be configured in the [`next.config.js` file](https://nextjs.org/docs/api-reference/next.config.js/introduction). These configurations allow you to [whitelist domains](/docs/api-reference/next/image.md#domains), [define custom image breakpoints](/docs/api-reference/next/image.md#device-sizes), [change caching behavior](/docs/api-reference/next/image.md#caching-behavior) and more.
The `next/image` component and Next.js Image Optimization API can be configured in the [`next.config.js` file](https://nextjs.org/docs/api-reference/next.config.js/introduction). These configurations allow you to [whitelist domains](/docs/api-reference/next/image.md#domains), [define custom image breakpoints](/docs/api-reference/next/image.md#device-sizes), [change caching behavior](/docs/api-reference/next/image.md#caching-behavior) and more.
atcastle

comment created time in a day

Pull request review commentvercel/next.js

[DRAFT] Overhaul image component documentation

 description: Next.js supports built-in image optimization, as well as third part   </ul> </details> -Since version **10.0.0**, Next.js has a built-in Image Component and Automatic Image Optimization.+The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good [Core Web Vitals](https://web.dev/vitals/) scores. These scores are an important measurement of user experience on your website, and are [factored into Google's search rankings](https://developers.google.com/search/blog/2020/05/evaluating-page-experience). -The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web.+Some of the optimizations built into the image component include:+* Automatic `srcset` generation so you always send users correctly-sized images+* Support for sending modern image formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) to the browsers that support them+* Layout shift prevention+* Lazy-loading for offscreen images+* Blurry placeholders+* On-demand image resizing, even for images stored on remote servers -The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats. -Automatic Image Optimization works with any image source. Even if the image is hosted by an external data source, like a CMS, it can still be optimized.+## Using the Image Component -Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.+To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component: -Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.+```jsx+import Image from 'next/image'+``` -Images are always rendered in such a way as to avoid [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google [uses in search ranking](https://developers.google.com/search/blog/2020/05/evaluating-page-experience).+From there, the way you use the component will be slightly different depending on if you're including an image that lives locally in your project, or one from a remote server. -## Image Component+### Local Images -To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component:+You can save time by using a static `import` statement with images that live in your project:  ```jsx+import profilePic from '../public/me.png'+```++Dynamic `await import()` or `require()` are _not_ supported.++The benefit to static `import`s is that several of the required props are taken care of for you. The `width`, `height`, and `blurDataURL` props will automatically be populated:++```js import Image from 'next/image'+import profilePic from '../public/me.png'  function Home() {   return (     <>       <h1>My Homepage</h1>       <Image-        src="/me.png"+        src={profilePic}         alt="Picture of the author"-        width={500}-        height={500}+        // width={500} automatically provided+        // height={500} automatically provided+        // blurDataURL="data:..." automatically provided+        // placeholder="blur" // Optional blur-up while loading       />       <p>Welcome to my homepage!</p>     </>   ) }--export default Home ``` -## Image Imports--You can statically `import` images that live in your project. Dynamic `await import()` or `require()` are _not_ supported.+### Remote Images -With static `import`s, you only need to provide the `src` prop. The `width`, `height`, and `blurDataURL` props will automatically be populated. Alt text is still needed separately.+For remote images, the `src` property should be set to a string containing a URL, which can be [relative](#loaders) or [absolute](#domains). Because Next.js does not have access to remote files during the build proccess, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and optional [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually, as seen below. -```js+```jsx import Image from 'next/image'-import profilePic from '../public/me.png'  function Home() {   return (     <>       <h1>My Homepage</h1>       <Image-        src={profilePic}+        src="/me.png"         alt="Picture of the author"-        // width={500} automatically provided-        // height={500} automatically provided-        // blurDataURL="data:..." automatically provided-        // placeholder="blur" // Optional blur-up while loading+        width={500}+        height={500}       />       <p>Welcome to my homepage!</p>     </>   ) }++export default Home ``` -For remote images, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually.+>(For additional information about the sizing requirement in next/image, [see here](#image-sizing)) -## Properties+### Loaders -[View all properties](/docs/api-reference/next/image.md) available to the `next/image` component.+Note that in the example above, a relative URL (`"/me.png"`) is provided for a remote image. This is possible because of the `next/image` [loader](/docs/api-reference/next/image.md#loader) architecture. A loader is a function that takes the information you provide to the image component properties, and generates the URLs needed to serve optimized images.  -## Configuration+The default loader for all new applications integrates with the Next.js Image Optimizer, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you'd like to serve your images directly from a CDN or image server, you can use one of the [built-in loaders](/docs/api-reference/next/image.md#built-in-loaders) or write your own with just a few lines of JavaScript.
The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you would like to serve your images directly from a CDN or image server, you can use one of the [built-in loaders](/docs/api-reference/next/image.md#built-in-loaders) or write your own with just a few lines of JavaScript.
atcastle

comment created time in a day

PullRequestReviewEvent
PullRequestReviewEvent

Pull request review commentvercel/next.js

[DRAFT] Overhaul image component documentation

 description: Enable Image Optimization with the built-in Image component.  </details> -> Before moving forward, we recommend you to read-> [Image Optimization](/docs/basic-features/image-optimization.md) first.--Image Optimization can be enabled via the `<Image />` component exported by-`next/image`.--## Usage--For an example, consider a project with the following files:--- `pages/index.js`-- `public/me.png`--We can serve an optimized image like so:--```jsx-import Image from 'next/image'-import profilePic from '../public/me.png'--function Home() {-  return (-    <>-      <h1>My Homepage</h1>-      <Image src={profilePic} alt="Picture of the author" />-      <p>Welcome to my homepage!</p>-    </>-  )-}--export default Home-```+> **Note: This is API documention for the Image Component and Image Optimization. For a feature overview and usage information for images in Next.js, please see [Images](/docs/basic-features/image-optimization.md).**
> **Note: This is API documentation for the Image Component and Image Optimization. For a feature overview and usage information for images in Next.js, please see [Images](/docs/basic-features/image-optimization.md).**
atcastle

comment created time in a day

PullRequestReviewEvent

push eventvercel/ncc

Steven

commit sha 573b1cf790f29d637891cd66801dc90ed043f4d8

Remove ts-loader from build

view details

push time in a day