@pinegrow/vite-plugin 3.0.0-beta.139 → 3.0.0-beta.140

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022-present, Pinegrow
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2022-present, Pinegrow
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,70 +1,70 @@
-<!-- [![@pinegrow/vite-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->
-
-# Pinegrow Vite Plugin
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-
-[Vite](https://vitejs.dev) plugin for [Pinegrow](https://pinegrow.com) ⚡️
-
-Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer).
-
--   [📖 &nbsp;Documentation](https://pinegrow.com/vue-designer)
-
-## Features
-
--   🎨&nbsp; Visually live-design your Vite-powered apps (Vue, Nuxt, Iles, Astro, etc)
--   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
--   ✨&nbsp; No lock-in, Pinegrow is an open-tool ❤️
-
-## Quick Setup
-
-1. Install: Add `@pinegrow/vite-plugin` to your project
-
-```bash
-# Using npm
-npm install --save-dev @pinegrow/vite-plugin
-
-# Using pnpm
-pnpm add --save-dev @pinegrow/vite-plugin
-```
-
-2. Configure: Add `liveDesigner()` to your Vite Plugins array `vite.config.{ts,js}`
-
-```js
-//vite.config.js (or) vite.config.ts
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { liveDesigner } from '@pinegrow/vite-plugin'
-
-export default defineConfig({
-	plugins: [
-		liveDesigner({
-			//...
-		}),
-		vue(),
-		//...
-	],
-	//...
-})
-```
-
-Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
-
-## License
-
-[MIT License](./LICENSE)
-
-Copyright (c) Pinegrow
-
-<!-- Badges -->
-
-[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/vite-plugin/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/@pinegrow/vite-plugin
-[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/@pinegrow/vite-plugin
-[license-src]: https://img.shields.io/npm/l/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/@pinegrow/vite-plugin
-
+<!-- [![@pinegrow/vite-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->
+
+# Pinegrow Vite Plugin
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+
+[Vite](https://vitejs.dev) plugin for [Pinegrow](https://pinegrow.com) ⚡️
+
+Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer).
+
+-   [📖 &nbsp;Documentation](https://pinegrow.com/vue-designer)
+
+## Features
+
+-   🎨&nbsp; Visually live-design your Vite-powered apps (Vue, Nuxt, Iles, Astro, etc)
+-   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
+-   ✨&nbsp; No lock-in, Pinegrow is an open-tool ❤️
+
+## Quick Setup
+
+1. Install: Add `@pinegrow/vite-plugin` to your project
+
+```bash
+# Using npm
+npm install --save-dev @pinegrow/vite-plugin
+
+# Using pnpm
+pnpm add --save-dev @pinegrow/vite-plugin
+```
+
+2. Configure: Add `liveDesigner()` to your Vite Plugins array `vite.config.{ts,js}`
+
+```js
+//vite.config.js (or) vite.config.ts
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { liveDesigner } from '@pinegrow/vite-plugin'
+
+export default defineConfig({
+	plugins: [
+		liveDesigner({
+			//...
+		}),
+		vue(),
+		//...
+	],
+	//...
+})
+```
+
+Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) Pinegrow
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/vite-plugin/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@pinegrow/vite-plugin
+[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@pinegrow/vite-plugin
+[license-src]: https://img.shields.io/npm/l/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@pinegrow/vite-plugin
+

package/dist/vue/index.js

@@ -1,298 +1,310 @@
-import { onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance, ref, reactive, computed, onUpdated } from 'vue'
-
-export function usePinegrow() {
-	const initCache = () => {
-		// conditional
-		const winObj = window
-
-		if (!(winObj?.process?.client && winObj.process.client !== true)) {
-			if (!winObj.pinegrow) {
-				// conditional
-				// console.log('Cache initialized by Pinegrow Vue Plugin!')
-				const elCache = reactive(new Map())
-
-				const enrichWithComponentName = (elCacheObj, localFile) => {
-					return {
-						name: elCacheObj.instance.type.__name || '',
-						localFile,
-						...elCacheObj,
-					}
-				}
-
-				winObj.pinegrow = {
-					elCache,
-					// // Uncomment these two to test locally
-					// elCacheErrHandlerFn,
-					// elUpdateHanderFn,
-					// rootFragmentToPgIdComputed,
-					// pgIdToElComputed,
-					// localComponentToElComputed,
-					// appTree,
-				}
-			}
-		}
-	}
-
-	// pgId & key can be optional
-	const pgUpdateElCache = (hook, pgId, rootEl, key, localFile) => async vnode => {
-		if (!vnode) return
-		if (window?.process?.client && process?.client !== true) return
-		if (!window.pinegrow) initCache()
-
-		let el = vnode.el
-
-		const instance = vnode.component || vnode.ctx || el.__vueParentComponent
-
-		if (!el || !instance) return
-
-		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,
-				childVNodes = []
-
-			// May be an iles Island that wraps components with client directives
-			if (localFile) {
-				if (localFile.includes('node_modules/iles') && localFile.includes('Island.vue')) {
-					// Retain localFiles of iles island to apply to child elements
-					isIsland = true
-				}
-
-				if (localFile.includes('node_modules')) {
-					// Ignore SFCs from node_modules
-					localFile = null
-				}
-			}
-
-			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
-
-				localFile = instance.props.component?.__file || instance.props.importFrom
-			}
-
-			// // 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
-			// }
-
-			// 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 []
-
-					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
-				}
-
-				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) {
-						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 (isIsland && !isRootFragment) {
-				return
-			}
-
-			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)
-				})
-			}
-
-			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)
-			}
-		}
-	}
-
-	const elUpdateHanderFn = el => {
-		// if (pinegrow.elCache.has(el)) {
-		// 	const { pgId } = pinegrow.elCache.get(el)
-		// 	if (pgId) {
-		// 		// console.log(`Reselect ${pgId}`)
-		// 	}
-		// }
-	}
-
-	const elCacheErrHandlerFn = () => {
-		if (message) {
-			// console.log(message)
-		}
-	}
-
-	const cleanupCache = () => {
-		// for (let [key, value] of pinegrow.elCache.entries()) {
-		//   if (value.isFragment && !value.firstEl) {
-		//     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)
-			}
-		}
-	}
-
-	// Local Component
-	const rootVNode = ref(null)
-
-	const mountLocalComponent = () => {
-		const instance = getCurrentInstance()
-		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)
-		}
-	}
-
-	const unmountLocalComponent = () => {
-		if (rootVNode.value) {
-			pgUpdateElCache('unmounted')(rootVNode.value)
-		}
-		cleanupCache()
-	}
-
-	onBeforeMount(() => initCache())
-	onMounted(() => {
-		mountLocalComponent()
-	})
-	onBeforeUnmount(() => unmountLocalComponent())
-	onUpdated(() => {
-		mountLocalComponent()
-	})
-
-	return { pgUpdateElCache }
-}
-
+import {
+	onBeforeMount,
+	onMounted,
+	onBeforeUnmount,
+	getCurrentInstance,
+	ref,
+	reactive,
+	onUpdated,
+	computed,
+	watch,
+} from 'vue'
+
+export function usePinegrow() {
+	const initCache = () => {
+		// conditional
+		const winObj = window
+
+		if (!(winObj?.process?.client && winObj.process.client !== true)) {
+			if (!winObj.pinegrow) {
+				// conditional
+				// console.log('Cache initialized by Pinegrow Vue Plugin!')
+				const elCache = reactive(new Map())
+
+				const enrichWithComponentName = (elCacheObj, localFile) => {
+					return {
+						name: elCacheObj.instance.type.__name || '',
+						localFile,
+						...elCacheObj,
+					}
+				}
+
+				winObj.pinegrow = {
+					elCache,
+					watchFromContext: watch,
+					computedFromContext: computed,
+					// // Uncomment these two to test locally
+					// elCacheErrHandlerFn,
+					// elUpdateHanderFn,
+					// rootFragmentToPgIdComputed,
+					// pgIdToElComputed,
+					// localComponentToElComputed,
+					// appTree,
+				}
+			}
+		}
+	}
+
+	// pgId & key can be optional
+	const pgUpdateElCache = (hook, pgId, rootEl, key, localFile) => async vnode => {
+		if (!vnode) return
+		if (window?.process?.client && process?.client !== true) return
+		if (!window.pinegrow) initCache()
+
+		let el = vnode.el
+
+		const instance = vnode.component || vnode.ctx || el.__vueParentComponent
+
+		if (!el || !instance) return
+
+		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,
+				childVNodes = []
+
+			// May be an iles Island that wraps components with client directives
+			if (localFile) {
+				if (localFile.includes('node_modules/iles') && localFile.includes('Island.vue')) {
+					// Retain localFiles of iles island to apply to child elements
+					isIsland = true
+				}
+
+				if (localFile.includes('node_modules')) {
+					// Ignore SFCs from node_modules
+					localFile = null
+				}
+			}
+
+			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
+
+				localFile = instance.props.component?.__file || instance.props.importFrom
+			}
+
+			// // 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
+			// }
+
+			// 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 []
+
+					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
+				}
+
+				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) {
+						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 (isIsland && !isRootFragment) {
+				return
+			}
+
+			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)
+				})
+			}
+
+			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)
+			}
+		}
+	}
+
+	const elUpdateHanderFn = el => {
+		// if (pinegrow.elCache.has(el)) {
+		// 	const { pgId } = pinegrow.elCache.get(el)
+		// 	if (pgId) {
+		// 		// console.log(`Reselect ${pgId}`)
+		// 	}
+		// }
+	}
+
+	const elCacheErrHandlerFn = () => {
+		if (message) {
+			// console.log(message)
+		}
+	}
+
+	const cleanupCache = () => {
+		// for (let [key, value] of pinegrow.elCache.entries()) {
+		//   if (value.isFragment && !value.firstEl) {
+		//     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)
+			}
+		}
+	}
+
+	// Local Component
+	const rootVNode = ref(null)
+
+	const mountLocalComponent = () => {
+		const instance = getCurrentInstance()
+		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)
+		}
+	}
+
+	const unmountLocalComponent = () => {
+		if (rootVNode.value) {
+			pgUpdateElCache('unmounted')(rootVNode.value)
+		}
+		cleanupCache()
+	}
+
+	onBeforeMount(() => initCache())
+	onMounted(() => {
+		mountLocalComponent()
+	})
+	onBeforeUnmount(() => unmountLocalComponent())
+	onUpdated(() => {
+		mountLocalComponent()
+	})
+
+	return { pgUpdateElCache }
+}
+

package/package.json

@@ -1,48 +1,48 @@
-{
-	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.139",
-	"description": "Pinegrow Vite Plugin",
-	"type": "module",
-	"files": [
-		"dist",
-		"./types.d.ts"
-	],
-	"main": "./dist/index.cjs",
-	"module": "./dist/index.cjs",
-	"types": "./types.d.ts",
-	"exports": {
-		".": {
-			"import": "./dist/index.cjs",
-			"require": "./dist/index.cjs"
-		},
-		"./dev": {
-			"import": "./src/index.js",
-			"require": "./src/index.js"
-		},
-		"./vue": {
-			"import": "./dist/vue/index.js"
-		},
-		"./pgia": {
-			"import": "./dist/pgia/index.js"
-		}
-	},
-	"keywords": [
-		"pinegrow",
-		"vue-designer",
-		"vite-plugin",
-		"@pinegrow/vite-plugin"
-	],
-	"author": "Pinegrow (http://pinegrow.com/)",
-	"license": "MIT",
-	"scripts": {
-		"build:vite-plugin": "webpack -- --env mode=production vite",
-		"build:vite-plugin:dev": "webpack -- --env mode=development vite",
-		"publish-beta": "npm run increment-beta-version && npm publish",
-		"increment-beta-version": "npm version prerelease --preid=beta"
-	},
-	"dependencies": {
-		"@vue/compiler-sfc": "^3.2.45",
-		"magic-string": "^0.27.0",
-		"node-html-parser": "^5.2.0"
-	}
-}
+{
+	"name": "@pinegrow/vite-plugin",
+	"version": "3.0.0-beta.140",
+	"description": "Pinegrow Vite Plugin",
+	"type": "module",
+	"files": [
+		"dist",
+		"./types.d.ts"
+	],
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.cjs",
+	"types": "./types.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.cjs",
+			"require": "./dist/index.cjs"
+		},
+		"./dev": {
+			"import": "./src/index.js",
+			"require": "./src/index.js"
+		},
+		"./vue": {
+			"import": "./dist/vue/index.js"
+		},
+		"./pgia": {
+			"import": "./dist/pgia/index.js"
+		}
+	},
+	"keywords": [
+		"pinegrow",
+		"vue-designer",
+		"vite-plugin",
+		"@pinegrow/vite-plugin"
+	],
+	"author": "Pinegrow (http://pinegrow.com/)",
+	"license": "MIT",
+	"scripts": {
+		"build:vite-plugin": "webpack -- --env mode=production vite",
+		"build:vite-plugin:dev": "webpack -- --env mode=development vite",
+		"publish-beta": "npm run increment-beta-version && npm publish",
+		"increment-beta-version": "npm version prerelease --preid=beta"
+	},
+	"dependencies": {
+		"@vue/compiler-sfc": "^3.2.45",
+		"magic-string": "^0.27.0",
+		"node-html-parser": "^5.2.0"
+	}
+}

package/types.d.ts

@@ -1,100 +1,100 @@
-import type { PinegrowTailwindCSSModuleOptions } from '@pinegrow/tailwindcss-plugin'
-import type { PluginOption as VitePluginOption } from 'vite'
-
-interface PinegrowExternalPlugin {
-	/**
-	 * Display name in Props Panel and Library Panels
-	 * Eg, "My Awesome Lib 3.3.1", defaults to key if not provided
-	 */
-	name?: string
-	/**
-	 * Unique key that doesn't conflict with other pinegrow frameworks
-	 * Run `Object.values(pinegrow.getFrameworks()).map(fx => fx.key)` in Vue Designer's devtools console for existing keys
-	 *
-	 * Allowed characters - alphanumeric with hyphens or period, no spaces
-	 * Eg, 'my-awesome-lib'
-	 */
-	key: string
-	/**
-	 * Web-types of component library (or) pinegrow commonjs plugin
-	 * Must return an absolute path
-	 *
-	 * Use path functions according to the project module type (commonjs/module)
-	 * For eg, path.resolve(__dirname, '../relative-path/my-lib.cjs')
-	 * (or)
-	 * import { fileURLToPath, URL } from 'node:url'
-	 * fileURLToPath(new URL('./relative-path/web-types.json', import.meta.url)) // web-types of component library
-	 * fileURLToPath(new URL('./relative-path/my-lib.cjs', import.meta.url)) // pinegrow commonjs plugin
-	 */
-	pluginPath: string
-}
-
-export interface LiveDesignerOptions {
-	/**
-	 * Absolute path to the root of a monorepo.
-	 * Relative path from the project root to the root of a monorepo.
-	 */
-	repoRoot?: string
-
-	/**
-	 * Absolute path to a custom config file (for eg, vite-dev.config.js).
-	 * Relative path from the project root to a custom config file (for eg, vite-dev.config.js).
-	 */
-	configPath?: string
-
-	/**
-	 * Key of the devtools exposed on the window object.
-	 * For instructions, check Config Panel in Vue Designer
-	 */
-	devtoolsKey?: string
-
-	/**
-	 * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
-	 * To see the different formats, go to https://icones.js.org/collection/mdi, turn off name copying mode if active, select an icon. In the bottom drawer, next to the icon-name & copy icon, there is dropup icon. Click the drop-up to see the different formats.
-	 * * @default 'unocss' // For eg, i-material-symbols-home
-	 *
-	 */
-	iconPreferredCase?:
-		| 'unocss'
-		| 'bare'
-		| 'barePascal'
-		| 'iconify'
-		| 'dash'
-		| 'camel'
-		| 'pascal'
-		| 'component'
-		| 'componentKebab'
-
-	/**
-	 * Router history modes - 'html5', 'hash'
-	 * @default 'html5'
-	 */
-
-	routerHistoryMode?: string //
-
-	/**
-	 * Array of Pinegrow plugins (npm package names)
-	 * To use file-based Pinegrow Plugins, provide the absolute path of the plugin file, for eg, [path.resolve(__dirname, './pg-plugin/index.js')] as pluginPath, along with a unique key
-	 */
-	plugins?: PinegrowExternalPlugin[] | string | string[]
-
-	/**
-	 * Pinegrow TailwindCSS plugin options
-	 */
-	tailwindcss?: PinegrowTailwindCSSModuleOptions
-}
-
-interface PinegrowVitePlugin<VitePluginOption> {
-	/**
-	 * Pinegrow Live Designer options
-	 * For details, check https://pinegrow.com/vue-designer
-	 */
-	liveDesigner?: {
-		[key in string]?: any
-	} & LiveDesignerOptions
-}
-
-declare function export_default(liveDesigner: LiveDesignerOptions): PinegrowVitePlugin
-
-export { PinegrowVitePlugin, LiveDesignerOptions, export_default as default, export_default as liveDesigner }
-
+import type { PinegrowTailwindCSSModuleOptions } from '@pinegrow/tailwindcss-plugin'
+import type { PluginOption as VitePluginOption } from 'vite'
+
+interface PinegrowExternalPlugin {
+	/**
+	 * Display name in Props Panel and Library Panels
+	 * Eg, "My Awesome Lib 3.3.1", defaults to key if not provided
+	 */
+	name?: string
+	/**
+	 * Unique key that doesn't conflict with other pinegrow frameworks
+	 * Run `Object.values(pinegrow.getFrameworks()).map(fx => fx.key)` in Vue Designer's devtools console for existing keys
+	 *
+	 * Allowed characters - alphanumeric with hyphens or period, no spaces
+	 * Eg, 'my-awesome-lib'
+	 */
+	key: string
+	/**
+	 * Web-types of component library (or) pinegrow commonjs plugin
+	 * Must return an absolute path
+	 *
+	 * Use path functions according to the project module type (commonjs/module)
+	 * For eg, path.resolve(__dirname, '../relative-path/my-lib.cjs')
+	 * (or)
+	 * import { fileURLToPath, URL } from 'node:url'
+	 * fileURLToPath(new URL('./relative-path/web-types.json', import.meta.url)) // web-types of component library
+	 * fileURLToPath(new URL('./relative-path/my-lib.cjs', import.meta.url)) // pinegrow commonjs plugin
+	 */
+	pluginPath: string
+}
+
+export interface LiveDesignerOptions {
+	/**
+	 * Absolute path to the root of a monorepo.
+	 * Relative path from the project root to the root of a monorepo.
+	 */
+	repoRoot?: string
+
+	/**
+	 * Absolute path to a custom config file (for eg, vite-dev.config.js).
+	 * Relative path from the project root to a custom config file (for eg, vite-dev.config.js).
+	 */
+	configPath?: string
+
+	/**
+	 * Key of the devtools exposed on the window object.
+	 * For instructions, check Config Panel in Vue Designer
+	 */
+	devtoolsKey?: string
+
+	/**
+	 * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
+	 * To see the different formats, go to https://icones.js.org/collection/mdi, turn off name copying mode if active, select an icon. In the bottom drawer, next to the icon-name & copy icon, there is dropup icon. Click the drop-up to see the different formats.
+	 * * @default 'unocss' // For eg, i-material-symbols-home
+	 *
+	 */
+	iconPreferredCase?:
+		| 'unocss'
+		| 'bare'
+		| 'barePascal'
+		| 'iconify'
+		| 'dash'
+		| 'camel'
+		| 'pascal'
+		| 'component'
+		| 'componentKebab'
+
+	/**
+	 * Router history modes - 'html5', 'hash'
+	 * @default 'html5'
+	 */
+
+	routerHistoryMode?: string //
+
+	/**
+	 * Array of Pinegrow plugins (npm package names)
+	 * To use file-based Pinegrow Plugins, provide the absolute path of the plugin file, for eg, [path.resolve(__dirname, './pg-plugin/index.js')] as pluginPath, along with a unique key
+	 */
+	plugins?: PinegrowExternalPlugin[] | string | string[]
+
+	/**
+	 * Pinegrow TailwindCSS plugin options
+	 */
+	tailwindcss?: PinegrowTailwindCSSModuleOptions
+}
+
+interface PinegrowVitePlugin<VitePluginOption> {
+	/**
+	 * Pinegrow Live Designer options
+	 * For details, check https://pinegrow.com/vue-designer
+	 */
+	liveDesigner?: {
+		[key in string]?: any
+	} & LiveDesignerOptions
+}
+
+declare function export_default(liveDesigner: LiveDesignerOptions): PinegrowVitePlugin
+
+export { PinegrowVitePlugin, LiveDesignerOptions, export_default as default, export_default as liveDesigner }
+