Trigger PG "build" from vscode package.json

Feature Request
1

Hey there,

I often use Pinegrow to create blocks that act as a wrapper for custom applications developed with vue/react or just a custom esbuild config with vanilla javascript. Basically a more modern, easier way to create shortcodes ;-). I find it quite useful as I create all of my more “complex” blocks with pinegrow, and sometimes I do need additional javascript, sometimes not.

But when developing blocks that heavily rely on additional javascript, I find the workflow with the live-sync plugin a bit inconvenient. I always try to encapsulate those applications as far as possible, but often I do need to rely on the WP Rest API for example or some styles that are included via the theme (and not available in the local plugin development but only in the wp installation).

So What I have to do in those scenarios is the following:

  1. Run npm run build
  2. Switch from VSCode to Pinegrow
  3. Trigger a Build (CMD + M) in Pinegrow
  4. Switch to the browser
  5. See the changes apply

As you can imagine, in the early stages of development that workflow has to be repeated time over time…I didn’t find a better solution yet, as mentioned above, I always try to encapsulate the custom builds so that they could stay alone and I can develop them using npm run dev and trigger the pinegrow build only when finished or at certain “milestones”.

What I would find very interesting is to include a build command for pinegrow in my package.json, so that whenever I run npm run build the plugin also get’s build and transferred. It’s still limiting when creating new files → but that would solve about 80-90% of the workflow mentioned above.

Happy to hear what you think about that topic - maybe someone came up with a better solution?

Cheers
Wolfgang

2

I have been experimenting with some Vite-based build setups that works nicely in watch mode with Pinegrow. Obviously, they are slightly more advanced compared to (on a relative scale), for eg, our basic external build setup for tailwind.

What you are doing feels like it’s related to mine, though if you could share a simple example via github, it will be easier to test and understand.

Meanwhile, these are the two repos that I have been personally experimenting with, check it out. The readme files have details about these setups.

Compared to the first one, the second one includes prettier for formatting & eslint for linting.

3

Hey @TechAkayy ,

thanks for your response and for the provided repos. I’ve had a quick look at them, but couldn’t see what triggers the PG Build there?

For sure, I’ve temporarly set the repo to public, see here:

The React App lives in: /pg_hufschuhprofi/react-app and it’s build command builds the assets to:
/pg_hufschuhprofi/blocks/assets/react

which is then used by any block in the /blocks directory, but not directly via the pinegrow functionality but via the functionality provided in /inc/react.php

Cheers
Wolfgang

4

I will take a deeper look tomorrow morning.

Meanwhile, in my cute-tailwindcss repo, I pulled out the vite build>lib & rollupOptions etc into a plugin vite-plugin-pg.js, and passed the input pages & js entries as parameters.

So, it is still building the assets into the outDir like yours.

vitePluginPg({
      dirs: {
        src: './src',
        pages: './pages',
      },
      output: {
        outDir: 'tailwind_theme', // default is 'dist'
        cssDir: './', // could be './css', relative to outDir (default is 'dist')
        cssFilename: 'tailwind.css',
        cssWpFilename: 'tailwind_for_wp_editor.css',
        jsDir: './js', // Relative to outDir (default is 'dist')
        imgDir: './images', // Relative to outDir (default is 'dist')
      },
      // lib: process.env.LIB, // passed via package.json script commands
      // wp: process.env.WP, // passed via package.json script commands
      pagesWithEntries: [
        {
          page: './index.html',
          entry: './src/main.js',
        },
        {
          page: './blog.html',
          entry: './src/main.js',
        },
      ],
    }),
1 Like
5

Btw, to answer your question, the PG build is triggered whenever one of the file is updated & saved. Refer to the watch command in the package.json

6

Yeah i saw that, but I didn’t understand it to be honest :smiley:

    "watch": "cross-env LIB=true NODE_ENV=development vite build  --watch",
    "watch-wp": "cross-env LIB=true WP=true NODE_ENV=development vite build  --watch",

Is the package “cross-env” with that config everything it needs to trigger the build of pinegrow?! :slight_smile:

7

This is the build command in watch mode.

The cross-env is a helper package to use environment variables in a compatible format across mac & windows.

The other two are environment variables. LIB is used to run the build in lib mode (Building for Production | Vite). In lib mode, only assets are outputted.

Yeah, the readme can be improved to explain the workflow. Will add it to my list.

8

By running npm run dev, basically the assets are outputted into the dist folder, that are used in the html files when working on these html files in Pinegrow.

9

No, don’t take it as critic on you or your repo. It’s just that I by faaaaaaaaaaaaaaaaaaaaaaar don’t know as much about the building tools as you know! :slight_smile:

10

I can absolutely understand that :grinning:, we are all at different points in our learning journey.

I will definitely improve the readme with explaining the different parts, so that its helpful for the community :+1:t4:

1 Like
11

Interesting, didn’t know about that!

Not sure if I understand this one correctly. You’re running the project in npm run dev and you work within pinegrow and when you hit save in pinegrow you also trigger a build then? If I understand it correctly then it is a bit different from what I’m trying to achieve, but probably I got it totally wrong xD

12

It probably could be different. Will clone your repo and understand your workflow and share my thoughts :+1:t4:

1 Like
13

Thanks a lot for your help! :slight_smile:

1 Like
14

I had a quick look into your repo. Thanks for sharing. My above sample repos are for html projects, not react ones (the lib mode is still useful).

So, in your below workflow,

  • Step 1, you could probably automate it by running a build command in watch mode - "watch": "tsc && vite build --watch" (added to package.json, you could have it running in parallel with your dev command), so that your react app automatically gets re-built when you update it. This is what I do in my above repos, by chaining the watch command along with the command that starts the dev-server.

  • Step 3, I don’t see any easy way to automate. You could probably create a custom pinegrow plugin that runs a watcher on the outDir, and when the assets change, automatically triggers CMD+M to export the theme/plugin.

  1. Run npm run build
  2. Switch from VSCode to Pinegrow
  3. Trigger a Build (CMD + M) in Pinegrow
  4. Switch to the browser
  5. See the changes apply

I don’t use react, so I haven’t looked into your code deeply, but correct me if I’m wrong - You are building interactive apps by directly calling the WP REST API and use live data (from your wp instance). And once its ready, you use the apps in wp blocks, exported as a plugin/theme?

15

Hey @TechAkayy ,

thanks for having a look at it.

That’s a cool Idea, on that project all REST routes are protected and only available for logged in users. For ease of use My blocks (which enqueue the react apps) are printing a script tag which holds the WP nonce, so that I can use it in my fetch commands and add it as a header to authenticate…so I don’t develop those with npm run dev anyway…but in other projects thats very useful! :slight_smile:

That’s a cool Idea, I have to have a look at the docs for that. That could be exactly what I needed.

Exactly. Mainly those “mini-apps” are user-interfaces in the my-account area of woocommerce. One is adding an interactive form with file-uploads for the customer, the other is adding a advanced inventory overview and so on. So mainly they are not related to SEO or anything else and just act as standalone functionalities hidden behind a user-role or login.

Thanks for your insights - I will definitely have a look at the custom PG plugin!! :slight_smile:

Cheers
Wolfgang

1 Like
16

Here is a quick one I have put together as a starter. I haven’t tested it. Look for TODO comments in the below code.

let outDirWatcher

$(function () {
  $('body').one('pinegrow-ready', function (e, pinegrow) {
    const onProjectClosed = () => {
      if (outDirWatcher) {
        outDirWatcher.close()
        outDirWatcher = null
      }
    }
    const onProjectLoaded = () => {
      if (!outDirWatcher) {
        // TODO: __OUT_DIR_PATH__ needs to be replaced
        outDirWatcher = fs.watch('__OUT_DIR_PATH__', (eventType, filename) => {
          if (eventType === 'change' || eventType === 'rename') {
            // TODO: This seems to work, but tbc
            pinegrow
              .getFrameworks()
              ['wordpress.pinegrow'].exportWholeThemeWithGetFolder()
          }
        })
      }
    }

    pinegrow.addEventHandler('on_project_loaded', onProjectLoaded)
    pinegrow.addEventHandler('on_project_closed', onProjectClosed)
  })
})
1 Like