I want to make plugins for Pinegrow

Plugin Development
1

I want to make plugins for Pinegrow. In the past I have created plugins for other Platforms. So I’m no stranger to the concept. But the docs and this form are not current. Has writing your own plugins for Pinegrow not possible anymore? I don’t see a develpoer mode. It should be listed under support I’m told. I need to put pinegrow into dev mode but I can’t see how to do that.

2 Likes
2

Hi @Whittfield nice to see you are still around, long time no see.

Are you talking about File → Manage Libraries & Plugins.

I sent you a DM

Pete.

3

Hi @Whittfield ,

Firstly, our plugin developer documentation definitely needs an uplift. Here are some inputs to get you started.

Let’s say your plugin file is plugin.cjs,

Pinegrow plugins are commonjs modules and needs to be initiated after the pinegrow object has loaded. So, the below would typically go at the bottom of your plugin.cjs file, and let’s say it calls a plugin() function.

$(function () {
	$('body').one('pinegrow-ready', function (e, pinegrow) {
		plugin()
	})
})

And here is a sample plugin registration within the plugin function that’s triggerred above after pinegrow object has loaded:

// Your plugin code goes in here... 
const plugin = () => {
    var fxConfig = {
      version: '1.0.0',
      major_version: '1',
      minor_version: '1.0',

      //Optional, add a badge to the framework list notify user of new or updated status
      info_badge: 'New',

      // Define a framework type - if you plan on having multiple versions, this should be the same for each version.

      type: 'automatic-tailwindcss-builder',
      short_type: 'automatictwcssbuilder',

      //Prevent the activation of multiple versions of the framework - if this should be allowed, change to false
      allow_single_type: true,

      short_name: 'Automatic Tailwind CSS Builder',

      dependency: '@techakayy/automatic-tailwindcss-builder',

      get name() {
        return `${this.short_name} ${this.minor_version}`
      },

      get key() {
        return `${this.type}`
      },

      // shouldn't contain /, for eg, @nuxt/ui
      get scriptTagId() {
        return `${this.short_type}`
      },

      get prefix() {
        return `${this.short_type}${this.minor_version}`
      },

      //Add a framework description to be displayed with the framework templates
      get description() {
        return `<a href="http://github.com/techakayy/automatic-tailwindcss-builder">${this.name}</a>.`
      },

      //Add a framework author to be displayed with the framework templates
      author: 'Ahmed Kaja',

      //Add a website "https://techakayy.com" or mailto "mailto:info@techakayy.com" link for redirect on author name click
      author_link: 'http://github.com/techakayy/automatic-tailwindcss-builder',
      video_tutorial:
        'https://github.com/techakayy/automatic-tailwindcss-builder#automatic-tailwindcss-builder---a-community-plugin',

      show_in_manager: true,
      get default() {
        return (this.pgf_type && this.pgf_type.activated_by_default) || false
      },
    }

    const fxKey = fxConfig.key
    const fxName = fxConfig.name
    var framework = new PgFramework(fxKey, fxName)

    framework.type = fxConfig.type
    framework.allow_single_type = fxConfig.allow_single_type
    framework.description = fxConfig.description
    framework.author = fxConfig.author
    framework.author_link = fxConfig.author_link
    framework.info_badge = fxConfig.info_badge
    framework.default = fxConfig.default
    framework.show_in_manager = fxConfig.show_in_manager
    pinegrow.addFramework(framework, 3)

    console.log(`${fxName}: Loaded successfully!`)
    pinegrow.showQuickMessage(
        `${fxName}: Loaded successfully!`,
        2500,
        true,
        false, // false means info, true means error
        0
    )

    // Create visual controls here... 
}

Note the comment with text // Create visual controls here... in the above code block.

You can now create visual controls in library panel (components/blocks), props panel, and more…

I would recommend following our plugin developer docs to play around and learn creating the various visual controls - Developers | Pinegrow Web Editor

Another great resource you want to check out (thanks to @RobM) is this tutorial series - Adding UIkit to Pinegrow: Pt 1 - From the Donkey's Mouth

You could also use ES module to write your plugin and bundle it with a bundler like webpack, but this is quite advanced. Here is a personal plugin that I have open-sourced if you are interested to learn from it - GitHub - TechAkayy/frameworks-lite-for-pinegrow: Vue, Petite-Vue, AlpineJS for Pinegrow

Please let me know if you have further questions. All the best! :slight_smile:

1 Like