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.

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

To incorporate a specific version, adjust your import path accordingly. The default import (@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 running localStorage.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";