build: fix logic for SSR in React wrapper (#3174)

sbb-design-systems · Oct 28, 2024 · 7beee1a · 7beee1a
1 parent e041fe2
commit 7beee1a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/src/elements/core/controllers/slot-state-controller.ts b/src/elements/core/controllers/slot-state-controller.ts
@@ -40,7 +40,7 @@ export class SbbSlotStateController implements ReactiveController {
   }
 
   // We avoid using AbortController here, as it would mean creating
-  // a new instance for every NamedSlotStateController instance.
+  // a new instance for every SbbSlotStateController instance.
   private _slotchangeHandler = (event: Event): void => {
     this._syncSlots(event.target as HTMLSlotElement);
   };

diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.ts b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.ts
@@ -67,7 +67,7 @@ class SbbExpansionPanelHeaderElement extends SbbDisabledTabIndexActionMixin(
   /**
    * The 'data-icon' is used by the 'sbb-expansion-panel'.
    * It needs to be set before the @slotchange event bubbles to the 'expansion-panel'
-   * but after the 'NamedSlotStateController' has run.
+   * but after the 'SbbSlotStateController' has run.
    */
   private _setDataIconAttribute(): void {
     this.toggleAttribute('data-icon', !!(this.iconName || this._namedSlots.slots.has('icon')));

diff --git a/tools/manifest/custom-elements-manifest.config.js b/tools/manifest/custom-elements-manifest.config.js
@@ -20,32 +20,43 @@ export function createManifestConfig(library = '') {
     plugins: [
       {
         analyzePhase({ ts, node, moduleDoc }) {
-          if (
-            ts.isNewExpression(node) &&
-            node.expression.getText() === 'NamedSlotStateController'
-          ) {
+          function setSsrSlotState(classNode) {
+            const classDoc = moduleDoc.declarations.find(
+              (declaration) => declaration.name === classNode.name.getText(),
+            );
+            classDoc['_ssrslotstate'] = true;
+          }
+
+          if (ts.isNewExpression(node) && node.expression.getText() === 'SbbSlotStateController') {
             let classNode = node;
             while (classNode) {
               if (ts.isClassDeclaration(classNode)) {
-                const className = classNode.name.getText();
-                const classDoc = moduleDoc.declarations.find(
-                  (declaration) => declaration.name === className,
-                );
-                classDoc['_ssrslotstate'] = true;
+                setSsrSlotState(classNode);
               }
               classNode = classNode.parent;
             }
           }
 
-          /**
-           * When a generic T type is used in a superclass declaration, it overrides the type defined in derived class
-           * during the doc generation (as the `value` property in the `SbbFormAssociatedMixinType`).
-           * Using the `@overrideType` annotation in the jsDoc's derived class allows to override the type with the correct one.
-           *
-           * In this phase, the script looks for all the `@overrideType` annotations,
-           * and it saves them in the `classDeclaration` object as a pair <property name> / <correct type>.
-           */
-          if (node.kind === ts.SyntaxKind.ClassDeclaration) {
+          if (ts.isClassDeclaration(node)) {
+            /**
+             * The usage of the `slotState` decorator breaks the logic in the previous block of code,
+             * since the decorated class has no explicit usage of the `SbbSlotStateController` constructor any more.
+             */
+            const decorators = ts.getDecorators(node);
+            if (decorators && decorators.length > 0) {
+              if (decorators.find((e) => e.getText() === '@slotState()')) {
+                setSsrSlotState(node);
+              }
+            }
+
+            /**
+             * When a generic T type is used in a superclass declaration, it overrides the type defined in derived class
+             * during the doc generation (as the `value` property in the `SbbFormAssociatedMixinType`).
+             * Using the `@overrideType` annotation in the jsDoc's derived class allows to override the type with the correct one.
+             *
+             * In this phase, the script looks for all the `@overrideType` annotations,
+             * and it saves them in the `classDeclaration` object as a pair <property name> / <correct type>.
+             */
             node.jsDoc?.forEach((doc) => {
               doc.tags?.forEach((tag) => {
                 // eslint-disable-next-line lyne/local-name-rule