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

package/README.md

@@ -1,6 +1,170 @@
-# @pinegrow/vite-plugin
+<!-- [![@pinegrow/vite-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->
 
-## Pinegrow Vite Plugin
+# Pinegrow Vite Plugin
 
-http://www.pinegrow.com
+[![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;Learn more about Vue Designer](https://vuedesigner.com)
+
+## 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; Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️
+
+## Quick Setup
+
+1. Install: Add `@pinegrow/vite-plugin` to your project
+
+```bash
+# Using npm
+npm install -D @pinegrow/vite-plugin
+
+# Using pnpm
+pnpm add -D @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({
+			/* LiveDesignerOptions (for more details, refer to Options section below) */
+		}),
+		vue(),
+		//...
+	],
+	//...
+})
+```
+
+Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
+
+## Options
+
+```ts
+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
+}
+```
+
+## 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