not all expected modern JavaScript syntax supported

[thescientist13]

Summary

Noticed that some basic JavaScript syntax features seems to be breaking though they should already be supported, like private class fields and static blocks.

// static blocks
class SlideViewer extends HTMLElement {
  static observedAttributes = ['slide'];

   //. ...
}

customElements.define('slide-viewer', SlideViewer);

// private 
class Counter extends HTMLElement {
  #x = 0;

  clicked() {
    this.#x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  connectedCallback() { this.render(); }

  static observedAttributes = ['slide'];

  render() {
    this.textContent = this.#x.toString();
  }
}
window.customElements.define('num-counter', Counter);

The result of running the build will throw an error from Rollup

bundling static assets...
TypeError: baseVisitor[type] is not a function
    at c (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:23:22)
    at base.ClassBody (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:435:5)
    at c (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:23:22)
    at base.Class (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:428:3)
    at c (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:23:22)
    at base.ClassDeclaration.base.ClassExpression (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:424:80)
    at c (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:23:22)
    at Object.skipThrough (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:180:37)
    at c (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:23:22)
    at base.Program.base.BlockStatement (file:///Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/acorn-walk/dist/walk.mjs:192:5) {
  code: 'PLUGIN_ERROR',
  plugin: 'greenwood-import-meta-url',
  hook: 'transform',
  id: '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/presenter-mode.js',
  watchFiles: [
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/.greenwood/758806547.js',
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/.greenwood/1377133907.js',
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/.greenwood/12042177.js',
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/presenter-mode.js',
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/slide-list.js',
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/link-target.js',
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/iframe-key-capture.js',
    '/Users/owenbuckley/Workspace/github/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/slide-viewer.js'
  ]
}
error Command failed with exit code 1.

Here's a little repo with some of these features demonstrated - https://github.com/thescientist13/greenwood-ihtml/tree/latest-acorn-features

Details

At the time of this writing these should all be Stage 4 in ECMA and supported in all browsers, so not sure what gives? 🤷‍♂️

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static#browser_compatibility
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties#browser_compatibility

---

I notice we are inconsistently configuring Acorn with different flags, one still stuck in 2020!

• https://github.com/ProjectEvergreen/greenwood/blob/v0.30.0-alpha.6/packages/cli/src/lib/walker-package-ranger.js#L49
• https://github.com/ProjectEvergreen/greenwood/blob/v0.30.0-alpha.6/packages/cli/src/plugins/resource/plugin-standard-javascript.js#L46

We should probably make this a lib that can export that configuration everywhere. Additionally, we should make sure that in places we are walking a JS AST, there's no chance we could be processing TS and thus breaking Acorn.

[thescientist13]

As an aside, I wonder if this actually is something Greenwood should support, in exposing it's internals like this, instead of #550 ? I guess its a question of the lag between standards, and that standard showing up in the parsing tools, like Acorn (JS) and CSSTree (CSS). 🤔

[thescientist13]

Doing some research yielded these related results

• Unexpected token error when parsing a class with static properties acornjs/acorn#1231
• support for class static initialization blocks rollup/rollup#4250
• Support for class static initialization block rollup/rollup#4249

Which seem to indicate that as of >= v2.79.0, Rollup should be supporting, so not sure what gives? I made sure to add a resolution to my project and confirm the latest 2.x version of Rollup is installed in this project and also tried manually setting the ECMA version in rollup.config.js

const ast = this.parse(await response.text(), { ecmaVersion: 'latest' });

➜  greenwood-starter-presentation git:(enhancement/issue-25-remove-lit-dependency) ✗ yarn why rollup
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "rollup"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "@greenwood#cli" depends on it
   - Hoisted from "@greenwood#cli#rollup"
info Disk size without dependencies: "6.46MB"
info Disk size with unique dependencies: "6.46MB"
info Disk size with transitive dependencies: "6.46MB"
info Number of shared dependencies: 0
✨  Done in 0.11s.

I'm not sure if #1087 will help with this, though I think they switched to SWC in v3? Would be good to test this out there.

Putting this code into the current version of their REPL seems to work at least 👀

As a work around if someone really needed to, they could probably use our Babel plugin (or create their own using esbuild, SWC, etc) that should work as a stop gap.

Or if doing something like Web Components, just the getter version

static get observedAttributes() {
  return ['slide'];
}

I think this is actually an acorn issue, as I see there is this repo for what appears to be the features we're looking for
https://github.com/acornjs/acorn-stage3

So not sure if we just need to add that for now?