acorn options util and static and and private test cases

ProjectEvergreen · Nov 14, 2024 · cb93b6a · cb93b6a
1 parent bd9c243
commit cb93b6a
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 72 deletions.
diff --git a/packages/cli/src/lib/parsing-utils.js b/packages/cli/src/lib/parsing-utils.js
@@ -0,0 +1,8 @@
+const acornOptions = {
+  ecmaVersion: 'latest',
+  sourceType: 'module'
+};
+
+export {
+  acornOptions
+};
diff --git a/packages/cli/src/lib/walker-package-ranger.js b/packages/cli/src/lib/walker-package-ranger.js
@@ -4,6 +4,7 @@ import fs from 'fs';
 import { getNodeModulesLocationForPackage } from './node-modules-utils.js';
 import path from 'path';
 import * as walk from 'acorn-walk';
+import { acornOptions } from './parsing-utils.js';
 
 const importMap = {};
 
@@ -46,10 +47,7 @@ async function getPackageEntryPath(packageJson) {
 async function walkModule(modulePath, dependency) {
   const moduleContents = fs.readFileSync(modulePath, 'utf-8');
 
-  walk.simple(acorn.parse(moduleContents, {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  }), {
+  walk.simple(acorn.parse(moduleContents, acornOptions), {
     async ImportDeclaration(node) {
       let { value: sourceValue } = node.source;
       const absoluteNodeModulesLocation = await getNodeModulesLocationForPackage(dependency);

diff --git a/packages/cli/src/plugins/resource/plugin-standard-javascript.js b/packages/cli/src/plugins/resource/plugin-standard-javascript.js
@@ -9,6 +9,7 @@ import { ResourceInterface } from '../../lib/resource-interface.js';
 import terser from '@rollup/plugin-terser';
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
+import { acornOptions } from '../../lib/parsing-utils.js';
 
 class StandardJavaScriptResource extends ResourceInterface {
   constructor(compilation, options) {
@@ -42,10 +43,7 @@ class StandardJavaScriptResource extends ResourceInterface {
     const body = await response.clone().text();
     let polyfilled = body;
 
-    walk.simple(acorn.parse(body, {
-      ecmaVersion: 'latest',
-      sourceType: 'module'
-    }), {
+    walk.simple(acorn.parse(body, acornOptions), {
       async ImportDeclaration(node) {
         const line = body.slice(node.start, node.end);
         const { value } = node.source;

diff --git a/packages/cli/test/cases/serve.default.ssr/src/components/counter.js b/packages/cli/test/cases/serve.default.ssr/src/components/counter.js
@@ -13,29 +13,33 @@ template.innerHTML = `
 `;
 
 class MyCounter extends HTMLElement {
+  static staticProperty = 'foo';
+  #count;
+
   constructor() {
     super();
-    this.count = 0;
+    this.#count = 0;
     this.attachShadow({ mode: 'open' });
   }
 
   async connectedCallback() {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
     this.shadowRoot.getElementById('inc').onclick = () => this.inc();
     this.shadowRoot.getElementById('dec').onclick = () => this.dec();
+    this.#count = this.getAttribute('count') ?? this.#count;
     this.update();
   }
 
   inc() {
-    this.update(++this.count); // eslint-disable-line
+    this.update(++this.#count); // eslint-disable-line
   }
 
   dec() {
-    this.update(--this.count); // eslint-disable-line
+    this.update(--this.#count); // eslint-disable-line
   }
 
   update(count) {
-    this.shadowRoot.getElementById('count').innerHTML = count || this.count;
+    this.shadowRoot.getElementById('count').innerHTML = count || this.#count;
   }
 }
 

diff --git a/packages/plugin-css-modules/src/index.js b/packages/plugin-css-modules/src/index.js
@@ -11,6 +11,7 @@ import * as acornWalk from 'acorn-walk';
 import * as acorn from 'acorn';
 import { hashString } from '@greenwood/cli/src/lib/hashing-utils.js';
 import { transform } from 'sucrase';
+import { acornOptions } from '@greenwood/cli/src/lib/parsing-utils.js';
 
 const MODULES_MAP_FILENAME = '__css-modules-map.json';
 /*
@@ -39,11 +40,7 @@ function walkAllImportsForCssModules(scriptUrl, sheets, compilation) {
   });
 
   acornWalk.simple(
-    acorn.parse(result.code, {
-      ecmaVersion: 'latest',
-      sourceType: 'module'
-    }),
-    {
+    acorn.parse(result.code, acornOptions), {
       ImportDeclaration(node) {
         const { specifiers = [], source = {} } = node;
         const { value = '' } = source;
@@ -245,11 +242,7 @@ class StripCssModulesResource extends ResourceInterface {
     let contents = await response.text();
 
     acornWalk.simple(
-      acorn.parse(contents, {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }),
-      {
+      acorn.parse(contents, acornOptions), {
         ImportDeclaration(node) {
           const { specifiers = [], source = {}, start, end } = node;
           const { value = '' } = source;

diff --git a/packages/plugin-renderer-lit/test/cases/serve.default/src/components/card.js b/packages/plugin-renderer-lit/test/cases/serve.default/src/components/card.js
@@ -1,55 +1,25 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from 'lit';
 
 export default class Card extends LitElement {
-  // TODO we have a clash on acorn version?
-  // or this issue - https://github.com/ProjectEvergreen/greenwood/issues/1183
-  // static properties = {
-  //   title: '',
-  //   thumbnail: ''
-  // };
-  // static styles = css`
-  //   div {
-  //     display: flex;
-  //     flex-direction: column;
-  //     align-items: center;
-  //     gap: 0.5rem;
-  //     border: 1px solid #818181;
-  //     width: fit-content;
-  //     border-radius: 10px;
-  //     padding: 2rem 1rem;
-  //     height: 680px;
-  //     justify-content: space-between;
-  //     background-color: #fff;
-  //     overflow-x: hidden;
-  //   }
-  //   button {
-  //     background: var(--color-accent);
-  //     color: var(--color-white);
-  //     padding: 1rem 2rem;
-  //     border: 0;
-  //     font-size: 1rem;
-  //     border-radius: 5px;
-  //     cursor: pointer;
-  //   }
-  //   img {
-  //     max-width: 500px;
-  //     min-width: 500px;
-  //     width: 100%;
-  //   }
-  //   h3 {
-  //     font-size: 1.85rem;
-  //   }
-
-  //   @media(max-width: 768px) {
-  //     img {
-  //       max-width: 300px;
-  //       min-width: 300px;
-  //     }
-  //     div {
-  //       height: 500px;
-  //     }
-  //   }
-  // `;
+  static styles = css`
+    h3 {
+      font-size: 1.85rem;
+    }
+    button {
+      background: var(--color-accent);
+      color: var(--color-white);
+      padding: 1rem 2rem;
+      border: 0;
+      font-size: 1rem;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    img {
+      max-width: 500px;
+      min-width: 500px;
+      width: 100%;
+    }
+  `;
 
   constructor() {
     super();