@pinegrow/vite-plugin 3.0.0-beta.11 → 3.0.0-beta.111

package/dist/index.cjs.LICENSE.txt

@@ -40,6 +40,8 @@
  * Released under the MIT License.
  */
 
+/*! ../../../src/framework-mgmt/pinegrow-config-manager.js */
+
 /*! ../../../src/framework-mgmt/transform-plugins.js */
 
 /*! ../contrib/parseqs.js */
@@ -240,7 +242,7 @@
 
 /*! https */
 
-/*! https://mths.be/he v1.2.0 by @mathias | MIT license */
+/*! https://mths.be/cssesc v3.0.0 by @mathias */
 
 /*! is-binary-path */
 
@@ -578,9 +580,9 @@
   !*** ../../node_modules/chokidar/lib/fsevents-handler.js ***!
   \***********************************************************/
 
-/*!*************************************************************!*\
-  !*** ./node_modules/socket.io-client/build/esm-debug/on.js ***!
-  \*************************************************************/
+/*!***********************************************************!*\
+  !*** ../../src/framework-mgmt/pinegrow-config-manager.js ***!
+  \***********************************************************/
 
 /*!**************************************************************!*\
   !*** ../../node_modules/@babel/runtime/regenerator/index.js ***!
@@ -590,10 +592,6 @@
   !*** ../../node_modules/engine.io-parser/build/esm/index.js ***!
   \**************************************************************/
 
-/*!**************************************************************!*\
-  !*** ./node_modules/socket.io-client/build/esm-debug/url.js ***!
-  \**************************************************************/
-
 /*!****************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/createClass.js ***!
   \****************************************************************/
@@ -606,16 +604,12 @@
   !*** ../../node_modules/engine.io-parser/build/esm/commons.js ***!
   \****************************************************************/
 
-/*!****************************************************************!*\
-  !*** ./node_modules/socket.io-client/build/esm-debug/index.js ***!
-  \****************************************************************/
-
 /*!*****************************************************************!*\
   !*** ../../node_modules/@socket.io/component-emitter/index.mjs ***!
   \*****************************************************************/
 
 /*!*****************************************************************!*\
-  !*** ./node_modules/socket.io-client/build/esm-debug/socket.js ***!
+  !*** ../../node_modules/socket.io-client/build/esm-debug/on.js ***!
   \*****************************************************************/
 
 /*!******************************************************************!*\
@@ -627,7 +621,7 @@
   \******************************************************************/
 
 /*!******************************************************************!*\
-  !*** ./node_modules/socket.io-client/build/esm-debug/manager.js ***!
+  !*** ../../node_modules/socket.io-client/build/esm-debug/url.js ***!
   \******************************************************************/
 
 /*!*******************************************************************!*\
@@ -666,6 +660,10 @@
   !*** ../../node_modules/engine.io-client/build/esm-debug/index.js ***!
   \********************************************************************/
 
+/*!********************************************************************!*\
+  !*** ../../node_modules/socket.io-client/build/esm-debug/index.js ***!
+  \********************************************************************/
+
 /*!********************************************************************!*\
   !*** ../../node_modules/socket.io-parser/build/esm-debug/index.js ***!
   \********************************************************************/
@@ -690,6 +688,10 @@
   !*** ../../node_modules/engine.io-parser/build/esm/encodePacket.js ***!
   \*********************************************************************/
 
+/*!*********************************************************************!*\
+  !*** ../../node_modules/socket.io-client/build/esm-debug/socket.js ***!
+  \*********************************************************************/
+
 /*!*********************************************************************!*\
   !*** ../../node_modules/socket.io-parser/build/esm-debug/binary.js ***!
   \*********************************************************************/
@@ -706,6 +708,10 @@
   !*** ../../node_modules/@babel/runtime/helpers/toConsumableArray.js ***!
   \**********************************************************************/
 
+/*!**********************************************************************!*\
+  !*** ../../node_modules/socket.io-client/build/esm-debug/manager.js ***!
+  \**********************************************************************/
+
 /*!***********************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js ***!
   \***********************************************************************/
@@ -726,10 +732,6 @@
   !*** ../../node_modules/engine.io-client/build/esm-debug/globalThis.js ***!
   \*************************************************************************/
 
-/*!*************************************************************************!*\
-  !*** ./node_modules/socket.io-client/build/esm-debug/contrib/backo2.js ***!
-  \*************************************************************************/
-
 /*!****************************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***!
   \****************************************************************************/
@@ -738,6 +740,10 @@
   !*** ../../node_modules/engine.io-client/build/esm-debug/contrib/yeast.js ***!
   \****************************************************************************/
 
+/*!*****************************************************************************!*\
+  !*** ../../node_modules/socket.io-client/build/esm-debug/contrib/backo2.js ***!
+  \*****************************************************************************/
+
 /*!******************************************************************************!*\
   !*** ../../node_modules/engine.io-client/build/esm-debug/contrib/parseqs.js ***!
   \******************************************************************************/

package/dist/vue/index.js

@@ -0,0 +1,297 @@
+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
+		if (!el) return
+
+		const instance = vnode.component || vnode.ctx || el.__vueParentComponent
+
+		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,13 +1,15 @@
 {
 	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.11",
+	"version": "3.0.0-beta.111",
 	"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,12 @@
 		"./dev": {
 			"import": "./src/index.js",
 			"require": "./src/index.js"
+		},
+		"./vue": {
+			"import": "./dist/vue/index.js"
+		},
+		"./pgia": {
+			"import": "./dist/pgia/index.js"
 		}
 	},
 	"keywords": [
@@ -33,6 +41,8 @@
 		"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

@@ -0,0 +1,67 @@
+import type { Options as PinegrowTailwindCSSPluginOptions } from '@pinegrow/tailwindcss-plugin'
+import type { Options as AutoImportComponentsOptions } from 'unplugin-vue-components/types'
+import type { Options as AutoImportAPIsOptions } from 'unplugin-auto-import/types'
+
+interface Options {
+	/**
+	 * 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
+
+	/**
+	 * Router history modes - 'html5', 'hash'
+	 * @default 'html5'
+	 */
+
+	routerHistoryMode?: string //
+
+	/**
+	 * Array of Pinegrow plugins (npm package names)
+	 */
+	plugins?: string[]
+
+	/**
+	 * Pinegrow TailwindCSS plugin options
+	 */
+	tailwindcss?: PinegrowTailwindCSSPluginOptions
+}
+
+interface PinegrowVitePlugin {
+	/**
+	 * Pinegrow Live Designer options
+	 * For details, check https://pinegrow.com/vue-designer
+	 */
+	liveDesigner?: {
+		[key in string]?: any
+	} & Options
+
+	/**
+	 * unplugin-vue-components options for auto-importing local components and via resolvers
+	 * For details, check https://github.com/antfu/unplugin-vue-components#configuration
+	 */
+	autoImportComponents?: AutoImportComponentsOptions
+
+	/**
+	 * unplugin-auto-import options for auto-importing APIs using presets
+	 * For details, check https://github.com/antfu/unplugin-auto-import#configuration
+	 */
+	autoImportAPIs?: AutoImportAPIsOptions
+}
+
+declare function export_default(liveDesigner: Options): PinegrowVitePlugin
+
+export { PinegrowVitePlugin, Options, export_default as default, export_default as liveDesigner }
+