@pinegrow/vite-plugin 3.0.0-beta.32 → 3.0.0-beta.34

package/dist/vue-plugin.js

@@ -33,7 +33,11 @@ export function usePinegrow() {
 							if (!pgIds[value.pgId]) {
 								pgIds[value.pgId] = []
 							}
-							pgIds[value.pgId].push(value)
+							if (value.key === undefined || value.key === null) {
+								pgIds[value.pgId].push(value)
+							} else {
+								pgIds[value.pgId].push([value.key, value])
+							}
 						}
 					}
 					return pgIds
@@ -57,12 +61,26 @@ export function usePinegrow() {
 					return localComponents
 				})
 
+				const appTree = computed(() => {
+					const appTreeNodes = Object.values(localComponentToElComputed.value).reduce(
+						(acc, localComponent) => [...acc, ...localComponent],
+						[]
+					)
+					const appTreeNodesSorted = appTreeNodes.sort((a, b) =>
+						a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+					)
+					return appTreeNodesSorted
+				})
+
 				winObj.pinegrow = {
 					elCache,
-
+					// // Uncomment these two to test locally
+					// elCacheErrHandlerFn,
+					// elUpdateHanderFn,
 					rootFragmentToPgIdComputed,
 					pgIdToElComputed,
 					localComponentToElComputed,
+					appTree,
 				}
 			}
 		}
@@ -74,36 +92,39 @@ export function usePinegrow() {
 		if (window?.process?.client && process?.client !== true) return
 		if (!window.pinegrow) initCache()
 
-		const el = vnode.el
+		let el = vnode.el
 		const instance = vnode.component || vnode.ctx || el.__vueParentComponent
 
 		try {
-			key = key || vnode.key
+			if ((key !== null && key !== undefined) || (vnode.key !== null && vnode.key !== undefined)) {
+				key = key || vnode.key
+			}
 			localFile =
 				localFile || (vnode.type.__file && !vnode.type.__file.includes('node_modules') && vnode.type.__file)
 
 			let isRootFragment = false
-			const isFragment = el.nodeType !== 1
+			let isFragment = el.nodeType !== 1
 			let firstEl, lastEl
 
-			if (hook === 'unmounted') {
-				if (pinegrow.elCache.has(el)) {
-					pinegrow.elCache.delete(el)
-				}
-				for (let [key, value] of pinegrow.elCache.entries()) {
-					if (value.rootEl === rootEl) {
-						pinegrow.elCache.delete(key)
-					}
-				}
-				return
-			}
+			// // 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)) {
+			//     pinegrow.elCache.delete(el)
+			//   }
+			//   for (let [key, value] of pinegrow.elCache.entries()) {
+			//     if (value.rootEl === rootEl) {
+			//       pinegrow.elCache.delete(key)
+			//     }
+			//   }
+			//   return
+			// }
 
 			if (pinegrow.elCache.has(el)) {
 				// pgId could have been updated
 				if (pgId) {
 					pinegrow.elCache.get(el).pgId = pgId
 				}
-				if (key) {
+				if (key !== null && key !== undefined) {
 					pinegrow.elCache.get(el).key = key
 				}
 				if (localFile) {
@@ -116,11 +137,54 @@ export function usePinegrow() {
 						// root Fragment
 						isRootFragment = true
 					}
-					const childVNodes = Array.isArray(instance.subTree.children) ? instance.subTree.children : []
+
+					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 []
+
+						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)
+							}
+						}
+
+						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)
+							}
+						}
+					}
 
 					if (childVNodes.length) {
 						if (childVNodes.length === 1) {
-							// Invalid scenario, if length is just one, then it won't be a fragment at all
 							firstEl = lastEl = childVNodes[0].el
 						} else {
 							firstEl = childVNodes[0].el
@@ -173,6 +237,20 @@ export function usePinegrow() {
 		}
 	}
 
+	const cleanupCache = () => {
+		// for (let [key, value] of pinegrow.elCache.entries()) {
+		//   if (value.isFragment && !value.firstEl) {
+		//     console.log(value)
+		//   }
+		// }
+		for (let [key, value] of pinegrow.elCache.entries()) {
+			if (value.instance.isUnmounted) {
+				pinegrow.elCache.delete(key)
+				// console.log(value)
+			}
+		}
+	}
+
 	// Local Component
 	const rootVNode = ref(null)
 
@@ -192,6 +270,7 @@ export function usePinegrow() {
 		if (rootVNode.value) {
 			pgUpdateElCache('unmounted')(rootVNode.value)
 		}
+		cleanupCache()
 	}
 
 	onBeforeMount(() => initCache())

package/package.json

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