bug/issue 174 swap escodegen with astring for modern JS syntax support

package.json

@@ -43,10 +43,10 @@
   },
   "dependencies": {
     "@projectevergreen/acorn-jsx-esm": "~0.1.0",
-    "@projectevergreen/escodegen-esm": "~0.1.0",
     "acorn": "^8.7.0",
     "acorn-import-attributes": "^1.9.5",
     "acorn-walk": "^8.2.0",
+    "astring": "^1.9.0",
     "parse5": "^6.0.1",
     "sucrase": "^3.35.0"
   },

src/jsx-loader.js

@@ -2,8 +2,10 @@
 // https://nodejs.org/api/esm.html#esm_loaders
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
-import { generate } from '@projectevergreen/escodegen-esm';
+import { generate } from 'astring';
 import fs from 'fs';
+// ideally we can eventually adopt an ESM compatible version of this plugin
+// https://github.com/acornjs/acorn-jsx/issues/112
 import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
 // Need an acorn plugin for now - https://github.com/ProjectEvergreen/greenwood/issues/1218
@@ -12,7 +14,7 @@
 
 const jsxRegex = /\.(jsx)$/;
 
 // TODO same hack as definitions
 // https://github.com/ProjectEvergreen/wcc/discussions/74
 let string;
 

src/wcc.js

@@ -4,7 +4,7 @@ import './dom-shim.js';
 
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
-import { generate } from '@projectevergreen/escodegen-esm';
+import { generate } from 'astring';
 import { getParser, parseJsx } from './jsx-loader.js';
 import { parse, parseFragment, serialize } from 'parse5';
 // Need an acorn plugin for now - https://github.com/ProjectEvergreen/greenwood/issues/1218

test/cases/attributes/src/components/counter.js

@@ -1,8 +1,11 @@
 class Counter extends HTMLElement {
+  #count;
+
   constructor(props = {}) {
     super();
 
     this.props = props;
+    this.#count = 0;
 
     if (this.shadowRoot) {
       this.hydrate();
@@ -18,20 +21,20 @@ class Counter extends HTMLElement {
   }
 
   setCount() {
-    this.count = this.hasAttribute('count')
+    this.#count = this.hasAttribute('count')
       ? parseInt(this.getAttribute('count'), 10)
       : this.props.count
         ? this.props.count
-        : 0;
+        : this.#count;
   }
 
   inc() {
-    this.count += 1;
+    this.#count += 1;
     this.update();
   }
 
   dec() {
-    this.count -= 1;
+    this.#count -= 1;
     this.update();
   }
 
@@ -46,15 +49,15 @@ class Counter extends HTMLElement {
   }
 
   update() {
-    this.shadowRoot.querySelector('span#count').textContent = this.count;
+    this.shadowRoot.querySelector('span#count').textContent = this.#count;
   }
 
   render() {
     return `
       <template shadowrootmode="open">
         <div>
           <button id="inc">Increment</button>
-          <span>Current Count: <span id="count">${this.count}</span></span>
+          <span>Current Count: <span id="count">${this.#count}</span></span>
           <button id="dec">Decrement</button>
         </div>
       </template>

test/cases/jsx/src/counter.jsx

@@ -1,6 +1,8 @@
 import './badge.jsx';
 
 export default class Counter extends HTMLElement {
+  #count;
+
   constructor() {
     super();
     this.count = 0;