fix(formats): handle DTCG-format tokens in typescript/es6-declarations

- add functionalty to handle comment and $description - update tests - update snapshots Signed-off-by: Tobias Kuppens Groot <[email protected]>
amzn · Dec 9, 2024 · 2966cfd · 2966cfd
1 parent e03f5f2
commit 2966cfd
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 30 deletions.
diff --git a/.changeset/beige-hounds-unite.md b/.changeset/beige-hounds-unite.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+handle DTCG-format tokens in typescript/es6-declarations formatter
diff --git a/__tests__/formats/__snapshots__/typeScriptEs6Declarations.test.snap.js b/__tests__/formats/__snapshots__/typeScriptEs6Declarations.test.snap.js
@@ -12,3 +12,36 @@ export const fontFamily: '"Source Sans Pro", Arial, sans-serif';
 `;
 /* end snapshot formats typescript/es6-declarations with outputStringLiterals should match snapshot */
 
+snapshots["formats typescript/es6-declarations without outputStringLiterals should match snapshot"] = 
+`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/** Used for errors */
+export const colorRed: string;
+export const fontFamily: string;
+`;
+/* end snapshot formats typescript/es6-declarations without outputStringLiterals should match snapshot */
+
+snapshots["formats typescript/es6-declarations with DTCG tokens and outputStringLiterals should match snapshot"] = 
+`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/** Used for errors */
+export const colorRed: "#FF0000";
+export const fontFamily: '"Source Sans Pro", Arial, sans-serif';
+`;
+/* end snapshot formats typescript/es6-declarations with DTCG tokens and outputStringLiterals should match snapshot */
+
+snapshots["formats typescript/es6-declarations with DTCG tokens and without outputStringLiterals should match snapshot"] = 
+`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/** Used for errors */
+export const colorRed: string;
+export const fontFamily: string;
+`;
+/* end snapshot formats typescript/es6-declarations with DTCG tokens and without outputStringLiterals should match snapshot */
+
diff --git a/__tests__/formats/typeScriptEs6Declarations.test.js b/__tests__/formats/typeScriptEs6Declarations.test.js
@@ -39,18 +39,44 @@ const tokens = {
   },
 };
 
+const DTCGTokens = {
+  color: {
+    red: {
+      $description: 'Used for errors',
+      $type: 'color',
+      $value: '#FF0000',
+      name: 'colorRed',
+    },
+  },
+  font: {
+    family: {
+      $type: 'fontFamily',
+      $value: '"Source Sans Pro", Arial, sans-serif',
+      name: 'fontFamily',
+    },
+  },
+};
+
 const format = formats[typescriptEs6Declarations];
 
 describe('formats', () => {
   describe(typescriptEs6Declarations, () => {
+    const formatArgs = (usesDtcg, customFile) =>
+      createFormatArgs({
+        dictionary: {
+          tokens: usesDtcg ? DTCGTokens : tokens,
+          allTokens: convertTokenData(usesDtcg ? DTCGTokens : tokens, {
+            output: 'array',
+            usesDtcg,
+          }),
+        },
+        file: customFile ?? file,
+        platform: {},
+        options: { usesDtcg },
+      });
+
     it('should be a valid TS file', async () => {
-      const output = await format(
-        createFormatArgs({
-          dictionary: { tokens, allTokens: convertTokenData(tokens, { output: 'array' }) },
-          file,
-          platform: {},
-        }),
-      );
+      const output = await format(formatArgs(false));
 
       // get all lines that begin with export
       const lines = output.split('\n').filter((l) => l.indexOf('export') >= 0);
@@ -61,21 +87,50 @@ describe('formats', () => {
       });
     });
 
+    it('without outputStringLiterals should match snapshot', async () => {
+      const customFile = {
+        ...file,
+        options: {
+          outputStringLiterals: false,
+        },
+      };
+      const output = await format(formatArgs(false, customFile));
+
+      await expect(output).to.matchSnapshot();
+    });
+
     it('with outputStringLiterals should match snapshot', async () => {
       const customFile = {
         ...file,
         options: {
           outputStringLiterals: true,
         },
       };
+      const output = await format(formatArgs(false, customFile));
+
+      await expect(output).to.matchSnapshot();
+    });
 
-      const output = await format(
-        createFormatArgs({
-          dictionary: { tokens, allTokens: convertTokenData(tokens, { output: 'array' }) },
-          file: customFile,
-          platform: {},
-        }),
-      );
+    it('with DTCG tokens and outputStringLiterals should match snapshot', async () => {
+      const customFile = {
+        ...file,
+        options: {
+          outputStringLiterals: true,
+        },
+      };
+      const output = await format(formatArgs(true, customFile));
+
+      await expect(output).to.matchSnapshot();
+    });
+
+    it('with DTCG tokens and without outputStringLiterals should match snapshot', async () => {
+      const customFile = {
+        ...file,
+        options: {
+          outputStringLiterals: false,
+        },
+      };
+      const output = await format(formatArgs(true, customFile));
 
       await expect(output).to.matchSnapshot();
     });

diff --git a/lib/common/formats.js b/lib/common/formats.js
@@ -730,22 +730,23 @@ const formats = {
       formatting: getFormattingCloneWithoutPrefix(formatting),
       options,
     });
-    const content =
-      header +
-      dictionary.allTokens
-        .map(function (token) {
-          let to_ret_token = '';
-          if (token.comment) to_ret_token += '/** ' + token.comment + ' */\n';
-          to_ret_token +=
-            'export const ' +
-            token.name +
-            ' : ' +
-            getTypeScriptType(options.usesDtcg ? token.$value : token.value, options) +
-            ';';
-          return to_ret_token;
-        })
-        .join('\n') +
-      '\n';
+    const content = [
+      header,
+      dictionary.allTokens.map((token) => {
+        const typescriptType = getTypeScriptType(
+          options.usesDtcg ? token.$value : token.value,
+          options,
+        );
+        const comment = options.usesDtcg ? token.$description : token.comment;
+
+        return [
+          `${comment ? `/** ${comment} */` : ''}`,
+          `export const ${token.name} : ${typescriptType};`,
+        ].join('\n');
+      }),
+    ]
+      .flat()
+      .join('');
     return formatJS(content, true);
   },