fix(runtime): allow classList to be null (#6118)

* fix(runtime): allow classList to be null * add /*@__PURE__*/ * prettier
ionic-team · Jan 25, 2025 · 749fab9 · 749fab9
1 parent 26ceed6
commit 749fab9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/runtime/vdom/set-accessor.ts b/src/runtime/vdom/set-accessor.ts
@@ -207,14 +207,14 @@ const parseClassListRegex = /\s/;
  * @param value className string, e.g. "foo bar baz"
  * @returns list of classes, e.g. ["foo", "bar", "baz"]
  */
-const parseClassList = (value: string | SVGAnimatedString | undefined | null): string[] => {
+export const parseClassList = /*@__PURE__*/ (value: string | SVGAnimatedString | undefined | null): string[] => {
   // Can't use `value instanceof SVGAnimatedString` because it'll break in non-browser environments
   // see https://developer.mozilla.org/docs/Web/API/SVGAnimatedString for more information
-  if (typeof value === 'object' && 'baseVal' in value) {
+  if (typeof value === 'object' && value && 'baseVal' in value) {
     value = value.baseVal;
   }
 
-  if (!value) {
+  if (!value || typeof value !== 'string') {
     return [];
   }
 

diff --git a/src/runtime/vdom/test/set-accessor.spec.ts b/src/runtime/vdom/test/set-accessor.spec.ts
@@ -1,6 +1,6 @@
 import { BUILD } from '@app-data';
 
-import { setAccessor } from '../set-accessor';
+import { parseClassList, setAccessor } from '../set-accessor';
 
 describe('setAccessor for custom elements', () => {
   let elm: any;
@@ -941,4 +941,23 @@ describe('setAccessor for standard html elements', () => {
     setAccessor(elm2, 'textContent', undefined, 'some-content', false, 0);
     expect(spy2.mock.calls).toEqual([]);
   });
+
+  describe('parseClassList', () => {
+    it('should parse class list', () => {
+      const classList = parseClassList('class1 class2 class3');
+      expect(classList).toEqual(['class1', 'class2', 'class3']);
+    });
+
+    it('should not parse class list', () => {
+      expect(parseClassList('')).toEqual([]);
+      // @ts-expect-error
+      expect(parseClassList()).toEqual([]);
+      expect(parseClassList(null)).toEqual([]);
+    });
+
+    it('should parse SVGAnimatedString', () => {
+      const classList = parseClassList({ baseVal: 'class1 class2 class3' } as SVGAnimatedString);
+      expect(classList).toEqual(['class1', 'class2', 'class3']);
+    });
+  });
 });