Use core-js promise polyfill for nomodule browsers (#10985)

* Use core-js promise polyfill for nomodule browsers

Also updated to the core-js@3 features modules instead of importing the exact modules directly.

Fixes #10966

* Simplify reflect and regexp

* Add ie11 test for bad Promise

* Add test script for regexp and ie11

Co-authored-by: JJ Kasper <[email protected]>
Co-authored-by: Joe Haddad <[email protected]>

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 **/dist/**
 examples/with-ioc/**
 examples/with-kea/**
+test/integration/production/public/**/*

.prettierignore

@@ -2,3 +2,4 @@ node_modules
 **/.next/**
 **/_next/**
 **/dist/**
+test/integration/production/public/**/*

.prettierignore_staged

@@ -1,3 +1,4 @@
 **/.next/**
 **/_next/**
 **/dist/**
+test/integration/production/public/**/*

packages/next-polyfill-nomodule/package.json

@@ -12,7 +12,6 @@
     "core-js": "3.6.4",
     "microbundle": "0.11.0",
     "object-assign": "4.1.1",
-    "promise-polyfill": "8.1.3",
     "url-polyfill": "1.1.8",
     "whatwg-fetch": "3.0.0"
   }

packages/next-polyfill-nomodule/src/index.js

@@ -1,66 +1,51 @@
-import 'core-js/modules/es6.array.copy-within'
-import 'core-js/modules/es6.array.fill'
-import 'core-js/modules/es6.array.find'
-import 'core-js/modules/es6.array.find-index'
-import 'core-js/modules/es7.array.flat-map'
-import 'core-js/modules/es6.array.from'
-import 'core-js/modules/es7.array.includes'
-import 'core-js/modules/es6.array.iterator'
-import 'core-js/modules/es6.array.of'
-import 'core-js/modules/es6.array.species'
-import 'core-js/modules/es6.function.has-instance'
-import 'core-js/modules/es6.map'
-import 'core-js/modules/es6.number.constructor'
-import 'core-js/modules/es6.number.epsilon'
-import 'core-js/modules/es6.number.is-finite'
-import 'core-js/modules/es6.number.is-integer'
-import 'core-js/modules/es6.number.is-nan'
-import 'core-js/modules/es6.number.is-safe-integer'
-import 'core-js/modules/es6.number.max-safe-integer'
-import 'core-js/modules/es6.number.min-safe-integer'
-import 'core-js/modules/es7.object.entries'
-import 'core-js/modules/es7.object.get-own-property-descriptors'
-import 'core-js/modules/es6.object.is'
-import 'core-js/modules/es7.object.values'
-import 'core-js/modules/es6.reflect.apply'
-import 'core-js/modules/es6.reflect.construct'
-import 'core-js/modules/es6.reflect.define-property'
-import 'core-js/modules/es6.reflect.delete-property'
-import 'core-js/modules/es6.reflect.get'
-import 'core-js/modules/es6.reflect.get-own-property-descriptor'
-import 'core-js/modules/es6.reflect.get-prototype-of'
-import 'core-js/modules/es6.reflect.has'
-import 'core-js/modules/es6.reflect.is-extensible'
-import 'core-js/modules/es6.reflect.own-keys'
-import 'core-js/modules/es6.reflect.prevent-extensions'
-import 'core-js/modules/es6.reflect.set'
-import 'core-js/modules/es6.reflect.set-prototype-of'
-import 'core-js/modules/es6.regexp.constructor'
-import 'core-js/modules/es6.regexp.flags'
-import 'core-js/modules/es6.regexp.match'
-import 'core-js/modules/es6.regexp.replace'
-import 'core-js/modules/es6.regexp.split'
-import 'core-js/modules/es6.regexp.search'
-import 'core-js/modules/es6.set'
-import 'core-js/modules/es6.symbol'
-import 'core-js/modules/es7.symbol.async-iterator'
-import 'core-js/modules/es6.string.code-point-at'
-import 'core-js/modules/es6.string.ends-with'
-import 'core-js/modules/es6.string.from-code-point'
-import 'core-js/modules/es6.string.includes'
-import 'core-js/modules/es6.string.iterator'
-import 'core-js/modules/es7.string.pad-start'
-import 'core-js/modules/es7.string.pad-end'
-import 'core-js/modules/es6.string.raw'
-import 'core-js/modules/es6.string.repeat'
-import 'core-js/modules/es6.string.starts-with'
-import 'core-js/modules/es7.string.trim-left'
-import 'core-js/modules/es7.string.trim-right'
-import 'core-js/modules/es6.weak-map'
-import 'core-js/modules/es6.weak-set'
+import 'core-js/features/array/copy-within'
+import 'core-js/features/array/fill'
+import 'core-js/features/array/find'
+import 'core-js/features/array/find-index'
+import 'core-js/features/array/flat-map'
+import 'core-js/features/array/from'
+import 'core-js/features/array/includes'
+import 'core-js/features/array/iterator'
+import 'core-js/features/array/of'
+import 'core-js/features/array/species'
+import 'core-js/features/function/has-instance'
+import 'core-js/features/map'
+import 'core-js/features/number/constructor'
+import 'core-js/features/number/epsilon'
+import 'core-js/features/number/is-finite'
+import 'core-js/features/number/is-integer'
+import 'core-js/features/number/is-nan'
+import 'core-js/features/number/is-safe-integer'
+import 'core-js/features/number/max-safe-integer'
+import 'core-js/features/number/min-safe-integer'
+import 'core-js/features/object/entries'
+import 'core-js/features/object/get-own-property-descriptors'
+import 'core-js/features/object/is'
+import 'core-js/features/object/values'
+import 'core-js/features/reflect'
+import 'core-js/features/regexp'
+import 'core-js/features/set'
+import 'core-js/features/symbol'
+import 'core-js/features/symbol/async-iterator'
+import 'core-js/features/string/code-point-at'
+import 'core-js/features/string/ends-with'
+import 'core-js/features/string/from-code-point'
+import 'core-js/features/string/includes'
+import 'core-js/features/string/iterator'
+import 'core-js/features/string/pad-start'
+import 'core-js/features/string/pad-end'
+import 'core-js/features/string/raw'
+import 'core-js/features/string/repeat'
+import 'core-js/features/string/starts-with'
+import 'core-js/features/string/trim-left'
+import 'core-js/features/string/trim-right'
+import 'core-js/features/weak-map'
+import 'core-js/features/weak-set'
+import 'core-js/features/promise'
+import 'core-js/features/promise/all-settled'
+import 'core-js/features/promise/finally'
 
 // Specialized Packages:
-import 'promise-polyfill/src/polyfill'
 import 'whatwg-fetch'
 import 'url-polyfill'
 import assign from 'object-assign'

test/integration/production/pages/bad-promise.js

@@ -0,0 +1,12 @@
+export default () => {
+  if (typeof window !== 'undefined') {
+    window.didRender = true
+  }
+  return (
+    <>
+      <script
+        dangerouslySetInnerHTML={{ __html: 'window.Promise = undefined' }}
+      />
+    </>
+  )
+}

test/integration/production/pages/regexp-polyfill.js

@@ -0,0 +1,12 @@
+export default () => {
+  if (typeof window !== 'undefined') {
+    window.didRender = true
+  }
+
+  return (
+    <>
+      <p>hi</p>
+      <script src="/regexp-test.js" />
+    </>
+  )
+}

test/integration/production/test/index.test.js

@@ -55,6 +55,18 @@ describe('Production Usage', () => {
       expect(html).toMatch(/Hello World/)
     })
 
+    if (browserName === 'internet explorer') {
+      it('should handle bad Promise polyfill', async () => {
+        const browser = await webdriver(appPort, '/bad-promise')
+        expect(await browser.eval('window.didRender')).toBe(true)
+      })
+
+      it('should polyfill RegExp successfully', async () => {
+        const browser = await webdriver(appPort, '/regexp-polyfill')
+        expect(await browser.eval('window.didRender')).toBe(true)
+      })
+    }
+
     it('should allow etag header support', async () => {
       const url = `http://localhost:${appPort}/`
       const etag = (await fetch(url)).headers.get('ETag')

test/integration/size-limit/test/index.test.js

@@ -80,7 +80,7 @@ describe('Production response size', () => {
     )
 
     // These numbers are without gzip compression!
-    const delta = responseSizesBytes - 232 * 1024
+    const delta = responseSizesBytes - 257 * 1024
     expect(delta).toBeLessThanOrEqual(1024) // don't increase size more than 1kb
     expect(delta).toBeGreaterThanOrEqual(-1024) // don't decrease size more than 1kb without updating target
   })