@solidports/recharts 0.1.0

package/src/state/mouseEventsMiddleware.ts

@@ -0,0 +1,185 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "./chartState"
+import type { RelativePointer, HTMLMousePointer } from "../util/types"
+import { selectActivePropsFromChartPointer } from "./selectors/selectActivePropsFromChartPointer"
+import { selectTooltipEventType } from "./selectors/selectTooltipEventType"
+import { getRelativeCoordinate } from "../util/getRelativeCoordinate"
+import { readChartState } from "./chartState"
+
+import { type SetStoreFunction } from '../util/solid-1-compat';
+import { setTooltipInteraction } from "./tooltipInteraction"
+export type MouseEventHandlers = {
+	handleMouseClick: (mousePointer: HTMLMousePointer) => void
+	handleMouseMove: (mousePointer: HTMLMousePointer) => void
+}
+
+/**
+ * Creates mouse event handler functions that read from the Solid store and update it directly.
+ * Replaces the Redux createListenerMiddleware pattern.
+ */
+export function createMouseEventHandlers(
+	store: ChartState,
+	setStore: SetStoreFunction<ChartState>,
+): MouseEventHandlers {
+	/*
+	 * This single rafId is safe because:
+	 * 1. Each chart has its own store instance with its own handlers
+	 * 2. mouseMove only fires from one DOM element (the chart wrapper)
+	 * 3. Rapid mousemove events from the same element SHOULD debounce - we only care about the latest position
+	 * This is different from externalEventsMiddleware which handles multiple event types
+	 * (click, mouseenter, mouseleave, etc.) that should NOT cancel each other.
+	 */
+	let rafId: number | null = null
+	let timeoutId: ReturnType<typeof setTimeout> | null = null
+	let latestChartPointer: RelativePointer | null = null
+
+	function handleMouseClick(mousePointer: HTMLMousePointer): void {
+		const activeProps = selectActivePropsFromChartPointer(
+			store,
+			getRelativeCoordinate(mousePointer),
+		)
+		if (activeProps?.activeIndex != null) {
+			setTooltipInteraction(setStore, "axisInteraction", "click", {
+				active: true,
+				coordinate: activeProps.activeCoordinate,
+				dataKey: undefined,
+				graphicalItemId: undefined,
+				index: activeProps.activeIndex,
+			})
+		}
+	}
+
+	function handleMouseMove(mousePointer: HTMLMousePointer): void {
+		const { throttleDelay, throttledEvents } = store.eventSettings
+		const isThrottled = throttledEvents === "all" || throttledEvents?.includes("mousemove")
+
+		/* Cancel any pending execution */
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId)
+			rafId = null
+		}
+		if (timeoutId !== null && (typeof throttleDelay !== "number" || !isThrottled)) {
+			clearTimeout(timeoutId)
+			timeoutId = null
+		}
+
+		/*
+		 * Here it is important to resolve the chart pointer _before_ the callback,
+		 * because once we leave the current event loop, the mousePointer event object will lose
+		 * reference to currentTarget which getRelativeCoordinate uses.
+		 */
+		latestChartPointer = getRelativeCoordinate(mousePointer)
+		const callback = () => {
+			/*
+			 * Here we read a fresh state again inside the callback to ensure we have the latest state values
+			 * after any potential actions that may have been dispatched between the original event and this callback.
+			 */
+			const tooltipEventType = selectTooltipEventType(
+				store,
+				readChartState(store).tooltip.settings.shared,
+			)
+			if (latestChartPointer == null) {
+				rafId = null
+				timeoutId = null
+				return
+			}
+
+			/*
+			 * This functionality only applies to charts that have axes.
+			 * Graphical items have its own mouse events handling mechanism where they attach events directly to the items.
+			 */
+			if (tooltipEventType === "axis") {
+				const activeProps = selectActivePropsFromChartPointer(store, latestChartPointer)
+				if (activeProps?.activeIndex != null) {
+					setTooltipInteraction(setStore, "axisInteraction", "hover", {
+						active: true,
+						coordinate: activeProps.activeCoordinate,
+						dataKey: undefined,
+						graphicalItemId: undefined,
+						index: activeProps.activeIndex,
+					})
+				} else {
+					/* Mouse moves inside svg but out of plot area — flip `active` only, mirror
+					   upstream mouseLeaveChart so coordinate/index survive for the active=true
+					   prop and animation tail. */
+					setStore("tooltip", "axisInteraction", "hover", "active", false)
+					setStore("tooltip", "itemInteraction", "hover", "active", false)
+				}
+			}
+			rafId = null
+			timeoutId = null
+		}
+
+		if (!isThrottled) {
+			callback()
+			return
+		}
+
+		if (throttleDelay === "raf") {
+			rafId = requestAnimationFrame(callback)
+		} else if (typeof throttleDelay === "number") {
+			if (timeoutId === null) {
+				timeoutId = setTimeout(callback, throttleDelay)
+			}
+		}
+	}
+
+	return { handleMouseClick, handleMouseMove }
+}
+
+/**
+ * Action thunk wrappers for use with the dispatch pattern.
+ * These delegate to the same logic as createMouseEventHandlers.
+ */
+export const mouseClickAction =
+	(mousePointer: HTMLMousePointer) =>
+	(
+		setStore: SetStoreFunction<ChartState>,
+		store: ChartState,
+	) => {
+		const activeProps = selectActivePropsFromChartPointer(
+			store,
+			getRelativeCoordinate(mousePointer),
+		)
+		if (activeProps?.activeIndex != null) {
+			const payload = {
+				active: true,
+				coordinate: activeProps.activeCoordinate,
+				dataKey: undefined,
+				graphicalItemId: undefined,
+				index: activeProps.activeIndex,
+			}
+			setTooltipInteraction(setStore, "axisInteraction", "click", payload)
+		}
+	}
+
+export const mouseMoveAction =
+	(mousePointer: HTMLMousePointer) =>
+	(
+		setStore: SetStoreFunction<ChartState>,
+		store: ChartState,
+	) => {
+		const chartPointer = getRelativeCoordinate(mousePointer)
+		const tooltipEventType = selectTooltipEventType(
+			store,
+			readChartState(store).tooltip.settings.shared,
+		)
+		if (tooltipEventType === "axis") {
+			const activeProps = selectActivePropsFromChartPointer(store, chartPointer)
+			if (activeProps?.activeIndex != null) {
+				const payload = {
+					active: true,
+					coordinate: activeProps.activeCoordinate,
+					dataKey: undefined,
+					graphicalItemId: undefined,
+					index: activeProps.activeIndex,
+				}
+				setTooltipInteraction(setStore, "axisInteraction", "hover", payload)
+			} else {
+				{
+					setStore("tooltip", "axisInteraction", "hover", "active", false)
+					setStore("tooltip", "itemInteraction", "hover", "active", false)
+				}
+			}
+		}
+	}

package/src/state/optionsSlice.ts

@@ -0,0 +1,47 @@
+/* eslint-disable import/no-cycle */
+import type { TooltipEventType } from "../util/types"
+import type { TooltipIndex, TooltipPayloadSearcher } from "./tooltipSlice"
+import { isNan } from "../util/DataUtils"
+
+/**
+ * These chart options are decided internally, by Recharts,
+ * and will not change during the lifetime of the chart.
+ *
+ * Changing these options can be done by swapping the root element
+ * which will make a brand-new store.
+ *
+ * If you want to store options that can be changed by the user,
+ * use UpdatableChartOptions in rootPropsSlice.ts.
+ */
+export type ChartOptions = {
+	chartName: string
+	defaultTooltipEventType: TooltipEventType
+	validateTooltipEventTypes?: ReadonlyArray<TooltipEventType>
+	tooltipPayloadSearcher: TooltipPayloadSearcher
+	/**
+	 * We use this to identify which chart is sending events when synchronising.
+	 * Without it, we can't tell the difference between an action that arrived from another chart
+	 * and an action that was dispatched by the chart itself.
+	 */
+	eventEmitter: symbol | undefined
+}
+
+export const arrayTooltipSearcher: TooltipPayloadSearcher = (
+	data: unknown,
+	strIndex: TooltipIndex,
+): unknown | undefined => {
+	if (strIndex === null || strIndex === undefined) return undefined
+	if (!Array.isArray(data)) return undefined
+	const numIndex = Number.parseInt(strIndex, 10)
+	if (isNan(numIndex)) {
+		return undefined
+	}
+	return data[numIndex] as unknown
+}
+
+export const initialOptionsState: ChartOptions = {
+	chartName: "",
+	defaultTooltipEventType: "axis",
+	eventEmitter: undefined,
+	tooltipPayloadSearcher: () => undefined,
+}

package/src/state/polarAxisSlice.ts

@@ -0,0 +1,10 @@
+import type { AxisId, BaseCartesianAxis, TicksSettings } from "./cartesianAxisSlice"
+
+export type RadiusAxisSettings = BaseCartesianAxis & TicksSettings
+
+export type AngleAxisSettings = BaseCartesianAxis & TicksSettings
+
+export type PolarAxisState = {
+	radiusAxis: Record<AxisId, RadiusAxisSettings>
+	angleAxis: Record<AxisId, AngleAxisSettings>
+}

package/src/state/polarOptionsSlice.ts

@@ -0,0 +1,12 @@
+export type PolarChartOptions = {
+	cx: number | string
+	cy: number | string
+	endAngle: number
+	innerRadius: number | string
+	outerRadius: number | string
+	startAngle: number
+}
+
+export type PolarChartState = PolarChartOptions | null
+
+export const initialPolarOptionsState: PolarChartState = null

package/src/state/rawData.ts

@@ -0,0 +1,26 @@
+import { createStore, runWithOwner } from "solid-js"
+
+/**
+ * Marks chart data as a raw record so the chart store serves it by reference instead of
+ * wrapping every row in a proxy.
+ *
+ * Upstream treats chart data as immutable: a change replaces the whole array, and selectors
+ * compare it by reference. A deep store would instead track each row field a selector reads,
+ * so a derivation over N rows would subscribe to N × fields signals. A shallow store ingests
+ * its values as raw records (Solid's sticky raw contract), after which no store wraps them; the
+ * slot that holds the array still tracks replacement.
+ *
+ * Values that cannot be marked stay deep-tracked: proxies from a user store (Solid skips them),
+ * and raw objects that already back a deep store (Solid throws, and exposes no query for it).
+ */
+export function markRawData<T>(value: T): T {
+	if (value == null || typeof value !== "object") {
+		return value
+	}
+	try {
+		runWithOwner(null, () => createStore({ value }, { shallow: true }))
+	} catch {
+		/* already backs a deep store: keep it deep-tracked */
+	}
+	return value
+}

package/src/state/referenceElementsSlice.ts

@@ -0,0 +1,40 @@
+import type { AxisId } from "./cartesianAxisSlice"
+import type { IfOverflow } from "../util/IfOverflow"
+import type { ReferenceLineSegment } from "../cartesian/ReferenceLine"
+
+export type ReferenceElementSettings = {
+	yAxisId: AxisId
+	xAxisId: AxisId
+	ifOverflow: IfOverflow
+}
+
+export type ReferenceDotSettings = ReferenceElementSettings & {
+	x: unknown
+	y: unknown
+	r: number
+}
+
+export type ReferenceAreaSettings = ReferenceElementSettings & {
+	x1: unknown
+	x2: unknown
+	y1: unknown
+	y2: unknown
+}
+
+export type ReferenceLineSettings = ReferenceElementSettings & {
+	x: unknown
+	y: unknown
+	segment: ReferenceLineSegment | undefined
+}
+
+export type ReferenceElementState = {
+	dots: ReadonlyArray<ReferenceDotSettings>
+	areas: ReadonlyArray<ReferenceAreaSettings>
+	lines: ReadonlyArray<ReferenceLineSettings>
+}
+
+export const initialReferenceElementsState: ReferenceElementState = {
+	areas: [],
+	dots: [],
+	lines: [],
+}

package/src/state/renderedTicksSlice.ts

@@ -0,0 +1,15 @@
+import type { TickItem } from "../util/types"
+import type { AxisId } from "./cartesianAxisSlice"
+
+export type RenderedTicksAxisState = {
+	[axisId: AxisId]: ReadonlyArray<TickItem>
+}
+
+export type RenderedTicksState = {
+	xAxis: RenderedTicksAxisState
+	yAxis: RenderedTicksAxisState
+}
+
+export function createInitialRenderedTicksState(): RenderedTicksState {
+	return { xAxis: {}, yAxis: {} }
+}

package/src/state/rootPropsSlice.ts

@@ -0,0 +1,47 @@
+/* eslint-disable import/no-cycle */
+import { StackOffsetType } from "../util/types"
+import { SyncMethod } from "../synchronisation/types"
+import { BaseValue } from "../cartesian/Area"
+
+/**
+ * These are chart options that users can choose - which means they can also
+ * choose to change them which should trigger a re-render.
+ */
+export type UpdatableChartOptions = {
+	accessibilityLayer: boolean
+	barCategoryGap: number | string
+	barGap: number | string
+	barSize: string | number | undefined
+	baseValue: BaseValue | undefined
+	/**
+	 * Useful for debugging which chart is which when synchronising.
+	 * The className is also passed to the root element of the chart but that's done in the JSX, not through Redux.
+	 */
+	className: string | undefined
+	maxBarSize: number | undefined
+	/**
+	 * If false, stacked items will be rendered left to right. If true, stacked items will be rendered right to left.
+	 * (Render direction affects SVG layering, not x position.)
+	 */
+	reverseStackOrder: boolean
+	stackOffset: StackOffsetType
+	/**
+	 * Charts that share the same syncId will have their Tooltip and Brush synchronised.
+	 */
+	syncId: number | string | undefined
+	syncMethod: SyncMethod
+}
+
+export const initialRootPropsState: UpdatableChartOptions = {
+	accessibilityLayer: true,
+	barCategoryGap: "10%",
+	barGap: 4,
+	barSize: undefined,
+	baseValue: undefined,
+	className: undefined,
+	maxBarSize: undefined,
+	reverseStackOrder: false,
+	stackOffset: "none",
+	syncId: undefined,
+	syncMethod: "index",
+}

package/src/state/selectors/areaSelectors.ts

@@ -0,0 +1,240 @@
+/* eslint-disable import/no-cycle */
+import type { DataKey, NullableCoordinate } from "../../util/types"
+import { computeArea } from "../../cartesian/Area"
+import {
+	selectAxisWithScale,
+	selectStackGroups,
+	selectTicksOfGraphicalItem,
+	selectUnfilteredCartesianItems,
+} from "./axisSelectors"
+import type { ChartState } from "../store"
+import type { AxisId, XAxisSettings, YAxisSettings } from "../cartesianAxisSlice"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import { selectChartDataWithIndexesIfNotInPanoramaPosition3 } from "./dataSelectors"
+import { getBandSizeOfAxis, isCategoricalAxis, type StackId } from "../../util/ChartUtils"
+import { isNotNil } from "../../util/DataUtils"
+import type { ChartData } from "../chartDataSlice"
+import { getStackSeriesIdentifier } from "../../util/stacks/getStackSeriesIdentifier"
+import type {
+	StackDataPoint,
+	StackGroup,
+	StackSeries,
+	StackSeriesIdentifier,
+} from "../../util/stacks/stackTypes"
+import type { AreaSettings } from "../types/AreaSettings"
+import type { GraphicalItemId } from "../graphicalItemsSlice"
+import { selectChartBaseValue } from "./rootPropsSelectors"
+import { chartSelector } from "./chartSelector"
+import {
+	selectXAxisIdFromGraphicalItemId,
+	selectYAxisIdFromGraphicalItemId,
+} from "./graphicalItemSelectors"
+
+/** Optional overrides — bypass the axis-settings lookup on hot animation frames. */
+export type AreaAxisOverrides = {
+	xAxis?: XAxisSettings
+	yAxis?: YAxisSettings
+	areaSettings?: AreaSettings
+}
+
+export interface AreaPointItem extends NullableCoordinate {
+	x: number | null
+	y: number | null
+	value?: ReadonlyArray<unknown>
+	payload?: unknown
+}
+
+export type ComputedArea = {
+	points: ReadonlyArray<AreaPointItem>
+	baseLine: number | ReadonlyArray<AreaPointItem>
+	isRange: boolean
+}
+
+const selectXAxisWithScale = chartSelector((
+	state: ChartState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+	override?: XAxisSettings,
+) =>
+	selectAxisWithScale(
+		state,
+		"xAxis",
+		selectXAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+		override,
+	))
+
+const selectXAxisTicks = chartSelector((
+	state: ChartState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+) =>
+	selectTicksOfGraphicalItem(
+		state,
+		"xAxis",
+		selectXAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	))
+
+const selectYAxisWithScale = chartSelector((
+	state: ChartState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+	override?: YAxisSettings,
+) =>
+	selectAxisWithScale(
+		state,
+		"yAxis",
+		selectYAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+		override,
+	))
+
+const selectYAxisTicks = chartSelector((
+	state: ChartState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+) =>
+	selectTicksOfGraphicalItem(
+		state,
+		"yAxis",
+		selectYAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	))
+
+const selectBandSize = chartSelector(function selectBandSize(state: ChartState, graphicalItemId: GraphicalItemId, isPanorama: boolean, overrides?: AreaAxisOverrides) {
+	const layout = selectChartLayout(state)
+	const xAxis = selectXAxisWithScale(state, graphicalItemId, isPanorama, overrides?.xAxis)
+	const yAxis = selectYAxisWithScale(state, graphicalItemId, isPanorama, overrides?.yAxis)
+	const xAxisTicks = selectXAxisTicks(state, graphicalItemId, isPanorama)
+	const yAxisTicks = selectYAxisTicks(state, graphicalItemId, isPanorama)
+	if (isCategoricalAxis(layout, "xAxis")) {
+		return getBandSizeOfAxis(xAxis, xAxisTicks, false)
+	}
+	return getBandSizeOfAxis(yAxis, yAxisTicks, false)
+})
+
+const selectSynchronisedAreaSettings = chartSelector(function selectSynchronisedAreaSettings(state: ChartState, id: GraphicalItemId): AreaSettings | undefined {
+	const graphicalItems = selectUnfilteredCartesianItems(state)
+	return graphicalItems.filter((item) => item.type === "area").find((item) => item.id === id) as
+		| AreaSettings
+		| undefined
+})
+
+const selectNumericalAxisType = chartSelector((state: ChartState): "xAxis" | "yAxis" => {
+	const layout = selectChartLayout(state)
+	const isXAxisCategorical = isCategoricalAxis(layout, "xAxis")
+	return isXAxisCategorical ? "yAxis" : "xAxis"
+})
+
+const selectNumericalAxisIdFromGraphicalItemId = chartSelector((
+	state: ChartState,
+	graphicalItemId: GraphicalItemId,
+): AxisId => {
+	const axisType = selectNumericalAxisType(state)
+	if (axisType === "yAxis") {
+		return selectYAxisIdFromGraphicalItemId(state, graphicalItemId)
+	}
+	return selectXAxisIdFromGraphicalItemId(state, graphicalItemId)
+})
+
+const selectNumericalAxisStackGroups = chartSelector((
+	state: ChartState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+): Record<StackId, StackGroup> | undefined =>
+	selectStackGroups(
+		state,
+		selectNumericalAxisType(state),
+		selectNumericalAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	))
+
+export const selectGraphicalItemStackedData = chartSelector(function selectGraphicalItemStackedData(state: ChartState, id: GraphicalItemId, isPanorama: boolean): ReadonlyArray<StackDataPoint> | undefined {
+	const areaSettings = selectSynchronisedAreaSettings(state, id)
+	const stackGroups = selectNumericalAxisStackGroups(state, id, isPanorama)
+	if (areaSettings == null || stackGroups == null) {
+		return undefined
+	}
+	const { stackId } = areaSettings
+	const stackSeriesIdentifier: StackSeriesIdentifier | undefined =
+		getStackSeriesIdentifier(areaSettings)
+	if (stackId == null || stackSeriesIdentifier == null) {
+		return undefined
+	}
+	const groups: ReadonlyArray<StackSeries> | undefined = stackGroups[stackId]?.stackedData
+	const found: StackSeries | undefined = groups?.find((v) => v.key === stackSeriesIdentifier)
+	if (found == null) {
+		return undefined
+	}
+	return found.map((item): StackDataPoint => [item[0], item[1]])
+})
+
+const selectStackDataKeys = chartSelector(function selectStackDataKeys(state: ChartState, id: GraphicalItemId, isPanorama: boolean): ReadonlyArray<DataKey<unknown>> | undefined {
+	const areaSettings = selectSynchronisedAreaSettings(state, id)
+	const stackGroups = selectNumericalAxisStackGroups(state, id, isPanorama)
+	if (areaSettings == null || areaSettings.stackId == null || stackGroups == null) {
+		return undefined
+	}
+	const group: StackGroup | undefined = stackGroups[areaSettings.stackId]
+	if (group == null) {
+		return undefined
+	}
+	return group.graphicalItems.map((item) => item.dataKey).filter(isNotNil)
+})
+
+export const selectArea = chartSelector(function selectArea(state: ChartState, id: GraphicalItemId, isPanorama: boolean, overrides?: AreaAxisOverrides): ComputedArea | undefined {
+	const layout = selectChartLayout(state)
+	const xAxis = selectXAxisWithScale(state, id, isPanorama, overrides?.xAxis)
+	const yAxis = selectYAxisWithScale(state, id, isPanorama, overrides?.yAxis)
+	const xAxisTicks = selectXAxisTicks(state, id, isPanorama)
+	const yAxisTicks = selectYAxisTicks(state, id, isPanorama)
+	const stackedData = selectGraphicalItemStackedData(state, id, isPanorama)
+	const { chartData, dataStartIndex, dataEndIndex } =
+		selectChartDataWithIndexesIfNotInPanoramaPosition3(state, undefined, isPanorama)
+	const bandSize = selectBandSize(state, id, isPanorama, overrides)
+	const areaSettings = overrides?.areaSettings ?? selectSynchronisedAreaSettings(state, id)
+	const chartBaseValue = selectChartBaseValue(state)
+	const stackDataKeys = selectStackDataKeys(state, id, isPanorama)
+
+	if (
+		areaSettings == null ||
+		(layout !== "horizontal" && layout !== "vertical") ||
+		xAxis == null ||
+		yAxis == null ||
+		xAxisTicks == null ||
+		yAxisTicks == null ||
+		xAxisTicks.length === 0 ||
+		yAxisTicks.length === 0 ||
+		bandSize == null
+	) {
+		return undefined
+	}
+	const { data } = areaSettings
+
+	let displayedData: ChartData | undefined
+	if (data && data.length > 0) {
+		displayedData = data
+	} else {
+		displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1)
+	}
+
+	if (displayedData == null) {
+		return undefined
+	}
+
+	return computeArea({
+		areaSettings,
+		bandSize,
+		chartBaseValue,
+		dataStartIndex,
+		displayedData,
+		layout,
+		stackedData,
+		stackDataKeys,
+		xAxis,
+		xAxisTicks,
+		yAxis,
+		yAxisTicks,
+	})
+})

package/src/state/selectors/arrayEqualityCheck.ts

@@ -0,0 +1,29 @@
+/**
+ * Checks if two arrays are equal, treating empty arrays as equal regardless of reference.
+ * If both arrays are non-empty, it checks for reference equality.
+ * @param a
+ * @param b
+ */
+export function emptyArraysAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
+	if (Array.isArray(a) && Array.isArray(b) && a.length === 0 && b.length === 0) {
+		return true
+	}
+	return a === b
+}
+
+/**
+ * Checks if two arrays have the same contents in the same order.
+ * @param a
+ * @param b
+ */
+export function arrayContentsAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
+	if (a.length === b.length) {
+		for (let i = 0; i < a.length; i++) {
+			if (a[i] !== b[i]) {
+				return false
+			}
+		}
+		return true
+	}
+	return false
+}