DOM signals

childElements.ts

import {createMemo} from 'solid-js'
import {elementMutations} from './elementMutations.js'
import {createArrayMemo} from './createArrayMemo.js'

export function childElements(element: Element | (() => Element | undefined | null)) {
	const records = elementMutations(element, {childList: true})
	const elMemo = createMemo(() => (typeof element === 'function' ? element() : element))

	const elements = createArrayMemo(() => {
		const el = elMemo()
		if (!el) return [] as Element[]
		records()
		return Array.from(el.children)
	})

	return elements
}

elementMutations.ts

import {createEffect, createMemo, createSignal, onCleanup} from 'solid-js'

export function elementMutations(element: Element | (() => Element | undefined | null), options: MutationObserverInit) {
	const [records, setRecords] = createSignal<MutationRecord[]>([])
	const elMemo = createMemo(() => (typeof element === 'function' ? element() : element))

	createEffect(() => {
		const el = elMemo()
		if (!el) return

		const observer = new MutationObserver(setRecords)
		observer.observe(el, options)

		onCleanup(() => observer.disconnect())
	})

	return records
}