@muze-labs/simplyflow 0.9.0 → 0.10.2

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@muze-labs/simplyflow",
-  "version": "0.9.0",
-  "description": "Reactive browser applications with signals, effects, data binding and an app layer",
+  "version": "0.10.2",
+  "description": "Reactive browser applications with signals, effects, data binding and an app layer.",
   "type": "module",
-  "main": "./src/flow.mjs",
+  "main": "./src/index.mjs",
   "exports": {
-    ".": "./src/flow.mjs",
+    ".": "./src/index.mjs",
     "./app": "./src/app.mjs",
     "./state": "./src/state.mjs",
     "./bind": "./src/bind.mjs",
+    "./bind/render": "./src/bind-render.mjs",
+    "./bind/transformers": "./src/bind-transformers.mjs",
     "./model": "./src/model.mjs",
     "./dom": "./src/dom.mjs",
     "./path": "./src/path.mjs",
@@ -19,54 +21,39 @@
     "./includes": "./src/include.mjs",
     "./shortcuts": "./src/shortcut.mjs",
     "./highlight": "./src/highlight.mjs",
+    "./render": "./src/render.mjs",
+    "./suggest": "./src/suggest.mjs",
+    "./symbols": "./src/symbols.mjs",
     "./dist/simply.flow.js": "./dist/simply.flow.js",
     "./dist/simply.flow.min.js": "./dist/simply.flow.min.js",
     "./package.json": "./package.json"
   },
-  "directories": {
-    "example": "examples"
-  },
+  "sideEffects": [
+    "./src/index.mjs",
+    "./src/render.mjs"
+  ],
+  "files": [
+    "src/",
+    "dist/"
+  ],
   "scripts": {
-    "build": "esbuild src/flow.mjs --bundle --outfile=dist/simply.flow.min.js --minify --sourcemap",
-    "build-dev": "esbuild src/flow.mjs --bundle --outfile=dist/simply.flow.js",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-    "dev": "watch 'npm run build-dev' ./src & npx http-server ."
+    "build": "esbuild src/index.mjs --bundle --outfile=dist/simply.flow.min.js --minify --sourcemap",
+    "build-dev": "esbuild src/index.mjs --bundle --outfile=dist/simply.flow.js",
+    "dev": "watch 'npm run build-dev' ./src ../state/src ../bind/src ../model/src ../app/src & npx http-server ../.."
+  },
+  "dependencies": {
+    "@muze-labs/simplyflow-state": "0.10.1",
+    "@muze-labs/simplyflow-bind": "0.10.1",
+    "@muze-labs/simplyflow-model": "0.10.1",
+    "@muze-labs/simplyflow-app": "0.10.1"
   },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/muze-labs/simplyflow.git"
   },
-  "keywords": [
-    "UI",
-    "components",
-    "declarative",
-    "reactive"
-  ],
-  "author": "auke@muze.nl",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/muze-labs/simplyflow/issues"
   },
-  "homepage": "https://github.com/muze-labs/simplyflow#readme",
-  "engines": {
-    "node": ">=20.0.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "esbuild": "^0.24.2",
-    "globals": "^15.13.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "watch": "^1.0.2"
-  },
-  "files": [
-    "README.md",
-    "MUZE_ALIGNMENT.md",
-    "dist/",
-    "src/"
-  ],
-  "jest": {
-    "transform": {},
-    "testEnvironment": "jsdom"
-  }
-}
+  "homepage": "https://github.com/muze-labs/simplyflow#readme"
+}

package/src/action.mjs

@@ -1,64 +1 @@
-import { closest } from './suggest.mjs'
-
-const warnedUnknownActions = new WeakMap()
-
-export function actions(options) 
-{
-	if (options.app) {
-		const functionHandler = {
-			apply(target, thisArg, argumentsList)
-			{
-				try {
-					const result = target(...argumentsList)
-					if (result instanceof Promise) {
-						return result.catch(err => {
-							return options.app.onError.call(this, err, target)
-						})							
-					}
-					return result
-				} catch(err) {
-					return options.app.onError.call(this, err, target)
-				}
-			}
-		}
-
-		const actionHandler = {
-			get(target, property)
-			{
-				if (!Object.hasOwn(target, property)) {
-					warnUnknownAction(target, property)
-					return undefined
-				}
-				if (options.app.onError) {
-					return new Proxy(target[property].bind(options.app), functionHandler)
-				} else {
-					return target[property].bind(options.app)
-				}
-			}
-		}
-		return new Proxy(options.actions, actionHandler)
-	} else {
-		return options
-	}
-}
-
-function warnUnknownAction(actions, property)
-{
-	if (typeof property !== 'string') {
-		return
-	}
-
-	let warned = warnedUnknownActions.get(actions)
-	if (!warned) {
-		warned = new Set()
-		warnedUnknownActions.set(actions, warned)
-	}
-	if (warned.has(property)) {
-		return
-	}
-	warned.add(property)
-
-	const suggestion = closest(property, Object.keys(actions))
-	const suffix = suggestion ? `. Did you mean "${suggestion}"?` : ''
-	console.warn(`simplyflow/action: unknown action "${property}"${suffix}`)
-}
+export * from '@muze-labs/simplyflow-app/action'

package/src/app.mjs

@@ -1,282 +1 @@
-import { bind } from './bind.mjs'
-import { signal } from './state.mjs'
-import { routes } from './route.mjs'
-import { commands, destroyCommands } from './command.mjs'
-import { actions } from './action.mjs'
-import { shortcuts, destroyShortcuts, accesskeys, destroyAccesskeys } from './shortcut.mjs'
-import { behaviors } from './behavior.mjs'
-import { includes } from './include.mjs'
-import { closest } from './suggest.mjs'
-
-const APP_OPTIONS = [
-    'container',
-    'data',
-    'templates',
-    'styles',
-    'start',
-    'onError',
-    'components',
-    'behaviors',
-    'baseURL',
-    'commands',
-    'shortcuts',
-    'routes',
-    'actions'
-]
-
-class SimplyApp
-{
-    constructor(options={})
-    {
-        if (options.components) {
-            const mergedOptions = {}
-            mergeComponents(mergedOptions, options.components)
-            mergeOptions(mergedOptions, options) // app options override component options
-            options = mergedOptions
-        }
-
-
-        this.container = options.container || document.body
-        this.destroyed = false
-        this.data = signal(options.data || {})
-        this.start = options.start
-        this.onError = options.onError
-        this.components = options.components
-        this.baseURL = options.baseURL
-
-        installTemplates(this.container, options.templates)
-        installStyles(this.container, options.styles)
-
-        for (const key of Object.keys(options)) {
-            switch(key) {
-                case 'container':
-                case 'data':
-                case 'templates':
-                case 'styles':
-                case 'start':
-                case 'onError':
-                case 'components':
-                case 'baseURL':
-                    break
-                case 'commands':
-                    this.commands = commands({ app: this, container: this.container, commands: options.commands})
-                    break
-                case 'shortcuts':
-                    this.shortcuts = shortcuts({ app: this, shortcuts: options.shortcuts })
-                    break
-                case 'behaviors':
-                    this.behaviors = behaviors({ app: this, container: this.container, behaviors: options.behaviors })
-                    break
-                case 'routes':
-                    this.routes = routes({ app: this, routes: options.routes})
-                    break
-                case 'actions':
-                    this.actions = actions({app: this, actions: options.actions})
-                    break
-                case 'prototype':
-                case '__proto__':
-                    // ignore this to avoid prototype pollution
-                    break
-                default:
-                    // Unknown options become app properties. Warn only when the
-                    // name is close to a built-in option, which usually means a typo.
-                    warnLikelyOptionTypo(key)
-                    this[key] = options[key]
-                    break
-            }
-        }
-
-        this.binding = bind({
-            root: this.data,
-            container: this.container,
-            attribute: 'data-simply'
-        })
-
-        this.includes = includes({ container: this.container })
-
-        this.accesskeys = accesskeys({ app: this, container: this.container })
-    }
-
-    get app()
-    {
-        return this
-    }
-
-    destroy()
-    {
-        this.destroyed = true
-        if (this.binding) {
-            this.binding.destroy()
-            this.binding = undefined
-        }
-        if (this.commands) {
-            destroyCommands(this.commands)
-        }
-        if (this.shortcuts) {
-            destroyShortcuts(this.shortcuts)
-        }
-        if (this.accesskeys) {
-            destroyAccesskeys(this.accesskeys)
-            this.accesskeys = undefined
-        }
-        if (this.routes) {
-            this.routes.destroy()
-            this.routes = undefined
-        }
-        if (this.behaviors) {
-            this.behaviors.destroy()
-            this.behaviors = undefined
-        }
-        if (this.includes) {
-            this.includes.destroy()
-            this.includes = undefined
-        }
-    }
-}
-
-function installTemplates(container, templates)
-{
-    if (!templates) {
-        return
-    }
-    for (const name of Object.keys(templates)) {
-        const element = document.createElement('div')
-        element.innerHTML = templates[name]
-        let template = container.querySelector('template#'+name)
-        if (!template) {
-            template = document.createElement('template')
-            template.id = name
-            template.content.append(...element.children)
-            container.appendChild(template)
-        } else {
-            template.content.replaceChildren(...element.children)
-        }
-    }
-}
-
-function installStyles(container, styles)
-{
-    if (!styles) {
-        return
-    }
-    for (const name of Object.keys(styles)) {
-        let style = container.querySelector('style#'+name+'.css')
-        if (!style) {
-            style = document.createElement('style')
-            style.id = name+'.css'
-            container.appendChild(style)
-        }
-        style.innerHTML = styles[name]
-    }
-}
-
-
-function warnLikelyOptionTypo(key)
-{
-    const suggestion = closest(key, APP_OPTIONS)
-    if (suggestion) {
-        console.warn(`simplyflow/app: unknown option "${key}". Did you mean "${suggestion}"? The option was still added to the app as "app.${key}".`)
-    }
-}
-
-function initRoutes(app) {
-    if (app.destroyed) {
-        return
-    }
-    if (app.routes) {
-        if (app.baseURL) {
-            app.routes.init({ baseURL: app.baseURL })
-        }
-        app.routes.handleEvents()
-        globalThis.setTimeout(() => {
-            if (app.destroyed || !app.routes) {
-                return
-            }
-            if (app.routes.has(globalThis.location?.hash)) {
-                app.routes.match(globalThis.location.hash)
-            } else {
-                app.routes.match(globalThis.location?.pathname+globalThis.location?.hash)
-            }
-        })
-    }
-}
-
-
-function handleAppError(app, error, context)
-{
-    if (app.onError) {
-        return app.onError.call(app, error, context)
-    }
-    throw error
-}
-
-export function app(options={})
-{
-    const app = new SimplyApp(options)
-    if (!app.start) {
-        initRoutes(app)
-        return app
-    }
-
-    try {
-        const result = app.start.call(app)
-        if (result instanceof Promise) {
-            result.then(() => initRoutes(app)).catch(error => handleAppError(app, error, app.start))
-        } else {
-            initRoutes(app)
-        }
-    } catch (error) {
-        handleAppError(app, error, app.start)
-    }
-    return app
-}
-
-
-function mergeOptions(options, otherOptions)
-{
-    for (const key of Object.keys(otherOptions)) {
-        switch(typeof otherOptions[key]) {
-            case 'object':
-                if (!otherOptions[key]) {
-                    continue // null
-                }
-                if (!options[key]) {
-                    options[key] = otherOptions[key]
-                } else {
-                    mergeOptions(options[key], otherOptions[key])
-                }
-                break
-            default:
-                options[key] = otherOptions[key]
-        }
-    }
-}
-
-function mergeComponents(options, components) {
-    for (const name of Object.keys(components)) {
-        const component = components[name]
-        if (component.components) {
-            mergeComponents(options, component.components)
-        }
-        if (!options.components) {
-            options.components = {}
-        }
-        options.components[name] = component
-        for (const key of Object.keys(component)) {
-            switch(key) {
-                case 'start':
-                case 'onError':
-                    // App lifecycle functions are app-level behavior, not merged component state.
-                case 'components':
-                    // already handled
-                    break
-                default:
-                    if (!options[key]) {
-                        options[key] = Object.create(null)
-                    }
-                    mergeOptions(options[key], component[key])
-                    break
-            }
-        }
-    }
-}
+export * from '@muze-labs/simplyflow-app'

package/src/behavior.mjs

@@ -1,121 +1 @@
-import { closest } from './suggest.mjs'
-
-const BEHAVIOR_SELECTOR = '[data-simply-behavior]'
-
-class SimplyBehaviors
-{
-    constructor(options = {})
-    {
-        this.app = options.app
-        this.container = options.container || document.body
-        this.behaviors = options.behaviors || {}
-        this.active = new Set()
-        this.cleanups = new WeakMap()
-        this.unknown = new Set()
-
-        this.observer = new MutationObserver((changes) => this.handleChanges(changes))
-        this.observer.observe(this.container, {
-            subtree: true,
-            childList: true
-        })
-
-        for (const node of behaviorNodes(this.container)) {
-            this.start(node)
-        }
-    }
-
-    start(node)
-    {
-        if (this.active.has(node)) {
-            return
-        }
-
-        const name = node?.dataset?.simplyBehavior
-        const behavior = this.behaviors[name]
-        if (!name || typeof behavior !== 'function') {
-            this.warnUnknown(name, node)
-            return
-        }
-
-        this.active.add(node)
-        const cleanup = behavior.call(this.app || node, node)
-        if (typeof cleanup === 'function') {
-            this.cleanups.set(node, cleanup)
-        } else if (typeof cleanup !== 'undefined') {
-            console.warn('simplyflow/behavior: behavior may only return a cleanup function', { cause: cleanup })
-        }
-    }
-
-    stop(node)
-    {
-        if (!this.active.has(node)) {
-            return
-        }
-        this.active.delete(node)
-
-        const cleanup = this.cleanups.get(node)
-        this.cleanups.delete(node)
-        if (cleanup) {
-            cleanup.call(this.app || node, node)
-        }
-    }
-
-    handleChanges(changes)
-    {
-        const added = []
-        for (const change of changes) {
-            if (change.type !== 'childList') {
-                continue
-            }
-            for (const node of change.removedNodes) {
-                for (const behaviorNode of behaviorNodes(node)) {
-                    this.stop(behaviorNode)
-                }
-            }
-            for (const node of change.addedNodes) {
-                added.push(...behaviorNodes(node))
-            }
-        }
-        for (const node of added) {
-            this.start(node)
-        }
-    }
-
-    warnUnknown(name, node)
-    {
-        if (!name || this.unknown.has(name)) {
-            return
-        }
-        this.unknown.add(name)
-
-        const suggestion = closest(name, Object.keys(this.behaviors))
-        const suffix = suggestion ? `. Did you mean "${suggestion}"?` : ''
-        console.warn(`simplyflow/behavior: unknown behavior "${name}"${suffix}`, { cause: node })
-    }
-
-    destroy()
-    {
-        this.observer.disconnect()
-        for (const node of Array.from(this.active)) {
-            this.stop(node)
-        }
-    }
-}
-
-export function behaviors(options = {})
-{
-    return new SimplyBehaviors(options)
-}
-
-function behaviorNodes(root)
-{
-    if (!root?.querySelectorAll) {
-        return []
-    }
-
-    const nodes = Array.from(root.querySelectorAll(BEHAVIOR_SELECTOR))
-    if (root.matches?.(BEHAVIOR_SELECTOR)) {
-        nodes.unshift(root)
-    }
-    return nodes
-}
+export * from '@muze-labs/simplyflow-app/behavior'

package/src/bind-render.mjs

@@ -0,0 +1 @@
+export * from '@muze-labs/simplyflow-bind/render'

package/src/bind-transformers.mjs

@@ -0,0 +1 @@
+export * from '@muze-labs/simplyflow-bind/transformers'