static property initializations break during bundling

[thescientist13]

Summary

Given a class / custom element definition like so

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

   //. ...
}

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

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.

Commenting that line passes the build successfully

Details

So at the time of this writing, static class properties should be Stage 4 in ECMA and supported by all browsers, so seems that this is a Rollup issue? Or it could be acorn, which is the underlying AST library being used.

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 "rollup@2.79.1"
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 Compnents, 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?

[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). 🤔