@muze-labs/simplyflow 0.9.0 → 0.10.0

package/src/include.mjs

@@ -1,239 +1 @@
-function throttle(callbackFunction, intervalTime)
-{
-    let eventId = 0
-    return function throttledCallback(...params) {
-        if (eventId) {
-            return
-        }
-        eventId = globalThis.setTimeout(() => {
-            eventId = 0
-            callbackFunction.apply(this, params)
-        }, intervalTime)
-    }
-}
-
-const runWhenIdle = (() => {
-    if (globalThis.requestIdleCallback) {
-        return (callback) => {
-            globalThis.requestIdleCallback(callback, {timeout: 500})
-        }
-    }
-    return globalThis.requestAnimationFrame || ((callback) => globalThis.setTimeout(callback, 0))
-})()
-
-function rebaseHref(relative, base, cacheBuster)
-{
-    const url = new URL(relative, base)
-    if (cacheBuster) {
-        url.searchParams.set('cb', cacheBuster)
-    }
-    return url.href
-}
-
-function cloneScript(script, base, cacheBuster)
-{
-    const clone = globalThis.document.createElement('script')
-    for (const attr of script.attributes) {
-        clone.setAttribute(attr.name, attr.value)
-    }
-    clone.removeAttribute('data-simply-location')
-
-    if (clone.hasAttribute('src')) {
-        clone.src = rebaseHref(clone.getAttribute('src'), base, cacheBuster)
-    } else {
-        clone.textContent = script.textContent
-    }
-    return clone
-}
-
-function insertScript(script, placeholder)
-{
-    placeholder.parentNode.insertBefore(script, placeholder)
-    placeholder.parentNode.removeChild(placeholder)
-}
-
-function shouldWaitForScript(script)
-{
-    // Async scripts are explicitly independent. Every other external script from
-    // an include is treated as ordered, including scripts that used `defer`;
-    // dynamically inserted `defer` scripts do not reliably model parser defer.
-    return script.hasAttribute('src') && !script.hasAttribute('async')
-}
-
-function insertAndWaitForScript(script, placeholder)
-{
-    return new Promise((resolve) => {
-        const done = () => {
-            script.removeEventListener('load', done)
-            script.removeEventListener('error', done)
-            resolve()
-        }
-        script.addEventListener('load', done)
-        script.addEventListener('error', done)
-        insertScript(script, placeholder)
-    })
-}
-
-function findIncludeLinks(container)
-{
-    const selector = 'link[rel="simply-include"],link[rel="simply-include-once"]'
-    const links = Array.from(container.querySelectorAll(selector))
-    if (container.matches?.(selector)) {
-        links.unshift(container)
-    }
-    return links
-}
-
-class SimplyIncludes
-{
-    constructor(options={})
-    {
-        this.container = options.container || globalThis.document
-        this.cacheBuster = options.cacheBuster ?? defaultCacheBuster
-        this.included = Object.create(null)
-        this.scriptLocations = []
-        this.destroyed = false
-        this.handleChanges = throttle(() => {
-            runWhenIdle(() => {
-                if (!this.destroyed) {
-                    this.includeLinks(findIncludeLinks(this.container))
-                }
-            })
-        }, 10)
-        if (options.observe !== false) {
-            this.observer = new MutationObserver(this.handleChanges)
-            this.observer.observe(this.container, {
-                subtree: true,
-                childList: true,
-            })
-            this.handleChanges()
-        }
-    }
-
-    async scripts(scripts, base)
-    {
-        const arr = scripts.slice()
-        for (const script of arr) {
-            if (this.destroyed) {
-                return
-            }
-            const clone = cloneScript(script, base, this.cacheBuster)
-            const node = this.scriptLocations[script.dataset.simplyLocation]
-            if (!node?.parentNode) {
-                continue
-            }
-
-            // Included scripts should behave like normal document-order scripts by default:
-            // each blocking external script must finish loading and running before the next
-            // script from the include is inserted. Dynamically inserted scripts are async by
-            // default, so async=false and waiting for load are both needed here.
-            const waitForLoad = shouldWaitForScript(clone)
-            if (waitForLoad) {
-                clone.async = false // important: set the property, not the boolean attribute
-                await insertAndWaitForScript(clone, node)
-            } else {
-                insertScript(clone, node)
-            }
-        }
-    }
-
-    html(html, link)
-    {
-        const fragment = globalThis.document.createRange().createContextualFragment(html)
-        const stylesheets = fragment.querySelectorAll('link[rel="stylesheet"],style')
-        for (const stylesheet of stylesheets) {
-            const href = stylesheet.getAttribute('href')
-            if (href) {
-                stylesheet.href = rebaseHref(href, link.href, this.cacheBuster)
-            }
-            globalThis.document.head.appendChild(stylesheet)
-        }
-
-        // Scripts imported through a fragment do not execute reliably in document order.
-        // Placeholders preserve their positions while scripts are reinserted sequentially.
-        const scriptsFragment = globalThis.document.createDocumentFragment()
-        const scripts = fragment.querySelectorAll('script')
-        if (scripts.length) {
-            for (const script of scripts) {
-                const placeholder = globalThis.document.createComment(script.src || 'inline script')
-                script.parentNode.insertBefore(placeholder, script)
-                script.dataset.simplyLocation = this.scriptLocations.length
-                this.scriptLocations.push(placeholder)
-                scriptsFragment.appendChild(script)
-            }
-            globalThis.setTimeout(() => {
-                this.scripts(Array.from(scriptsFragment.children), link ? link.href : globalThis.location.href)
-            }, 10)
-        }
-
-        link.parentNode.insertBefore(fragment, link)
-    }
-
-    async includeLinks(links)
-    {
-        const remainingLinks = links.reduce((remainder, link) => {
-            if (link.rel === 'simply-include-once' && this.included[link.href]) {
-                link.parentNode.removeChild(link)
-            } else {
-                this.included[link.href] = true
-                link.rel = 'simply-include-loading'
-                remainder.push(link)
-            }
-            return remainder
-        }, [])
-
-        for (const link of remainingLinks) {
-            if (this.destroyed || !link.href) {
-                continue
-            }
-            try {
-                const response = await fetch(link.href)
-                if (!response.ok) {
-                    console.warn(`simplyflow/include: failed to load "${link.href}" (${response.status})`)
-                    link.rel = 'simply-include-error'
-                    continue
-                }
-                const html = await response.text()
-                if (this.destroyed || !link.parentNode) {
-                    continue
-                }
-                this.html(html, link)
-                link.parentNode?.removeChild(link)
-            } catch (error) {
-                console.warn(`simplyflow/include: failed to load "${link.href}"`, { cause: error })
-                link.rel = 'simply-include-error'
-            }
-        }
-    }
-
-    destroy()
-    {
-        this.destroyed = true
-        this.observer?.disconnect()
-        this.observer = undefined
-    }
-}
-
-export function includes(options={})
-{
-    return new SimplyIncludes(options)
-}
-
-let defaultCacheBuster = null
-const defaultInclude = () => new SimplyIncludes({
-    container: globalThis.document,
-    cacheBuster: defaultCacheBuster,
-    observe: false
-})
-
-export const include = {
-    get cacheBuster() {
-        return defaultCacheBuster
-    },
-    set cacheBuster(value) {
-        defaultCacheBuster = value
-    },
-    scripts: (scripts, base) => defaultInclude().scripts(scripts, base),
-    html: (html, link) => defaultInclude().html(html, link),
-    links: (links) => defaultInclude().includeLinks(Array.from(links))
-}
+export * from '@muze-labs/simplyflow-app/include'

package/src/{flow.mjs → index.mjs}

@@ -1,17 +1,17 @@
-import { bind } from './bind.mjs'
-import * as model from './model.mjs'
-import * as state from './state.mjs'
+import { bind } from '@muze-labs/simplyflow-bind'
+import * as model from '@muze-labs/simplyflow-model'
+import * as state from '@muze-labs/simplyflow-state'
 import './render.mjs'
-import * as dom from './dom.mjs'
-import { app } from './app.mjs'
-import { actions } from './action.mjs'
-import { behaviors } from './behavior.mjs'
-import { commands } from './command.mjs'
-import { include, includes } from './include.mjs'
-import { shortcuts } from './shortcut.mjs'
-import path from './path.mjs'
-import { routes, SimplyRoute } from './route.mjs'
-import { html, css } from './highlight.mjs'
+import * as dom from '@muze-labs/simplyflow-bind/dom'
+import { app } from '@muze-labs/simplyflow-app'
+import { actions } from '@muze-labs/simplyflow-app/action'
+import { behaviors } from '@muze-labs/simplyflow-app/behavior'
+import { commands } from '@muze-labs/simplyflow-app/command'
+import { include, includes } from '@muze-labs/simplyflow-app/include'
+import { shortcuts } from '@muze-labs/simplyflow-app/shortcut'
+import path from '@muze-labs/simplyflow-app/path'
+import { routes, SimplyRoute } from '@muze-labs/simplyflow-app/route'
+import { html, css } from '@muze-labs/simplyflow-app/highlight'
 
 if (!globalThis.simply) {
     globalThis.simply = {}

package/src/model.mjs

@@ -1,290 +1 @@
-import { signal, isSignal, raw, throttledEffect, batch } from './state.mjs'
-
-/**
- * This class implements a pluggable data model, where you can
- * add effects that are run only when either an option for that
- * effect changes, or when an effect earlier in the chain of
- * effects changes.
- */
-class SimplyFlowModel {
-
-	/**
-	 * Creates a new datamodel, with a state property that contains
-	 * all the data passed to this constructor
-	 * @param state	Object with all the data for this model
-	 * @throws Error if state is not set
-	 */
-	constructor(state) {
-		if (!state) {
-			throw new Error('no options set')
-		}
-		if (state.data==null || typeof state.data[Symbol.iterator] !== 'function') {
-			console.warn('SimplyFlowModel: options.data is not iterable')
-		}
-		this.state = signal(state)
-		if (!this.state.options) {
-			this.state.options = {}
-		}
-		this.effects = [{current:this.state.data}]
-		this.view = {
-      current: this.state.data
-    }
-	}
-
-	/**
-	 * Adds an effect to run whenever a signal it depends on
-	 * changes. this.state is the usual signal.
-	 * The `fn` function param is not itself an effect, but must return
-	 * and effect function. `fn` takes one param, which is the data signal.
-	 * This signal will always have at least a `current` property.
-	 * The result of the effect function is pushed on to the this.effects
-	 * list. And the last effect added is set as this.view
-	 */
-	addEffect(fn) {
-		if (!fn || typeof fn !=='function') {
-			throw new Error('addEffect requires an effect function as its parameter', { cause: fn })
-		}
-		const dataSignal = this.effects[this.effects.length-1]
-		const connectedSignal = fn.call(this, dataSignal)
-		if (!isSignal(connectedSignal)) {
-			throw new Error('addEffect function parameter must return a Signal', { cause: fn })
-		}
-		this.view = connectedSignal
-		this.effects.push(this.view)
-	}
-}
-
-export function model(options) {
-	return new SimplyFlowModel(options)
-}
-
-/**
- * Returns a function for model.addEffect that sorts the input data
- * 
- * Options:
- * - direction (string) default 'asc' - change to 'desc' to sort in descending order
- * - sortBy (string) (optional) - used by the default sorting function to select the property to sort on
- * - sortFn (function) (required - set by default) - the sort function to use
- */
-export function sort(options={}) {
-	return function(data) {
-		// initialize the sort options, only gets called once
-		this.state.options.sort = Object.assign({
-			direction: 'asc',
-			sortBy: null,
-			sortFn: ((a,b) => {
-				const sort = this.state.options.sort
-				const sortBy = sort.sortBy
-				if (!sort.sortBy) {
-					return 0
-				}
-				const direction = sort.sortDirection || sort.direction || 'asc'
-				const larger = direction == 'asc' ? 1 : -1
-				const smaller = direction == 'asc' ? -1 : 1
-				if (typeof a?.[sortBy] === 'undefined') {
-					if (typeof b?.[sortBy] === 'undefined') {
-						return 0
-					}
-					return larger
-				}
-				if (typeof b?.[sortBy] === 'undefined') {
-					return smaller
-				}
-				if (a[sortBy]<b[sortBy]) {
-					return smaller
-				} else if (a[sortBy]>b[sortBy]) {
-					return larger
-				} else {
-					return 0
-				}
-			})
-		}, options);
-		// then return the effect, which is called when
-		// either the data or the sort options change
-		return throttledEffect(() => {
-			const sort = this.state.options.sort
-			const direction = sort?.sortDirection || sort?.direction
-			if (sort?.sortBy && direction) {
-				// Read through the signal proxy so replacing `.sortFn` is tracked,
-				// then call the raw comparator with the model as `this`.
-				const trackedSortFn = sort.sortFn
-				const sortFn = raw(sort).sortFn || trackedSortFn
-				return data.current.toSorted((a, b) => sortFn.call(this, a, b))
-			}
-			return data.current
-		}, 50)
-	}
-}
-
-/**
- * Returns a function for model.addEffect that implements paging
- * for the input data. It will return a slice of the data matching
- * the page and pageSize options.
- * 
- * Options:
- * - page (int) default 1 - which page to show, starts at 1
- * - pageSize (int) default 20 - how many items in a single page
- * - max (int) (calculated) - how many pages in total
- */
-export function paging(options={}) {
-	return function(data) {
-		// initialize the paging options
-		this.state.options.paging = Object.assign({
-			page: 1,
-			pageSize: 20,
-			max: 1
-		}, options)
-		return throttledEffect(() => {
-			return batch(() => {
-				const paging = this.state.options.paging
-				if (!paging.pageSize) {
-					paging.pageSize = 20
-				}
-				paging.max = Math.ceil(data.current.length / paging.pageSize)
-				paging.page = Math.max(1, Math.min(paging.max, paging.page))
-
-				const start = (paging.page-1) * paging.pageSize
-				const end = start + paging.pageSize
-				return data.current.slice(start, end)
-			})
-		}, 50)
-	}
-}
-
-/**
- * Returns a function for model.addEffect that filters rows from the data,
- * using a custom filter function `options.matches`
- * 
- * Options:
- * - name (string) (required) - the name of this filter, must be unique
- * - matches (function) (required) - the filter function to apply to the data
- * - enabled (bool) (required) - filter is applied only when enabled is set to true
- */
-export function filter(options) {
-	if (!options?.name || typeof options.name!=='string') {
-		throw new Error('filter requires options.name to be a string')
-	}
-	if (!options.matches || typeof options.matches!=='function') {
-		throw new Error('filter requires options.matches to be a function')
-	}
-	return function(data) {
-		if (this.state.options[options.name]) {
-			throw new Error('a filter with this name already exists on this model')
-		}
-		this.state.options[options.name] = options
-		return throttledEffect(() => {
-			const filterOptions = this.state.options[options.name]
-			if (filterOptions.enabled) {
-				// Read through the signal proxy so replacing `.matches` is tracked
-				// as a dependency of this effect. The proxied function may already
-				// be bound to the options object, so call the raw function explicitly
-				// with the model as `this`.
-				const trackedMatches = filterOptions.matches
-				const matches = raw(filterOptions).matches || trackedMatches
-				return data.current.filter(row => matches.call(this, row))
-			}
-			return data.current
-		}, 50)
-	}
-}
-
-/**
- * Returns a function for model.addEffect that filters the data to only contain
- * columns (properties) that aren't hidden. Automatically runs again if any columns
- * hidden property changes.
- * 
- * Options:
- * - columns (object) (required) - an object with properties describing each column. Each 
- * property must be an object with an optional `hidden` property. If set to a truthy value,
- * and property in the dataset with the same name, will be filtered out.
- */
-export function columns(options={}) {
-	const columnOptions = options?.columns && typeof options.columns === 'object'
-		? options.columns
-		: options
-	if (!columnOptions
-		|| typeof columnOptions!=='object'
-		|| Object.keys(columnOptions).length===0) {
-		throw new Error('columns requires options to be an object with at least one property')
-	}
-	return function(data) {
-		this.state.options.columns = columnOptions
-		return throttledEffect(() => {
-			return data.current.map(input => {
-				let result = {}
-				for (let key of Object.keys(this.state.options.columns)) {
-					if (!this.state.options.columns[key]?.hidden) {
-						result[key] = input[key] ?? null
-					}
-				}
-				return result
-			})
-		}, 50)
-	}
-}
-
-/**
- * Returns a function for use with model.addEffect, with the given options set
- * as model.options.scroll. The effect will return a slice of the input data, which
- * makes it easy to render just a part (slice) of the whole data.
- * 
- * Options are:
- * - offset (int) default 0 (optional) - the offset in the data to start the slice
- * - rowCount (int) default 20 (optional / calculated) - the number of rows in the slice
- * - rowHeight (int) default 26 (optional) - the height of a single row in pixels
- * - itemsPerRow (int) default 1 (optional) - the number of items on a single row
- * - size (int) default data.current.length (calculated) - how many rows inside data.current before slicing
- * - scrollbar (HTMLElement) defualt null (optional) - if set, an effect is added to update this elements 
- * 	 height if data.current.length changes
- * - container (HTMLElement) default null (optional) - if set, a scroll listener is added to this element, 
- *   which will update the options.offset signal and trigger the slice effect. It will also set the rowCount.
- */
-export function scroll(options) {
-
-	return function(data) {
-		this.state.options.scroll = Object.assign({
-			offset: 0,
-			rowHeight: 26,
-			rowCount: 20,
-			itemsPerRow: 1,
-			size: data.current.length
-		}, options)
-		const scrollOptions = this.state.options.scroll
-
-		const scrollbar = scrollOptions.scrollbar 
-			|| scrollOptions.container?.querySelector('[data-flow-scrollbar]')
-		if (scrollbar) {
-			if (scrollOptions.container) {
-				scrollOptions.container.addEventListener('scroll', (evt) => {
-					scrollOptions.offset = Math.floor(scrollOptions.container.scrollTop
-						/ (scrollOptions.rowHeight*scrollOptions.itemsPerRow)
-					)
-				})
-			}
-
-			throttledEffect(() => {
-				scrollOptions.size = data.current.length * scrollOptions.rowHeight
-				scrollbar.style.height = scrollOptions.size + 'px'
-			}, 50)
-		}
-
-		return throttledEffect(() => {
-			if (scrollOptions.container) {
-				//TODO: add a resize listener so that if the size of the container
-				// changes, the rowCount is calculated again
-				scrollOptions.rowCount = Math.ceil(
-					scrollOptions.container.getBoundingClientRect().height 
-					/ scrollOptions.rowHeight
-				)
-			}
-			scrollOptions.data = data.current
-			let start = Math.min(scrollOptions.offset, data.current.length-1)
-			let end   = start + scrollOptions.rowCount
-			if (end > data.current.length) {
-				end   = data.current.length
-				start = end - scrollOptions.rowCount
-			}
-			return data.current.slice(start, end)
-		}, 50)
-	}
-}
+export * from '@muze-labs/simplyflow-model'

package/src/path.mjs

@@ -1,47 +1 @@
-const path = {
-	get(dataset, pointer) {
-		if (typeof pointer !== 'string') {
-			return pointer
-		}
-		if (!pointer) {
-			return dataset
-		}
-		return pointer.split('.').reduce(function(acc, name) {
-	        if (acc == null) {
-	            return null
-	        }
-	        if (!Reflect.has(Object(acc), name)) {
-	            return null
-	        }
-	        return acc[name]
-	    }, dataset)
-	},
-	set: function(dataset, pointer, value) {
-		const parent = path.get(dataset, path.parent(pointer))
-		if (parent == null) {
-			throw new TypeError(`simplyflow/path: cannot set "${pointer}" because its parent path does not exist`)
-		}
-		parent[path.pop(pointer)] = value
-	},
-	pop: function(pointer) {
-		return pointer.split('.').pop()
-	},
-	push: function(pointer, name) {
-		return (pointer ? pointer + '.' : '') + name
-	},
-	parent: function(pointer) {
-		const names = pointer.split('.')
-		names.pop()
-		return names.join('.')
-	},
-	parents: function(dataset, pointer) {
-		let result = []
-		while (pointer) {
-			pointer = path.parent(pointer)
-			result.unshift(pointer)
-		}
-		return result
-	}
-}
-
-export default path
+export { default } from '@muze-labs/simplyflow-app/path'