fix(compiler): handle ts 5.0 static members

src/compiler/output-targets/dist-custom-elements/index.ts

@@ -204,6 +204,7 @@ export const addCustomElementInputs = (
 
     if (cmp.isPlain) {
       exp.push(`export { ${importName} as ${exportName} } from '${cmp.sourceFilePath}';`);
+      // TODO(STENCIL-855): Invalid syntax generation, note the unbalanced left curly brace
       indexExports.push(`export { {${exportName} } from '${coreKey}';`);
     } else {
       // the `importName` may collide with the `exportName`, alias it just in case it does with `importAs`

src/compiler/transformers/component-lazy/lazy-component.ts

@@ -17,7 +17,7 @@ export const updateLazyComponentClass = (
   cmp: d.ComponentCompilerMeta
 ) => {
   const members = updateLazyComponentMembers(transformOpts, styleStatements, classNode, moduleFile, cmp);
-  return updateComponentClass(transformOpts, classNode, classNode.heritageClauses, members);
+  return updateComponentClass(transformOpts, classNode, classNode.heritageClauses, members, moduleFile);
 };
 
 const updateLazyComponentMembers = (

src/compiler/transformers/component-native/native-component.ts

@@ -20,7 +20,7 @@ export const updateNativeComponentClass = (
 ): ts.ClassDeclaration | ts.VariableStatement => {
   const heritageClauses = updateNativeHostComponentHeritageClauses(classNode, moduleFile);
   const members = updateNativeHostComponentMembers(transformOpts, classNode, moduleFile, cmp);
-  return updateComponentClass(transformOpts, classNode, heritageClauses, members);
+  return updateComponentClass(transformOpts, classNode, heritageClauses, members, moduleFile);
 };
 
 /**

src/compiler/transformers/component-native/proxy-custom-element-function.ts

@@ -84,7 +84,7 @@ export const proxyCustomElement = (
             // update the variable statement containing the updated declaration list
             const updatedVariableStatement = ts.factory.updateVariableStatement(
               stmt,
-              [ts.factory.createModifier(ts.SyntaxKind.ExportKeyword)],
+              stmt.modifiers,
               updatedDeclarationList
             );
 

src/compiler/transformers/decorators-to-static/convert-decorators.ts

@@ -2,8 +2,14 @@ import { augmentDiagnosticWithNode, buildError } from '@utils';
 import ts from 'typescript';
 
 import type * as d from '../../../declarations';
-import { retrieveTsDecorators, retrieveTsModifiers } from '../transform-utils';
+import {
+  convertValueToLiteral,
+  createStaticGetter,
+  retrieveTsDecorators,
+  retrieveTsModifiers,
+} from '../transform-utils';
 import { componentDecoratorToStatic } from './component-decorator';
+import { hasStaticInitializerInClass } from './convert-static-members';
 import { isDecoratorNamed } from './decorator-utils';
 import {
   CLASS_DECORATORS_TO_REMOVE,
@@ -72,6 +78,14 @@ const visitClassDeclaration = (
     listenDecoratorsToStatic(diagnostics, decoratedMembers, filteredMethodsAndFields);
   }
 
+  // Handle static members that are initialized
+  const hasStaticMembersWithInit = classMembers.some(hasStaticInitializerInClass);
+  if (hasStaticMembersWithInit) {
+    filteredMethodsAndFields.push(
+      createStaticGetter('stencilHasStaticMembersWithInit', convertValueToLiteral(hasStaticMembersWithInit))
+    );
+  }
+
   // We call the `handleClassFields` method which handles transforming any
   // class fields, removing them from the class and adding statements to the
   // class' constructor which instantiate them there instead.

src/compiler/transformers/decorators-to-static/convert-static-members.ts

@@ -0,0 +1,18 @@
+import ts from 'typescript';
+
+/**
+ * Helper function to detect if a class element fits the following criteria:
+ * - It is a property declaration (e.g. `foo`)
+ * - It has an initializer (e.g. `foo *=1*`)
+ * - The property declaration has the `static` modifier on it (e.g. `*static* foo =1`)
+ * @param classElm the class member to test
+ * @returns true if the class member fits the above criteria, false otherwise
+ */
+export const hasStaticInitializerInClass = (classElm: ts.ClassElement): boolean => {
+  return (
+    ts.isPropertyDeclaration(classElm) &&
+    classElm.initializer !== undefined &&
+    Array.isArray(classElm.modifiers) &&
+    classElm.modifiers!.some((modifier) => modifier.kind === ts.SyntaxKind.StaticKeyword)
+  );
+};

src/compiler/transformers/remove-static-meta-properties.ts

@@ -24,6 +24,7 @@ export const removeStaticMetaProperties = (classNode: ts.ClassDeclaration): ts.C
   });
 };
 
+// TODO(STENCIL-856): Move these properties to constants for better type safety within the codebase
 /**
  * A list of static getter names that are specific to Stencil to exclude from a class's member list
  */
@@ -37,6 +38,7 @@ const REMOVE_STATIC_GETTERS = new Set([
   'methods',
   'states',
   'originalStyleUrls',
+  'stencilHasStaticMembersWithInit',
   'styleMode',
   'style',
   'styles',

src/compiler/transformers/static-to-meta/component.ts

@@ -54,14 +54,14 @@ export const parseStaticComponentMeta = (
   const docs = serializeSymbol(typeChecker, symbol);
   const isCollectionDependency = moduleFile.isCollectionDependency;
   const encapsulation = parseStaticEncapsulation(staticMembers);
-
   const cmp: d.ComponentCompilerMeta = {
     tagName: tagName,
     excludeFromCollection: moduleFile.excludeFromCollection,
     isCollectionDependency,
     componentClassName: cmpNode.name ? cmpNode.name.text : '',
     elementRef: parseStaticElementRef(staticMembers),
     encapsulation,
+    hasStaticInitializedMember: getStaticValue(staticMembers, 'stencilHasStaticMembersWithInit') ?? false,
     shadowDelegatesFocus: parseStaticShadowDelegatesFocus(encapsulation, staticMembers),
     properties: parseStaticProps(staticMembers),
     virtualProperties: parseVirtualProps(docs),

src/compiler/transformers/test/convert-static-members.spec.ts

@@ -0,0 +1,158 @@
+import ts from 'typescript';
+
+import { hasStaticInitializerInClass } from '../decorators-to-static/convert-static-members';
+
+describe('convert-static-members', () => {
+  describe('hasStaticInitializerInClass', () => {
+    it('returns true for a static property with an initializer', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithStaticMember'),
+        undefined,
+        undefined,
+        [
+          ts.factory.createPropertyDeclaration(
+            [ts.factory.createToken(ts.SyntaxKind.StaticKeyword)],
+            ts.factory.createIdentifier('propertyName'),
+            undefined,
+            undefined,
+            ts.factory.createStringLiteral('initial value')
+          ),
+        ]
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(true);
+    });
+
+    it('returns true for a private static property with an initializer', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithStaticMember'),
+        undefined,
+        undefined,
+        [
+          ts.factory.createPropertyDeclaration(
+            [ts.factory.createToken(ts.SyntaxKind.PrivateKeyword), ts.factory.createToken(ts.SyntaxKind.StaticKeyword)],
+            ts.factory.createIdentifier('propertyName'),
+            undefined,
+            undefined,
+            ts.factory.createStringLiteral('initial value')
+          ),
+        ]
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(true);
+    });
+
+    it('returns true for a static property with an initializer with multiple members', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithStaticAndNonStaticMembers'),
+        undefined,
+        undefined,
+        [
+          ts.factory.createPropertyDeclaration(
+            undefined,
+            ts.factory.createIdentifier('nonStaticProperty'),
+            undefined,
+            undefined,
+            ts.factory.createStringLiteral('some value')
+          ),
+          ts.factory.createPropertyDeclaration(
+            [ts.factory.createToken(ts.SyntaxKind.StaticKeyword)],
+            ts.factory.createIdentifier('propertyName'),
+            undefined,
+            undefined,
+            ts.factory.createStringLiteral('initial value')
+          ),
+        ]
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(true);
+    });
+
+    it('returns false for a class without any members', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithNoMembers'),
+        undefined,
+        undefined,
+        [] // no members for this class
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(false);
+    });
+
+    it('returns false for a static property without an initializer', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithUninitializedStaticMember'),
+        undefined,
+        undefined,
+        [
+          ts.factory.createPropertyDeclaration(
+            [ts.factory.createToken(ts.SyntaxKind.StaticKeyword)],
+            ts.factory.createIdentifier('propertyName'),
+            undefined,
+            undefined,
+            undefined // the initializer is false
+          ),
+        ]
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(false);
+    });
+
+    it('returns false for a private static property without an initializer', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithUninitializedStaticMember'),
+        undefined,
+        undefined,
+        [
+          ts.factory.createPropertyDeclaration(
+            [ts.factory.createToken(ts.SyntaxKind.PrivateKeyword), ts.factory.createToken(ts.SyntaxKind.StaticKeyword)],
+            ts.factory.createIdentifier('propertyName'),
+            undefined,
+            undefined,
+            undefined // the initializer is false
+          ),
+        ]
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(false);
+    });
+
+    it('returns false for a modified property with an initializer', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithNonStaticMember'),
+        undefined,
+        undefined,
+        [
+          ts.factory.createPropertyDeclaration(
+            [ts.factory.createToken(ts.SyntaxKind.PrivateKeyword)], // the property  is declared as private
+            ts.factory.createIdentifier('propertyName'),
+            undefined,
+            undefined,
+            ts.factory.createStringLiteral('initial value')
+          ),
+        ]
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(false);
+    });
+
+    it('returns false for an unmodified property with an initializer', () => {
+      const classWithStaticMembers = ts.factory.createClassDeclaration(
+        [ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+        ts.factory.createIdentifier('ClassWithUnmodifiedMembers'),
+        undefined,
+        undefined,
+        [
+          ts.factory.createPropertyDeclaration(
+            undefined, // the property declaration has no modifiers
+            ts.factory.createIdentifier('propertyName'),
+            undefined,
+            undefined,
+            ts.factory.createStringLiteral('initial value')
+          ),
+        ]
+      );
+      expect(classWithStaticMembers.members.some(hasStaticInitializerInClass)).toBe(false);
+    });
+  });
+});

src/compiler/transformers/test/parse-members.spec.ts

@@ -0,0 +1,18 @@
+import { transpileModule } from './transpile';
+
+describe('parse static members', () => {
+  it('places a static getter on the component', () => {
+    const t = transpileModule(`
+      @Component({tag: 'cmp-a'})
+      export class CmpA {
+        static myStatic = 'a value';
+
+        render() {
+          return <div>Hello, I have {CmpA.myStatic}</div>
+        }
+      }
+    `);
+
+    expect(t.outputText.includes('static get stencilHasStaticMembersWithInit() { return true; }')).toBe(true);
+  });
+});

src/compiler/transformers/test/proxy-custom-element-function.spec.ts

@@ -81,6 +81,19 @@ describe('proxy-custom-element-function', () => {
       const transformer = proxyCustomElement(compilerCtx, transformOpts);
       const transpiledModule = transpileModule(code, null, compilerCtx, [], [transformer]);
 
+      expect(formatCode(transpiledModule.outputText)).toContain(
+        formatCode(
+          `const ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true);`
+        )
+      );
+    });
+
+    it('wraps an exported class initializer in a proxyCustomElement call', () => {
+      const code = `export const ${componentClassName} = class extends HTMLElement {};`;
+
+      const transformer = proxyCustomElement(compilerCtx, transformOpts);
+      const transpiledModule = transpileModule(code, null, compilerCtx, [], [transformer]);
+
       expect(formatCode(transpiledModule.outputText)).toContain(
         formatCode(
           `export const ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true);`
@@ -97,7 +110,7 @@ describe('proxy-custom-element-function', () => {
 
         expect(formatCode(transpiledModule.outputText)).toContain(
           formatCode(
-            `export const foo = 'hello world!', ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true);`
+            `const foo = 'hello world!', ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true);`
           )
         );
       });
@@ -110,7 +123,7 @@ describe('proxy-custom-element-function', () => {
 
         expect(formatCode(transpiledModule.outputText)).toContain(
           formatCode(
-            `export const ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true), foo = 'hello world!';`
+            `const ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true), foo = 'hello world!';`
           )
         );
       });
@@ -123,7 +136,7 @@ describe('proxy-custom-element-function', () => {
 
         expect(formatCode(transpiledModule.outputText)).toContain(
           formatCode(
-            `export const foo = 'hello world!', ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true), bar = 'goodbye?';`
+            `const foo = 'hello world!', ${componentClassName} = /*@__PURE__*/ __stencil_proxyCustomElement(class ${componentClassName} extends HTMLElement {}, true), bar = 'goodbye?';`
           )
         );
       });

src/compiler/transformers/test/transpile.ts

@@ -175,11 +175,19 @@ export function transpileModule(
  */
 const prettifyTSOutput = (tsOutput: string): string => tsOutput.replace(/\s+/gm, ' ');
 
-export function getStaticGetter(output: string, prop: string) {
-  const toEvaluate = `return ${output.replace('export', '')}`;
+/**
+ * Helper function for tests that converts stringified JavaScript to a runtime value.
+ * A value from the generated JavaScript is returned based on the provided property name.
+ * @param stringifiedJs the stringified JavaScript
+ * @param propertyName the property name to pull off the generated JavaScript
+ * @returns the value associated with the provided property name. Returns undefined if an error occurs while converting
+ * the stringified JS to JavaScript, or if the property does not exist on the generated JavaScript.
+ */
+export function getStaticGetter(stringifiedJs: string, propertyName: string): string | void {
+  const toEvaluate = `return ${stringifiedJs.replace('export', '')}`;
   try {
     const Obj = new Function(toEvaluate);
-    return Obj()[prop];
+    return Obj()[propertyName];
   } catch (e) {
     console.error(e);
     console.error(toEvaluate);