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

package/dist/vue-plugin.js

@@ -11,50 +11,33 @@ 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, elCacheNodes] of elCache.entries()) {
+						if (el.isConnected) {
+							elCacheNodes.forEach(elCacheObj => {
+								if (
+									elCacheObj.instance.isMounted &&
+									!elCacheObj.instance.isUnmounted &&
+									elCacheObj.pgId &&
+									(!elCacheObj.rootEl || elCacheObj.isRootFragment)
+								) {
+									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])
+									}
 								}
 							})
 						}
@@ -64,17 +47,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] = []
-							}
-							localComponents[value.localFile].push(enRichWithComponentName(value))
+					for (let [el, elCacheNodes] of elCache.entries()) {
+						if (el.isConnected) {
+							elCacheNodes.forEach(elCacheObj => {
+								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)
+									)
+								}
+							})
 						}
 					}
 					return localComponents
@@ -96,7 +85,7 @@ export function usePinegrow() {
 					// // Uncomment these two to test locally
 					// elCacheErrHandlerFn,
 					// elUpdateHanderFn,
-					rootFragmentToPgIdComputed,
+					// rootFragmentToPgIdComputed,
 					pgIdToElComputed,
 					localComponentToElComputed,
 					appTree,
@@ -112,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 = key || vnode.key
+				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) {
@@ -139,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)) {
@@ -152,76 +155,65 @@ 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
-				}
-				if (localFile) {
-					pinegrow.elCache.get(el).localFile = localFile
+			// Text/comment node
+			if (isFragment) {
+				if (!rootEl) {
+					// root Fragment
+					isRootFragment = true
 				}
-			} 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 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 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 getFragmentRootVNodes(vnode) {
+					if (!vnode.children) return []
+					// children is v-if when the vnode has a condition
+					if (!Array.isArray(vnode.children)) return []
 
-						const list = []
+					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)
-							}
+					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)
 						}
-
-						return list
 					}
 
-					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
+				}
+
+				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 (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) {
+					// 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) {
 						if (childVNodes.length === 1) {
 							firstEl = lastEl = childVNodes[0].el
 						} else {
@@ -235,26 +227,43 @@ export function usePinegrow() {
 						if (lastEl && lastEl.nodeType !== 1) {
 							lastEl = lastEl.nextElementSibling
 						}
-
-						childVNodes.forEach(childVNode => {
-							pgUpdateElCache(hook, pgId, isRootFragment ? el : rootEl, key)(childVNode)
-						})
 					}
 				}
+			}
 
-				pinegrow.elCache.set(el, {
-					el,
-					isRootFragment,
-					rootEl,
-					vnode,
-					instance,
-					isFragment,
-					firstEl,
-					lastEl,
-					pgIds: pgId ? [pgId] : [],
-					key,
-					localFile,
-					isIsland,
+			let elCacheObj = {
+				el,
+				isRootFragment,
+				rootEl,
+				vnode,
+				instance,
+				isFragment,
+				firstEl,
+				lastEl,
+				pgId,
+				key,
+				localFile,
+				isIsland,
+			}
+
+			let prevElCacheNodes = pinegrow.elCache.get(el)
+
+			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 {
+					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)
 				})
 			}
 
@@ -262,6 +271,7 @@ export function usePinegrow() {
 				pinegrow.elUpdateHanderFn(el)
 			}
 		} catch (err) {
+			console.log(err)
 			if (pinegrow.elCacheErrHandlerFn) {
 				pinegrow.elCacheErrHandlerFn(vnode, hook, rootEl, pgId, key, el, instance, err.message)
 			}
@@ -289,10 +299,20 @@ 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, 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)
+				}
+			} else {
+				pinegrow.elCache.delete(el)
 			}
 		}
 	}
@@ -305,7 +325,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.57",
+	"version": "3.0.0-beta.59",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [