Enable variables

vercel · Aug 11, 2022 · e1e9866 · e1e9866
1 parent d77cbd2
commit e1e9866
Show file tree

Hide file tree

Showing 12 changed files with 404 additions and 405 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -70,7 +70,7 @@
           {
             "functions": false,
             "classes": false,
-            "variables": false,
+            "variables": true,
             "enums": true,
             "typedefs": true
           }

diff --git a/packages/next/build/analysis/get-page-static-info.ts b/packages/next/build/analysis/get-page-static-info.ts
@@ -226,6 +226,7 @@ function getMiddlewareRegExpStrings(
   }
 }
 
+let warnedAboutExperimentalEdgeApiFunctions = false
 function warnAboutExperimentalEdgeApiFunctions() {
   if (warnedAboutExperimentalEdgeApiFunctions) {
     return
@@ -234,8 +235,6 @@ function warnAboutExperimentalEdgeApiFunctions() {
   warnedAboutExperimentalEdgeApiFunctions = true
 }
 
-let warnedAboutExperimentalEdgeApiFunctions = false
-
 const warnedUnsupportedValueMap = new Map<string, boolean>()
 function warnAboutUnsupportedValue(
   pageFilePath: string,

diff --git a/packages/next/build/webpack/plugins/middleware-plugin.ts b/packages/next/build/webpack/plugins/middleware-plugin.ts
@@ -135,6 +135,35 @@ function getCodeAnalizer(params: {
     } = params
     const { hooks } = parser
 
+    /**
+     * For an expression this will check the graph to ensure it is being used
+     * by exports. Then it will store in the module buildInfo a boolean to
+     * express that it contains dynamic code and, if it is available, the
+     * module path that is using it.
+     */
+    const handleExpression = () => {
+      if (!isInMiddlewareLayer(parser)) {
+        return
+      }
+
+      wp.optimize.InnerGraph.onUsage(parser.state, (used = true) => {
+        const buildInfo = getModuleBuildInfo(parser.state.module)
+        if (buildInfo.usingIndirectEval === true || used === false) {
+          return
+        }
+
+        if (!buildInfo.usingIndirectEval || used === true) {
+          buildInfo.usingIndirectEval = used
+          return
+        }
+
+        buildInfo.usingIndirectEval = new Set([
+          ...Array.from(buildInfo.usingIndirectEval),
+          ...Array.from(used),
+        ])
+      })
+    }
+
     /**
      * This expression handler allows to wrap a dynamic code expression with a
      * function call where we can warn about dynamic code not being allowed
@@ -216,35 +245,6 @@ function getCodeAnalizer(params: {
       }
     }
 
-    /**
-     * For an expression this will check the graph to ensure it is being used
-     * by exports. Then it will store in the module buildInfo a boolean to
-     * express that it contains dynamic code and, if it is available, the
-     * module path that is using it.
-     */
-    const handleExpression = () => {
-      if (!isInMiddlewareLayer(parser)) {
-        return
-      }
-
-      wp.optimize.InnerGraph.onUsage(parser.state, (used = true) => {
-        const buildInfo = getModuleBuildInfo(parser.state.module)
-        if (buildInfo.usingIndirectEval === true || used === false) {
-          return
-        }
-
-        if (!buildInfo.usingIndirectEval || used === true) {
-          buildInfo.usingIndirectEval = used
-          return
-        }
-
-        buildInfo.usingIndirectEval = new Set([
-          ...Array.from(buildInfo.usingIndirectEval),
-          ...Array.from(used),
-        ])
-      })
-    }
-
     /**
      * Declares an environment variable that is being used in this module
      * through this static analysis.

diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
@@ -319,6 +319,116 @@ function handleLoading(
   })
 }
 
+const ImageElement = ({
+  imgAttributes,
+  heightInt,
+  widthInt,
+  qualityInt,
+  className,
+  imgStyle,
+  blurStyle,
+  isLazy,
+  fill,
+  placeholder,
+  loading,
+  srcString,
+  config,
+  unoptimized,
+  loader,
+  onLoadingCompleteRef,
+  setBlurComplete,
+  setShowAltText,
+  onLoad,
+  onError,
+  noscriptSizes,
+  ...rest
+}: ImageElementProps) => {
+  loading = isLazy ? 'lazy' : loading
+  return (
+    <>
+      <img
+        {...rest}
+        {...imgAttributes}
+        width={widthInt}
+        height={heightInt}
+        decoding="async"
+        data-nimg={`future${fill ? '-fill' : ''}`}
+        className={className}
+        // @ts-ignore - TODO: upgrade to `@types/react@17`
+        loading={loading}
+        style={{ ...imgStyle, ...blurStyle }}
+        ref={useCallback(
+          (img: ImgElementWithDataProp) => {
+            if (process.env.NODE_ENV !== 'production') {
+              if (img && !srcString) {
+                console.error(`Image is missing required "src" property:`, img)
+              }
+            }
+            if (img?.complete) {
+              handleLoading(
+                img,
+                srcString,
+                placeholder,
+                onLoadingCompleteRef,
+                setBlurComplete
+              )
+            }
+          },
+          [srcString, placeholder, onLoadingCompleteRef, setBlurComplete]
+        )}
+        onLoad={(event) => {
+          const img = event.currentTarget as ImgElementWithDataProp
+          handleLoading(
+            img,
+            srcString,
+            placeholder,
+            onLoadingCompleteRef,
+            setBlurComplete
+          )
+          if (onLoad) {
+            onLoad(event)
+          }
+        }}
+        onError={(event) => {
+          // if the real image fails to load, this will ensure "alt" is visible
+          setShowAltText(true)
+          if (placeholder === 'blur') {
+            // If the real image fails to load, this will still remove the placeholder.
+            setBlurComplete(true)
+          }
+          if (onError) {
+            onError(event)
+          }
+        }}
+      />
+      {placeholder === 'blur' && (
+        <noscript>
+          <img
+            {...rest}
+            {...generateImgAttrs({
+              config,
+              src: srcString,
+              unoptimized,
+              width: widthInt,
+              quality: qualityInt,
+              sizes: noscriptSizes,
+              loader,
+            })}
+            width={widthInt}
+            height={heightInt}
+            decoding="async"
+            data-nimg={`future${fill ? '-fill' : ''}`}
+            style={imgStyle}
+            className={className}
+            // @ts-ignore - TODO: upgrade to `@types/react@17`
+            loading={loading}
+          />
+        </noscript>
+      )}
+    </>
+  )
+}
+
 export default function Image({
   src,
   sizes,
@@ -690,116 +800,6 @@ export default function Image({
   )
 }
 
-const ImageElement = ({
-  imgAttributes,
-  heightInt,
-  widthInt,
-  qualityInt,
-  className,
-  imgStyle,
-  blurStyle,
-  isLazy,
-  fill,
-  placeholder,
-  loading,
-  srcString,
-  config,
-  unoptimized,
-  loader,
-  onLoadingCompleteRef,
-  setBlurComplete,
-  setShowAltText,
-  onLoad,
-  onError,
-  noscriptSizes,
-  ...rest
-}: ImageElementProps) => {
-  loading = isLazy ? 'lazy' : loading
-  return (
-    <>
-      <img
-        {...rest}
-        {...imgAttributes}
-        width={widthInt}
-        height={heightInt}
-        decoding="async"
-        data-nimg={`future${fill ? '-fill' : ''}`}
-        className={className}
-        // @ts-ignore - TODO: upgrade to `@types/react@17`
-        loading={loading}
-        style={{ ...imgStyle, ...blurStyle }}
-        ref={useCallback(
-          (img: ImgElementWithDataProp) => {
-            if (process.env.NODE_ENV !== 'production') {
-              if (img && !srcString) {
-                console.error(`Image is missing required "src" property:`, img)
-              }
-            }
-            if (img?.complete) {
-              handleLoading(
-                img,
-                srcString,
-                placeholder,
-                onLoadingCompleteRef,
-                setBlurComplete
-              )
-            }
-          },
-          [srcString, placeholder, onLoadingCompleteRef, setBlurComplete]
-        )}
-        onLoad={(event) => {
-          const img = event.currentTarget as ImgElementWithDataProp
-          handleLoading(
-            img,
-            srcString,
-            placeholder,
-            onLoadingCompleteRef,
-            setBlurComplete
-          )
-          if (onLoad) {
-            onLoad(event)
-          }
-        }}
-        onError={(event) => {
-          // if the real image fails to load, this will ensure "alt" is visible
-          setShowAltText(true)
-          if (placeholder === 'blur') {
-            // If the real image fails to load, this will still remove the placeholder.
-            setBlurComplete(true)
-          }
-          if (onError) {
-            onError(event)
-          }
-        }}
-      />
-      {placeholder === 'blur' && (
-        <noscript>
-          <img
-            {...rest}
-            {...generateImgAttrs({
-              config,
-              src: srcString,
-              unoptimized,
-              width: widthInt,
-              quality: qualityInt,
-              sizes: noscriptSizes,
-              loader,
-            })}
-            width={widthInt}
-            height={heightInt}
-            decoding="async"
-            data-nimg={`future${fill ? '-fill' : ''}`}
-            style={imgStyle}
-            className={className}
-            // @ts-ignore - TODO: upgrade to `@types/react@17`
-            loading={loading}
-          />
-        </noscript>
-      )}
-    </>
-  )
-}
-
 function defaultLoader({
   config,
   src,