feat: add theme & stateMachine manifest schema

dotlottie · Nov 4, 2024 · f333907 · f333907
1 parent 9cfb87b
commit f333907
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 124 deletions.
diff --git a/packages/dotlottie-js/src/__tests__/__fixtures__/simple/state/pigeon-state.ts b/packages/dotlottie-js/src/__tests__/__fixtures__/simple/state/pigeon-state.ts
@@ -1,8 +1,12 @@
 import { DotLottieStateMachine } from "../../../../v2/common/schemas/state-machine"
 
-export const PigeonState: DotLottieStateMachine = {
-  descriptor: {
-    id: "explodingPigeon",
+export const PigeonState: {
+  id: string;
+  data: DotLottieStateMachine;
+} = {
+  id: "explodingPigeon",
+  data: {
+    descriptor: {
     initial: "pigeonRunning"
   },
   states: [
@@ -110,16 +114,20 @@ export const PigeonState: DotLottieStateMachine = {
       type: "Event",
       name: "restart"
     }
-  ]
+    ]
+  }
 }
 
 
-export const PigeonWithoutExplosion: DotLottieStateMachine = 
-{
-  descriptor: {
-    id: "pigeonWithoutExplosion",
-    initial: "pigeonRunning"
-  },
+export const PigeonWithoutExplosion: {
+  id: string;
+  data: DotLottieStateMachine;
+} = {
+  id: "pigeonWithoutExplosion",
+  data: {
+    descriptor: {
+      initial: "pigeonRunning"
+    },
   states: [
     {
       type: "PlaybackState",
@@ -195,12 +203,17 @@ export const PigeonWithoutExplosion: DotLottieStateMachine =
       type: "Event",
       name: "restart"
     }
-  ]
+    ]
+  }
 }
 
-export const SmileyWifi: DotLottieStateMachine = {
-  descriptor: {
-    id: 'simple_click_to_next_prev',
+export const SmileyWifi: {
+  id: string;
+  data: DotLottieStateMachine;
+} = {
+  id: 'simple_click_to_next_prev',
+  data: {
+    descriptor: {
     initial: "smiley",
   },
   states: [
@@ -238,5 +251,6 @@ export const SmileyWifi: DotLottieStateMachine = {
   triggers: [{
     type: "Event",
     name: "click"
-  }]
+    }]
+  },
 };
diff --git a/packages/dotlottie-js/src/v2/__tests__/browser/state-machine.spec.ts b/packages/dotlottie-js/src/v2/__tests__/browser/state-machine.spec.ts
@@ -18,21 +18,16 @@ describe('LottieStateMachine', () => {
     expect(() => {
       // act
       new LottieStateMachine({
-        descriptor: { id: '', initial: 'pigeon' },
-        states: PigeonState.states,
-        listeners: PigeonState.listeners ?? [],
-        triggers: PigeonState.triggers ?? [],
+        id: '',
+        data: PigeonState.data,
       });
       // assert
     }).toThrowError('Invalid id.');
   });
 
   it('gets and sets the zipOptions', () => {
     const theme = new LottieStateMachine({
-      descriptor: PigeonState.descriptor,
-      states: PigeonState.states,
-      listeners: PigeonState.listeners ?? [],
-      triggers: PigeonState.triggers ?? [],
+      ...PigeonState,
       zipOptions: {
         level: 9,
         mem: 1,
@@ -56,15 +51,18 @@ describe('LottieStateMachine', () => {
   it('gets and sets the id', () => {
     // arrange
     const state = new LottieStateMachine({
-      descriptor: { id: 'test', initial: 'test' },
-      states: [
-        {
-          name: 'test',
-          type: 'PlaybackState',
-          mode: 'Forward',
-          autoplay: true,
-        },
-      ],
+      id: 'test',
+      data: {
+        descriptor: { initial: 'test' },
+        states: [
+          {
+            name: 'test',
+            type: 'PlaybackState',
+            mode: 'Forward',
+            autoplay: true,
+          },
+        ],
+      },
     });
 
     expect(state.id).toEqual('test');
@@ -81,11 +79,11 @@ describe('LottieStateMachine', () => {
     const pigeonState = new LottieStateMachine(PigeonState);
 
     // assert
-    expect(pigeonState.id).toEqual(PigeonState.descriptor.id);
+    expect(pigeonState.id).toEqual(PigeonState.id);
 
-    expect(pigeonState.initial).toEqual(PigeonState.descriptor.initial);
+    expect(pigeonState.initial).toEqual(PigeonState.data.descriptor.initial);
 
-    expect(pigeonState.states).toEqual(PigeonState.states);
+    expect(pigeonState.states).toEqual(PigeonState.data.states);
 
     const dotlottie = new DotLottie();
 
@@ -109,24 +107,24 @@ describe('LottieStateMachine', () => {
 
     expect(dotlottie.stateMachines.length).toEqual(2);
 
-    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id);
+    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id);
 
-    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id);
+    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id);
 
-    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id);
-    expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.descriptor.initial);
-    expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.states);
+    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id);
+    expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.data.descriptor.initial);
+    expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.data.states);
 
-    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id);
-    expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.descriptor.initial);
-    expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.states);
+    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id);
+    expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.data.descriptor.initial);
+    expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.data.states);
 
     // Remove a state and check
-    dotlottie.removeStateMachine(PigeonState.descriptor.id);
+    dotlottie.removeStateMachine(PigeonState.id);
 
     expect(dotlottie.stateMachines.length).toEqual(1);
 
-    expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.descriptor.id);
+    expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.id);
 
     // dotlottie.download('test_02_with_states.lottie');
   });
@@ -155,7 +153,7 @@ describe('LottieStateMachine', () => {
 
     expect(dotlottie.manifest.stateMachines?.length).toEqual(2);
 
-    const values = [PigeonState.descriptor.id, SmileyWifi.descriptor.id];
+    const values = [{ id: PigeonState.id }, { id: SmileyWifi.id }];
 
     if (dotlottie.manifest.stateMachines) {
       dotlottie.manifest.stateMachines.forEach((value, index) => {

diff --git a/packages/dotlottie-js/src/v2/__tests__/node/state-machine.spec.ts b/packages/dotlottie-js/src/v2/__tests__/node/state-machine.spec.ts
@@ -18,21 +18,16 @@ describe('LottieStateMachine', () => {
     expect(() => {
       // act
       new LottieStateMachine({
-        descriptor: { id: '', initial: 'pigeon' },
-        states: PigeonState.states,
-        listeners: PigeonState.listeners ?? [],
-        triggers: PigeonState.triggers ?? [],
+        id: '',
+        data: PigeonState.data,
       });
       // assert
     }).toThrowError('Invalid id.');
   });
 
   it('gets and sets the zipOptions', () => {
     const theme = new LottieStateMachine({
-      descriptor: PigeonState.descriptor,
-      states: PigeonState.states,
-      listeners: PigeonState.listeners ?? [],
-      triggers: PigeonState.triggers ?? [],
+      ...PigeonState,
       zipOptions: {
         level: 9,
         mem: 1,
@@ -56,15 +51,18 @@ describe('LottieStateMachine', () => {
   it('gets and sets the id', () => {
     // arrange
     const state = new LottieStateMachine({
-      descriptor: { id: 'test', initial: 'test' },
-      states: [
-        {
-          name: 'test',
-          type: 'PlaybackState',
-          mode: 'Forward',
-          autoplay: true,
-        },
-      ],
+      id: 'test',
+      data: {
+        descriptor: { initial: 'test' },
+        states: [
+          {
+            name: 'test',
+            type: 'PlaybackState',
+            mode: 'Forward',
+            autoplay: true,
+          },
+        ],
+      },
     });
 
     expect(state.id).toEqual('test');
@@ -81,11 +79,11 @@ describe('LottieStateMachine', () => {
     const pigeonState = new LottieStateMachine(PigeonState);
 
     // assert
-    expect(pigeonState.id).toEqual(PigeonState.descriptor.id);
+    expect(pigeonState.id).toEqual(PigeonState.id);
 
-    expect(pigeonState.initial).toEqual(PigeonState.descriptor.initial);
+    expect(pigeonState.initial).toEqual(PigeonState.data.descriptor.initial);
 
-    expect(pigeonState.states).toEqual(PigeonState.states);
+    expect(pigeonState.states).toEqual(PigeonState.data.states);
 
     const dotlottie = new DotLottie();
 
@@ -109,24 +107,24 @@ describe('LottieStateMachine', () => {
 
     expect(dotlottie.stateMachines.length).toEqual(2);
 
-    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id);
+    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id);
 
-    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id);
+    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id);
 
-    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id);
-    expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.descriptor.initial);
-    expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.states);
+    expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id);
+    expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.data.descriptor.initial);
+    expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.data.states);
 
-    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id);
-    expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.descriptor.initial);
-    expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.states);
+    expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id);
+    expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.data.descriptor.initial);
+    expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.data.states);
 
     // Remove a state and check
-    dotlottie.removeStateMachine(PigeonState.descriptor.id);
+    dotlottie.removeStateMachine(PigeonState.id);
 
     expect(dotlottie.stateMachines.length).toEqual(1);
 
-    expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.descriptor.id);
+    expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.id);
 
     // dotlottie.download('test_02_with_states.lottie');
   });
@@ -155,7 +153,7 @@ describe('LottieStateMachine', () => {
 
     expect(dotlottie.manifest.stateMachines?.length).toEqual(2);
 
-    const values = [PigeonState.descriptor.id, SmileyWifi.descriptor.id];
+    const values = [{ id: PigeonState.id }, { id: SmileyWifi.id }];
 
     if (dotlottie.manifest.stateMachines) {
       dotlottie.manifest.stateMachines.forEach((value, index) => {

diff --git a/packages/dotlottie-js/src/v2/browser/dotlottie.ts b/packages/dotlottie-js/src/v2/browser/dotlottie.ts
@@ -287,10 +287,11 @@ export class DotLottie extends DotLottieCommon {
                 throw new DotLottieError('Invalid theme id');
               }
 
-              manifest.themes?.forEach((givenThemeId) => {
-                if (givenThemeId === themeId) {
+              manifest.themes?.forEach((theme) => {
+                if (theme.id === themeId) {
                   dotlottie.addTheme({
-                    id: givenThemeId,
+                    id: theme.id,
+                    name: theme.name,
                     data: JSON.parse(decodedStr),
                   });
                 }
@@ -303,9 +304,13 @@ export class DotLottie extends DotLottieCommon {
                 throw new DotLottieError('Invalid theme id');
               }
 
-              manifest.stateMachines?.forEach((givenStateId) => {
-                if (givenStateId === stateId) {
-                  dotlottie.addStateMachine(JSON.parse(decodedStr));
+              manifest.stateMachines?.forEach((stateMachine) => {
+                if (stateMachine.id === stateId) {
+                  dotlottie.addStateMachine({
+                    id: stateMachine.id,
+                    name: stateMachine.name,
+                    data: JSON.parse(decodedStr),
+                  });
                 }
               });
             }

diff --git a/packages/dotlottie-js/src/v2/common/animation.ts b/packages/dotlottie-js/src/v2/common/animation.ts
@@ -21,6 +21,8 @@ export interface AnimationOptions extends ManifestAnimation {
 }
 
 export class LottieAnimationCommon {
+  protected _name: string | undefined;
+
   protected _data?: AnimationData;
 
   protected _id: string = '';
@@ -46,7 +48,7 @@ export class LottieAnimationCommon {
     this._requireValidOptions(options);
 
     this._id = options.id;
-
+    this._name = options.name;
     this._zipOptions = options.zipOptions ?? {};
 
     if (options.data) this._data = options.data;
@@ -80,6 +82,14 @@ export class LottieAnimationCommon {
     this._id = id;
   }
 
+  public get name(): string | undefined {
+    return this._name;
+  }
+
+  public set name(name: string | undefined) {
+    this._name = name;
+  }
+
   public get background(): string | null {
     return this._background;
   }