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

package/dist/vue-plugin.js

@@ -11,7 +11,7 @@ export function usePinegrow() {
 				// console.log('Cache initialized by Pinegrow Vue Plugin!')
 				const elCache = reactive(new Map())
 
-				const enRichWithComponentName = (elCacheObj, localFile) => {
+				const enrichWithComponentName = (elCacheObj, localFile) => {
 					return {
 						name: elCacheObj.instance.type.__name || '',
 						localFile,
@@ -21,28 +21,25 @@ export function usePinegrow() {
 
 				const pgIdToElComputed = computed(() => {
 					const pgIds = {}
-					for (let [el, elCacheNodeMap] of elCache.entries()) {
+					for (let [el, elCacheNodes] of elCache.entries()) {
 						if (el.isConnected) {
-							for (let [instanceUid, elCacheObj] of elCacheNodeMap.entries()) {
+							elCacheNodes.forEach(elCacheObj => {
 								if (
 									elCacheObj.instance.isMounted &&
 									!elCacheObj.instance.isUnmounted &&
-									elCacheObj.pgIds &&
-									elCacheObj.pgIds.length
-									// && (!elCacheObj.rootEl || elCacheObj.isRootFragment)
+									elCacheObj.pgId &&
+									(!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])
-										}
-									})
+									if (!pgIds[elCacheObj.pgId]) {
+										pgIds[elCacheObj.pgId] = []
+									}
+									if (elCacheObj.key === undefined || elCacheObj.key === null) {
+										pgIds[elCacheObj.pgId].push(elCacheObj)
+									} else {
+										pgIds[elCacheObj.pgId].push([elCacheObj.key, elCacheObj])
+									}
 								}
-							}
+							})
 						}
 					}
 					return pgIds
@@ -50,9 +47,9 @@ export function usePinegrow() {
 
 				const localComponentToElComputed = computed(() => {
 					const localComponents = {}
-					for (let [el, elCacheNodeMap] of elCache.entries()) {
+					for (let [el, elCacheNodes] of elCache.entries()) {
 						if (el.isConnected) {
-							for (let [instanceUid, elCacheObj] of elCacheNodeMap.entries()) {
+							elCacheNodes.forEach(elCacheObj => {
 								if (
 									elCacheObj.instance.isMounted &&
 									!elCacheObj.instance.isUnmounted &&
@@ -63,10 +60,10 @@ export function usePinegrow() {
 										localComponents[elCacheObj.localFile] = []
 									}
 									localComponents[elCacheObj.localFile].push(
-										enRichWithComponentName(elCacheObj, elCacheObj.localFile)
+										enrichWithComponentName(elCacheObj, elCacheObj.localFile)
 									)
 								}
-							}
+							})
 						}
 					}
 					return localComponents
@@ -104,19 +101,23 @@ export function usePinegrow() {
 		if (!window.pinegrow) initCache()
 
 		let el = vnode.el
+		if (!el) return
+
 		const instance = vnode.component || vnode.ctx || el.__vueParentComponent
 
 		try {
 			if ((key !== null && key !== undefined) || (vnode.key !== null && vnode.key !== undefined)) {
 				key = vnode.key || key
 			}
+
 			localFile = localFile || vnode.type.__file
 
 			let isRootFragment = false
 			let isFragment = el.nodeType !== 1
 			let firstEl,
 				lastEl,
-				isIsland = false
+				isIsland = false,
+				childVNodes = []
 
 			// May be an iles Island that wraps components with client directives
 			if (localFile) {
@@ -131,6 +132,16 @@ export function usePinegrow() {
 				}
 			}
 
+			const localFileFromInstance = instance.type.__file
+			if (
+				localFileFromInstance &&
+				localFileFromInstance.includes('node_modules/iles') &&
+				localFileFromInstance.includes('Island.vue')
+			) {
+				// Retain localFiles of iles island to apply to child elements
+				isIsland = true
+			}
+
 			// // Computed props anyway filters out unmounted ones, and we use the local components unmounted hooks to cleanup unmounted nodes. Using the unmounted hook seems to be out of sync when el is reused but instance is remounted.
 			// if (hook === 'unmounted') {
 			//   if (pinegrow.elCache.has(el)) {
@@ -183,7 +194,7 @@ export function usePinegrow() {
 					return list
 				}
 
-				let childVNodes = getRootVNodesFromComponentInstance(instance)
+				childVNodes = getRootVNodesFromComponentInstance(instance)
 
 				if (!childVNodes.length) {
 					// For NuxtLayout, no childVNodes are returned, the subTree.children is in fact an object {ctx: {}, default: f}
@@ -202,23 +213,21 @@ export function usePinegrow() {
 					// 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
-					}
+					if (childVNodes.length) {
+						if (childVNodes.length === 1) {
+							firstEl = lastEl = childVNodes[0].el
+						} else {
+							firstEl = childVNodes[0].el
+							lastEl = childVNodes[childVNodes.length - 1].el
+						}
 
-					if (firstEl && firstEl.nodeType !== 1) {
-						firstEl = firstEl.nextElementSibling
-					}
-					if (lastEl && lastEl.nodeType !== 1) {
-						lastEl = lastEl.nextElementSibling
+						if (firstEl && firstEl.nodeType !== 1) {
+							firstEl = firstEl.nextElementSibling
+						}
+						if (lastEl && lastEl.nodeType !== 1) {
+							lastEl = lastEl.nextElementSibling
+						}
 					}
-
-					childVNodes.forEach(childVNode => {
-						pgUpdateElCache(hook, pgId, isRootFragment ? el : rootEl, key)(childVNode)
-					})
 				}
 			}
 
@@ -231,31 +240,38 @@ export function usePinegrow() {
 				isFragment,
 				firstEl,
 				lastEl,
-				pgIds: pgId ? [pgId] : [],
+				pgId,
 				key,
 				localFile,
 				isIsland,
 			}
 
-			let prevElCacheNodeMap = pinegrow.elCache.get(el)
+			let prevElCacheNodes = pinegrow.elCache.get(el)
 
-			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 })
+			if (prevElCacheNodes) {
+				let index = prevElCacheNodes.findIndex(elCacheObj => elCacheObj.instance.uid === instance.uid)
+
+				if (index > -1) {
+					const prevElCacheObj = prevElCacheNodes[index]
+					elCacheObj.localFile = elCacheObj.localFile || prevElCacheObj.localFile
+					elCacheObj.pgId = elCacheObj.pgId || prevElCacheObj.pgId
+					prevElCacheNodes[index] = elCacheObj
 				} else {
-					prevElCacheNodeMap.set(instance.uid, elCacheObj)
+					prevElCacheNodes.push(elCacheObj)
 				}
+				pinegrow.elCache.set(el, prevElCacheNodes)
+			} else {
+				pinegrow.elCache.set(el, [elCacheObj])
+				childVNodes.forEach(childVNode => {
+					pgUpdateElCache(hook, pgId, isRootFragment ? el : rootEl, key)(childVNode)
+				})
 			}
 
 			if (pinegrow.elUpdateHanderFn) {
 				pinegrow.elUpdateHanderFn(el)
 			}
 		} catch (err) {
+			console.log(err)
 			if (pinegrow.elCacheErrHandlerFn) {
 				pinegrow.elCacheErrHandlerFn(vnode, hook, rootEl, pgId, key, el, instance, err.message)
 			}
@@ -283,18 +299,19 @@ export function usePinegrow() {
 		//     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)
+		for (let [el, elCacheNodes] of pinegrow.elCache.entries()) {
+			// if (!el.isConnected) {
+			// 	pinegrow.elCache.delete(el)
+			// 	continue
+			// }
+			const cleanedUpElCacheNodes = elCacheNodes.filter(
+				elCacheObj => !elCacheObj.instance.isUnmounted // || elCacheObj.localFile
+			)
+			if (cleanedUpElCacheNodes.length) {
+				if (cleanedUpElCacheNodes.length !== elCacheNodes.length) {
+					pinegrow.elCache.set(el, cleanedUpElCacheNodes)
 				}
-			}
-			if (!elCacheNodeMap.size) {
+			} else {
 				pinegrow.elCache.delete(el)
 			}
 		}

package/package.json

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