Search code examples
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:

    • npm: 
      npm install --save-dev snowpack-plugin-acorn-injection acorn-stage3
    • Yarn: 
      yarn add --dev snowpack-plugin-acorn-injection acorn-stage3

    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"
        ]
      }
    ]
  ],
  ...
}