Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improves generateViewport documentation #60396

Merged
merged 2 commits into from
Jan 21, 2024

Conversation

jasonuc
Copy link
Contributor

@jasonuc jasonuc commented Jan 8, 2024

This PR introduces 2 changes to the generateViewport documentation.

  • Adds more TypeScript examples
  • Changes the line that says userScalable: 'no' to userScalable: false because according to TypeScript userScalable is of type boolean | undefined because it's an optional property.
    • Whenever a string is used this error message is shown: Type 'string' is not assignable to type 'boolean | undefined'.

@jasonuc jasonuc requested review from a team as code owners January 8, 2024 19:31
@jasonuc jasonuc requested review from timeyoutakeit and leerob and removed request for a team January 8, 2024 19:31
@ijjk
Copy link
Member

ijjk commented Jan 21, 2024

Allow CI Workflow Run

  • approve CI run for commit: 3d78e98

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@ijjk
Copy link
Member

ijjk commented Jan 21, 2024

Stats from current PR

Default Build
General
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
buildDuration 11.6s 12.8s ⚠️ +1.2s
buildDurationCached 5.9s 5.9s N/A
nodeModulesSize 200 MB 200 MB N/A
nextStartRea..uration (ms) 429ms 425ms N/A
Client Bundles (main, webpack)
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
193.HASH.js gzip 181 B 182 B N/A
3f784ff6-HASH.js gzip 53.4 kB 53.3 kB N/A
433-HASH.js gzip 29 kB 28.6 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 240 B 242 B N/A
main-HASH.js gzip 31.8 kB 31.8 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB N/A
Overall change 45.2 kB 45.2 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 183 B 181 B N/A
amp-HASH.js gzip 504 B 502 B N/A
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 255 B 253 B N/A
head-HASH.js gzip 350 B 349 B N/A
hooks-HASH.js gzip 369 B 369 B
image-HASH.js gzip 4.18 kB 4.28 kB N/A
index-HASH.js gzip 255 B 256 B N/A
link-HASH.js gzip 2.61 kB 2.61 kB
routerDirect..HASH.js gzip 312 B 311 B N/A
script-HASH.js gzip 385 B 383 B N/A
withRouter-HASH.js gzip 307 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.4 kB 3.4 kB
Client Build Manifests
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
_buildManifest.js gzip 484 B 484 B
Overall change 484 B 484 B
Rendered Page Sizes
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
index.html gzip 529 B 527 B N/A
link.html gzip 541 B 540 B N/A
withRouter.html gzip 523 B 522 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
edge-ssr.js gzip 94 kB 93.8 kB N/A
page.js gzip 149 kB 148 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
middleware-b..fest.js gzip 625 B 622 B N/A
middleware-r..fest.js gzip 151 B 151 B
middleware.js gzip 37.5 kB 37.4 kB N/A
edge-runtime..pack.js gzip 1.92 kB 1.92 kB
Overall change 2.07 kB 2.07 kB
Next Runtimes
vercel/next.js canary jasonuc/next.js-docs generateViewport-improve Change
app-page-exp...dev.js gzip 169 kB 169 kB N/A
app-page-exp..prod.js gzip 95.6 kB 95.2 kB N/A
app-page-tur..prod.js gzip 96.3 kB 95.8 kB N/A
app-page-tur..prod.js gzip 90.9 kB 90.4 kB N/A
app-page.run...dev.js gzip 142 kB 142 kB N/A
app-page.run..prod.js gzip 90.2 kB 89.8 kB N/A
app-route-ex...dev.js gzip 24.2 kB 24.1 kB N/A
app-route-ex..prod.js gzip 16.9 kB 16.7 kB N/A
app-route-tu..prod.js gzip 16.9 kB 16.7 kB N/A
app-route-tu..prod.js gzip 16.4 kB 16.3 kB N/A
app-route.ru...dev.js gzip 23.6 kB 23.5 kB N/A
app-route.ru..prod.js gzip 16.4 kB 16.3 kB N/A
pages-api-tu..prod.js gzip 9.41 kB 9.38 kB N/A
pages-api.ru...dev.js gzip 9.68 kB 9.65 kB N/A
pages-api.ru..prod.js gzip 9.4 kB 9.37 kB N/A
pages-turbo...prod.js gzip 22 kB 21.9 kB N/A
pages.runtim...dev.js gzip 22.6 kB 22.6 kB N/A
pages.runtim..prod.js gzip 22 kB 21.9 kB N/A
server.runti..prod.js gzip 49.7 kB 49.5 kB N/A
Overall change 0 B 0 B
Diff details
Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 1552: /***/ function (
+    /***/ 4070: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8769);
+          return __webpack_require__(3697);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 359: /***/ function (module, exports, __webpack_require__) {
+    /***/ 2353: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4489)
+        __webpack_require__(2272)
       );
-      const _getimgprops = __webpack_require__(9997);
-      const _imageconfig = __webpack_require__(9747);
-      const _imageconfigcontextsharedruntime = __webpack_require__(9429);
-      const _warnonce = __webpack_require__(5761);
-      const _routercontextsharedruntime = __webpack_require__(2991);
+      const _getimgprops = __webpack_require__(2530);
+      const _imageconfig = __webpack_require__(4899);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9292);
+      const _warnonce = __webpack_require__(4213);
+      const _routercontextsharedruntime = __webpack_require__(7084);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5076)
+        __webpack_require__(7443)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -373,7 +373,7 @@
       /***/
     },
 
-    /***/ 9997: /***/ function (
+    /***/ 2530: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -389,9 +389,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(5761);
-      const _imageblursvg = __webpack_require__(8543);
-      const _imageconfig = __webpack_require__(9747);
+      const _warnonce = __webpack_require__(4213);
+      const _imageblursvg = __webpack_require__(3139);
+      const _imageconfig = __webpack_require__(4899);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -760,7 +760,7 @@
       /***/
     },
 
-    /***/ 8543: /***/ function (__unused_webpack_module, exports) {
+    /***/ 3139: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -815,7 +815,7 @@
       /***/
     },
 
-    /***/ 3103: /***/ function (
+    /***/ 3067: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -834,20 +834,24 @@
           });
       }
       _export(exports, {
-        getImageProps: function () {
-          return getImageProps;
+        unstable_getImgProps: function () {
+          return unstable_getImgProps;
         },
         default: function () {
           return _default;
         },
       });
       const _interop_require_default = __webpack_require__(1351);
-      const _getimgprops = __webpack_require__(9997);
-      const _imagecomponent = __webpack_require__(359);
+      const _getimgprops = __webpack_require__(2530);
+      const _warnonce = __webpack_require__(4213);
+      const _imagecomponent = __webpack_require__(2353);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5076)
+        __webpack_require__(7443)
       );
-      const getImageProps = (imgProps) => {
+      const unstable_getImgProps = (imgProps) => {
+        (0, _warnonce.warnOnce)(
+          "Warning: unstable_getImgProps() is experimental and may change or be removed at any time. Use at your own risk."
+        );
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
           defaultLoader: _imageloader.default,
           // This is replaced by webpack define plugin
@@ -860,9 +864,6 @@
             unoptimized: false,
           },
         });
-        // Normally we don't care about undefined props because we pass to JSX,
-        // but this exported function could be used by the end user for anything
-        // so we delete undefined props to clean it up a little.
         for (const [key, value] of Object.entries(props)) {
           if (value === undefined) {
             delete props[key];
@@ -877,7 +878,7 @@
       /***/
     },
 
-    /***/ 5076: /***/ function (__unused_webpack_module, exports) {
+    /***/ 7443: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -912,7 +913,7 @@
       /***/
     },
 
-    /***/ 8769: /***/ function (
+    /***/ 3697: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -933,8 +934,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -964,12 +965,12 @@
       /***/
     },
 
-    /***/ 1577: /***/ function (
+    /***/ 73: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3103);
+      module.exports = __webpack_require__(3067);
 
       /***/
     },
@@ -980,7 +981,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(1552);
+      return __webpack_exec__(4070);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 3f784ff6-HASH.js

Diff too large to display

Diff for 433-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js
failed to diff
Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js
failed to diff
Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for pages-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 3d78e98

@leerob leerob merged commit 39589ff into vercel:canary Jan 21, 2024
79 of 80 checks passed
@github-actions github-actions bot added the locked label Feb 5, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants