@pinegrow/vite-plugin 3.0.0-beta.56 → 3.0.0-beta.58

package/dist/vue-plugin.js

@@ -11,52 +11,38 @@ export function usePinegrow() {
 				// console.log('Cache initialized by Pinegrow Vue Plugin!')
 				const elCache = reactive(new Map())
 
-				// const enRichWithComponentName = elCacheObj => {
-				//   return {
-				//     name:
-				//       getComponentName(elCacheObj.instance.type, elCacheObj.localFile) +
-				//       `${elCacheObj.key !== undefined && elCacheObj.key !== null ? ` (${elCacheObj.key})` : ''}`,
-				//     ...elCacheObj,
-				//   }
-				// }
-
-				const enRichWithComponentName = elCacheObj => {
+				const enRichWithComponentName = (elCacheObj, localFile) => {
 					return {
 						name: elCacheObj.instance.type.__name || '',
+						localFile,
 						...elCacheObj,
 					}
 				}
 
-				const rootFragmentToPgIdComputed = computed(() => {
-					const rootEls = new Map()
-					for (let [key, value] of elCache.entries()) {
-						if (value.instance.isMounted && !value.instance.isUnmounted && value.isRootFragment) {
-							rootEls.set(key, value)
-						}
-					}
-					return rootEls
-				})
-
 				const pgIdToElComputed = computed(() => {
 					const pgIds = {}
-					for (let [key, value] of elCache.entries()) {
-						if (
-							value.instance.isMounted &&
-							!value.instance.isUnmounted &&
-							value.pgIds &&
-							value.pgIds.length &&
-							(!value.rootEl || value.isRootFragment)
-						) {
-							value.pgIds.forEach(pgId => {
-								if (!pgIds[pgId]) {
-									pgIds[pgId] = []
-								}
-								if (value.key === undefined || value.key === null) {
-									pgIds[pgId].push(value)
-								} else {
-									pgIds[pgId].push([value.key, value])
+					for (let [el, elCacheNodeMap] of elCache.entries()) {
+						if (el.isConnected) {
+							for (let [instanceUid, elCacheObj] of elCacheNodeMap.entries()) {
+								if (
+									elCacheObj.instance.isMounted &&
+									!elCacheObj.instance.isUnmounted &&
+									elCacheObj.pgIds &&
+									elCacheObj.pgIds.length
+									// && (!elCacheObj.rootEl || elCacheObj.isRootFragment)
+								) {
+									elCacheObj.pgIds.forEach(pgId => {
+										if (!pgIds[pgId]) {
+											pgIds[pgId] = []
+										}
+										if (elCacheObj.key === undefined || elCacheObj.key === null) {
+											pgIds[pgId].push(elCacheObj)
+										} else {
+											pgIds[pgId].push([elCacheObj.key, elCacheObj])
+										}
+									})
 								}
-							})
+							}
 						}
 					}
 					return pgIds
@@ -64,17 +50,23 @@ export function usePinegrow() {
 
 				const localComponentToElComputed = computed(() => {
 					const localComponents = {}
-					for (let [key, value] of elCache.entries()) {
-						if (
-							value.instance.isMounted &&
-							!value.instance.isUnmounted &&
-							value.localFile &&
-							(!value.rootEl || value.isRootFragment)
-						) {
-							if (!localComponents[value.localFile]) {
-								localComponents[value.localFile] = []
+					for (let [el, elCacheNodeMap] of elCache.entries()) {
+						if (el.isConnected) {
+							for (let [instanceUid, elCacheObj] of elCacheNodeMap.entries()) {
+								if (
+									elCacheObj.instance.isMounted &&
+									!elCacheObj.instance.isUnmounted &&
+									elCacheObj.localFile
+									// && (!elCacheObj.rootEl || elCacheObj.isRootFragment)
+								) {
+									if (!localComponents[elCacheObj.localFile]) {
+										localComponents[elCacheObj.localFile] = []
+									}
+									localComponents[elCacheObj.localFile].push(
+										enRichWithComponentName(elCacheObj, elCacheObj.localFile)
+									)
+								}
 							}
-							localComponents[value.localFile].push(enRichWithComponentName(value))
 						}
 					}
 					return localComponents
@@ -96,7 +88,7 @@ export function usePinegrow() {
 					// // Uncomment these two to test locally
 					// elCacheErrHandlerFn,
 					// elUpdateHanderFn,
-					rootFragmentToPgIdComputed,
+					// rootFragmentToPgIdComputed,
 					pgIdToElComputed,
 					localComponentToElComputed,
 					appTree,
@@ -116,7 +108,7 @@ export function usePinegrow() {
 
 		try {
 			if ((key !== null && key !== undefined) || (vnode.key !== null && vnode.key !== undefined)) {
-				key = key || vnode.key
+				key = vnode.key || key
 			}
 			localFile = localFile || vnode.type.__file
 
@@ -152,108 +144,112 @@ export function usePinegrow() {
 			//   return
 			// }
 
-			const prevElCache = pinegrow.elCache.get(el)
-			if (prevElCache) {
-				if (pgId && !prevElCache.pgIds.includes(pgId)) {
-					prevElCache.pgIds.push(pgId)
-				}
-				if (key !== null && key !== undefined) {
-					pinegrow.elCache.get(el).key = key
+			// Text/comment node
+			if (isFragment) {
+				if (!rootEl) {
+					// root Fragment
+					isRootFragment = true
 				}
-				if (localFile) {
-					pinegrow.elCache.get(el).localFile = localFile
+
+				function isFragmentEl(instance) {
+					// return appRecord.options.types.Fragment === instance.subTree?.type
+					return instance.subTree.el.nodeType !== 1
 				}
-			} else {
-				// Text/comment node
-				if (isFragment) {
-					if (!rootEl) {
-						// root Fragment
-						isRootFragment = true
-					}
 
-					function isFragmentEl(instance) {
-						// return appRecord.options.types.Fragment === instance.subTree?.type
-						return instance.subTree.el.nodeType !== 1
+				function getRootVNodesFromComponentInstance(instance) {
+					if (isFragmentEl(instance)) {
+						return getFragmentRootVNodes(instance.subTree)
 					}
+					if (!instance.subTree) return []
+					return [instance.subTree]
+				}
+
+				function getFragmentRootVNodes(vnode) {
+					if (!vnode.children) return []
+					// children is v-if when the vnode has a condition
+					if (!Array.isArray(vnode.children)) return []
 
-					function getRootVNodesFromComponentInstance(instance) {
-						if (isFragmentEl(instance)) {
-							return getFragmentRootVNodes(instance.subTree)
+					const list = []
+
+					for (let i = 0, l = vnode.children.length; i < l; i++) {
+						const childVnode = vnode.children[i]
+						if (childVnode.component) {
+							list.push(...getRootVNodesFromComponentInstance(childVnode.component))
+						} else if (childVnode) {
+							list.push(childVnode)
 						}
-						if (!instance.subTree) return []
-						return [instance.subTree]
 					}
 
-					function getFragmentRootVNodes(vnode) {
-						if (!vnode.children) return []
-
-						const list = []
+					return list
+				}
 
-						for (let i = 0, l = vnode.children.length; i < l; i++) {
-							const childVnode = vnode.children[i]
-							if (childVnode.component) {
-								list.push(...getRootVNodesFromComponentInstance(childVnode.component))
-							} else if (childVnode) {
-								list.push(childVnode)
-							}
+				let childVNodes = getRootVNodesFromComponentInstance(instance)
+
+				if (!childVNodes.length) {
+					// For NuxtLayout, no childVNodes are returned, the subTree.children is in fact an object {ctx: {}, default: f}
+					if (el.nextElementSibling) {
+						const childEl = el.nextElementSibling
+						firstEl = lastEl = childEl
+						const childInstance = childEl.$ || childEl.__vueParentComponent
+						const childVNode = childInstance?.vnode // or subTree?
+						if (childVNode) {
+							childVNodes.push(childVNode)
 						}
+					}
+				}
 
-						return list
+				if (childVNodes.length) {
+					// Filter out recursive vnodes text1 -> div, text1 (happens when text1 is the closest to a fragment with div & slot)
+					childVNodes = childVNodes.filter(childVNode => childVNode.el !== el)
+
+					if (childVNodes.length === 1) {
+						firstEl = lastEl = childVNodes[0].el
+					} else {
+						firstEl = childVNodes[0].el
+						lastEl = childVNodes[childVNodes.length - 1].el
 					}
 
-					let childVNodes = getRootVNodesFromComponentInstance(instance)
-
-					if (!childVNodes.length) {
-						// For NuxtLayout, no childVNodes are returned, the subTree.children is in fact an object {ctx: {}, default: f}
-						if (el.nextElementSibling) {
-							const childEl = el.nextElementSibling
-							firstEl = lastEl = childEl
-							const childInstance = childEl.$ || childEl.__vueParentComponent
-							const childVNode = childInstance?.vnode // or subTree?
-							if (childVNode) {
-								childVNodes.push(childVNode)
-							}
-						}
+					if (firstEl && firstEl.nodeType !== 1) {
+						firstEl = firstEl.nextElementSibling
+					}
+					if (lastEl && lastEl.nodeType !== 1) {
+						lastEl = lastEl.nextElementSibling
 					}
 
-					if (childVNodes.length) {
-						// Filter out recursive vnodes text1 -> div, text1 (happens when text1 is the closest to a fragment with div & slot)
-						childVNodes = childVNodes.filter(childVNode => childVNode.el !== el)
+					childVNodes.forEach(childVNode => {
+						pgUpdateElCache(hook, pgId, isRootFragment ? el : rootEl, key)(childVNode)
+					})
+				}
+			}
 
-						if (childVNodes.length === 1) {
-							firstEl = lastEl = childVNodes[0].el
-						} else {
-							firstEl = childVNodes[0].el
-							lastEl = childVNodes[childVNodes.length - 1].el
-						}
+			let elCacheObj = {
+				el,
+				isRootFragment,
+				rootEl,
+				vnode,
+				instance,
+				isFragment,
+				firstEl,
+				lastEl,
+				pgIds: pgId ? [pgId] : [],
+				key,
+				localFile,
+				isIsland,
+			}
 
-						if (firstEl && firstEl.nodeType !== 1) {
-							firstEl = firstEl.nextElementSibling
-						}
-						if (lastEl && lastEl.nodeType !== 1) {
-							lastEl = lastEl.nextElementSibling
-						}
+			let prevElCacheNodeMap = pinegrow.elCache.get(el)
 
-						childVNodes.forEach(childVNode => {
-							pgUpdateElCache(hook, pgId, isRootFragment ? el : rootEl, key)(childVNode)
-						})
-					}
+			if (!prevElCacheNodeMap) {
+				const newElCacheNodeMap = new Map()
+				pinegrow.elCache.set(el, newElCacheNodeMap)
+				newElCacheNodeMap.set(instance.uid, elCacheObj)
+			} else {
+				const prevElCacheObj = prevElCacheNodeMap.get(instance.uid)
+				if (prevElCacheObj && prevElCacheObj.localFile) {
+					prevElCacheNodeMap.set(instance.uid, { ...elCacheObj, localFile: prevElCacheObj.localFile })
+				} else {
+					prevElCacheNodeMap.set(instance.uid, elCacheObj)
 				}
-
-				pinegrow.elCache.set(el, {
-					el,
-					isRootFragment,
-					rootEl,
-					vnode,
-					instance,
-					isFragment,
-					firstEl,
-					lastEl,
-					pgIds: pgId ? [pgId] : [],
-					key,
-					localFile,
-					isIsland,
-				})
 			}
 
 			if (pinegrow.elUpdateHanderFn) {
@@ -277,7 +273,7 @@ export function usePinegrow() {
 
 	const elCacheErrHandlerFn = () => {
 		if (message) {
-			console.log(message)
+			// console.log(message)
 		}
 	}
 
@@ -287,10 +283,19 @@ export function usePinegrow() {
 		//     console.log(value)
 		//   }
 		// }
-		for (let [key, value] of pinegrow.elCache.entries()) {
-			if (value.instance.isUnmounted) {
-				pinegrow.elCache.delete(key)
-				// console.log(value)
+		for (let [el, elCacheNodeMap] of pinegrow.elCache.entries()) {
+			if (!el.isConnected) {
+				pinegrow.elCache.delete(el)
+				continue
+			}
+			for (let [instance, elCacheObj] of elCacheNodeMap.entries()) {
+				if (elCacheObj.instance.isUnmounted) {
+					elCacheNodeMap.delete(instance)
+					// console.log(elCacheObj)
+				}
+			}
+			if (!elCacheNodeMap.size) {
+				pinegrow.elCache.delete(el)
 			}
 		}
 	}
@@ -303,7 +308,6 @@ export function usePinegrow() {
 		const vnode = instance?.vnode
 		const el = vnode?.el
 		const localFile = instance.type.__file && !instance.type.__file.includes('node_modules') && instance.type.__file
-
 		if (instance && vnode && el) {
 			rootVNode.value = vnode
 			pgUpdateElCache('mounted', null, null, null, localFile)(vnode)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.56",
+	"version": "3.0.0-beta.58",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [