deprecate extents but replace its behavior

src/content/guide/03-layercake-props.md

@@ -181,7 +181,7 @@ Same as [xScale](/guide#xscale) but for the r scale. The default is [`d3.scaleSq
 
 ### xDomain `Array:[min: Number|null, max: Number|null]|Array<Number|String>|Function`
 
-Set a min or max on the x scale. If you want to inherit the value from the data's extent, set that value to `null`.
+Set a min or max on the x scale. If you want to inherit the value from the data's extent, set that value to `null`. If you set an array with no `null`s, the dynamic extent calculation of the data for that dimension will be skipped. This can be useful as a performance improvement.
 
 ```svelte
 <LayerCake
@@ -343,16 +343,6 @@ Reverse the default r range. By default this is `false` and the range is `[1, 25
 
 This is ignored if you set [rRange](/guide#rrange).
 
-### extents `Object`
-
-Manually set the extents of the x, y or r scale. Setting values here will skip any dynamic extent calculation of the data for that dimension. This is similar to setting a fixed domain using `xDomain`, `yDomain`, `rDomain` or `zDomain` with the exception that this prop has the performance improvement of skipping the domain calculation. It may be removed in future versions, however. See [Issue #179](https://github.com/mhkeller/layercake/issues/179).
-
-```svelte
-<LayerCake
-  extents={{ x: [0, 100], y: [50, 100], z: ['apple', 'carrot', 'ginger'] }}
->
-```
-
 ### flatData `Array`
 
 In order for Layer Cake to measure the extents of your data, it needs a flat array of items that the x, y, z and r accessors can find. If your data is not flat (often the case if your renderers prefer a nested format such as in [multi-series line](/example/MultiLine) charts or GeoJSON such as in [maps](/example/MapSvg)), you can tell it to measure extents against a flat version. This _will not_ change the shape of the data that gets passed to components — it is only for extent calculation.

src/lib/LayerCake.svelte

@@ -18,6 +18,7 @@
 	import printDebug from './helpers/printDebug.js';
 
 	import defaultScales from './settings/defaultScales.js';
+	import getCompleteDomain from './utils/getCompleteDomain.js';
 
 	const printDebug_debounced = debounce(printDebug, 200);
 
@@ -120,8 +121,6 @@
 	export let rDomainSort = true;
 	/** @type {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={}] The amount of padding to put around your chart. It operates like CSS box-sizing: border-box; where values are subtracted from the parent container's width and height, the same as a [D3 margin convention](https://bl.ocks.org/mbostock/3019563). */
 	export let padding = {};
-	/** @type {{ x?: [min: Number, max: Number], y?: [min: Number, max: Number], r?: [min: Number, max: Number], z?: [min: Number, max: Number] }} [extents] Manually set the extents of the x, y or r scale as a two-dimensional array of the min and max you want. Setting values here will skip any dynamic extent calculation of the data for that dimension. */
-	export let extents = {};
 
 	/** @type {Array<Object|Array<any>>|undefined} [flatData=data] A flat version of data. */
 	export let flatData = undefined;
@@ -181,7 +180,6 @@
 	const _percentRange = writable(percentRange);
 	const _containerWidth = writable(containerWidth);
 	const _containerHeight = writable(containerHeight);
-	const _extents = writable(filterObject(extents));
 	const _data = writable(data);
 	const _flatData = writable(flatData || data);
 	const _padding = writable(padding);
@@ -223,7 +221,6 @@
 	$: $_percentRange = percentRange;
 	$: $_containerWidth = containerWidth;
 	$: $_containerHeight = containerHeight;
-	$: $_extents = filterObject(extents);
 	$: $_data = data;
 	$: $_flatData = flatData || data;
 	$: $_padding = padding;
@@ -328,11 +325,14 @@
 		[
 			_flatData,
 			activeGetters_d,
-			_extents,
 			_xScale,
 			_yScale,
 			_rScale,
 			_zScale,
+			_xDomain,
+			_yDomain,
+			_zDomain,
+			_rDomain,
 			_xDomainSort,
 			_yDomainSort,
 			_zDomainSort,
@@ -341,11 +341,14 @@
 		([
 			$flatData,
 			$activeGetters,
-			$extents,
 			$_xScale,
 			$_yScale,
 			$_rScale,
 			$_zScale,
+			$xDomain,
+			$yDomain,
+			$zDomain,
+			$rDomain,
 			$_xDomainSort,
 			$_yDomainSort,
 			$_zDomainSort,
@@ -357,12 +360,25 @@
 				r: { scale: $_rScale, sort: $_rDomainSort },
 				z: { scale: $_zScale, sort: $_zDomainSort }
 			};
-			const getters = filterObject($activeGetters, $extents);
+
+			/**
+			 * Skip any extents that the user already set a min and max for
+			 */
+			const extents = Object.fromEntries(
+				[
+					['x', getCompleteDomain($xDomain)],
+					['y', getCompleteDomain($yDomain)],
+					['z', getCompleteDomain($zDomain)],
+					['r', getCompleteDomain($rDomain)]
+				].filter(([_, v]) => v !== false)
+			);
+
+			const getters = filterObject($activeGetters, extents);
 			const activeScales = Object.fromEntries(Object.keys(getters).map(k => [k, scaleLookup[k]]));
 
 			if (Object.keys(getters).length > 0) {
 				const calculatedExtents = calcScaleExtents($flatData, getters, activeScales);
-				return { ...calculatedExtents, ...$extents };
+				return { ...calculatedExtents, ...extents };
 			} else {
 				return {};
 			}

src/lib/utils/getCompleteDomain.js

@@ -0,0 +1,16 @@
+/**
+ * Whether we need to calculate the domain or not
+ * @param {Array<string|number|null>|Function|undefined} domain - The domain to check
+ * @returns {boolean|Array<string|number>} Whether we need to calculate the domain
+ */
+export default function getCompleteDomain(domain) {
+	// If there's no domain, calculate it
+	if (!domain) return false;
+	// If the domain is a function, calculate it
+	if (typeof domain === 'function') return false;
+	// If the domain is an array with a null value, calculate it
+	if (Array.isArray(domain) && domain.includes(null)) return false;
+	// Otherwise, don't calculate it
+	// @ts-ignore
+	return domain;
+}