Product Listing Pages and Search
Browser compatibility
Depict UI is crafted to cater to a diverse range of users and developers. While we lean into modern web advancements, we’re also considerate of those who don’t regularly update their devices or developers who might not be familiar with transpilation.
Our CSS is designed with a wide-ranging compatibility in mind except our new search modal. For compatibilitiy, use the classic one.. On the other hand, our JavaScript harnesses the latest syntax and features. Because of this, it may require transpilation and polyfilling to ensure flawless performance on older browsers - don’t worry, we’ll help you with both.
To incorporate a specific version, adjust your import path accordingly. The default import (
| Requirement for older browsers | Description | Do you need to handle it? |
|---|---|---|
| Transpiling | Transpiling adjusts the syntax of code, making it comprehensible to older browsers. It’s like simplifying language for clearer understanding. | No. Depict provides an ES10 pre-transpiled version out-of-the-box. |
| Polyfilling | Polyfilling offers missing APIs through emulation, ensuring all requisite functions are available. | Yes, but we’re here to guide you through. |
Out-of-the-box support
By default, Depict UI is pre-transpiled to ES10, ensuring broad compatibility. Still, we do maintain a version for the very latest browsers for those who wish to use it.| Import postfix | Supported ECMAScript Version | Supported browsers |
|---|---|---|
| /ES10 (default) | ES10 (ECMAScript 2019) | See here |
| /latest | ES14 (ECMAScript 2023) | Best for current major browsers |
@depict-ai/react-ui) directly provides the ES10 version.
For those interested in embracing the future, you can use find and replace in your editor to easily get the latest version. Make sure to limit yourself to .js/.ts/.tsx files and then find: (@depict-ai(?!/types)[^"';\s]*) and replace with: $1/latest.
Polyfilling
Always test your application in your oldest targeted browser and then add any missing APIs. Make sure you’ve enabled logging in the SDK by runninglocalStorage.debug=true, then reload (see Debugging and Error reporting). Try testing as many possible features/use cases of the UI as possible as some polyfills only are required for specific features.
Below are the polyfills we at Depict use. Some may need transpilation or might rely on others. Each link leads to a babel REPL for viewing both transpiled and original code.
For a simplified approach, consider platforms like Polyfill.io.
| Web API (click for compatibility) | Polyfill |
|---|---|
| structuredClone | import "core-js/stable/structured-clone"; |
| Array.toSorted() | import "core-js/stable/array/to-sorted"; |
| Smooth scrolling | smoothscroll-polyfill |
| Element.replaceChildren() | See here |
| WeakRef | See here |
| EventTarget (somewhat misleading compat table, doesn’t list which versions have a constructable EventTarget) | See here |
| String.at() | import "core-js/proposals/relative-indexing-method"; |
| String.trimStart() & String.trimEnd | import "core-js/proposals/string-left-right-trim"; |
| queueMicrotask | See here |
| Node.contains() | See here |
| globalThis | See here |
<template> element | See here |
| ResizeObserver | See here |
once addEventListener option | See here |
| fetch | See here |
| setInterval and setTimeout API: Supports parameters for callback | See here |
DOMParser API: parseFromString: HTML (text/html) support | See here |
| Element.before() | See here |
| Element.classList | See here |
| Element.replaceWith() | See here |
| CustomEvent | See here |
| Element.closest() | See here |
| Element.matches() | See here |
| String.prototype.replaceAll | See here |
| String.prototype.startsWith | See here |
| String.prototype.includes | See here |
| String.prototype.endsWith | See here |
| Element.after(), Element.prepend(), Element.append(), Element.remove() | See here |
| DOMTokenList.forEach() | See here |
| Proxy | import "proxy-polyfill/proxy.min.js"; |
| navigator.sendBeacon() | import "navigator.sendbeacon/dist/navigator.sendbeacon.min.js"; |
| Web Animations API (WAAPI) | import "web-animations-js/web-animations.min"; |
| document.currentScript | import "current-script-polyfill"; |
| IntersectionObserver | import "intersection-observer"; |
| Scroll methods on elements (scroll, scrollTo, scrollBy) | import "element-scroll-polyfill"; |
| Symbol | import "core-js/modules/es.symbol"; |
| Array.from | import "core-js/es/array/from"; |
| Array.fill | import "core-js/es/array/fill"; |
| Array.flat | import "core-js/es/array/flat"; |
| Math.imul | import "core-js/es/math/imul"; |
| Math.trunc | import "core-js/es/math/trunc"; |
| Symbol.iterator | import "core-js/es/symbol/iterator"; |
| Symbol.async-iterator | import "core-js/es/symbol/async-iterator"; |
| Promise.finally | import "core-js/features/promise/finally"; |
| Promise.any | import "core-js/features/promise/any"; |
| Promise.allSettled | import "core-js/features/promise/all-settled"; |
| Promise | import "core-js/features/promise/index"; |
| Object.assign | import "core-js/features/object/assign"; |
| Map.values | import "core-js/features/map/map-values"; |
| Array.forEach | import "core-js/stable/array/for-each"; |
| Reflect | import "core-js/stable/reflect"; |
| Array.find | import "core-js/stable/array/find"; |
| Array.includes | import "core-js/stable/array/includes"; |
| Array.findIndex | import "core-js/stable/array/find-index"; |
| Object.entries | import "core-js/stable/object/entries"; |
| Object.fromEntries | import "core-js/stable/object/from-entries"; |
| Object.values | import "core-js/stable/object/values"; |
| Set | import "core-js/stable/set/"; |
| String.matchAll | import "core-js/features/string/match-all"; |
| URLSearchParams | import "core-js/web/url-search-params"; |
| URL | import "core-js/web/url"; |
| DOM Collections (like HTMLCollection) forEach/iterator | import "core-js/web/dom-collections"; |
| WeakSet | import "core-js/modules/es.weak-set"; |