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

Fix tests & slight API changes #1045

Merged
merged 8 commits into from
Nov 28, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .babelrc

This file was deleted.

5 changes: 5 additions & 0 deletions .changeset/gorgeous-lamps-chew.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'style-dictionary': minor
---

options.log to be respected in all error logging, including platform specific logs.
5 changes: 5 additions & 0 deletions .changeset/light-games-occur.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'style-dictionary': major
---

BREAKING: StyleDictionaryInstance.properties & .allProperties have been removed. They were deprecated in v3 in favor of .tokens and .allTokens.
67 changes: 67 additions & 0 deletions .changeset/unlucky-cameras-draw.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
---
'style-dictionary': major
---

BREAKING: StyleDictionary to be initialized with a new API and have async methods. Use:

```js
import StyleDictionary from 'style-dictionary';

/**
* old:
* const sd = StyleDictionary.extend({ source: ['tokens.json'], platforms: {} });
* sd.buildAllPlatforms();
*/
const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
await sd.buildAllPlatforms();
```

You can still extend a dictionary instance with an extended config, but `.extend()` is only used for this, it is no longer used to initialize the first instance:

```js
import StyleDictionary from 'style-dictionary';

const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
const extended = await sd.extend({
fileHeader: {
myFileHeader: (defaultMessage) => {
return [...defaultMessage, 'hello, world!'];
}
}
});
```

To ensure your initialized StyleDictionary instance is fully ready and has imported all your tokens, you can await `hasInitialized`:

```js
import StyleDictionary from 'style-dictionary';

const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
await sd.hasInitialized;
console.log(sd.allTokens);
```

For error handling and testing purposes, you can also manually initialize the style-dictionary config:

```js
import StyleDictionary from 'style-dictionary';

const sd = new StyleDictionary({ source: ['tokens.js'], platforms: {} }, { init: false });
try {
await sd.init();
} catch(e) {
// handle error, e.g. when tokens.js file has syntax errors and cannot be imported
}
console.log(sd.allTokens);
```

The main reason for an initialize step after class instantiation is that async constructors are not a thing in JavaScript, and if you return a promise from a constructor to "hack it", TypeScript will eventually trip over it.

Due to being able to dynamically (asynchronously) import ES Modules rather than synchronously require CommonJS modules, we had to make the APIs asynchronous, so the following methods are now async:

- extend
- exportPlatform
- buildAllPlatforms & buildPlatform
- cleanAllPlatforms & cleanPlatform

In a future release, most other methods will be made async or support async as well, such as parsers, transforms, formats etc.
8 changes: 3 additions & 5 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,21 @@
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["jest"],
"env": {
"node": true,
"mocha": true,
"jest": true
"es6": true
},
"globals": {
"Buffer": true,
"escape": true
},
"extends": ["eslint:recommended", "plugin:jest/recommended"],
"extends": ["eslint:recommended"],
"rules": {
"no-console": 0,
"no-unused-vars": 1,
"no-control-regex": 0,
"comma-dangle": 0,
"no-prototype-builtins": 0,
"jest/valid-title": 0
"no-prototype-builtins": 0
}
}
15 changes: 8 additions & 7 deletions .github/workflows/verify.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,21 @@ jobs:
- uses: actions/checkout@v2

- name: Setup Node ${{ matrix.node-version }}
uses: actions/setup-node@v2
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'

- name: Install Dependencies
run: npm ci

- name: Linting & Formatting
run: npm run lint

- name: Tests
run: npm run test
- name: Node tests
run: npm run test:node

# in case we use playwright & @web/test-runner in the future
# - name: Install chromium
# run: npx playwright install-deps chromium
- name: Install chromium
run: npx playwright install --with-deps chromium

- name: Browser tests
run: npm run test:browser
2 changes: 1 addition & 1 deletion .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
.eslintrc.json
.editorconfig
images/
test/
__tests__/
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.changeset/
.changeset/
**/*.snap.js
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ We separate each function/method into its own file and group them into directori

Any new features should implement the proper unit tests. We use Jest to test our framework.

If you are adding a new transform, action, or format: please add new unit tests. You can see examples in test/formats.
If you are adding a new transform, action, or format: please add new unit tests. You can see examples in **tests**/formats.

## Documentation

Expand Down
Loading
Loading