@pinegrow/vite-plugin 3.0.0-beta.5 → 3.0.0-beta.50

package/dist/vue-plugin.js

@@ -0,0 +1,328 @@
+import { onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance, ref, reactive, computed } 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 => {
+				//   return {
+				//     name:
+				//       getComponentName(elCacheObj.instance.type, elCacheObj.localFile) +
+				//       `${elCacheObj.key !== undefined && elCacheObj.key !== null ? ` (${elCacheObj.key})` : ''}`,
+				//     ...elCacheObj,
+				//   }
+				// }
+
+				const enRichWithComponentName = elCacheObj => {
+					return {
+						name: elCacheObj.instance.type.__name || '',
+						...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])
+								}
+							})
+						}
+					}
+					return pgIds
+				})
+
+				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))
+						}
+					}
+					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,
+				}
+			}
+		}
+	}
+
+	// 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
+
+		try {
+			if ((key !== null && key !== undefined) || (vnode.key !== null && vnode.key !== undefined)) {
+				key = key || vnode.key
+			}
+			localFile = localFile || vnode.type.__file
+
+			let isRootFragment = false
+			let isFragment = el.nodeType !== 1
+			let firstEl,
+				lastEl,
+				isIsland = false
+
+			// 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
+				}
+			}
+
+			// // 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
+			// }
+
+			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
+				}
+			} 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 []
+
+						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) {
+						// 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 (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)
+						})
+					}
+				}
+
+				pinegrow.elCache.set(el, {
+					el,
+					isRootFragment,
+					rootEl,
+					vnode,
+					instance,
+					isFragment,
+					firstEl,
+					lastEl,
+					pgIds: pgId ? [pgId] : [],
+					key,
+					localFile,
+					isIsland,
+				})
+			}
+
+			if (pinegrow.elUpdateHanderFn) {
+				pinegrow.elUpdateHanderFn(el)
+			}
+		} catch (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 [key, value] of pinegrow.elCache.entries()) {
+			if (value.instance.isUnmounted) {
+				pinegrow.elCache.delete(key)
+				// console.log(value)
+			}
+		}
+	}
+
+	// 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())
+
+	return { pgUpdateElCache }
+}
+

package/package.json

@@ -1,13 +1,15 @@
 {
 	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.5",
+	"version": "3.0.0-beta.50",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [
-		"dist"
+		"dist",
+		"./types.d.ts"
 	],
 	"main": "./dist/index.cjs",
 	"module": "./dist/index.cjs",
+	"types": "./types.d.ts",
 	"exports": {
 		".": {
 			"import": "./dist/index.cjs",
@@ -16,6 +18,9 @@
 		"./dev": {
 			"import": "./src/index.js",
 			"require": "./src/index.js"
+		},
+		"./vue": {
+			"import": "./dist/vue-plugin.js"
 		}
 	},
 	"keywords": [
@@ -33,7 +38,8 @@
 		"increment-beta-version": "npm version prerelease --preid=beta"
 	},
 	"dependencies": {
-		"node-html-parser": "^5.2.0",
-		"@pinegrow/tailwind-plugin": "latest"
+		"@vue/compiler-sfc": "^3.2.45",
+		"magic-string": "^0.27.0",
+		"node-html-parser": "^6.1.5"
 	}
 }

package/types.d.ts

@@ -0,0 +1,13 @@
+declare module '@pinegrow/vite-plugin'
+
+// export interface liveDesigner {
+//   repoRoot?: string;
+//   configPath?: string;
+//   plugins?: string[];
+//   devtoolsKey?: string;
+//   vscodeTunnelUrl?: string
+//   customTypes?: {
+//     default?: {};
+//   };
+// };
+