javascriptrollupjssnowpackacorn

JavaScript private class methods with Snowpack


I use private JavaScript class methods in my front-end code and Snowpack for my development workflow.

Currently (as of v2.15.0-pre.5), Snowpack doesn't seem to play well with private class methods, i.e., the following fails to when building with snowpack build:

export class TestClass {
  #test() {
    console.log("testing...");
  }

  test() {
    this.#test();
  }
}

A repo to reproduce is here. After cloning, run:

npm install
npm run build

I've opened an issue with Snowpack, but apparently the problem lays in the integration with Rollup and the fix isn't a priority.

As far as I understand, to solve it we need:

I wonder if anyone could help with an example of this, before I dive deep into learning Rollup ecosystem?

Or maybe there's another way to make it work?

I'm now back to using _methodName instead of #methodName due to time constraints, but I plan to contribute a fix when time allows.


Solution

  • Snowpack Plugin: snowpack-plugin-acorn-injection

    Expanding off of @noseratio's work, I have created a NPM dependency called snowpack-plugin-acorn-injection that will inject the relevant Acorn plugins into Rollup's internal configuration.

    The plugin is available:


    Example

    Dependency Installation

    Install the plugin and the relevant Acorn plugin(s) that are desired (for example, acorn-stage3) as development dependencies.

    Steps:

    Configure Snowpack

    Configure the project's Snowpack configuration with snowpack-plugin-acorn-injection and the relevant Acorn plugins:

    {
      ...
      "plugins": [
        [
          "snowpack-plugin-acorn-injection",
          {
            "plugins": [
              "acorn-stage3"
            ]
          }
        ]
      ],
      ...
    }