eleva 1.0.0-alpha → 1.2.0-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -105
- package/dist/eleva.d.ts +106 -89
- package/dist/eleva.esm.js +125 -68
- package/dist/eleva.esm.js.map +1 -1
- package/dist/eleva.min.js +1 -1
- package/dist/eleva.min.js.map +1 -1
- package/dist/eleva.umd.js +125 -68
- package/dist/eleva.umd.js.map +1 -1
- package/package.json +2 -1
- package/src/core/Eleva.js +93 -40
- package/src/modules/Emitter.js +8 -8
- package/src/modules/Renderer.js +8 -8
- package/src/modules/Signal.js +7 -5
- package/src/modules/TemplateEngine.js +10 -11
- package/types/core/Eleva.d.ts +109 -30
- package/types/core/Eleva.d.ts.map +1 -1
- package/types/modules/Emitter.d.ts +10 -10
- package/types/modules/Emitter.d.ts.map +1 -1
- package/types/modules/Renderer.d.ts +2 -2
- package/types/modules/Signal.d.ts +10 -8
- package/types/modules/Signal.d.ts.map +1 -1
- package/types/modules/TemplateEngine.d.ts +15 -12
- package/types/modules/TemplateEngine.d.ts.map +1 -1
package/dist/eleva.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eleva.umd.js","sources":["../src/modules/TemplateEngine.js","../src/modules/Signal.js","../src/modules/Emitter.js","../src/modules/Renderer.js","../src/core/Eleva.js"],"sourcesContent":["\"use strict\";\n\n/**\n * 🔒 TemplateEngine: Secure interpolation & dynamic attribute parsing.\n *\n * This class provides methods to parse template strings by replacing\n * interpolation expressions with dynamic data values and to evaluate expressions\n * within a given data context.\n */\nexport class TemplateEngine {\n /**\n * Parses a template string and replaces interpolation expressions with corresponding values.\n *\n * @param {string} template - The template string containing expressions in the format {{ expression }}.\n * @param {object} data - The data object to use for evaluating expressions.\n * @returns {string} The resulting string with evaluated values.\n */\n static parse(template, data) {\n return template.replace(/\\{\\{\\s*(.*?)\\s*\\}\\}/g, (_, expr) => {\n const value = this.evaluate(expr, data);\n return value === undefined ? \"\" : value;\n });\n }\n\n /**\n * Evaluates an expression using the provided data context.\n *\n * @param {string} expr - The JavaScript expression to evaluate.\n * @param {object} data - The data context for evaluating the expression.\n * @returns {*} The result of the evaluated expression, or an empty string if undefined or on error.\n */\n static evaluate(expr, data) {\n try {\n const keys = Object.keys(data);\n const values = keys.map((k) => data[k]);\n const result = new Function(...keys, `return ${expr}`)(...values);\n return result === undefined ? \"\" : result;\n } catch (error) {\n console.error(`Template evaluation error:`, {\n expression: expr,\n data,\n error: error.message,\n });\n return \"\";\n }\n }\n}\n","\"use strict\";\n\n/**\n * ⚡ Signal: Fine-grained reactivity.\n *\n * A reactive data holder that notifies registered watchers when its value changes,\n * allowing for fine-grained DOM patching rather than full re-renders.\n */\nexport class Signal {\n /**\n * Creates a new Signal instance.\n *\n * @param {*} value - The initial value of the signal.\n */\n constructor(value) {\n this._value = value;\n this._watchers = new Set();\n }\n\n /**\n * Gets the current value of the signal.\n *\n * @returns {*} The current value.\n */\n get value() {\n return this._value;\n }\n\n /**\n * Sets a new value for the signal and notifies all registered watchers if the value has changed.\n *\n * @param {*} newVal - The new value to set.\n */\n set value(newVal) {\n if (newVal !== this._value) {\n this._value = newVal;\n this._watchers.forEach((fn) => fn(newVal));\n }\n }\n\n /**\n * Registers a watcher function that will be called whenever the signal's value changes.\n *\n * @param {Function} fn - The callback function to invoke on value change.\n * @returns {Function} A function to unsubscribe the watcher.\n */\n watch(fn) {\n this._watchers.add(fn);\n return () => this._watchers.delete(fn);\n }\n}\n","\"use strict\";\n\n/**\n * 🎙️ Emitter: Robust inter-component communication with event bubbling.\n *\n * Implements a basic publish-subscribe pattern for event handling,\n * allowing components to communicate through custom events.\n */\nexport class Emitter {\n /**\n * Creates a new Emitter instance.\n */\n constructor() {\n /** @type {Object.<string, Function[]>} */\n this.events = {};\n }\n\n /**\n * Registers an event handler for the specified event.\n *\n * @param {string} event - The name of the event.\n * @param {Function} handler - The function to call when the event is emitted.\n */\n on(event, handler) {\n (this.events[event] || (this.events[event] = [])).push(handler);\n }\n\n /**\n * Removes a previously registered event handler.\n *\n * @param {string} event - The name of the event.\n * @param {Function} handler - The handler function to remove.\n */\n off(event, handler) {\n if (this.events[event]) {\n this.events[event] = this.events[event].filter((h) => h !== handler);\n }\n }\n\n /**\n * Emits an event, invoking all handlers registered for that event.\n *\n * @param {string} event - The event name.\n * @param {...*} args - Additional arguments to pass to the event handlers.\n */\n emit(event, ...args) {\n (this.events[event] || []).forEach((handler) => handler(...args));\n }\n}\n","\"use strict\";\n\n/**\n * 🎨 Renderer: Handles DOM patching, diffing, and attribute updates.\n *\n * Provides methods for efficient DOM updates by diffing the new and old DOM structures\n * and applying only the necessary changes.\n */\nexport class Renderer {\n /**\n * Patches the DOM of a container element with new HTML content.\n *\n * @param {HTMLElement} container - The container element to patch.\n * @param {string} newHtml - The new HTML content to apply.\n */\n patchDOM(container, newHtml) {\n const tempContainer = document.createElement(\"div\");\n tempContainer.innerHTML = newHtml;\n this.diff(container, tempContainer);\n }\n\n /**\n * Diffs two DOM trees (old and new) and applies updates to the old DOM.\n *\n * @param {HTMLElement} oldParent - The original DOM element.\n * @param {HTMLElement} newParent - The new DOM element.\n */\n diff(oldParent, newParent) {\n const oldNodes = Array.from(oldParent.childNodes);\n const newNodes = Array.from(newParent.childNodes);\n const max = Math.max(oldNodes.length, newNodes.length);\n for (let i = 0; i < max; i++) {\n const oldNode = oldNodes[i];\n const newNode = newNodes[i];\n\n // Append new nodes that don't exist in the old tree.\n if (!oldNode && newNode) {\n oldParent.appendChild(newNode.cloneNode(true));\n continue;\n }\n // Remove old nodes not present in the new tree.\n if (oldNode && !newNode) {\n oldParent.removeChild(oldNode);\n continue;\n }\n\n // For element nodes, compare keys if available.\n if (\n oldNode.nodeType === Node.ELEMENT_NODE &&\n newNode.nodeType === Node.ELEMENT_NODE\n ) {\n const oldKey = oldNode.getAttribute(\"key\");\n const newKey = newNode.getAttribute(\"key\");\n if (oldKey || newKey) {\n if (oldKey !== newKey) {\n oldParent.replaceChild(newNode.cloneNode(true), oldNode);\n continue;\n }\n }\n }\n\n // Replace nodes if types or tag names differ.\n if (\n oldNode.nodeType !== newNode.nodeType ||\n oldNode.nodeName !== newNode.nodeName\n ) {\n oldParent.replaceChild(newNode.cloneNode(true), oldNode);\n continue;\n }\n // For text nodes, update content if different.\n if (oldNode.nodeType === Node.TEXT_NODE) {\n if (oldNode.nodeValue !== newNode.nodeValue) {\n oldNode.nodeValue = newNode.nodeValue;\n }\n continue;\n }\n // For element nodes, update attributes and then diff children.\n if (oldNode.nodeType === Node.ELEMENT_NODE) {\n this.updateAttributes(oldNode, newNode);\n this.diff(oldNode, newNode);\n }\n }\n }\n\n /**\n * Updates the attributes of an element to match those of a new element.\n *\n * @param {HTMLElement} oldEl - The element to update.\n * @param {HTMLElement} newEl - The element providing the updated attributes.\n */\n updateAttributes(oldEl, newEl) {\n const attributeToPropertyMap = {\n value: \"value\",\n checked: \"checked\",\n selected: \"selected\",\n disabled: \"disabled\",\n };\n\n // Remove old attributes that no longer exist.\n Array.from(oldEl.attributes).forEach((attr) => {\n if (attr.name.startsWith(\"@\")) return;\n if (!newEl.hasAttribute(attr.name)) {\n oldEl.removeAttribute(attr.name);\n }\n });\n // Add or update attributes from newEl.\n Array.from(newEl.attributes).forEach((attr) => {\n if (attr.name.startsWith(\"@\")) return;\n if (oldEl.getAttribute(attr.name) !== attr.value) {\n oldEl.setAttribute(attr.name, attr.value);\n if (attributeToPropertyMap[attr.name]) {\n oldEl[attributeToPropertyMap[attr.name]] = attr.value;\n } else if (attr.name in oldEl) {\n oldEl[attr.name] = attr.value;\n }\n }\n });\n }\n}\n","\"use strict\";\n\nimport { TemplateEngine } from \"../modules/TemplateEngine.js\";\nimport { Signal } from \"../modules/Signal.js\";\nimport { Emitter } from \"../modules/Emitter.js\";\nimport { Renderer } from \"../modules/Renderer.js\";\n\n/**\n * 🧩 Eleva Core: Signal-based component runtime framework with lifecycle, scoped styles, and plugins.\n *\n * The Eleva class is the core of the framework. It manages component registration,\n * plugin integration, lifecycle hooks, event handling, and DOM rendering.\n */\nexport class Eleva {\n /**\n * Creates a new Eleva instance.\n *\n * @param {string} name - The name of the Eleva instance.\n * @param {object} [config={}] - Optional configuration for the instance.\n */\n constructor(name, config = {}) {\n this.name = name;\n this.config = config;\n this._components = {};\n this._plugins = [];\n this._lifecycleHooks = [\n \"onBeforeMount\",\n \"onMount\",\n \"onBeforeUpdate\",\n \"onUpdate\",\n \"onUnmount\",\n ];\n this._isMounted = false;\n this.emitter = new Emitter();\n this.renderer = new Renderer();\n }\n\n /**\n * Integrates a plugin with the Eleva framework.\n *\n * @param {object} [plugin] - The plugin object which should have an install function.\n * @param {object} [options={}] - Optional options to pass to the plugin.\n * @returns {Eleva} The Eleva instance (for chaining).\n */\n use(plugin, options = {}) {\n if (typeof plugin.install === \"function\") {\n plugin.install(this, options);\n }\n this._plugins.push(plugin);\n return this;\n }\n\n /**\n * Registers a component with the Eleva instance.\n *\n * @param {string} name - The name of the component.\n * @param {object} definition - The component definition including setup, template, style, and children.\n * @returns {Eleva} The Eleva instance (for chaining).\n */\n component(name, definition) {\n this._components[name] = definition;\n return this;\n }\n\n /**\n * Mounts a registered component to a DOM element.\n *\n * @param {string|HTMLElement} selectorOrElement - A CSS selector string or DOM element where the component will be mounted.\n * @param {string} compName - The name of the component to mount.\n * @param {object} [props={}] - Optional properties to pass to the component.\n * @returns {object|Promise<object>} An object representing the mounted component instance, or a Promise that resolves to it for asynchronous setups.\n * @throws Will throw an error if the container or component is not found.\n */\n mount(selectorOrElement, compName, props = {}) {\n const container =\n typeof selectorOrElement === \"string\"\n ? document.querySelector(selectorOrElement)\n : selectorOrElement;\n if (!container)\n throw new Error(`Container not found: ${selectorOrElement}`);\n\n const definition = this._components[compName];\n if (!definition) throw new Error(`Component \"${compName}\" not registered.`);\n\n const { setup, template, style, children } = definition;\n const context = {\n props,\n emit: this.emitter.emit.bind(this.emitter),\n on: this.emitter.on.bind(this.emitter),\n signal: (v) => new Signal(v),\n ...this._prepareLifecycleHooks(),\n };\n\n /**\n * Processes the mounting of the component.\n *\n * @param {object} data - Data returned from the component's setup function.\n * @returns {object} An object with the container, merged context data, and an unmount function.\n */\n const processMount = (data) => {\n const mergedContext = { ...context, ...data };\n const watcherUnsubscribers = [];\n const childInstances = [];\n\n if (!this._isMounted) {\n mergedContext.onBeforeMount && mergedContext.onBeforeMount();\n } else {\n mergedContext.onBeforeUpdate && mergedContext.onBeforeUpdate();\n }\n\n /**\n * Renders the component by parsing the template, patching the DOM,\n * processing events, injecting styles, and mounting child components.\n */\n const render = () => {\n const newHtml = TemplateEngine.parse(\n template(mergedContext),\n mergedContext\n );\n this.renderer.patchDOM(container, newHtml);\n this._processEvents(container, mergedContext);\n this._injectStyles(container, compName, style, mergedContext);\n this._mountChildren(container, children, childInstances);\n if (!this._isMounted) {\n mergedContext.onMount && mergedContext.onMount();\n this._isMounted = true;\n } else {\n mergedContext.onUpdate && mergedContext.onUpdate();\n }\n };\n\n Object.values(data).forEach((val) => {\n if (val instanceof Signal) watcherUnsubscribers.push(val.watch(render));\n });\n\n render();\n\n return {\n container,\n data: mergedContext,\n /**\n * Unmounts the component, cleaning up watchers, child components, and clearing the container.\n */\n unmount: () => {\n watcherUnsubscribers.forEach((fn) => fn());\n childInstances.forEach((child) => child.unmount());\n mergedContext.onUnmount && mergedContext.onUnmount();\n container.innerHTML = \"\";\n },\n };\n };\n\n // Handle asynchronous setup if needed.\n const setupResult = setup(context);\n if (setupResult && typeof setupResult.then === \"function\") {\n return setupResult.then((data) => processMount(data));\n } else {\n const data = setupResult || {};\n return processMount(data);\n }\n }\n\n /**\n * Prepares default no-operation lifecycle hook functions.\n *\n * @returns {object} An object with keys for lifecycle hooks mapped to empty functions.\n * @private\n */\n _prepareLifecycleHooks() {\n return this._lifecycleHooks.reduce((acc, hook) => {\n acc[hook] = () => {};\n return acc;\n }, {});\n }\n\n /**\n * Processes DOM elements for event binding based on attributes starting with \"@\".\n *\n * @param {HTMLElement} container - The container element in which to search for events.\n * @param {object} context - The current context containing event handler definitions.\n * @private\n */\n _processEvents(container, context) {\n container.querySelectorAll(\"*\").forEach((el) => {\n [...el.attributes].forEach(({ name, value }) => {\n if (name.startsWith(\"@\")) {\n const event = name.slice(1);\n const handler = TemplateEngine.evaluate(value, context);\n if (typeof handler === \"function\") {\n el.addEventListener(event, handler);\n el.removeAttribute(name);\n }\n }\n });\n });\n }\n\n /**\n * Injects scoped styles into the component's container.\n *\n * @param {HTMLElement} container - The container element.\n * @param {string} compName - The component name used to identify the style element.\n * @param {Function} styleFn - A function that returns CSS styles as a string.\n * @param {object} context - The current context for style interpolation.\n * @private\n */\n _injectStyles(container, compName, styleFn, context) {\n if (styleFn) {\n let styleEl = container.querySelector(\n `style[data-eleva-style=\"${compName}\"]`\n );\n if (!styleEl) {\n styleEl = document.createElement(\"style\");\n styleEl.setAttribute(\"data-eleva-style\", compName);\n container.appendChild(styleEl);\n }\n styleEl.textContent = TemplateEngine.parse(styleFn(context), context);\n }\n }\n\n /**\n * Mounts child components within the parent component's container.\n *\n * @param {HTMLElement} container - The parent container element.\n * @param {object} children - An object mapping child component selectors to their definitions.\n * @param {Array} childInstances - An array to store the mounted child component instances.\n * @private\n */\n _mountChildren(container, children, childInstances) {\n childInstances.forEach((child) => child.unmount());\n childInstances.length = 0;\n\n Object.keys(children || {}).forEach((childName) => {\n container.querySelectorAll(childName).forEach((childEl) => {\n const props = {};\n [...childEl.attributes].forEach(({ name, value }) => {\n if (name.startsWith(\"eleva-prop-\")) {\n props[name.slice(\"eleva-prop-\".length)] = value;\n }\n });\n const instance = this.mount(childEl, childName, props);\n childInstances.push(instance);\n });\n });\n }\n}\n"],"names":["TemplateEngine","parse","template","data","replace","_","expr","value","evaluate","undefined","keys","Object","values","map","k","result","Function","error","console","expression","message","Signal","constructor","_value","_watchers","Set","newVal","forEach","fn","watch","add","delete","Emitter","events","on","event","handler","push","off","filter","h","emit","args","Renderer","patchDOM","container","newHtml","tempContainer","document","createElement","innerHTML","diff","oldParent","newParent","oldNodes","Array","from","childNodes","newNodes","max","Math","length","i","oldNode","newNode","appendChild","cloneNode","removeChild","nodeType","Node","ELEMENT_NODE","oldKey","getAttribute","newKey","replaceChild","nodeName","TEXT_NODE","nodeValue","updateAttributes","oldEl","newEl","attributeToPropertyMap","checked","selected","disabled","attributes","attr","name","startsWith","hasAttribute","removeAttribute","setAttribute","Eleva","config","_components","_plugins","_lifecycleHooks","_isMounted","emitter","renderer","use","plugin","options","install","component","definition","mount","selectorOrElement","compName","props","querySelector","Error","setup","style","children","context","bind","signal","v","_prepareLifecycleHooks","processMount","mergedContext","watcherUnsubscribers","childInstances","onBeforeMount","onBeforeUpdate","render","_processEvents","_injectStyles","_mountChildren","onMount","onUpdate","val","unmount","child","onUnmount","setupResult","then","reduce","acc","hook","querySelectorAll","el","slice","addEventListener","styleFn","styleEl","textContent","childName","childEl","instance"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eleva.umd.js","sources":["../src/modules/TemplateEngine.js","../src/modules/Signal.js","../src/modules/Emitter.js","../src/modules/Renderer.js","../src/core/Eleva.js"],"sourcesContent":["\"use strict\";\n\n/**\n * @class 🔒 TemplateEngine\n * @classdesc Secure interpolation & dynamic attribute parsing.\n * Provides methods to parse template strings by replacing interpolation expressions\n * with dynamic data values and to evaluate expressions within a given data context.\n */\nexport class TemplateEngine {\n /**\n * Parses a template string and replaces interpolation expressions with corresponding values.\n *\n * @param {string} template - The template string containing expressions in the format `{{ expression }}`.\n * @param {Object<string, any>} data - The data object to use for evaluating expressions.\n * @returns {string} The resulting string with evaluated values.\n */\n static parse(template, data) {\n return template.replace(/\\{\\{\\s*(.*?)\\s*\\}\\}/g, (_, expr) => {\n const value = this.evaluate(expr, data);\n return value === undefined ? \"\" : value;\n });\n }\n\n /**\n * Evaluates a JavaScript expression using the provided data context.\n *\n * @param {string} expr - The JavaScript expression to evaluate.\n * @param {Object<string, any>} data - The data context for evaluating the expression.\n * @returns {any} The result of the evaluated expression, or an empty string if undefined or on error.\n */\n static evaluate(expr, data) {\n try {\n const keys = Object.keys(data);\n const values = Object.values(data);\n const result = new Function(...keys, `return ${expr}`)(...values);\n return result === undefined ? \"\" : result;\n } catch (error) {\n console.error(`Template evaluation error:`, {\n expression: expr,\n data,\n error: error.message,\n });\n return \"\";\n }\n }\n}\n","\"use strict\";\n\n/**\n * @class ⚡ Signal\n * @classdesc Fine-grained reactivity.\n * A reactive data holder that notifies registered watchers when its value changes,\n * enabling fine-grained DOM patching rather than full re-renders.\n */\nexport class Signal {\n /**\n * Creates a new Signal instance.\n *\n * @param {*} value - The initial value of the signal.\n */\n constructor(value) {\n /** @private {*} Internal storage for the signal's current value */\n this._value = value;\n /** @private {Set<function>} Collection of callback functions to be notified when value changes */\n this._watchers = new Set();\n }\n\n /**\n * Gets the current value of the signal.\n *\n * @returns {*} The current value.\n */\n get value() {\n return this._value;\n }\n\n /**\n * Sets a new value for the signal and notifies all registered watchers if the value has changed.\n *\n * @param {*} newVal - The new value to set.\n */\n set value(newVal) {\n if (newVal !== this._value) {\n this._value = newVal;\n this._watchers.forEach((fn) => fn(newVal));\n }\n }\n\n /**\n * Registers a watcher function that will be called whenever the signal's value changes.\n *\n * @param {function(any): void} fn - The callback function to invoke on value change.\n * @returns {function(): boolean} A function to unsubscribe the watcher.\n */\n watch(fn) {\n this._watchers.add(fn);\n return () => this._watchers.delete(fn);\n }\n}\n","\"use strict\";\n\n/**\n * @class 🎙️ Emitter\n * @classdesc Robust inter-component communication with event bubbling.\n * Implements a basic publish-subscribe pattern for event handling, allowing components\n * to communicate through custom events.\n */\nexport class Emitter {\n /**\n * Creates a new Emitter instance.\n */\n constructor() {\n /** @type {Object.<string, Function[]>} Storage for event handlers mapped by event name */\n this.events = {};\n }\n\n /**\n * Registers an event handler for the specified event.\n *\n * @param {string} event - The name of the event.\n * @param {function(...any): void} handler - The function to call when the event is emitted.\n */\n on(event, handler) {\n (this.events[event] || (this.events[event] = [])).push(handler);\n }\n\n /**\n * Removes a previously registered event handler.\n *\n * @param {string} event - The name of the event.\n * @param {function(...any): void} handler - The handler function to remove.\n */\n off(event, handler) {\n if (this.events[event]) {\n this.events[event] = this.events[event].filter((h) => h !== handler);\n }\n }\n\n /**\n * Emits an event, invoking all handlers registered for that event.\n *\n * @param {string} event - The event name.\n * @param {...any} args - Additional arguments to pass to the event handlers.\n */\n emit(event, ...args) {\n (this.events[event] || []).forEach((handler) => handler(...args));\n }\n}\n","\"use strict\";\n\n/**\n * @class 🎨 Renderer\n * @classdesc Handles DOM patching, diffing, and attribute updates.\n * Provides methods for efficient DOM updates by diffing the new and old DOM structures\n * and applying only the necessary changes.\n */\nexport class Renderer {\n /**\n * Patches the DOM of a container element with new HTML content.\n *\n * @param {HTMLElement} container - The container element to patch.\n * @param {string} newHtml - The new HTML content to apply.\n */\n patchDOM(container, newHtml) {\n const tempContainer = document.createElement(\"div\");\n tempContainer.innerHTML = newHtml;\n this.diff(container, tempContainer);\n }\n\n /**\n * Diffs two DOM trees (old and new) and applies updates to the old DOM.\n *\n * @param {HTMLElement} oldParent - The original DOM element.\n * @param {HTMLElement} newParent - The new DOM element.\n */\n diff(oldParent, newParent) {\n const oldNodes = Array.from(oldParent.childNodes);\n const newNodes = Array.from(newParent.childNodes);\n const max = Math.max(oldNodes.length, newNodes.length);\n for (let i = 0; i < max; i++) {\n const oldNode = oldNodes[i];\n const newNode = newNodes[i];\n\n // Case 1: Append new nodes that don't exist in the old tree.\n if (!oldNode && newNode) {\n oldParent.appendChild(newNode.cloneNode(true));\n continue;\n }\n // Case 2: Remove old nodes not present in the new tree.\n if (oldNode && !newNode) {\n oldParent.removeChild(oldNode);\n continue;\n }\n\n // Case 3: For element nodes, compare keys if available.\n if (\n oldNode.nodeType === Node.ELEMENT_NODE &&\n newNode.nodeType === Node.ELEMENT_NODE\n ) {\n const oldKey = oldNode.getAttribute(\"key\");\n const newKey = newNode.getAttribute(\"key\");\n if (oldKey || newKey) {\n if (oldKey !== newKey) {\n oldParent.replaceChild(newNode.cloneNode(true), oldNode);\n continue;\n }\n }\n }\n\n // Case 4: Replace nodes if types or tag names differ.\n if (\n oldNode.nodeType !== newNode.nodeType ||\n oldNode.nodeName !== newNode.nodeName\n ) {\n oldParent.replaceChild(newNode.cloneNode(true), oldNode);\n continue;\n }\n // Case 5: For text nodes, update content if different.\n if (oldNode.nodeType === Node.TEXT_NODE) {\n if (oldNode.nodeValue !== newNode.nodeValue) {\n oldNode.nodeValue = newNode.nodeValue;\n }\n continue;\n }\n // Case 6: For element nodes, update attributes and then diff children.\n if (oldNode.nodeType === Node.ELEMENT_NODE) {\n this.updateAttributes(oldNode, newNode);\n this.diff(oldNode, newNode);\n }\n }\n }\n\n /**\n * Updates the attributes of an element to match those of a new element.\n *\n * @param {HTMLElement} oldEl - The element to update.\n * @param {HTMLElement} newEl - The element providing the updated attributes.\n */\n updateAttributes(oldEl, newEl) {\n const attributeToPropertyMap = {\n value: \"value\",\n checked: \"checked\",\n selected: \"selected\",\n disabled: \"disabled\",\n };\n\n // Remove old attributes that no longer exist.\n Array.from(oldEl.attributes).forEach((attr) => {\n if (attr.name.startsWith(\"@\")) return;\n if (!newEl.hasAttribute(attr.name)) {\n oldEl.removeAttribute(attr.name);\n }\n });\n // Add or update attributes from newEl.\n Array.from(newEl.attributes).forEach((attr) => {\n if (attr.name.startsWith(\"@\")) return;\n if (oldEl.getAttribute(attr.name) !== attr.value) {\n oldEl.setAttribute(attr.name, attr.value);\n if (attributeToPropertyMap[attr.name]) {\n oldEl[attributeToPropertyMap[attr.name]] = attr.value;\n } else if (attr.name in oldEl) {\n oldEl[attr.name] = attr.value;\n }\n }\n });\n }\n}\n","\"use strict\";\n\nimport { TemplateEngine } from \"../modules/TemplateEngine.js\";\nimport { Signal } from \"../modules/Signal.js\";\nimport { Emitter } from \"../modules/Emitter.js\";\nimport { Renderer } from \"../modules/Renderer.js\";\n\n/**\n * Defines the structure and behavior of a component.\n * @typedef {Object} ComponentDefinition\n * @property {function(Object<string, any>): (Object<string, any>|Promise<Object<string, any>>)} [setup]\n * Optional setup function that initializes the component's reactive state and lifecycle.\n * Receives props and context as an argument and should return an object containing the component's state.\n * Can return either a synchronous object or a Promise that resolves to an object for async initialization.\n *\n * @property {function(Object<string, any>): string} template\n * Required function that defines the component's HTML structure.\n * Receives the merged context (props + setup data) and must return an HTML template string.\n * Supports dynamic expressions using {{ }} syntax for reactive data binding.\n *\n * @property {function(Object<string, any>): string} [style]\n * Optional function that defines component-scoped CSS styles.\n * Receives the merged context and returns a CSS string that will be automatically scoped to the component.\n * Styles are injected into the component's container and only affect elements within it.\n *\n * @property {Object<string, ComponentDefinition>} [children]\n * Optional object that defines nested child components.\n * Keys are CSS selectors that match elements in the template where child components should be mounted.\n * Values are ComponentDefinition objects that define the structure and behavior of each child component.\n */\n\n/**\n * @class 🧩 Eleva\n * @classdesc Signal-based component runtime framework with lifecycle hooks, scoped styles, and plugin support.\n * Manages component registration, plugin integration, event handling, and DOM rendering.\n */\nexport class Eleva {\n /**\n * Creates a new Eleva instance.\n *\n * @param {string} name - The name of the Eleva instance.\n * @param {Object<string, any>} [config={}] - Optional configuration for the instance.\n */\n constructor(name, config = {}) {\n /** @type {string} The unique identifier name for this Eleva instance */\n this.name = name;\n /** @type {Object<string, any>} Optional configuration object for the Eleva instance */\n this.config = config;\n /** @type {Object<string, ComponentDefinition>} Object storing registered component definitions by name */\n this._components = {};\n /** @private {Array<Object>} Collection of installed plugin instances */\n this._plugins = [];\n /** @private {string[]} Array of lifecycle hook names supported by the component */\n this._lifecycleHooks = [\n \"onBeforeMount\",\n \"onMount\",\n \"onBeforeUpdate\",\n \"onUpdate\",\n \"onUnmount\",\n ];\n /** @private {boolean} Flag indicating if component is currently mounted */\n this._isMounted = false;\n /** @private {Emitter} Instance of the event emitter for handling component events */\n this.emitter = new Emitter();\n /** @private {Renderer} Instance of the renderer for handling DOM updates and patching */\n this.renderer = new Renderer();\n }\n\n /**\n * Integrates a plugin with the Eleva framework.\n *\n * @param {Object} plugin - The plugin object which should have an `install` function.\n * @param {Object<string, any>} [options={}] - Optional options to pass to the plugin.\n * @returns {Eleva} The Eleva instance (for chaining).\n */\n use(plugin, options = {}) {\n if (typeof plugin.install === \"function\") {\n plugin.install(this, options);\n }\n this._plugins.push(plugin);\n return this;\n }\n\n /**\n * Registers a component with the Eleva instance.\n *\n * @param {string} name - The name of the component.\n * @param {ComponentDefinition} definition - The component definition including setup, template, style, and children.\n * @returns {Eleva} The Eleva instance (for chaining).\n */\n component(name, definition) {\n this._components[name] = definition;\n return this;\n }\n\n /**\n * Mounts a registered component to a DOM element.\n *\n * @param {HTMLElement} container - A DOM element where the component will be mounted.\n * @param {string|ComponentDefinition} compName - The name of the component to mount or a component definition.\n * @param {Object<string, any>} [props={}] - Optional properties to pass to the component.\n * @returns {object|Promise<object>} An object representing the mounted component instance, or a Promise that resolves to it for asynchronous setups.\n * @throws {Error} If the container is not found or if the component is not registered.\n */\n mount(container, compName, props = {}) {\n if (!container) throw new Error(`Container not found: ${container}`);\n\n let definition;\n if (typeof compName === \"string\") {\n definition = this._components[compName];\n if (!definition)\n throw new Error(`Component \"${compName}\" not registered.`);\n } else if (typeof compName === \"object\") {\n definition = compName;\n } else {\n throw new Error(\"Invalid component parameter.\");\n }\n\n /**\n * Destructure the component definition to access core functionality.\n * - setup: Optional function for component initialization and state management\n * - template: Required function that returns the component's HTML structure\n * - style: Optional function for component-scoped CSS styles\n * - children: Optional object defining nested child components\n */\n const { setup, template, style, children } = definition;\n\n /**\n * Creates the initial context object for the component instance.\n * This context provides core functionality and will be merged with setup data.\n * @type {Object<string, any>}\n * @property {Object<string, any>} props - Component properties passed during mounting\n * @property {Emitter} emitter - Event emitter instance for component event handling\n * @property {function(any): Signal} signal - Factory function to create reactive Signal instances\n * @property {Object<string, function(): void>} ...lifecycleHooks - Prepared lifecycle hook functions\n */\n const context = {\n props,\n emitter: this.emitter,\n signal: (v) => new Signal(v),\n ...this._prepareLifecycleHooks(),\n };\n\n /**\n * Processes the mounting of the component.\n *\n * @param {Object<string, any>} data - Data returned from the component's setup function.\n * @returns {object} An object with the container, merged context data, and an unmount function.\n */\n const processMount = (data) => {\n const mergedContext = { ...context, ...data };\n const watcherUnsubscribers = [];\n const childInstances = [];\n\n if (!this._isMounted) {\n mergedContext.onBeforeMount && mergedContext.onBeforeMount();\n } else {\n mergedContext.onBeforeUpdate && mergedContext.onBeforeUpdate();\n }\n\n /**\n * Renders the component by parsing the template, patching the DOM,\n * processing events, injecting styles, and mounting child components.\n */\n const render = () => {\n const newHtml = TemplateEngine.parse(\n template(mergedContext),\n mergedContext\n );\n this.renderer.patchDOM(container, newHtml);\n this._processEvents(container, mergedContext);\n this._injectStyles(container, compName, style, mergedContext);\n this._mountChildren(container, children, childInstances);\n if (!this._isMounted) {\n mergedContext.onMount && mergedContext.onMount();\n this._isMounted = true;\n } else {\n mergedContext.onUpdate && mergedContext.onUpdate();\n }\n };\n\n /**\n * Sets up reactive watchers for all Signal instances in the component's data.\n * When a Signal's value changes, the component will re-render to reflect the updates.\n * Stores unsubscribe functions to clean up watchers when component unmounts.\n */\n Object.values(data).forEach((val) => {\n if (val instanceof Signal) watcherUnsubscribers.push(val.watch(render));\n });\n\n render();\n\n return {\n container,\n data: mergedContext,\n /**\n * Unmounts the component, cleaning up watchers, child components, and clearing the container.\n *\n * @returns {void}\n */\n unmount: () => {\n watcherUnsubscribers.forEach((fn) => fn());\n childInstances.forEach((child) => child.unmount());\n mergedContext.onUnmount && mergedContext.onUnmount();\n container.innerHTML = \"\";\n },\n };\n };\n\n // Handle asynchronous setup.\n return Promise.resolve(\n typeof setup === \"function\" ? setup(context) : {}\n ).then((data) => processMount(data));\n }\n\n /**\n * Prepares default no-operation lifecycle hook functions.\n *\n * @returns {Object<string, function(): void>} An object with keys for lifecycle hooks mapped to empty functions.\n * @private\n */\n _prepareLifecycleHooks() {\n return this._lifecycleHooks.reduce((acc, hook) => {\n acc[hook] = () => {};\n return acc;\n }, {});\n }\n\n /**\n * Processes DOM elements for event binding based on attributes starting with \"@\".\n *\n * @param {HTMLElement} container - The container element in which to search for events.\n * @param {Object<string, any>} context - The current context containing event handler definitions.\n * @private\n */\n _processEvents(container, context) {\n container.querySelectorAll(\"*\").forEach((el) => {\n [...el.attributes].forEach(({ name, value }) => {\n if (name.startsWith(\"@\")) {\n const event = name.slice(1);\n const handler = TemplateEngine.evaluate(value, context);\n if (typeof handler === \"function\") {\n el.addEventListener(event, handler);\n el.removeAttribute(name);\n }\n }\n });\n });\n }\n\n /**\n * Injects scoped styles into the component's container.\n *\n * @param {HTMLElement} container - The container element.\n * @param {string} compName - The component name used to identify the style element.\n * @param {function(Object<string, any>): string} [styleFn] - A function that returns CSS styles as a string.\n * @param {Object<string, any>} context - The current context for style interpolation.\n * @private\n */\n _injectStyles(container, compName, styleFn, context) {\n if (styleFn) {\n let styleEl = container.querySelector(\n `style[data-eleva-style=\"${compName}\"]`\n );\n if (!styleEl) {\n styleEl = document.createElement(\"style\");\n styleEl.setAttribute(\"data-eleva-style\", compName);\n container.appendChild(styleEl);\n }\n styleEl.textContent = TemplateEngine.parse(styleFn(context), context);\n }\n }\n\n /**\n * Mounts child components within the parent component's container.\n *\n * @param {HTMLElement} container - The parent container element.\n * @param {Object<string, ComponentDefinition>} [children] - An object mapping child component selectors to their definitions.\n * @param {Array<object>} childInstances - An array to store the mounted child component instances.\n * @private\n */\n _mountChildren(container, children, childInstances) {\n childInstances.forEach((child) => child.unmount());\n childInstances.length = 0;\n\n Object.keys(children || {}).forEach((childSelector) => {\n container.querySelectorAll(childSelector).forEach((childEl) => {\n const props = {};\n [...childEl.attributes].forEach(({ name, value }) => {\n if (name.startsWith(\"eleva-prop-\")) {\n props[name.slice(\"eleva-prop-\".length)] = value;\n }\n });\n const instance = this.mount(childEl, children[childSelector], props);\n childInstances.push(instance);\n });\n });\n }\n}\n"],"names":["TemplateEngine","parse","template","data","replace","_","expr","value","evaluate","undefined","keys","Object","values","result","Function","error","console","expression","message","Signal","constructor","_value","_watchers","Set","newVal","forEach","fn","watch","add","delete","Emitter","events","on","event","handler","push","off","filter","h","emit","args","Renderer","patchDOM","container","newHtml","tempContainer","document","createElement","innerHTML","diff","oldParent","newParent","oldNodes","Array","from","childNodes","newNodes","max","Math","length","i","oldNode","newNode","appendChild","cloneNode","removeChild","nodeType","Node","ELEMENT_NODE","oldKey","getAttribute","newKey","replaceChild","nodeName","TEXT_NODE","nodeValue","updateAttributes","oldEl","newEl","attributeToPropertyMap","checked","selected","disabled","attributes","attr","name","startsWith","hasAttribute","removeAttribute","setAttribute","Eleva","config","_components","_plugins","_lifecycleHooks","_isMounted","emitter","renderer","use","plugin","options","install","component","definition","mount","compName","props","Error","setup","style","children","context","signal","v","_prepareLifecycleHooks","processMount","mergedContext","watcherUnsubscribers","childInstances","onBeforeMount","onBeforeUpdate","render","_processEvents","_injectStyles","_mountChildren","onMount","onUpdate","val","unmount","child","onUnmount","Promise","resolve","then","reduce","acc","hook","querySelectorAll","el","slice","addEventListener","styleFn","styleEl","querySelector","textContent","childSelector","childEl","instance"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "eleva",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0-alpha",
|
|
4
4
|
"description": "A minimalist and lightweight, pure vanilla JavaScript frontend runtime framework.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/eleva.js",
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"url": "https://www.tarekraafat.com"
|
|
65
65
|
},
|
|
66
66
|
"license": "MIT",
|
|
67
|
+
"homepage": "https://tarekraafat.github.io/eleva",
|
|
67
68
|
"repository": {
|
|
68
69
|
"type": "git",
|
|
69
70
|
"url": "git+https://github.com/TarekRaafat/eleva.git"
|
package/src/core/Eleva.js
CHANGED
|
@@ -6,23 +6,51 @@ import { Emitter } from "../modules/Emitter.js";
|
|
|
6
6
|
import { Renderer } from "../modules/Renderer.js";
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Defines the structure and behavior of a component.
|
|
10
|
+
* @typedef {Object} ComponentDefinition
|
|
11
|
+
* @property {function(Object<string, any>): (Object<string, any>|Promise<Object<string, any>>)} [setup]
|
|
12
|
+
* Optional setup function that initializes the component's reactive state and lifecycle.
|
|
13
|
+
* Receives props and context as an argument and should return an object containing the component's state.
|
|
14
|
+
* Can return either a synchronous object or a Promise that resolves to an object for async initialization.
|
|
10
15
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
16
|
+
* @property {function(Object<string, any>): string} template
|
|
17
|
+
* Required function that defines the component's HTML structure.
|
|
18
|
+
* Receives the merged context (props + setup data) and must return an HTML template string.
|
|
19
|
+
* Supports dynamic expressions using {{ }} syntax for reactive data binding.
|
|
20
|
+
*
|
|
21
|
+
* @property {function(Object<string, any>): string} [style]
|
|
22
|
+
* Optional function that defines component-scoped CSS styles.
|
|
23
|
+
* Receives the merged context and returns a CSS string that will be automatically scoped to the component.
|
|
24
|
+
* Styles are injected into the component's container and only affect elements within it.
|
|
25
|
+
*
|
|
26
|
+
* @property {Object<string, ComponentDefinition>} [children]
|
|
27
|
+
* Optional object that defines nested child components.
|
|
28
|
+
* Keys are CSS selectors that match elements in the template where child components should be mounted.
|
|
29
|
+
* Values are ComponentDefinition objects that define the structure and behavior of each child component.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* @class 🧩 Eleva
|
|
34
|
+
* @classdesc Signal-based component runtime framework with lifecycle hooks, scoped styles, and plugin support.
|
|
35
|
+
* Manages component registration, plugin integration, event handling, and DOM rendering.
|
|
13
36
|
*/
|
|
14
37
|
export class Eleva {
|
|
15
38
|
/**
|
|
16
39
|
* Creates a new Eleva instance.
|
|
17
40
|
*
|
|
18
41
|
* @param {string} name - The name of the Eleva instance.
|
|
19
|
-
* @param {
|
|
42
|
+
* @param {Object<string, any>} [config={}] - Optional configuration for the instance.
|
|
20
43
|
*/
|
|
21
44
|
constructor(name, config = {}) {
|
|
45
|
+
/** @type {string} The unique identifier name for this Eleva instance */
|
|
22
46
|
this.name = name;
|
|
47
|
+
/** @type {Object<string, any>} Optional configuration object for the Eleva instance */
|
|
23
48
|
this.config = config;
|
|
49
|
+
/** @type {Object<string, ComponentDefinition>} Object storing registered component definitions by name */
|
|
24
50
|
this._components = {};
|
|
51
|
+
/** @private {Array<Object>} Collection of installed plugin instances */
|
|
25
52
|
this._plugins = [];
|
|
53
|
+
/** @private {string[]} Array of lifecycle hook names supported by the component */
|
|
26
54
|
this._lifecycleHooks = [
|
|
27
55
|
"onBeforeMount",
|
|
28
56
|
"onMount",
|
|
@@ -30,16 +58,19 @@ export class Eleva {
|
|
|
30
58
|
"onUpdate",
|
|
31
59
|
"onUnmount",
|
|
32
60
|
];
|
|
61
|
+
/** @private {boolean} Flag indicating if component is currently mounted */
|
|
33
62
|
this._isMounted = false;
|
|
63
|
+
/** @private {Emitter} Instance of the event emitter for handling component events */
|
|
34
64
|
this.emitter = new Emitter();
|
|
65
|
+
/** @private {Renderer} Instance of the renderer for handling DOM updates and patching */
|
|
35
66
|
this.renderer = new Renderer();
|
|
36
67
|
}
|
|
37
68
|
|
|
38
69
|
/**
|
|
39
70
|
* Integrates a plugin with the Eleva framework.
|
|
40
71
|
*
|
|
41
|
-
* @param {
|
|
42
|
-
* @param {
|
|
72
|
+
* @param {Object} plugin - The plugin object which should have an `install` function.
|
|
73
|
+
* @param {Object<string, any>} [options={}] - Optional options to pass to the plugin.
|
|
43
74
|
* @returns {Eleva} The Eleva instance (for chaining).
|
|
44
75
|
*/
|
|
45
76
|
use(plugin, options = {}) {
|
|
@@ -54,7 +85,7 @@ export class Eleva {
|
|
|
54
85
|
* Registers a component with the Eleva instance.
|
|
55
86
|
*
|
|
56
87
|
* @param {string} name - The name of the component.
|
|
57
|
-
* @param {
|
|
88
|
+
* @param {ComponentDefinition} definition - The component definition including setup, template, style, and children.
|
|
58
89
|
* @returns {Eleva} The Eleva instance (for chaining).
|
|
59
90
|
*/
|
|
60
91
|
component(name, definition) {
|
|
@@ -65,28 +96,47 @@ export class Eleva {
|
|
|
65
96
|
/**
|
|
66
97
|
* Mounts a registered component to a DOM element.
|
|
67
98
|
*
|
|
68
|
-
* @param {
|
|
69
|
-
* @param {string} compName - The name of the component to mount.
|
|
70
|
-
* @param {
|
|
99
|
+
* @param {HTMLElement} container - A DOM element where the component will be mounted.
|
|
100
|
+
* @param {string|ComponentDefinition} compName - The name of the component to mount or a component definition.
|
|
101
|
+
* @param {Object<string, any>} [props={}] - Optional properties to pass to the component.
|
|
71
102
|
* @returns {object|Promise<object>} An object representing the mounted component instance, or a Promise that resolves to it for asynchronous setups.
|
|
72
|
-
* @throws
|
|
103
|
+
* @throws {Error} If the container is not found or if the component is not registered.
|
|
73
104
|
*/
|
|
74
|
-
mount(
|
|
75
|
-
|
|
76
|
-
typeof selectorOrElement === "string"
|
|
77
|
-
? document.querySelector(selectorOrElement)
|
|
78
|
-
: selectorOrElement;
|
|
79
|
-
if (!container)
|
|
80
|
-
throw new Error(`Container not found: ${selectorOrElement}`);
|
|
105
|
+
mount(container, compName, props = {}) {
|
|
106
|
+
if (!container) throw new Error(`Container not found: ${container}`);
|
|
81
107
|
|
|
82
|
-
|
|
83
|
-
if (
|
|
108
|
+
let definition;
|
|
109
|
+
if (typeof compName === "string") {
|
|
110
|
+
definition = this._components[compName];
|
|
111
|
+
if (!definition)
|
|
112
|
+
throw new Error(`Component "${compName}" not registered.`);
|
|
113
|
+
} else if (typeof compName === "object") {
|
|
114
|
+
definition = compName;
|
|
115
|
+
} else {
|
|
116
|
+
throw new Error("Invalid component parameter.");
|
|
117
|
+
}
|
|
84
118
|
|
|
119
|
+
/**
|
|
120
|
+
* Destructure the component definition to access core functionality.
|
|
121
|
+
* - setup: Optional function for component initialization and state management
|
|
122
|
+
* - template: Required function that returns the component's HTML structure
|
|
123
|
+
* - style: Optional function for component-scoped CSS styles
|
|
124
|
+
* - children: Optional object defining nested child components
|
|
125
|
+
*/
|
|
85
126
|
const { setup, template, style, children } = definition;
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Creates the initial context object for the component instance.
|
|
130
|
+
* This context provides core functionality and will be merged with setup data.
|
|
131
|
+
* @type {Object<string, any>}
|
|
132
|
+
* @property {Object<string, any>} props - Component properties passed during mounting
|
|
133
|
+
* @property {Emitter} emitter - Event emitter instance for component event handling
|
|
134
|
+
* @property {function(any): Signal} signal - Factory function to create reactive Signal instances
|
|
135
|
+
* @property {Object<string, function(): void>} ...lifecycleHooks - Prepared lifecycle hook functions
|
|
136
|
+
*/
|
|
86
137
|
const context = {
|
|
87
138
|
props,
|
|
88
|
-
|
|
89
|
-
on: this.emitter.on.bind(this.emitter),
|
|
139
|
+
emitter: this.emitter,
|
|
90
140
|
signal: (v) => new Signal(v),
|
|
91
141
|
...this._prepareLifecycleHooks(),
|
|
92
142
|
};
|
|
@@ -94,7 +144,7 @@ export class Eleva {
|
|
|
94
144
|
/**
|
|
95
145
|
* Processes the mounting of the component.
|
|
96
146
|
*
|
|
97
|
-
* @param {
|
|
147
|
+
* @param {Object<string, any>} data - Data returned from the component's setup function.
|
|
98
148
|
* @returns {object} An object with the container, merged context data, and an unmount function.
|
|
99
149
|
*/
|
|
100
150
|
const processMount = (data) => {
|
|
@@ -129,6 +179,11 @@ export class Eleva {
|
|
|
129
179
|
}
|
|
130
180
|
};
|
|
131
181
|
|
|
182
|
+
/**
|
|
183
|
+
* Sets up reactive watchers for all Signal instances in the component's data.
|
|
184
|
+
* When a Signal's value changes, the component will re-render to reflect the updates.
|
|
185
|
+
* Stores unsubscribe functions to clean up watchers when component unmounts.
|
|
186
|
+
*/
|
|
132
187
|
Object.values(data).forEach((val) => {
|
|
133
188
|
if (val instanceof Signal) watcherUnsubscribers.push(val.watch(render));
|
|
134
189
|
});
|
|
@@ -140,6 +195,8 @@ export class Eleva {
|
|
|
140
195
|
data: mergedContext,
|
|
141
196
|
/**
|
|
142
197
|
* Unmounts the component, cleaning up watchers, child components, and clearing the container.
|
|
198
|
+
*
|
|
199
|
+
* @returns {void}
|
|
143
200
|
*/
|
|
144
201
|
unmount: () => {
|
|
145
202
|
watcherUnsubscribers.forEach((fn) => fn());
|
|
@@ -150,20 +207,16 @@ export class Eleva {
|
|
|
150
207
|
};
|
|
151
208
|
};
|
|
152
209
|
|
|
153
|
-
// Handle asynchronous setup
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
} else {
|
|
158
|
-
const data = setupResult || {};
|
|
159
|
-
return processMount(data);
|
|
160
|
-
}
|
|
210
|
+
// Handle asynchronous setup.
|
|
211
|
+
return Promise.resolve(
|
|
212
|
+
typeof setup === "function" ? setup(context) : {}
|
|
213
|
+
).then((data) => processMount(data));
|
|
161
214
|
}
|
|
162
215
|
|
|
163
216
|
/**
|
|
164
217
|
* Prepares default no-operation lifecycle hook functions.
|
|
165
218
|
*
|
|
166
|
-
* @returns {
|
|
219
|
+
* @returns {Object<string, function(): void>} An object with keys for lifecycle hooks mapped to empty functions.
|
|
167
220
|
* @private
|
|
168
221
|
*/
|
|
169
222
|
_prepareLifecycleHooks() {
|
|
@@ -177,7 +230,7 @@ export class Eleva {
|
|
|
177
230
|
* Processes DOM elements for event binding based on attributes starting with "@".
|
|
178
231
|
*
|
|
179
232
|
* @param {HTMLElement} container - The container element in which to search for events.
|
|
180
|
-
* @param {
|
|
233
|
+
* @param {Object<string, any>} context - The current context containing event handler definitions.
|
|
181
234
|
* @private
|
|
182
235
|
*/
|
|
183
236
|
_processEvents(container, context) {
|
|
@@ -200,8 +253,8 @@ export class Eleva {
|
|
|
200
253
|
*
|
|
201
254
|
* @param {HTMLElement} container - The container element.
|
|
202
255
|
* @param {string} compName - The component name used to identify the style element.
|
|
203
|
-
* @param {
|
|
204
|
-
* @param {
|
|
256
|
+
* @param {function(Object<string, any>): string} [styleFn] - A function that returns CSS styles as a string.
|
|
257
|
+
* @param {Object<string, any>} context - The current context for style interpolation.
|
|
205
258
|
* @private
|
|
206
259
|
*/
|
|
207
260
|
_injectStyles(container, compName, styleFn, context) {
|
|
@@ -222,23 +275,23 @@ export class Eleva {
|
|
|
222
275
|
* Mounts child components within the parent component's container.
|
|
223
276
|
*
|
|
224
277
|
* @param {HTMLElement} container - The parent container element.
|
|
225
|
-
* @param {
|
|
226
|
-
* @param {Array} childInstances - An array to store the mounted child component instances.
|
|
278
|
+
* @param {Object<string, ComponentDefinition>} [children] - An object mapping child component selectors to their definitions.
|
|
279
|
+
* @param {Array<object>} childInstances - An array to store the mounted child component instances.
|
|
227
280
|
* @private
|
|
228
281
|
*/
|
|
229
282
|
_mountChildren(container, children, childInstances) {
|
|
230
283
|
childInstances.forEach((child) => child.unmount());
|
|
231
284
|
childInstances.length = 0;
|
|
232
285
|
|
|
233
|
-
Object.keys(children || {}).forEach((
|
|
234
|
-
container.querySelectorAll(
|
|
286
|
+
Object.keys(children || {}).forEach((childSelector) => {
|
|
287
|
+
container.querySelectorAll(childSelector).forEach((childEl) => {
|
|
235
288
|
const props = {};
|
|
236
289
|
[...childEl.attributes].forEach(({ name, value }) => {
|
|
237
290
|
if (name.startsWith("eleva-prop-")) {
|
|
238
291
|
props[name.slice("eleva-prop-".length)] = value;
|
|
239
292
|
}
|
|
240
293
|
});
|
|
241
|
-
const instance = this.mount(childEl,
|
|
294
|
+
const instance = this.mount(childEl, children[childSelector], props);
|
|
242
295
|
childInstances.push(instance);
|
|
243
296
|
});
|
|
244
297
|
});
|
package/src/modules/Emitter.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* 🎙️ Emitter
|
|
5
|
-
*
|
|
6
|
-
* Implements a basic publish-subscribe pattern for event handling,
|
|
7
|
-
*
|
|
4
|
+
* @class 🎙️ Emitter
|
|
5
|
+
* @classdesc Robust inter-component communication with event bubbling.
|
|
6
|
+
* Implements a basic publish-subscribe pattern for event handling, allowing components
|
|
7
|
+
* to communicate through custom events.
|
|
8
8
|
*/
|
|
9
9
|
export class Emitter {
|
|
10
10
|
/**
|
|
11
11
|
* Creates a new Emitter instance.
|
|
12
12
|
*/
|
|
13
13
|
constructor() {
|
|
14
|
-
/** @type {Object.<string, Function[]>} */
|
|
14
|
+
/** @type {Object.<string, Function[]>} Storage for event handlers mapped by event name */
|
|
15
15
|
this.events = {};
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -19,7 +19,7 @@ export class Emitter {
|
|
|
19
19
|
* Registers an event handler for the specified event.
|
|
20
20
|
*
|
|
21
21
|
* @param {string} event - The name of the event.
|
|
22
|
-
* @param {
|
|
22
|
+
* @param {function(...any): void} handler - The function to call when the event is emitted.
|
|
23
23
|
*/
|
|
24
24
|
on(event, handler) {
|
|
25
25
|
(this.events[event] || (this.events[event] = [])).push(handler);
|
|
@@ -29,7 +29,7 @@ export class Emitter {
|
|
|
29
29
|
* Removes a previously registered event handler.
|
|
30
30
|
*
|
|
31
31
|
* @param {string} event - The name of the event.
|
|
32
|
-
* @param {
|
|
32
|
+
* @param {function(...any): void} handler - The handler function to remove.
|
|
33
33
|
*/
|
|
34
34
|
off(event, handler) {
|
|
35
35
|
if (this.events[event]) {
|
|
@@ -41,7 +41,7 @@ export class Emitter {
|
|
|
41
41
|
* Emits an event, invoking all handlers registered for that event.
|
|
42
42
|
*
|
|
43
43
|
* @param {string} event - The event name.
|
|
44
|
-
* @param {
|
|
44
|
+
* @param {...any} args - Additional arguments to pass to the event handlers.
|
|
45
45
|
*/
|
|
46
46
|
emit(event, ...args) {
|
|
47
47
|
(this.events[event] || []).forEach((handler) => handler(...args));
|
package/src/modules/Renderer.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* 🎨 Renderer
|
|
5
|
-
*
|
|
4
|
+
* @class 🎨 Renderer
|
|
5
|
+
* @classdesc Handles DOM patching, diffing, and attribute updates.
|
|
6
6
|
* Provides methods for efficient DOM updates by diffing the new and old DOM structures
|
|
7
7
|
* and applying only the necessary changes.
|
|
8
8
|
*/
|
|
@@ -33,18 +33,18 @@ export class Renderer {
|
|
|
33
33
|
const oldNode = oldNodes[i];
|
|
34
34
|
const newNode = newNodes[i];
|
|
35
35
|
|
|
36
|
-
// Append new nodes that don't exist in the old tree.
|
|
36
|
+
// Case 1: Append new nodes that don't exist in the old tree.
|
|
37
37
|
if (!oldNode && newNode) {
|
|
38
38
|
oldParent.appendChild(newNode.cloneNode(true));
|
|
39
39
|
continue;
|
|
40
40
|
}
|
|
41
|
-
// Remove old nodes not present in the new tree.
|
|
41
|
+
// Case 2: Remove old nodes not present in the new tree.
|
|
42
42
|
if (oldNode && !newNode) {
|
|
43
43
|
oldParent.removeChild(oldNode);
|
|
44
44
|
continue;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
// For element nodes, compare keys if available.
|
|
47
|
+
// Case 3: For element nodes, compare keys if available.
|
|
48
48
|
if (
|
|
49
49
|
oldNode.nodeType === Node.ELEMENT_NODE &&
|
|
50
50
|
newNode.nodeType === Node.ELEMENT_NODE
|
|
@@ -59,7 +59,7 @@ export class Renderer {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
// Replace nodes if types or tag names differ.
|
|
62
|
+
// Case 4: Replace nodes if types or tag names differ.
|
|
63
63
|
if (
|
|
64
64
|
oldNode.nodeType !== newNode.nodeType ||
|
|
65
65
|
oldNode.nodeName !== newNode.nodeName
|
|
@@ -67,14 +67,14 @@ export class Renderer {
|
|
|
67
67
|
oldParent.replaceChild(newNode.cloneNode(true), oldNode);
|
|
68
68
|
continue;
|
|
69
69
|
}
|
|
70
|
-
// For text nodes, update content if different.
|
|
70
|
+
// Case 5: For text nodes, update content if different.
|
|
71
71
|
if (oldNode.nodeType === Node.TEXT_NODE) {
|
|
72
72
|
if (oldNode.nodeValue !== newNode.nodeValue) {
|
|
73
73
|
oldNode.nodeValue = newNode.nodeValue;
|
|
74
74
|
}
|
|
75
75
|
continue;
|
|
76
76
|
}
|
|
77
|
-
// For element nodes, update attributes and then diff children.
|
|
77
|
+
// Case 6: For element nodes, update attributes and then diff children.
|
|
78
78
|
if (oldNode.nodeType === Node.ELEMENT_NODE) {
|
|
79
79
|
this.updateAttributes(oldNode, newNode);
|
|
80
80
|
this.diff(oldNode, newNode);
|
package/src/modules/Signal.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* ⚡ Signal
|
|
5
|
-
*
|
|
4
|
+
* @class ⚡ Signal
|
|
5
|
+
* @classdesc Fine-grained reactivity.
|
|
6
6
|
* A reactive data holder that notifies registered watchers when its value changes,
|
|
7
|
-
*
|
|
7
|
+
* enabling fine-grained DOM patching rather than full re-renders.
|
|
8
8
|
*/
|
|
9
9
|
export class Signal {
|
|
10
10
|
/**
|
|
@@ -13,7 +13,9 @@ export class Signal {
|
|
|
13
13
|
* @param {*} value - The initial value of the signal.
|
|
14
14
|
*/
|
|
15
15
|
constructor(value) {
|
|
16
|
+
/** @private {*} Internal storage for the signal's current value */
|
|
16
17
|
this._value = value;
|
|
18
|
+
/** @private {Set<function>} Collection of callback functions to be notified when value changes */
|
|
17
19
|
this._watchers = new Set();
|
|
18
20
|
}
|
|
19
21
|
|
|
@@ -41,8 +43,8 @@ export class Signal {
|
|
|
41
43
|
/**
|
|
42
44
|
* Registers a watcher function that will be called whenever the signal's value changes.
|
|
43
45
|
*
|
|
44
|
-
* @param {
|
|
45
|
-
* @returns {
|
|
46
|
+
* @param {function(any): void} fn - The callback function to invoke on value change.
|
|
47
|
+
* @returns {function(): boolean} A function to unsubscribe the watcher.
|
|
46
48
|
*/
|
|
47
49
|
watch(fn) {
|
|
48
50
|
this._watchers.add(fn);
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* 🔒 TemplateEngine
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* within a given data context.
|
|
4
|
+
* @class 🔒 TemplateEngine
|
|
5
|
+
* @classdesc Secure interpolation & dynamic attribute parsing.
|
|
6
|
+
* Provides methods to parse template strings by replacing interpolation expressions
|
|
7
|
+
* with dynamic data values and to evaluate expressions within a given data context.
|
|
9
8
|
*/
|
|
10
9
|
export class TemplateEngine {
|
|
11
10
|
/**
|
|
12
11
|
* Parses a template string and replaces interpolation expressions with corresponding values.
|
|
13
12
|
*
|
|
14
|
-
* @param {string} template - The template string containing expressions in the format {{ expression }}
|
|
15
|
-
* @param {
|
|
13
|
+
* @param {string} template - The template string containing expressions in the format `{{ expression }}`.
|
|
14
|
+
* @param {Object<string, any>} data - The data object to use for evaluating expressions.
|
|
16
15
|
* @returns {string} The resulting string with evaluated values.
|
|
17
16
|
*/
|
|
18
17
|
static parse(template, data) {
|
|
@@ -23,16 +22,16 @@ export class TemplateEngine {
|
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
/**
|
|
26
|
-
* Evaluates
|
|
25
|
+
* Evaluates a JavaScript expression using the provided data context.
|
|
27
26
|
*
|
|
28
27
|
* @param {string} expr - The JavaScript expression to evaluate.
|
|
29
|
-
* @param {
|
|
30
|
-
* @returns {
|
|
28
|
+
* @param {Object<string, any>} data - The data context for evaluating the expression.
|
|
29
|
+
* @returns {any} The result of the evaluated expression, or an empty string if undefined or on error.
|
|
31
30
|
*/
|
|
32
31
|
static evaluate(expr, data) {
|
|
33
32
|
try {
|
|
34
33
|
const keys = Object.keys(data);
|
|
35
|
-
const values =
|
|
34
|
+
const values = Object.values(data);
|
|
36
35
|
const result = new Function(...keys, `return ${expr}`)(...values);
|
|
37
36
|
return result === undefined ? "" : result;
|
|
38
37
|
} catch (error) {
|