parcel-bundler (v1) ist not maintained anymore

[arnoson]

https://getkirby.com/docs/guide/plugins/plugin-setup-panel#introducing-parcel uses parcel-bundler which for has stopped working for me throwing various errors and is not maintained anymore. I tried to build a kirby plugin with parcel 2 but didn't have any success either. Would be great if the plugin-setup-panel guide could be updated to parcel 2 or an alternative bundler.

[distantnative]

I don't think this I quite correct. Parcel 2 is still not out of beta/RCs either.

[texnixe]

I wonder if we should use a different bundler, I'm also running into issues with the current setup time and again. Problably related to node.js versions.

[lukasbestle]

I also had several issues with Parcel 1, but couldn't get Parcel 2 to work either. :( Unfortunately I don't have experience with other "modern" bundlers. In the end I could get Parcel 1 to work somehow, so I didn't investigate further.

[texnixe]

Yes, I always got Parcel 1 to work again as well, but always a bit of a pain.

@rasteiner posted his Rollup solution on the forum recently: https://forum.getkirby.com/t/build-failed-on-parcel/22912/6

But I guess it's always the same with those bundlers, you change your environment and the stuff stops working. Guess I'll try a Docker approach in the future.

[arnoson]

Thanks @texnixe for posting the link to the rollup setup! It is true that bundlers always complicate things and at some point might stop working, but I have the feeling with parcel it is particularly bad. As @distantnative mentioned parcel 2 is still beta, but parcel 1 is already not maintained anymore which seems weird. I think going for rollup would be a better choice, since the development on it has been running reliably for a long time. The Vue ecosystem also relies on rollup (vite) so it seems to be a good choice in terms of vue as well.

[rasteiner]

Since the panel has switched to vite, maybe it's possible to get it to work also for plugins. The rollup script I posted on the forum doesn't do HMR, so maybe that could be done better with vite. I don't have much experience with it though...

[renestalder]

If somebody is interested in a esbuild solution, here is a version that works for me:

package.json:

{
  "scripts": {
    "serve": "node scripts/watch",
    "build": "node scripts/build"
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vue-hot-reload-api": "^2.3.4",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "esbuild": "^0.12.22",
    "esbuild-vue": "^0.3.3",
  },
  "version": "1.0.0",
  "name": "plugin-name"
}

scripts/common.js:

const vuePlugin = require("esbuild-vue");

/** @type {import("esbuild").BuildOptions} */
const commonConfig = {
  entryPoints: ["src/index.js"],
  bundle: true,
  outfile: "index.js",
  plugins: [vuePlugin()],
  define: {
    // Replace with your own logic
    "process.env.NODE_ENV": JSON.stringify("development"),
  },
};

module.exports = commonConfig;

scripts/build.js:

const vuePlugin = require("esbuild-vue");
const commonConfig = require("./common");

require("esbuild").build({
  ...commonConfig,
});

scripts/watch.js:

const vuePlugin = require("esbuild-vue");
const commonConfig = require("./common");

require("esbuild")
  .build({
    ...commonConfig,
    watch: {
      onRebuild(error, result) {
        if (error) console.error("watch build failed:", error);
        else console.log("watch build succeeded:", result);
      },
    },
  });

Notes:

• The vue dependencies seemed necessary for it to work.

[crisgraphics]

If somebody is interested in a esbuild solution, here is a version that works for me:

Thanks a lot for this setup! It works well, but I can't get the HMR to work. The console says that my browser (FF) can't establish a connection to ws://localhost:60060/. Do You have a hint how I can solve this? I've experienced the websocket problem with the parcel setup as well : /

[renestalder]

@CrisGraphics Sorry, can't help there. I don't know with what tools you try to achieve it, as to my knowledge, esbuild doesn't have a HMR API, thus doesn't might have HMR, officially.

[johannschopplich]

@distantnative Found a pretty neat solution with Vite, which I am currently embracing: https://github.com/distantnative/retour-for-kirby/blob/release/4.0.0/vite.config.js

It's basically ESBuild, but wrapped by Vite and thus easier to maintain.

Parcel doesn't feel right anymore. I pretty much like @renestalder's take. With some ENVIRONMENT magic, build and watch scripts could even be combined.

[johannschopplich]

Guys! I created a solution. Introducing kirbyup, a CLI to bundle Kirby Panel plugins. It uses Vite under the hood. Written in TypeScript, with as few dependencies as possible.

Usage:

{
  "scripts": {
    "dev": "npx -y kirbyup src/index.js --watch",
    "build": "npx -y kirbyup src/index.js"
  }
}

I have looked into ESBuild and its Vue plugin counterpart, but the latter isn't maintained very well and uses a hacky way to transform Vue files with Node workers. Vite is the leaner, more "official" way.

[johannschopplich]

@bastianallgeier I think this issue can be closed for now. 😊