@muze-labs/simplyflow 0.9.0 → 0.10.0

package/src/command.mjs

@@ -1,225 +1 @@
-import { closest } from './suggest.mjs'
-import path from './path.mjs'
-
-const commandState = new WeakMap()
-const COMMAND_OPTIONS = [
-    'commands',
-    'handlers',
-    'app',
-    'container'
-]
-
-class SimplyCommands {
-	constructor(options={}) {
-		if (!options.app) {
-			options.app = {}
-		}
-		if (!options.app.container) {
-			options.app.container = document.body
-		}
-        this.app = options.app
-		this.$handlers = options.handlers || defaultHandlers
-        if (options.commands) {
-    		Object.assign(this, options.commands)
-        }
-
-		const commandHandler = (evt) => {
-			const command = getCommand(evt, this.$handlers, this.app)
-			if (!command) {
-				return
-			}
-			if (!this[command.name]) {
-                warnUnknownCommand(this, command.name, command.source)
-                return
-			}
-            const shouldContinue = this[command.name].call(options.app, command.source, command.value, evt)
-            if (shouldContinue!==true) {
-                evt.preventDefault()
-                evt.stopPropagation()
-                return false
-            }
-		}
-
-        const container = options.app.container
-        container.addEventListener('click', commandHandler)
-        container.addEventListener('submit', commandHandler)
-        container.addEventListener('change', commandHandler)
-        container.addEventListener('input', commandHandler)
-        commandState.set(this, { container, commandHandler })
-	}
-
-    call(command, el, value, event) {
-        if (!this[command]) {
-            warnUnknownCommand(this, command, el)
-            return
-        }
-        return this[command].call(this.app, el, value, event)
-    }
-
-    appendHandler(handler) {
-        this.$handlers.push(handler)
-    }
-
-    prependHandler(handler) {
-        this.$handlers.unshift(handler)
-    }
-}
-
-export function commands(options={}) {
-	return new SimplyCommands(options)
-}
-
-export function destroyCommands(commandApi)
-{
-    const state = commandState.get(commandApi)
-    if (!state) {
-        return
-    }
-    state.container.removeEventListener('click', state.commandHandler)
-    state.container.removeEventListener('submit', state.commandHandler)
-    state.container.removeEventListener('change', state.commandHandler)
-    state.container.removeEventListener('input', state.commandHandler)
-    commandState.delete(commandApi)
-}
-
-function getCommand(evt, handlers, app) {
-    var el = evt.target.closest('[data-simply-command]')
-    if (el) {
-        for (let handler of handlers) {
-            if (el.matches(handler.match)) {
-                if (handler.check(el, evt)) {
-                    return {
-                        name:   el.dataset.simplyCommand,
-                        source: el,
-                        value:  handler.get(el, app)
-                    }
-                }
-                return null
-            }
-        }
-    }
-    return null
-}
-
-
-function getConfiguredCommandValue(el, app)
-{
-    const pathAttribute = 'simplyValuePath'
-    if (Object.hasOwn(el.dataset, pathAttribute)) {
-        return {
-            found: true,
-            value: path.get(app?.data, el.dataset[pathAttribute])
-        }
-    }
-    if (Object.hasOwn(el.dataset, 'simplyValue')) {
-        return { found: true, value: el.dataset.simplyValue }
-    }
-    return { found: false, value: undefined }
-}
-
-const defaultHandlers = [
-    {
-        match: 'input,select,textarea',
-        get: function(el, app) {
-            const configuredValue = getConfiguredCommandValue(el, app)
-            if (configuredValue.found) {
-                return configuredValue.value
-            }
-            if (el.tagName==='SELECT' && el.multiple) {
-                let values = []
-                for (let option of el.options) {
-                    if (option.selected) {
-                        values.push(option.value)
-                    }
-                }
-                return values
-            }
-            return el.value
-        },
-        check: function(el, evt) {
-            return evt.type=='change' || (el.dataset.simplyImmediate && evt.type=='input')
-        }
-    },
-    {
-        match: 'a,button',
-        get: function(el, app) {
-            const configuredValue = getConfiguredCommandValue(el, app)
-            if (configuredValue.found) {
-                return configuredValue.value
-            }
-            return el.href || el.value
-        },
-        check: function(el,evt) {
-            return evt.type=='click' && evt.ctrlKey==false && evt.button==0
-        }
-    },
-    {
-        match: 'form',
-        get: function(el) {
-            let data = {}
-            for (let input of Array.from(el.elements)) {
-                if (input.tagName=='INPUT' 
-                    && (input.type=='checkbox' || input.type=='radio')
-                ) {
-                    if (!input.checked) {
-                        return;
-                    }
-                }
-                if (data[input.name] && !Array.isArray(data[input.name])) {
-                    data[input.name] = [data[input.name]]
-                }
-                if (Array.isArray(data[input.name])) {
-                    data[input.name].push(input.value)
-                } else {
-                    data[input.name] = input.value
-                }
-            }
-            return data
-        },
-        check: function(el,evt) {
-            return evt.type=='submit'
-        }
-    },
-    {
-    	match: '*',
-        get: function(el, app) {
-            return getConfiguredCommandValue(el, app).value
-        },
-        check: function(el, evt) {
-            return evt.type=='click' && evt.ctrlKey==false && evt.button==0
-        }
-    }
-]
-
-const unknownCommandWarnings = new WeakMap()
-
-function warnUnknownCommand(commands, command, source)
-{
-    let warned = unknownCommandWarnings.get(commands)
-    if (!warned) {
-        warned = new Set()
-        unknownCommandWarnings.set(commands, warned)
-    }
-    if (warned.has(command)) {
-        return
-    }
-    warned.add(command)
-
-    const suggestion = closest(command, commandNames(commands))
-    const suffix = suggestion ? `. Did you mean "${suggestion}"?` : ''
-    if (source) {
-        console.warn(`simplyflow/command: unknown command "${command}"${suffix}`, { cause: source })
-    } else {
-        console.warn(`simplyflow/command: unknown command "${command}"${suffix}`)
-    }
-}
-
-function commandNames(commands)
-{
-    return Object.keys(commands).filter(command => {
-        return !command.startsWith('$') &&
-            !COMMAND_OPTIONS.includes(command) &&
-            typeof commands[command] === 'function'
-    })
-}
-
+export * from '@muze-labs/simplyflow-app/command'

package/src/dom.mjs

@@ -1,274 +1 @@
-import { createSignal, getSignal, isSignal, signal as stateSignal, notifyGet, notifySet, makeContext,
-         throttledEffect, untracked, batch } from './state.mjs'
-import { getValueByPath } from './bind.mjs'
-import { setValueByPath, getProperties } from './bind.render.mjs'
-import { DEP } from './symbols.mjs'
-
-/**
- * Tracks element => signal mapping so that each element only has one signal
- */
-const domSignals = new WeakMap()
-
-/**
- * Tracks element => mutationObservers
- */
-const observers = new WeakMap()
-
-/**
- * A dom signal is a Proxy, to track access to properties
- */
-const domSignalHandler = {
-    get: (target, property, receiver) => {
-        const value = target?.[property]
-        notifyGet(receiver, property)
-        if (typeof value === 'function') {
-            return value.bind(target) // make sure element functions are not linked to the proxy
-        }
-        if (value && typeof value == 'object') {
-            return stateSignal(value)
-        }
-        return value
-    },
-    set: (target, property, value, receiver) => {
-        const current = target[property]
-        target[property] = value
-        const now = target[property]
-        if (!Object.is(current, now)) {
-            notifySet(receiver, makeContext(property, { was: current, now }))
-        }
-        return true
-    },
-    has: (target, property) => {
-        const receiver = getSignal(target)
-        if (receiver) {
-            notifyGet(receiver, property)
-        }
-        return Reflect.has(target, property)
-    },
-    ownKeys: (target) => {
-        // The ownKeys trap has no receiver argument. Recover the stable signal
-        // proxy so Object.keys(domSignal) can track DOM key iteration.
-        const receiver = getSignal(target)
-        if (receiver) {
-            notifyGet(receiver, DEP.ITERATE)
-        }
-        return Reflect.ownKeys(target)
-    }
-}
-
-/**
- * This function returns a dom signal. Using this in an effect() function
- * will automatically trigger the effect if a property of the dom signal 
- * changes.
- * Valid options are any of the mutationObserver options, like characterData, subtree, etc.
- * @param HTMLElement el
- * @param Object options
- * @returns Proxy
- */
-export function signal(el, options) {
-    if (isSignal(el)) {
-        return el
-    }
-
-    const existing = getSignal(el)
-    if (existing) {
-        return existing
-    }
-
-    return createSignal(el, domSignalHandler, (target, proxy) => {
-        domListen(target, proxy, options)
-    })
-}
-
-/**
- * This sets up the mutationObserver that calls notifySet on changes in the DOM
- */
-function domListen(el, signal, options) {
-    const defaultOptions = {
-        characterData: true,
-        subtree: true,
-        attributes: true,
-        attributesOldValue: true,
-        childList: true
-    }
-    if (!options) {
-        options = defaultOptions
-    }
-    let oldContentHTML = el.innerHTML
-    let oldContentText = el.innerText
-    if (!observers.has(el)) {
-        const observer = new MutationObserver((mutationList, observer) => {
-            // collect changes
-            const changes = {}
-            for (const mutation of mutationList) {
-                if (mutation.type==='attributes') {
-                    // check if any listeners for each attribute
-                    changes[mutation.attributeName] = mutation.attributeOldValue
-                } else if (mutation.type==='subtree' || mutation.type==='characterData') {
-                    // change on innerHTML/innerText
-                    if (el.innerHTML != oldContentHTML) {
-                        changes.innerHTML = oldContentHTML
-                        oldContentHTML = el.innerHTML
-                    }
-                    if (el.innerText != oldContentText) {
-                        changes.innerText = oldContentText
-                        oldContentText = el.innerText
-                    }
-                } else if (mutation.type==='childList') {
-                    changes.children = { //FIXME: overwrites changes in this list path if list is rendered multiple times
-                        was: Array.from(el.children) //FIXME; fill in 'now'
-                    }
-                    changes.length = -1 //FIXME: don't do this :)
-                    if (el.innerHTML != oldContentHTML) {
-                        changes.innerHTML = oldContentHTML
-                        oldContentHTML = el.innerHTML
-                    }
-                    if (el.innerText != oldContentText) {
-                        changes.innerText = oldContentText
-                        oldContentText = el.innerText
-                    }
-                } else {
-                    console.log('nothing to do for',el,mutation.type)
-                }
-            }
-            for (const prop in changes) {
-                notifySet(signal, makeContext(prop, { was: changes[prop], now: el[prop] }))
-            }
-        })
-        observer.observe(el, options)
-        observers.set(el, observer)
-        //@TODO: unregister the observer when el is removed from the dom (after a timeout)
-        if (el.matches('input, textarea, select')) {
-            let prevValue = el.value
-            let prevChecked = el.checked
-            const notifyFormValue = () => {
-                notifySet(signal, makeContext('value', { was: prevValue, now: el.value }))
-                prevValue = el.value
-                if ('checked' in el) {
-                    notifySet(signal, makeContext('checked', { was: prevChecked, now: el.checked }))
-                    prevChecked = el.checked
-                }
-            }
-            el.addEventListener('change', notifyFormValue)
-            if (el.matches('input, textarea')) {
-                el.addEventListener('input', notifyFormValue)
-            }
-        }
-    }
-}
-
-/**
- * This function sets up the dom signal on an element, provided it has a `data-flow-list` attribute
- * @param HTMLElement element - the element to track
- * @returns Proxy
- */
-export function trackDomList(element)
-{
-    const path = this.getBindingPath(element)
-    if (!path) {
-        throw new Error('Could not find binding path for element', { cause: element })
-    }
-    const s = signal(element, {
-        childList: true
-    })
-    throttledEffect(() => {
-        const children = Array.from(s.children)
-        untracked(() => { // don't track access to the data, only track dom changes
-            batch(() => { // apply all changes in the list as one change
-                let key=0
-                const currentList = getValueByPath(this.options.root, path)
-                const source = currentList.slice() // make sure changes in currentList don't affect the original source
-                for (const item of children) {
-                    if (item.tagName==='TEMPLATE') {
-                        continue
-                    }
-                    if (item.dataset.flowKey) { //FIXME: could be other attribute name
-                        if (item.dataset.flowKey!=key) {
-                            setValueByPath(this.options.root, path+'.'+key,
-                                source[item.dataset.flowKey])
-                        }
-                        key++
-                    }
-                }
-                if (currentList.length>key) {
-                    // remove extra values
-                    currentList.length = key
-                }
-            })
-        })
-    }, 50)
-    return s
-}
-
-/**
- * This function sets up the dom signal on an element, provided it has a `data-flow-field` attribute
- * @param HTMLElement element - the element to track
- * @returns Proxy
- */
-export function trackDomField(element, props, valueIsString, stringProperty = 'innerHTML', getUpdateValue) {
-    if (domSignals.has(element)) {
-        return
-    }
-    const path = this.getBindingPath(element)
-    if (!path) {
-        throw new Error('Could not find binding path for element', { cause: element })
-    }
-    const s = signal(element)
-    domSignals.set(element, s)
-    //TODO: run reverse transformers (extract)
-    batch(() => { // avoids cyclical dependencies - check why
-        throttledEffect(() => {
-            let updateValue
-            if (getUpdateValue) {
-                // Custom edit extractors often need the current data value, for
-                // example to toggle a checkbox value in an array. Read the DOM
-                // properties here for dependency tracking, but read the data only
-                // in the untracked section below to avoid DOM/data cycles.
-                for (const prop of props) {
-                    s[prop]
-                }
-            } else {
-                updateValue = s[stringProperty]
-                if (!valueIsString) {
-                    updateValue = getProperties(s, ...props)
-                }
-            }
-            untracked(() => { // don't track changes in data, only in the dom
-                // Rendering a primitive value into the DOM usually turns it into
-                // a string. Do not write that string straight back to the data
-                // when it still represents the current value. This keeps numbers
-                // and booleans stable after one-way rendering in a two-way bind.
-                const currentValue = getValueByPath(this.options.root, path)
-                if (getUpdateValue) {
-                    updateValue = getUpdateValue.call(this, s, currentValue)
-                }
-                if (typeof updateValue === 'undefined') {
-                    return
-                }
-                if (valueIsString && !Object.is(currentValue, updateValue) && String(currentValue) === updateValue) {
-                    return
-                }
-                // don't trigger this effect when the data changes (root.path)
-                setValueByPath(this.options.root, path, updateValue)
-            })
-        }, 50)
-    })
-    return s
-}
-
-
-/**
- * Finds the closest ancestor, including `el` itself, that has `attr` and
- * returns that attribute value.
- *
- * This helper is used by the app/command layer and lives in this module so
- * DOM utility helpers shared by the app and binding layers.
- *
- * @param {Element} el - Element to start searching from.
- * @param {string} attr - Attribute name to find.
- * @returns {string|undefined} The attribute value, or undefined if not found.
- */
-export function findAttribute(el, attr) {
-    return el.closest('['+attr+']')
-        ?.getAttribute(attr)
-}
+export * from '@muze-labs/simplyflow-bind/dom'

package/src/highlight.mjs

@@ -1,11 +1 @@
-export function html(strings, ...values) {
-  const outputArray = values.map(
-    (value, index) =>
-      `${strings[index]}${value}`,
-  );
-  return outputArray.join("") + strings[strings.length - 1];
-}
-
-export function css(strings, ...values) {
-	return html(strings, ...values)
-}
+export * from '@muze-labs/simplyflow-app/highlight'