From fb794ce7b88001b98ad4a628bc2cc39a0c8ccfa5 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Mon, 15 Apr 2024 10:57:41 +0300 Subject: [PATCH] fix(*): Support older iOS 13.3 and 13.4 devices (#3188) --- .changeset/two-snakes-pay.md | 9 + package-lock.json | 432 +++++++++++++++++- packages/clerk-js/package.json | 3 +- .../src/ui/hooks/usePrefersReducedMotion.ts | 23 +- packages/clerk-js/src/ui/primitives/Flex.tsx | 19 +- .../src/ui/primitives/gapPropertyCompat.ts | 13 + packages/clerk-js/tsconfig.dev.json | 1 - packages/clerk-js/webpack.config.js | 18 + packages/elements/tsconfig.json | 2 +- packages/localizations/tsconfig.json | 2 +- packages/nextjs/tsconfig.json | 2 +- packages/react/tsconfig.json | 2 +- packages/shared/tsconfig.json | 2 +- 13 files changed, 509 insertions(+), 19 deletions(-) create mode 100644 .changeset/two-snakes-pay.md create mode 100644 packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts diff --git a/.changeset/two-snakes-pay.md b/.changeset/two-snakes-pay.md new file mode 100644 index 0000000000..cbb95986a5 --- /dev/null +++ b/.changeset/two-snakes-pay.md @@ -0,0 +1,9 @@ +--- +'@clerk/localizations': patch +'@clerk/clerk-js': patch +'@clerk/nextjs': patch +'@clerk/shared': patch +'@clerk/clerk-react': patch +--- + +Support older iOS 13.3 and 13.4 mobile devices diff --git a/package-lock.json b/package-lock.json index bf3301ffd7..3159fa1d02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37692,9 +37692,10 @@ "eslint-config-custom": "*", "react-refresh": "^0.14.0", "react-refresh-typescript": "^2.0.5", + "terser-webpack-plugin": "^5.3.10", "ts-loader": "^9.3.0", "typescript": "*", - "webpack": "^5.85.0", + "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.9.0", "webpack-cli": "^5.1.3", "webpack-dev-server": "^4.15.0", @@ -37708,6 +37709,109 @@ "react-dom": ">=18" } }, + "packages/clerk-js/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "packages/clerk-js/node_modules/@webassemblyjs/ast": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", + "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", + "dev": true, + "dependencies": { + "@webassemblyjs/helper-numbers": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6" + } + }, + "packages/clerk-js/node_modules/@webassemblyjs/helper-buffer": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", + "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==", + "dev": true + }, + "packages/clerk-js/node_modules/@webassemblyjs/helper-wasm-section": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", + "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/wasm-gen": "1.12.1" + } + }, + "packages/clerk-js/node_modules/@webassemblyjs/wasm-edit": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", + "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/helper-wasm-section": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-opt": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1", + "@webassemblyjs/wast-printer": "1.12.1" + } + }, + "packages/clerk-js/node_modules/@webassemblyjs/wasm-gen": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", + "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" + } + }, + "packages/clerk-js/node_modules/@webassemblyjs/wasm-opt": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", + "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1" + } + }, + "packages/clerk-js/node_modules/@webassemblyjs/wasm-parser": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", + "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-api-error": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" + } + }, + "packages/clerk-js/node_modules/@webassemblyjs/wast-printer": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", + "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.12.1", + "@xtuc/long": "4.2.2" + } + }, "packages/clerk-js/node_modules/ajv": { "version": "8.12.0", "dev": true, @@ -37750,6 +37854,70 @@ "webpack": ">=5" } }, + "packages/clerk-js/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "packages/clerk-js/node_modules/enhanced-resolve": { + "version": "5.16.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", + "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "packages/clerk-js/node_modules/eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "packages/clerk-js/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "packages/clerk-js/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "packages/clerk-js/node_modules/jest-worker": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", + "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==", + "dev": true, + "dependencies": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^8.0.0" + }, + "engines": { + "node": ">= 10.13.0" + } + }, "packages/clerk-js/node_modules/json-schema-traverse": { "version": "1.0.0", "dev": true, @@ -37773,6 +37941,268 @@ "url": "https://opencollective.com/webpack" } }, + "packages/clerk-js/node_modules/serialize-javascript": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", + "dev": true, + "dependencies": { + "randombytes": "^2.1.0" + } + }, + "packages/clerk-js/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "packages/clerk-js/node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "packages/clerk-js/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, + "packages/clerk-js/node_modules/terser": { + "version": "5.30.3", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz", + "integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==", + "dev": true, + "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "packages/clerk-js/node_modules/terser-webpack-plugin": { + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz", + "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.20", + "jest-worker": "^27.4.5", + "schema-utils": "^3.1.1", + "serialize-javascript": "^6.0.1", + "terser": "^5.26.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "uglify-js": { + "optional": true + } + } + }, + "packages/clerk-js/node_modules/terser-webpack-plugin/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "packages/clerk-js/node_modules/terser-webpack-plugin/node_modules/ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true, + "peerDependencies": { + "ajv": "^6.9.1" + } + }, + "packages/clerk-js/node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "packages/clerk-js/node_modules/terser-webpack-plugin/node_modules/schema-utils": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "packages/clerk-js/node_modules/watchpack": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", + "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", + "dev": true, + "dependencies": { + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "packages/clerk-js/node_modules/webpack": { + "version": "5.91.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", + "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", + "dev": true, + "dependencies": { + "@types/eslint-scope": "^3.7.3", + "@types/estree": "^1.0.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", + "acorn": "^8.7.1", + "acorn-import-assertions": "^1.9.0", + "browserslist": "^4.21.10", + "chrome-trace-event": "^1.0.2", + "enhanced-resolve": "^5.16.0", + "es-module-lexer": "^1.2.1", + "eslint-scope": "5.1.1", + "events": "^3.2.0", + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.2.11", + "json-parse-even-better-errors": "^2.3.1", + "loader-runner": "^4.2.0", + "mime-types": "^2.1.27", + "neo-async": "^2.6.2", + "schema-utils": "^3.2.0", + "tapable": "^2.1.1", + "terser-webpack-plugin": "^5.3.10", + "watchpack": "^2.4.1", + "webpack-sources": "^3.2.3" + }, + "bin": { + "webpack": "bin/webpack.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependenciesMeta": { + "webpack-cli": { + "optional": true + } + } + }, + "packages/clerk-js/node_modules/webpack-sources": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", + "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==", + "dev": true, + "engines": { + "node": ">=10.13.0" + } + }, + "packages/clerk-js/node_modules/webpack/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "packages/clerk-js/node_modules/webpack/node_modules/ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true, + "peerDependencies": { + "ajv": "^6.9.1" + } + }, + "packages/clerk-js/node_modules/webpack/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "packages/clerk-js/node_modules/webpack/node_modules/schema-utils": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "packages/elements": { "name": "@clerk/elements", "version": "0.1.40", diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index 7b421453e0..16b3833426 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -87,9 +87,10 @@ "eslint-config-custom": "*", "react-refresh": "^0.14.0", "react-refresh-typescript": "^2.0.5", + "terser-webpack-plugin": "^5.3.10", "ts-loader": "^9.3.0", "typescript": "*", - "webpack": "^5.85.0", + "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.9.0", "webpack-cli": "^5.1.3", "webpack-dev-server": "^4.15.0", diff --git a/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts b/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts index 9d39777c58..23fa361d2f 100644 --- a/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts +++ b/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts @@ -13,9 +13,28 @@ export function usePrefersReducedMotion() { setPrefersReducedMotion(!event.matches); }; - mediaQueryList.addEventListener('change', listener); + const addListenerCompat = (event: any, handler: any) => { + if ('addEventListener' in mediaQueryList) { + return mediaQueryList.addEventListener(event, handler); + } else { + // @ts-expect-error This is a fix for Safari iOS 13.4 + // This version only supports the deprecated addListener method + // addListener accepts a single argument, which is the handler + return mediaQueryList.addListener(handler); + } + }; + + const removeListenerCompat = (event: any, handler: any) => { + if ('addEventListener' in mediaQueryList) { + return mediaQueryList.removeEventListener(event, handler); + } else { + // @ts-ignore same as above + return mediaQueryList.removeListener(handler); + } + }; - return () => mediaQueryList.removeEventListener('change', listener); + addListenerCompat('change', listener); + return () => removeListenerCompat('change', listener); }, []); return prefersReducedMotion; diff --git a/packages/clerk-js/src/ui/primitives/Flex.tsx b/packages/clerk-js/src/ui/primitives/Flex.tsx index 40f4c08fe5..14d5ee39f6 100644 --- a/packages/clerk-js/src/ui/primitives/Flex.tsx +++ b/packages/clerk-js/src/ui/primitives/Flex.tsx @@ -4,6 +4,7 @@ import type { StateProps, StyleVariants } from '../styledSystem'; import { createVariants } from '../styledSystem'; import type { BoxProps } from './Box'; import { Box } from './Box'; +import { createFlexGapPropertyIosCompat } from './gapPropertyCompat'; const { applyVariants, filterProps } = createVariants(theme => ({ base: { @@ -35,15 +36,15 @@ const { applyVariants, filterProps } = createVariants(theme => ({ wrapReverse: { flexWrap: 'wrap-reverse' }, }, gap: { - 1: { gap: theme.space.$1 }, - 2: { gap: theme.space.$2 }, - 3: { gap: theme.space.$3 }, - 4: { gap: theme.space.$4 }, - 5: { gap: theme.space.$5 }, - 6: { gap: theme.space.$6 }, - 7: { gap: theme.space.$7 }, - 8: { gap: theme.space.$8 }, - 9: { gap: theme.space.$9 }, + 1: createFlexGapPropertyIosCompat(theme.space.$1), + 2: createFlexGapPropertyIosCompat(theme.space.$2), + 3: createFlexGapPropertyIosCompat(theme.space.$3), + 4: createFlexGapPropertyIosCompat(theme.space.$4), + 5: createFlexGapPropertyIosCompat(theme.space.$5), + 6: createFlexGapPropertyIosCompat(theme.space.$6), + 7: createFlexGapPropertyIosCompat(theme.space.$7), + 8: createFlexGapPropertyIosCompat(theme.space.$8), + 9: createFlexGapPropertyIosCompat(theme.space.$9), }, center: { true: { justifyContent: 'center', alignItems: 'center' }, diff --git a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts new file mode 100644 index 0000000000..fc6bc00d23 --- /dev/null +++ b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts @@ -0,0 +1,13 @@ +export const createFlexGapPropertyIosCompat = (val: string) => { + // Resolve gap property compatibility issue on iOS 13 + // This is not needed for css grid, only for flex + // TODO: Test whether we need to make the check more generic + if (navigator?.userAgent?.match(/(iphone|ipad).+os.+13.+safari/i)) { + return { + '& > * + *': { + marginTop: val, + }, + }; + } + return { gap: val }; +}; diff --git a/packages/clerk-js/tsconfig.dev.json b/packages/clerk-js/tsconfig.dev.json index 0b3c39d978..2a04180ed4 100644 --- a/packages/clerk-js/tsconfig.dev.json +++ b/packages/clerk-js/tsconfig.dev.json @@ -2,7 +2,6 @@ "extends": "./tsconfig.json", "compilerOptions": { "sourceMap": true, - "target": "ESNext", "noImplicitReturns": true, "noUnusedLocals": true, "noUnusedParameters": true diff --git a/packages/clerk-js/webpack.config.js b/packages/clerk-js/webpack.config.js index 2133f5ae1d..530824b349 100644 --- a/packages/clerk-js/webpack.config.js +++ b/packages/clerk-js/webpack.config.js @@ -5,6 +5,7 @@ const { merge } = require('webpack-merge'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const ReactRefreshTypeScript = require('react-refresh-typescript'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const TerserPlugin = require('terser-webpack-plugin'); const isProduction = mode => mode === 'production'; const isDevelopment = mode => !isProduction(mode); @@ -151,6 +152,23 @@ const commonForProd = () => { libraryTarget: 'umd', globalObject: 'globalThis', }, + optimization: { + minimize: true, + minimizer: [ + compiler => { + new TerserPlugin({ + terserOptions: { + compress: { + passes: 2, + }, + mangle: { + safari10: true, + }, + }, + }).apply(compiler); + }, + ], + }, plugins: [ // new webpack.optimize.LimitChunkCountPlugin({ // maxChunks: 5, diff --git a/packages/elements/tsconfig.json b/packages/elements/tsconfig.json index 0c6038b952..280b17452f 100644 --- a/packages/elements/tsconfig.json +++ b/packages/elements/tsconfig.json @@ -19,7 +19,7 @@ "skipLibCheck": true, "sourceMap": false, "strict": true, - "target": "ES2020", + "target": "ES2019", "paths": { "~/*": ["src/*"] }, diff --git a/packages/localizations/tsconfig.json b/packages/localizations/tsconfig.json index 5020342437..1ee2eb95a3 100644 --- a/packages/localizations/tsconfig.json +++ b/packages/localizations/tsconfig.json @@ -7,7 +7,7 @@ "esModuleInterop": true, "skipLibCheck": true, "allowJs": true, - "target": "ES2020", + "target": "ES2019", "emitDeclarationOnly": true, "declaration": true, "declarationMap": true, diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json index 8f20e3722f..11f92d1c10 100644 --- a/packages/nextjs/tsconfig.json +++ b/packages/nextjs/tsconfig.json @@ -19,7 +19,7 @@ "skipLibCheck": true, "sourceMap": false, "strict": true, - "target": "ES2020", + "target": "ES2019", "rootDir": "src" }, "include": ["src"] diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index 01630db020..b6a9139cc8 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -19,7 +19,7 @@ "skipLibCheck": true, "sourceMap": false, "strict": true, - "target": "ES2020" + "target": "ES2019" }, "include": ["src"], "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"] diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json index ef183915a6..0a53c92325 100644 --- a/packages/shared/tsconfig.json +++ b/packages/shared/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "ES2020", + "target": "ES2019", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "isolatedModules": true,