@pinegrow/vite-plugin 3.0.0-beta.3 → 3.0.0-beta.31

package/dist/vue-plugin.js

@@ -0,0 +1,217 @@
+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 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.pgId &&
+							(!value.rootEl || value.isRootFragment)
+						) {
+							if (!pgIds[value.pgId]) {
+								pgIds[value.pgId] = []
+							}
+							pgIds[value.pgId].push(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(value)
+						}
+					}
+					return localComponents
+				})
+
+				winObj.pinegrow = {
+					elCache,
+					elCacheErrHandlerFn: (...args) => {
+						// {vnode, hook, rootEl, pgId, key, el, instance, message}
+						console.log(args.pop())
+						// connectionManager.fallback_tagTransform(args)
+					},
+					elUpdateHanderFn: el => {
+						if (this.elCache.has(el)) {
+							const { pgId } = this.elCache.get(el)
+							if (pgId && pgId === pinegrow.getSelectedElement()?.pgId) {
+								console.log(`Reselect ${pgId}`)
+								// pinegrow.reselectElement()
+							}
+						}
+					},
+
+					rootFragmentToPgIdComputed,
+					pgIdToElComputed,
+					localComponentToElComputed,
+				}
+			}
+		}
+	}
+
+	// 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()
+
+		const el = vnode.el
+		const instance = vnode.component || vnode.ctx || el.__vueParentComponent
+
+		try {
+			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 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
+			}
+
+			if (pinegrow.elCache.has(el)) {
+				// pgId could have been updated
+				if (pgId) {
+					pinegrow.elCache.get(el).pgId = pgId
+				}
+				if (key) {
+					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
+					}
+					const childVNodes = Array.isArray(instance.subTree.children) ? instance.subTree.children : []
+
+					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
+							lastEl = childVNodes[childVNodes.length - 1].el
+						}
+
+						childVNodes.forEach(childVNode => {
+							pgUpdateElCache(hook, pgId, isRootFragment ? el : rootEl, key)(childVNode)
+						})
+					}
+				}
+
+				pinegrow.elCache.set(el, {
+					el,
+					isRootFragment,
+					rootEl,
+					vnode,
+					instance,
+					isFragment,
+					firstEl,
+					lastEl,
+					pgId,
+					key,
+					localFile,
+				})
+			}
+
+			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)
+		}
+	}
+
+	// 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)
+		}
+	}
+
+	onBeforeMount(() => initCache())
+	onMounted(() => {
+		mountLocalComponent()
+	})
+	onBeforeUnmount(() => unmountLocalComponent())
+
+	return { pgUpdateElCache }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.3",
+	"version": "3.0.0-beta.31",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [
@@ -8,6 +8,7 @@
 	],
 	"main": "./dist/index.cjs",
 	"module": "./dist/index.cjs",
+	"types": "./types.d.ts",
 	"exports": {
 		".": {
 			"import": "./dist/index.cjs",
@@ -16,6 +17,9 @@
 		"./dev": {
 			"import": "./src/index.js",
 			"require": "./src/index.js"
+		},
+		"./vue": {
+			"import": "./dist/vue-plugin.js"
 		}
 	},
 	"keywords": [
@@ -33,7 +37,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": "^5.2.0"
 	}
 }