JavaScript private class methods with Snowpack

Question

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:

• a custom Rollup plugin for Snowpack.
• such plugin should use acornInjectPlugins to inject acorn-private-methods.

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.

Answer 1

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:

• on NPM: https://www.npmjs.com/package/snowpack-plugin-acorn-injection
• on GitHub: https://github.com/concision/snowpack-plugin-acorn-injection

---

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

Answer 2

I've figured it out, using Rollup.js options hook and acorn-stage3 acorn plugin, repo.

acorn-private-methods can be used as well (if only private methods wanted).

• Create a custom Rollup.js plugin, I called it @noseratio/rollup-acorn-conf:

"use strict";

module.exports = function plugin(hostOpts = {}) {
  return { 
    name: 'rollup-acorn-conf',

    options: rollupOpts => { 
      console.log("Enabling 'acorn-stage3'...");
      rollupOpts.acorn = rollupOpts.acorn ?? {};
      rollupOpts.acorn.ecmaVersion = 2020;
      rollupOpts.acornInjectPlugins = rollupOpts.acornInjectPlugins ?? [];
      rollupOpts.acornInjectPlugins.push(require('acorn-stage3'));
      return rollupOpts;
    }
  };
};

Its package.json:

{
  "name": "@noseratio/rollup-acorn-conf",
  "version": "0.1.1",
  "description": "Enable ES2020 features (Stage 3) for Rollup.js",
  "homepage": "https://github.com/noseratio/snowpack-discussions-1209",
  "main": "index.js",
  "scripts": {},
  "devDependencies": {
    "acorn-stage3": "^4.0.0"
  }
}

• In snowpack.config.js:

  installOptions: {
    rollup: { 
      plugins: [require('@noseratio/rollup-acorn-conf')()]
    }
  }