feat: 🎸 represent themes data as json (lottie slots)

.changeset/wild-queens-invent.md

@@ -0,0 +1,5 @@
+---
+"@dotlottie/dotlottie-js": minor
+---
+
+feat: 🎸 represent themes data as json (lottie slots)

packages/dotlottie-js/jasmine/tsup.config.js

@@ -17,7 +17,6 @@ export default defineConfig(({ platform }) => {
     noExternal: platform === 'browser' ? ['fflate', 'browser-image-hash', 'valibot'] : ['browser-image-hash'],
     loader: {
       '.lottie': 'binary',
-      '.lss': 'text',
     },
     outExtension: ({ format }) => ({
       js: `.${format === 'esm' ? 'mjs' : format}`,

packages/dotlottie-js/src/common/dotlottie-theme-common.ts

@@ -7,15 +7,17 @@ import type { ZipOptions } from 'fflate';
 import type { LottieAnimationCommon } from './lottie-animation-common';
 import { createError, isValidURL } from './utils';
 
+type Data = Record<string, unknown>;
+
 export interface ThemeOptions {
-  data?: string;
+  data?: Data;
   id: string;
   url?: string;
   zipOptions?: ZipOptions;
 }
 
 export class LottieThemeCommon {
-  protected _data?: string;
+  protected _data?: Data;
 
   protected _id: string = '';
 
@@ -70,11 +72,11 @@ export class LottieThemeCommon {
     this._url = url;
   }
 
-  public get data(): string | undefined {
+  public get data(): Data | undefined {
     return this._data;
   }
 
-  public set data(data: string | undefined) {
+  public set data(data: Data | undefined) {
     this._requireValidData(data);
 
     this._data = data;
@@ -91,7 +93,7 @@ export class LottieThemeCommon {
 
     this._requireValidData(this._data);
 
-    return this._data;
+    return JSON.stringify(this._data);
   }
 
   public addAnimation(animation: LottieAnimationCommon): void {
@@ -110,17 +112,15 @@ export class LottieThemeCommon {
     if (!url || !isValidURL(url)) throw createError('Invalid theme url');
   }
 
-  private _requireValidData(data: string | undefined): asserts data is string {
-    // eslint-disable-next-line no-warning-comments
-    // TODO: validate lottie style sheets using lottie-styler
-    if (typeof data !== 'string' || !data) throw createError('Invalid theme data');
+  private _requireValidData(data: Data | undefined): asserts data is Data {
+    if (typeof data !== 'object') throw createError('Invalid theme data');
   }
 
   private async _loadDataFromUrl(url: string): Promise<void> {
     try {
       const response = await fetch(url);
 
-      const data = await response.text();
+      const data = await response.json();
 
       this._data = data;
     } catch (error) {

packages/dotlottie-js/src/common/utils.ts

@@ -953,11 +953,14 @@ export async function getAnimations(
  * const themes = await getThemes(dotLottie);
  * ```
  */
-export async function getThemes(dotLottie: Uint8Array, filter?: UnzipFileFilter): Promise<Record<string, string>> {
-  const themesMap: Record<string, string> = {};
+export async function getThemes(
+  dotLottie: Uint8Array,
+  filter?: UnzipFileFilter,
+): Promise<Record<string, Record<string, unknown>>> {
+  const themesMap: Record<string, Record<string, unknown>> = {};
 
   const unzippedThemes = await unzipDotLottie(dotLottie, (file) => {
-    const name = file.name.replace('themes/', '').replace('.lss', '');
+    const name = file.name.replace('themes/', '').replace('.json', '');
 
     return file.name.startsWith('themes/') && (!filter || filter({ ...file, name }));
   });
@@ -966,9 +969,9 @@ export async function getThemes(dotLottie: Uint8Array, filter?: UnzipFileFilter)
     const data = unzippedThemes[themePath];
 
     if (data instanceof Uint8Array) {
-      const themeId = themePath.replace('themes/', '').replace('.lss', '');
+      const themeId = themePath.replace('themes/', '').replace('.json', '');
 
-      themesMap[themeId] = strFromU8(data, false);
+      themesMap[themeId] = JSON.parse(strFromU8(data, false));
     }
   }
 
@@ -998,16 +1001,16 @@ export async function getTheme(
   dotLottie: Uint8Array,
   themeId: string,
   filter?: UnzipFileFilter,
-): Promise<string | undefined> {
-  const themeFilename = `themes/${themeId}.lss`;
+): Promise<Record<string, unknown> | undefined> {
+  const themeFilename = `themes/${themeId}.json`;
 
   const unzippedTheme = await unzipDotLottieFile(dotLottie, themeFilename, filter);
 
   if (typeof unzippedTheme === 'undefined') {
     return undefined;
   }
 
-  return strFromU8(unzippedTheme, false);
+  return JSON.parse(strFromU8(unzippedTheme, false));
 }
 
 /**

packages/dotlottie-js/src/dotlottie.ts

@@ -129,9 +129,9 @@ export class DotLottie extends DotLottieCommon {
     }
 
     for (const theme of this.themes) {
-      const lss = await theme.toString();
+      const themeData = await theme.toString();
 
-      dotlottie[`themes/${theme.id}.lss`] = [strToU8(lss), theme.zipOptions];
+      dotlottie[`themes/${theme.id}.json`] = [strToU8(themeData), theme.zipOptions];
     }
 
     for (const state of this.stateMachines) {
@@ -278,9 +278,9 @@ export class DotLottie extends DotLottieCommon {
                   fileName: key.split('/')[1] || '',
                 }),
               );
-            } else if (key.startsWith('themes/') && key.endsWith('.lss')) {
-              // extract themeId from key as the key = `themes/${themeId}.lss`
-              const themeId = /themes\/(.+)\.lss/u.exec(key)?.[1];
+            } else if (key.startsWith('themes/') && key.endsWith('.json')) {
+              // extract themeId from key as the key = `themes/${themeId}.json`
+              const themeId = /themes\/(.+)\.json/u.exec(key)?.[1];
 
               if (!themeId) {
                 throw createError('Invalid theme id');
@@ -290,7 +290,7 @@ export class DotLottie extends DotLottieCommon {
                 if (theme.id === themeId) {
                   dotlottie.addTheme({
                     id: theme.id,
-                    data: decodedStr,
+                    data: JSON.parse(decodedStr),
                   });
 
                   theme.animations.forEach((animationId) => {

packages/dotlottie-js/src/node/dotlottie.ts

@@ -116,9 +116,9 @@
     }
 
     for (const theme of this.themes) {
-      const lss = await theme.toString();
+      const themeData = await theme.toString();
 
-      dotlottie[`themes/${theme.id}.lss`] = [strToU8(lss), theme.zipOptions];
+      dotlottie[`themes/${theme.id}.json`] = [strToU8(themeData), theme.zipOptions];
     }
 
     for (const state of this.stateMachines) {
@@ -266,9 +266,9 @@
                   fileName: key.split('/')[1] || '',
                 }),
               );
-            } else if (key.startsWith('themes/') && key.endsWith('.lss')) {
-              // extract themeId from key as the key = `themes/${themeId}.lss`
-              const themeId = /themes\/(.+)\.lss/u.exec(key)?.[1];
+            } else if (key.startsWith('themes/') && key.endsWith('.json')) {
+              // extract themeId from key as the key = `themes/${themeId}.json`
+              const themeId = /themes\/(.+)\.json/u.exec(key)?.[1];
 
               if (!themeId) {
                 throw createError('Invalid theme id');
@@ -278,7 +278,7 @@
                 if (theme.id === themeId) {
                   dotlottie.addTheme({
                     id: theme.id,
-                    data: decodedStr,
+                    data: JSON.parse(decodedStr),
                   });
 
                   theme.animations.forEach((animationId) => {
@@ -346,7 +346,7 @@
               }
             }
           }
         } catch (err: any) {
           // throw error as it's invalid json
           throw new DotLottieError(`Invalid manifest inside buffer! ${err.message}`);
         }

packages/dotlottie-js/src/tests/__fixtures__/simple/animation/manifest.json

@@ -1 +1,27 @@
-{"version":"1.0","revision":1,"keywords":"dotLottie","author":"LottieFiles","generator":"dotLottie-js_v2.0","animations":[{"id":"lottie1","direction":1,"speed":1,"playMode":"normal","loop":false,"autoplay":false,"hover":false,"intermission":0}],"themes":[{"id":"theme1","animations":["lottie1"]}]}
+{
+  "version": "1.0",
+  "revision": 1,
+  "keywords": "dotLottie",
+  "author": "LottieFiles",
+  "generator": "@dotlottie/dotlottie-js/node@0.6.2",
+  "animations": [
+    {
+      "id": "lottie1",
+      "direction": 1,
+      "speed": 1,
+      "playMode": "normal",
+      "loop": false,
+      "autoplay": false,
+      "hover": false,
+      "intermission": 0
+    }
+  ],
+  "themes": [
+    {
+      "id": "theme1",
+      "animations": [
+        "lottie1"
+      ]
+    }
+  ]
+}

packages/dotlottie-js/src/tests/__fixtures__/simple/animation/themes/theme1.json

@@ -0,0 +1,14 @@
+{
+    "face_color": {
+        "p": {
+            "a": 0,
+            "k": [
+                1,
+                0,
+                0,
+                1
+            ],
+            "ix": 4
+        }
+    }
+}