npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pinegrow/vite-plugin

v3.0.60

Published

Pinegrow Vite Plugin

Downloads

605

Readme

Pinegrow Vite Plugin

npm version npm downloads License

Vite plugin for Pinegrow ⚡️

Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Pinegrow Web Editor & Vue Designer).

Features

  • 🎨  Visually live-design your Vite-powered apps (Vue, Nuxt, Iles, Astro, etc)
  • ⚙️  Smartly integrates into your Vite workflow in dev-mode only
  • ✨  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
# Using npm
npm install -D @pinegrow/vite-plugin

# Using pnpm
pnpm add -D @pinegrow/vite-plugin
  1. Configure: Add liveDesigner() to your Vite Plugins array vite.config.{ts,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

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

	/**
	 * Mapping of custom folder setup that deviates from the standard project setup of the framework/meta-framework
	 * For eg, in Vitepress, the standard folders could be re-mapped outside the .vitepress folder.
	 * Vue Designer utilizes this information when a user intends to create a new component from the page tree or the Vue menu.
	 */
	dirs?: {
		src?: string
		components?: string
		pages?: string
		layouts?: string
	}

	/**
   * By default, one among the pages and components following these naming conventions is opened automatically as the startup page - ['Hero*', 'app', 'App', 'home', 'Home', 'index', 'Index', 'welcome', 'Welcome'].

    To open a specific page or component as the default startup page, configure the startupPage key in your liveDesigner config.
	 * For eg '@/Pages/Welcome.vue',
	 * For eg './resources/js/Pages/Welcome.vue',
	 */
	startupPage?: string

	/**
	 * Dev-server URLs.
	 * The local URL is set to the application URL, when Vite is used as a middleware in certain setups, such as Laravel applications.
	 * The network URL is set when when the dev-server is running on a remote server/machine.
	 * Make sure the URLs are fixed via the CLI configurations, so that the next available port is not auto-picked if the fixed URL's port was already used by some other process. For Vite, use the `server.host` & `server.port` options for Vite - https://vitejs.dev/config/server-options.html#server-options).
	 */
	devServerUrls?: {
		local?: string
		network?: 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
	vuetify?: PinegrowVuetifyModuleOptions
}

interface PinegrowVitePlugin<VitePluginOption> {
	/**
	 * Pinegrow Live Designer options
	 */
	liveDesigner?: {
		[key in string]?: any
	} & LiveDesignerOptions
}

License

MIT License

Copyright (c) Pinegrow