@pinegrow/vite-plugin 3.0.0-beta.99 → 3.0.1

package/dist/vue/index.js

@@ -1,4 +1,14 @@
-import { onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance, ref, reactive, computed } from 'vue'
+import {
+	onBeforeMount,
+	onMounted,
+	onBeforeUnmount,
+	getCurrentInstance,
+	ref,
+	reactive,
+	onUpdated,
+	computed,
+	watch,
+} from 'vue'
 
 export function usePinegrow() {
 	const initCache = () => {
@@ -7,8 +17,7 @@ export function usePinegrow() {
 
 		if (!(winObj?.process?.client && winObj.process.client !== true)) {
 			if (!winObj.pinegrow) {
-				// conditional
-				// console.log('Cache initialized by Pinegrow Vue Plugin!')
+				// console.log('Cache initialized by Vue Plugin!')
 				const elCache = reactive(new Map())
 
 				const enrichWithComponentName = (elCacheObj, localFile) => {
@@ -19,90 +28,18 @@ export function usePinegrow() {
 					}
 				}
 
-				const pgIdToElComputed = computed(() => {
-					const pgIds = {}
-					for (let [el, elCacheNodes] of elCache.entries()) {
-						if (el.isConnected) {
-							elCacheNodes.forEach(elCacheObj => {
-								if (
-									elCacheObj.instance.isMounted &&
-									!elCacheObj.instance.isUnmounted &&
-									elCacheObj.pgId &&
-									(!elCacheObj.rootEl || elCacheObj.isRootFragment)
-								) {
-									if (!pgIds[elCacheObj.pgId]) {
-										pgIds[elCacheObj.pgId] = []
-									}
-									if (elCacheObj.key === undefined || elCacheObj.key === null) {
-										pgIds[elCacheObj.pgId].push(elCacheObj)
-									} else {
-										pgIds[elCacheObj.pgId].push([elCacheObj.key, elCacheObj])
-									}
-								}
-							})
-						}
-					}
-					return pgIds
-				})
-
-				const localComponentToElComputed = computed(() => {
-					const localComponents = {}
-					for (let [el, elCacheNodes] of elCache.entries()) {
-						if (el.isConnected) {
-							elCacheNodes.forEach(elCacheObj => {
-								if (
-									elCacheObj.instance.isMounted &&
-									!elCacheObj.instance.isUnmounted &&
-									elCacheObj.localFile
-									// && !elCacheObj.isIsland
-									// && (!elCacheObj.rootEl || elCacheObj.isRootFragment)
-								) {
-									if (!localComponents[elCacheObj.localFile]) {
-										localComponents[elCacheObj.localFile] = []
-									}
-									// There might be a elCache that was hydrated, and has the ile-root as a parent. If it was already there, then update the iles-root instead of adding a new node
-									const possibleIslandRootIndex = localComponents[elCacheObj.localFile].findIndex(
-										prevElCacheObj =>
-											prevElCacheObj.isIsland &&
-											prevElCacheObj.firstEl?.firstElementChild === elCacheObj.el
-									)
-
-									if (possibleIslandRootIndex > -1) {
-										const pgId = localComponents[elCacheObj.localFile][possibleIslandRootIndex].pgId
-										localComponents[elCacheObj.localFile][possibleIslandRootIndex] =
-											enrichWithComponentName({ ...elCacheObj, pgId }, elCacheObj.localFile)
-									} else {
-										localComponents[elCacheObj.localFile].push(
-											enrichWithComponentName(elCacheObj, elCacheObj.localFile)
-										)
-									}
-								}
-							})
-						}
-					}
-					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,
+					// pgIdToElComputed,
+					// localComponentToElComputed,
+					// appTree,
+					reactiveFromContext: reactive,
+					refFromContext: ref,
+					computedFromContext: computed,
+					watchFromContext: watch,
 					// // Uncomment these two to test locally
 					// elCacheErrHandlerFn,
 					// elUpdateHanderFn,
-					// rootFragmentToPgIdComputed,
-					pgIdToElComputed,
-					localComponentToElComputed,
-					appTree,
 				}
 			}
 		}
@@ -115,10 +52,11 @@ export function usePinegrow() {
 		if (!window.pinegrow) initCache()
 
 		let el = vnode.el
-		if (!el) return
 
 		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
@@ -334,6 +272,9 @@ export function usePinegrow() {
 			} else {
 				pinegrow.elCache.delete(el)
 			}
+			if (pinegrow.elUpdateHanderFn) {
+				pinegrow.elUpdateHanderFn(el)
+			}
 		}
 	}
 
@@ -363,6 +304,9 @@ export function usePinegrow() {
 		mountLocalComponent()
 	})
 	onBeforeUnmount(() => unmountLocalComponent())
+	onUpdated(() => {
+		mountLocalComponent()
+	})
 
 	return { pgUpdateElCache }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.99",
+	"version": "3.0.1",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [
@@ -12,6 +12,7 @@
 	"types": "./types.d.ts",
 	"exports": {
 		".": {
+			"types": "./types.d.ts",
 			"import": "./dist/index.cjs",
 			"require": "./dist/index.cjs"
 		},
@@ -21,15 +22,14 @@
 		},
 		"./vue": {
 			"import": "./dist/vue/index.js"
-		},
-		"./pgia": {
-			"import": "./dist/pgia/index.js"
 		}
 	},
 	"keywords": [
 		"pinegrow",
-		"pinegrow-plugin",
-		"vite plugin",
+		"vue designer",
+		"vuedesigner",
+		"vue-designer",
+		"vite-plugin",
 		"@pinegrow/vite-plugin"
 	],
 	"author": "Pinegrow (http://pinegrow.com/)",
@@ -46,3 +46,4 @@
 		"node-html-parser": "^5.2.0"
 	}
 }
+

package/types.d.ts

@@ -1,13 +1,106 @@
-declare module '@pinegrow/vite-plugin'
-
-// export interface liveDesigner {
-//   repoRoot?: string;
-//   configPath?: string;
-//   plugins?: string[];
-//   devtoolsKey?: string;
-//   vscodeTunnelUrl?: string
-//   customTypes?: {
-//     default?: {};
-//   };
-// };
+// https://vuedesigner.com
+
+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, '../my-awesome-lib/web-types.json')
+	 * (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('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
+	 */
+	pluginPath: string
+}
+
+export interface LiveDesignerOptions {
+	/**
+	 * When your project is part of a mono-repo
+	 * Absolute path to the root of a monorepo (or)
+	 * Relative path from the project root to the root of a monorepo.
+	 */
+	repoRoot?: string
+
+	/**
+	 * When using a custom config file (for eg, vite-dev.config.js)
+	 * Absolute path to a custom config file (for eg, vite-dev.config.js) (or)
+	 * 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 > Devtools tab in Vue Designer
+	 */
+	devtoolsKey?: string
+
+	/**
+	 * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
+	 * * @default 'unocss' // For eg, i-material-symbols-home
+	 * * When using Nuxt-Icon, you need to change this to 'iconify'
+	 *
+	 */
+	iconPreferredCase?:
+		| 'unocss'
+		| 'iconify'
+		| 'bare'
+		| 'barePascal'
+		| 'dash'
+		| 'slash'
+		| 'doubleHyphen'
+		| '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
+	 * For options, refer to https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin
+	 */
+	tailwindcss?: PinegrowTailwindCSSModuleOptions
+}
+
+interface PinegrowVitePlugin<VitePluginOption> {
+	/**
+	 * Pinegrow Live Designer options
+	 */
+	liveDesigner?: {
+		[key in string]?: any
+	} & LiveDesignerOptions
+}
+
+declare function export_default(liveDesigner: LiveDesignerOptions): PinegrowVitePlugin
+
+export { PinegrowVitePlugin, LiveDesignerOptions, export_default as default, export_default as liveDesigner }