Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add options.outputStringLiterals to typescript/es6-declarations #857

Merged

Conversation

isaac-y-baron
Copy link
Contributor

@isaac-y-baron isaac-y-baron commented Aug 30, 2022

Issue #: 905

Description of changes:
Problem:
Currently, the typescript/es6-declarations format assigns string tokens the type string. As a result, tokens are un-assignable to stricter types, such as string literal unions, without type assertion. The assignment of type string to tokens with string values does not align with Typescript's built-in type inference, which assigns string-literal types to string variables.

Solution:
Add feature flag options.outputStringLiterals to the typescript/es6-declarations format's interface. If this boolean option is set to true, tokens with string values will be assigned string-literal types in the outputted files.

Example (current):

// tokens/config.js (incomplete style-dictionary config)
module.exports = {
  platforms: {
    js: {
      files: [
        {
          destination: "globals.d.ts",
          format: "typescript/es6-declarations",
        },
      ],
    },
  },
}

// tokens/dist/myComponent.js
module.exports = {
  myComponentSize: "small"
}

// tokens/dist/myComponent.d.ts
export const myComponentSize : string;

// myComponent.ts
import { myComponentSize } from "tokens"

interface MyComponentOptions {
  size: "small" | "medium" | "large";  
}

const options: MyComponentOptions = {
  size: myComponentSize   // TS Error: Type 'string' is not assignable to type '"small" | "medium" | "large"'
}

Example with suggested change:

// tokens/config.js (incomplete style-dictionary config)
module.exports = {
  platforms: {
    js: {
      files: [
        {
          destination: "globals.d.ts",
          format: "typescript/es6-declarations",
          options: {
            outputStringLiterals: true,
          },
        },
      ],
    },
  },
}

// tokens/dist/myComponent.js
module.exports = {
  myComponentSize: "small"
}

// tokens/dist/myComponent.d.ts
export const myComponentSize : "small";   // type has been updated from string to "small"

// myComponent.ts
import { myComponentSize } from "tokens"

interface MyComponentOptions {
  size: "small" | "medium" | "large";  
}

const options: MyComponentOptions = {
  size: myComponentSize   // No error!
}

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

@@ -40,7 +38,7 @@ describe('formats', () => {
dictionary,
file,
platform: {},
}), {}, file);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the 2nd and 3rd argument here because createFormatArgs only has the one options parameter.

@isaac-y-baron
Copy link
Contributor Author

Hi!

Thanks in advance to repo maintainers. Would it be help to create an issue to discuss?

Copy link
Member

@dbanksdesign dbanksdesign left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@dbanksdesign dbanksdesign merged commit 0c31718 into amzn:main Jan 3, 2023
@christianvuerings
Copy link
Contributor

@dbanksdesign Would you be able to create a release which includes this commit?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants