fix: #284 ignore javascript from sucrase transformations

src/wcc.js

@@ -9,6 +9,23 @@ import { serialize } from 'parse5';
 import { transform } from 'sucrase';
 import fs from 'fs';
 
+function transformModule(moduleURL, moduleContents) {
+  const extension = moduleURL.pathname.split('.').pop();
+
+  // Plain JavaScript files (`.js`, `.mjs`, and `.cjs`) do not need to be transformed by Sucrase,
+  // and in fact doing so can break valid JavaScript syntax.
+  // https://github.com/ProjectEvergreen/wcc/issues/284
+  if (['js', 'mjs', 'cjs'].includes(extension)) {
+    return moduleContents;
+  }
+
+  return transform(moduleContents, {
+    transforms: ['typescript', 'jsx'],
+    jsxRuntime: 'automatic',
+    production: true,
+  }).code;
+}
+
 function isCustomElementDefinitionNode(node) {
   const { expression } = node;
 
@@ -79,11 +96,7 @@ async function renderComponentRoots(tree, definitions) {
 
 function registerDependencies(moduleURL, definitions, depth = 0) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
-  const result = transform(moduleContents, {
-    transforms: ['typescript', 'jsx'],
-    jsxRuntime: 'automatic',
-    production: true,
-  });
+  const moduleCode = transformModule(moduleURL, moduleContents);
   const nextDepth = (depth += 1);
   const customParser = getParser(moduleURL);
   const parser = customParser ? customParser.parser : acorn.Parser;
@@ -94,7 +107,7 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
       };
 
   walk.simple(
-    parser.parse(result.code, {
+    parser.parse(moduleCode, {
       ecmaVersion: 'latest',
       sourceType: 'module',
     }),
@@ -142,11 +155,7 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
 
 async function getTagName(moduleURL) {
   const moduleContents = await fs.promises.readFile(moduleURL, 'utf-8');
-  const result = transform(moduleContents, {
-    transforms: ['typescript', 'jsx'],
-    jsxRuntime: 'automatic',
-    production: true,
-  });
+  const moduleCode = transformModule(moduleURL, moduleContents);
   const customParser = getParser(moduleURL);
   const parser = customParser ? customParser.parser : acorn.Parser;
   const config = customParser
@@ -157,7 +166,7 @@ async function getTagName(moduleURL) {
   let tagName;
 
   walk.simple(
-    parser.parse(result.code, {
+    parser.parse(moduleCode, {
       ecmaVersion: 'latest',
       sourceType: 'module',
     }),

test/cases/compiled-javascript/compiled-javascript.spec.js

@@ -0,0 +1,27 @@
+/*
+ * Use Case
+ * Run WCC against a custom element that imports already-compiled JavaScript.
+ *
+ * User Result
+ * Should parse the dependency without passing it through Sucrase.
+ *
+ * User Workspace
+ * src/
+ *   contentful-error.js
+ *   index.js
+ */
+import { expect } from 'chai';
+import { renderToString } from '../../../src/wcc.js';
+
+// https://github.com/ProjectEvergreen/wcc/issues/284
+describe('Run WCC For ', function () {
+  const LABEL = 'Custom Element with a JavaScript dependency';
+
+  describe(LABEL, function () {
+    it('should not transform compiled JavaScript dependencies', async function () {
+      const { html } = await renderToString(new URL('./src/index.js', import.meta.url));
+
+      expect(html).to.contain('Compiled JavaScript parsed successfully');
+    });
+  });
+});

test/cases/compiled-javascript/src/contentful-error.js

@@ -0,0 +1,9 @@
+// This combination of an initialized class field and a comma expression after super() is valid JavaScript.
+// Passing it through Sucrase inserts the field initializer before the comma, producing syntax that Acorn cannot parse.
+export class ContentfulError extends Error {
+  name = 'ContentfulError';
+
+  constructor(message, linkType) {
+    (super(message), (this.linkType = linkType));
+  }
+}

test/cases/compiled-javascript/src/index.js

@@ -0,0 +1,9 @@
+import './contentful-error.js';
+
+export default class CompiledJavaScriptElement extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = '<h1>Compiled JavaScript parsed successfully</h1>';
+  }
+}
+
+customElements.define('wcc-compiled-javascript', CompiledJavaScriptElement);