Mount Svelte components into elements on the page

ExampleComponent.html

<div class="root">
	<div ref:mount class="contents"></div>
</div>

<script>
import forEach from './for-each.js'

export default {
	oncreate() {
		const children = this.get('children')
		forEach(children, child => {
			this.refs.mount.appendChild(child)
		})
		this.set({ children: null })
	},
}
</script>

mount-svelte-components.js

import map from './map.js'

const copyChildren = node => {
	let next = node.firstChild
	const ary = []
	while (next) {
		ary.push(next)
		next = next.nextSibling
	}
	return ary
}

export default function mountElements(query, Component, dataConstructor) {
	const elements = document.querySelectorAll(query)

	return map(elements, node => {
		const children = copyChildren(node)

		const data = dataConstructor(node, children)

		return new Component({
			target: node,
			data: Object.assign({}, node.dataset, data, { children }),
		})
	})
}