Merge branch 'release/v0.16.5'

Author: ClassicOldSong

config/rollup.base.mjs

@@ -2,7 +2,7 @@ import chalk from 'chalk'
 
 // Rollup plugins
 import {eslint} from 'rollup-plugin-eslint'
-import {terser} from 'rollup-plugin-terser'
+import terser from '@rollup/plugin-terser'
 import buble from '@rollup/plugin-buble'
 import replace from '@rollup/plugin-replace'
 import resolve from '@rollup/plugin-node-resolve'

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ef-core",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "description": "Core of ef.js (without parser)",
   "main": "dist/ef-core.min.js",
   "module": "src/ef-core.js",
@@ -29,19 +29,19 @@
   },
   "homepage": "https://ef.js.org",
   "devDependencies": {
-    "@rollup/plugin-buble": "^1.0.1",
-    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-buble": "^1.0.2",
+    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
     "chalk": "^5.2.0",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.32.0",
-    "jsdoc": "^4.0.0",
-    "rollup": "^3.10.0",
+    "eslint": "^8.36.0",
+    "jsdoc": "^4.0.2",
+    "rollup": "^3.20.0",
     "rollup-plugin-browsersync": "^1.3.3",
     "rollup-plugin-eslint": "^7.0.0",
-    "rollup-plugin-progress": "^1.1.2",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-progress": "^1.1.2"
   }
 }

package.json

@@ -27,6 +27,7 @@ const initComponent = (component, node) => {
 		case 'array': {
 			const [info, ...childNodes] = node
 			if (typeOf(info) === 'object') {
+				component.__used_tags[info.t] = true
 				if (info.a) registerNS(info.a, component)
 				for (let i of childNodes) initComponent(component, i)
 			}
@@ -100,11 +101,14 @@ const create = (ast, name) => {
 	Object.defineProperty(EFComponent.prototype, 'constructor', {enumerable: false})
 
 	Object.defineProperty(EFComponent, '__local_namespaces', {enumerable: false, value: {}})
+	Object.defineProperty(EFComponent, '__used_tags', {enumerable: false, value: {}})
+	Object.defineProperty(EFComponent, '__component_ast', {enumerable: false, value: ast})
+
 	initComponent(EFComponent, ast)
 	return EFComponent
 }
 
-let coreVersion = '0.16.4'
+let coreVersion = '0.16.5-alpha.1'
 
 if (process.env.NODE_ENV !== 'production') {
 	coreVersion = `${coreVersion}+debug`

src/ef-core.js

@@ -149,7 +149,7 @@ const resolveAST = (ctx, {node, nodeType, element, namespace, create}) => {
 			// Multi node mount point
 			else bindMountList({ctx, key: node.n, anchor})
 			// Append anchor
-			if (process.env.NODE_ENV !== 'production') DOM.append(element, DOM.document.createComment(`<MountPoint name="${node.n}"${node.t && ' type="list"' || ''}>`))
+			if (process.env.NODE_ENV !== 'production') DOM.append(element, DOM.document.createComment(`<MountPoint${node.t && ' type="list" ' || ' '}name="${node.n}">`))
 			DOM.append(element, anchor)
 			if (process.env.NODE_ENV !== 'production') DOM.append(element, DOM.document.createComment('</MountPoint>'))
 			break

src/lib/creator.js

@@ -3,6 +3,7 @@ import {queue, inform, exec} from './render-queue.js'
 import {resolvePath} from './resolver.js'
 import ARR from './utils/array-helper.js'
 import {DOM, EFFragment} from './utils/dom-helper.js'
+import dbg from './utils/debug.js'
 import getEvent from './utils/event-helper.js'
 import {getNamespace} from './utils/namespaces.js'
 import {hasColon, splitByColon} from './utils/string-ops.js'
@@ -336,8 +337,13 @@ const addEvent = (ctx, {element, trigger, custom}) => {
 	const _handler = regTmpl(ctx, {val: v, ctx, handler: rawHandler})
 
 	const callEventHandler = (event) => {
-		if (ctx.methods[m]) ctx.methods[m]({e: event, event, value: _handler(), state: ctx.state})
-		else ctx.state.$emit(m)
+		const value = _handler()
+		if (ctx.methods[m]) ctx.methods[m]({e: event, event, value, state: ctx.state})
+		else {
+			if (process.env.NODE_ENV !== 'production') dbg.warn(`Event handler '${m}' not found! Bubbling up...`)
+			event.data = value
+			ctx.state.$emit(m, event)
+		}
 	}
 
 	applyEventListener({element, custom, handler: callEventHandler, trigger})

src/lib/element-creator.js

@@ -68,7 +68,12 @@ const appendNode = (node, target) => {
 	DOM.append(target, element, placeholder)
 }
 
-const handleMountPoint = (element, target) => {
+const insertBeforeNode = (node, ref) => {
+	const {element, placeholder} = node.$ctx.nodeInfo
+	DOM.before(ref, element, placeholder)
+}
+
+const handleMountPoint = (element, target, ref) => {
 	if (element.nodeType !== 3) return
 
 	const mountPoint = element[EFMountPoint]
@@ -78,9 +83,16 @@ const handleMountPoint = (element, target) => {
 	if (!node) return
 
 	inform()
-	if (ARR.isArray(node)) {
-		for (let i of node) appendNode(i, target)
-	} else appendNode(node, target)
+	if (ref) {
+		if (ARR.isArray(node)) {
+			for (let i of node) insertBeforeNode(i, ref)
+		} else insertBeforeNode(node, ref)
+	} else {
+		// eslint-disable-next-line no-lonely-if
+		if (ARR.isArray(node)) {
+			for (let i of node) appendNode(i, target)
+		} else appendNode(node, target)
+	}
 	exec()
 }
 
@@ -90,8 +102,9 @@ const appendToTarget = (target, nodes) => {
 		if (DOM.isNodeInstance(i)) {
 			target.appendChild(i)
 			handleMountPoint(i, target)
-		} else if (isInstance(i, EFFragment)) i.appendTo(target)
-		else if (i instanceof shared.EFBaseComponent) {
+		} else if (isInstance(i, EFFragment)) {
+			i.appendTo(target)
+		} else if (i instanceof shared.EFBaseComponent) {
 			i.$mount({target})
 		}
 	}
@@ -104,9 +117,10 @@ const addBeforeTarget = (target, nodes) => {
 	for (let i of nodes) {
 		if (DOM.isNodeInstance(i)) {
 			parentNode.insertBefore(i, target)
-			handleMountPoint(i, parentNode)
-		} else if (isInstance(i, EFFragment)) i.addBefore(target)
-		else if (i instanceof shared.EFBaseComponent) {
+			handleMountPoint(i, parentNode, target)
+		} else if (isInstance(i, EFFragment)) {
+			i.addBefore(target)
+		} else if (i instanceof shared.EFBaseComponent) {
 			i.$mount({target, option: mountOptions.BEFORE})
 		}
 	}
@@ -118,23 +132,28 @@ DOM.isNodeInstance = (node) => {
 	return !!(node && node.nodeType)
 }
 
-DOM.before = (node, ...nodes) => {
-	const parent = node.parentNode
+DOM.before = (anchorNode, ...nodes) => {
+	const parentNode = anchorNode.parentNode
 	const firstNode = nodes[0]
-	// eslint-disable-next-line multiline-ternary, no-ternary
-	if (nodes.length === 1 && DOM.isNodeInstance(firstNode) && (firstNode.nodeType === 3 ? !firstNode[EFMountPoint] : true)) {
-		parent.insertBefore(nodes[0], node)
-	} else if (parent.nodeType === 11) {
-		addBeforeTarget(node, nodes)
+	if (
+		nodes.length === 1 &&
+		DOM.isNodeInstance(firstNode) &&
+		// When the node is a text node, check if it's not a mount point anchor
+		// eslint-disable-next-line multiline-ternary, no-ternary
+		(firstNode.nodeType === 3 ? !firstNode[EFMountPoint] : true)
+	) {
+		parentNode.insertBefore(nodes[0], anchorNode)
+	} else if (parentNode.nodeType === 11) {
+		addBeforeTarget(anchorNode, nodes)
 	} else {
 		useFragment((tempFragment, recycleFragment) => {
 			inform()
 			appendToTarget(tempFragment, nodes)
 			useAnchor((tempAnchor, recycleAnchor) => {
-				parent.insertBefore(tempAnchor, node)
+				parentNode.insertBefore(tempAnchor, anchorNode)
 				queueDom(() => {
-					parent.insertBefore(tempFragment, tempAnchor)
-					parent.removeChild(tempAnchor)
+					parentNode.insertBefore(tempFragment, tempAnchor)
+					parentNode.removeChild(tempAnchor)
 					recycleAnchor()
 					recycleFragment()
 				})
@@ -144,26 +163,26 @@ DOM.before = (node, ...nodes) => {
 	}
 }
 
-DOM.after = (node, ...nodes) => {
-	if (node.nextSibling) return DOM.before(node.nextSibling, ...nodes)
-	return DOM.append(node.parentNode, ...nodes)
+DOM.after = (anchorNode, ...nodes) => {
+	if (anchorNode.nextSibling) return DOM.before(anchorNode.nextSibling, ...nodes)
+	return DOM.append(anchorNode.parentNode, ...nodes)
 }
 
-DOM.append = (node, ...nodes) => {
-	if (DOM.isNodeInstance(node)) {
+DOM.append = (parentNode, ...nodes) => {
+	if (DOM.isNodeInstance(parentNode)) {
 		if (nodes.length === 1 && DOM.isNodeInstance(nodes[0])) {
-			node.appendChild(nodes[0])
-			handleMountPoint(nodes[0], node)
-		} else if (node.nodeType === 11) appendToTarget(node, nodes)
-		else if (node.nodeType === 1 || node.nodeType === 9) {
+			parentNode.appendChild(nodes[0])
+			handleMountPoint(nodes[0], parentNode)
+		} else if (parentNode.nodeType === 11) appendToTarget(parentNode, nodes)
+		else if (parentNode.nodeType === 1 || parentNode.nodeType === 9) {
 			useFragment((tempFragment, recycleFragment) => {
 				inform()
 				appendToTarget(tempFragment, nodes)
 				useAnchor((tempAnchor, recycleAnchor) => {
-					node.appendChild(tempAnchor)
+					parentNode.appendChild(tempAnchor)
 					queueDom(() => {
-						node.insertBefore(tempFragment, tempAnchor)
-						node.removeChild(tempAnchor)
+						parentNode.insertBefore(tempFragment, tempAnchor)
+						parentNode.removeChild(tempAnchor)
 						recycleAnchor()
 						recycleFragment()
 					})
@@ -176,24 +195,24 @@ DOM.append = (node, ...nodes) => {
 	}
 
 	// Handle EFComponent
-	if (node instanceof shared.EFBaseComponent) {
-		if (!(ARR.isArray(node.children))) {
-			if (process.env.NODE_ENV !== 'production') dbg.warn(node, 'has no `children` list mount point! Child nodes are all ignored!')
+	if (parentNode instanceof shared.EFBaseComponent) {
+		if (!(ARR.isArray(parentNode.children))) {
+			if (process.env.NODE_ENV !== 'production') dbg.warn(parentNode, 'has no `children` list mount point! Child nodes are all ignored!')
 			return
 		}
 
 		inform()
 		for (let i of nodes) {
 			i = shared.toEFComponent(i)
-			node.children.push(i)
+			parentNode.children.push(i)
 		}
 		exec()
 
 		return
 	}
 
 	// Handle fragment
-	if (isInstance(node, EFFragment)) return node.append(...nodes)
+	if (isInstance(parentNode, EFFragment)) return parentNode.append(...nodes)
 }
 
 DOM.remove = (node) => {

src/lib/utils/dom-helper.js

@@ -9,7 +9,7 @@ import {DOM} from './dom-helper.js'
  */
 const getEvent = (name, options = {}) => {
 	const event = DOM.document.createEvent && DOM.document.createEvent('CustomEvent') || new Event(name, options)
-	if (event.initEvent) event.initEvent(name, options.bubbles, options.cancelable)
+	if (event.initEvent) event.initEvent(name, options.bubbles, options.cancelable, options)
 	return event
 }
 

src/lib/utils/event-helper.js

@@ -1,6 +1,11 @@
 // Enough for ef's usage, so no need for a full polyfill
-const legacyAssign = (ee, er) => {
-	for (let i in er) ee[i] = er[i]
+const legacyAssign = (ee, ...ers) => {
+	for (let er of ers) {
+		for (let i in er) {
+			ee[i] = er[i]
+		}
+	}
+
 	return ee
 }
 

src/lib/utils/polyfills.js

@@ -15,8 +15,9 @@ import {assign} from './polyfills.js'
 const scoped = (component, initScope) => {
 	const _scope = assign({}, initScope)
 	return class Scoped extends component {
-		constructor(state, scope = {}) {
-			super(state, assign(_scope, scope))
+		constructor(state, scope) {
+			if (scope) super(state, assign({}, _scope, scope))
+			else super(state, _scope)
 		}
 	}
 }