feat(types): cleaning up our type definitions

__tests__/formats/__snapshots__/all.test.js.snap

@@ -744,7 +744,23 @@ exports[`formats all should match typescript/module-declarations snapshot 1`] =
  */
 
 export default tokens;
-declare interface DesignToken { value: string; name?: string; path?: string[]; comment?: string; attributes?: any; original?: any; }
+
+declare interface DesignToken {
+  value: any;
+  name?: string;
+  comment?: string;
+  themeable?: boolean;
+  attributes?: {
+    category?: string;
+    type?: string;
+    item?: string;
+    subitem?: string;
+    state?: string;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
 declare const tokens: {
   \\"color\\": {
     \\"red\\": DesignToken

__tests__/formats/typeScriptEs6Declarations.test.js

@@ -10,11 +10,11 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-var fs = require('fs-extra');
-var helpers = require('../__helpers');
-var formats = require('../../lib/common/formats');
+const formats = require('../../lib/common/formats');
+const createDictionary = require('../../lib/utils/createDictionary');
+const createFormatArgs = require('../../lib/utils/createFormatArgs');
 
-var file = {
+const file = {
   "destination": "__output/",
   "format": "typescript/es6-declarations",
   "filter": {
@@ -24,46 +24,26 @@ var file = {
   }
 };
 
-var dictionary = {
-  "allProperties": [{
-    "name": "red",
-    "value": "#EF5350",
-    "original": {
-      "value": "#EF5350"
-    },
-    "attributes": {
-      "category": "color",
-      "type": "base",
-      "item": "red",
-      "subitem": "400"
-    },
-    "path": [
-      "color",
-      "base",
-      "red",
-      "400"
-    ]
-  }]
+const properties = {
+  "color": {
+    "red": {"value": "#FF0000"}
+  }
 };
 
-var formatter = formats['typescript/es6-declarations'].bind(file);
+const formatter = formats['typescript/es6-declarations'].bind(file);
 
 describe('formats', () => {
   describe('typescript/es6-declarations', () => {
-    beforeEach(() => {
-      helpers.clearOutput();
-    });
-
-    afterEach(() => {
-      helpers.clearOutput();
-    });
-
     it('should be a valid TS file', () => {
-      const declarations = './__tests__/__output/output.d.ts';
-      fs.writeFileSync(declarations, formatter(dictionary) );
+      const dictionary = createDictionary({ properties });
+      const output = formatter(createFormatArgs({
+        dictionary,
+        file,
+        platform: {},
+      }), {}, file);
 
       // get all lines that begin with export
-      const lines = fs.readFileSync(declarations, 'utf-8')
+      const lines = output
         .split('\n')
         .filter(l => l.indexOf('export') >= 0);
 

__tests__/formats/typeScriptModuleDeclarations.test.js

@@ -10,11 +10,11 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-var fs = require('fs-extra');
-var helpers = require('../__helpers');
-var formats = require('../../lib/common/formats');
+const formats = require('../../lib/common/formats');
+const createDictionary = require('../../lib/utils/createDictionary');
+const createFormatArgs = require('../../lib/utils/createFormatArgs');
 
-var file = {
+const file = {
   "destination": "__output/",
   "format": "typescript/module-declarations",
   "filter": {
@@ -24,11 +24,9 @@ var file = {
   }
 };
 
-var dictionary = {
-  "properties": {
-    "color": {
-      "red": {"value": "#FF0000"}
-    }
+const properties = {
+  "color": {
+    "red": {"value": "#FF0000"}
   }
 };
 
@@ -37,20 +35,16 @@ var formatter = formats['typescript/module-declarations'].bind(file);
 
 describe('formats', () => {
   describe('typescript/module-declarations', () => {
-    beforeEach(() => {
-      helpers.clearOutput();
-    });
-
-    afterEach(() => {
-      helpers.clearOutput();
-    });
-
     it('should be a valid TS file', () => {
-      const declarations = './__tests__/__output/output-module.d.ts';
-      fs.writeFileSync(declarations, formatter(dictionary) );
+      const dictionary = createDictionary({ properties });
+      const output = formatter(createFormatArgs({
+        dictionary,
+        file,
+        platform: {},
+      }), {}, file);
 
       // get all lines that have DesignToken
-      const lines = fs.readFileSync(declarations, 'utf-8')
+      const lines = output
         .split('\n')
         .filter(l => l.indexOf(': DesignToken') >= 0);
 
@@ -60,5 +54,4 @@ describe('formats', () => {
       });
     });
   });
-
 });

lib/common/formats.js

@@ -12,6 +12,7 @@
  */
 
 const fs = require('fs');
+const path = require('path');
 const _template = require('lodash/template');
 const GroupMessages = require('../utils/groupMessages');
 const { fileHeader, formattedVariables, iconsWithPrefix, minifyDictionary, sortByReference, createPropertyFormatter, sortByName } = require('./formatHelpers');
@@ -389,8 +390,8 @@ module.exports = {
    * export const ColorBackgroundAlt : string;
    * ```
    */
-  'typescript/es6-declarations': function(dictionary) {
-    return fileHeader(this.options) +
+  'typescript/es6-declarations': function({dictionary, file}) {
+    return fileHeader({file}) +
       dictionary.allProperties.map(function(prop) {
         var to_ret_prop = 'export const ' + prop.name + ' : string;';
         if (prop.comment)
@@ -452,7 +453,8 @@ module.exports = {
    * });
    * ```
    */
-  'typescript/module-declarations': function(dictionary) {
+  'typescript/module-declarations': function({dictionary, file, options}) {
+    const {moduleName=`tokens`} = options;
     function treeWalker(obj) {
       let type = Object.create(null);
       let has = Object.prototype.hasOwnProperty.bind(obj);
@@ -468,13 +470,27 @@ module.exports = {
       }
       return type;
     }
+    const designTokenInterface = fs.readFileSync(
+      path.resolve(__dirname, `../../types/DesignToken.d.ts`), {encoding:'UTF-8'}
+    );
+
+    // get the first and last lines to add to the format by
+    // looking for the first and last single-line comment
+    const lines = designTokenInterface
+      .split('\n');
+    const firstLine = lines.indexOf(`//start`) + 1;
+    const lastLine = lines.indexOf(`//end`);
+
+    const output = fileHeader({file}) +
+`export default ${moduleName};
 
-    var file = fileHeader(this.options) +
-      'export default tokens;\n' +
-      'declare interface DesignToken { value: string; name?: string; path?: string[]; comment?: string; attributes?: any; original?: any; }\n' +
-      'declare const tokens: ' +
-      JSON.stringify(treeWalker(dictionary.properties), null, 2);
-    return file.replace(/"DesignToken"/g,'DesignToken');
+declare ${lines.slice(firstLine, lastLine).join(`\n`)}
+
+declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), null, 2)}`;
+
+    // JSON stringify will quote strings, because this is a type we need
+    // it unquoted.
+    return output.replace(/"DesignToken"/g,'DesignToken');
   },
 
   // Android templates
@@ -683,9 +699,9 @@ module.exports = {
    * @example
    * ```kotlin
    * package com.example.tokens;
-   * 
+   *
    * import androidx.compose.ui.graphics.Color
-   * 
+   *
    * object StyleDictionary {
    *  val colorBaseRed5 = Color(0xFFFAF3F2)
    * }