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

Make ESM-only and browser-compatible out of the box #1014

Merged
merged 1 commit into from
Oct 22, 2023
Merged

Conversation

jorenbroekema
Copy link
Collaborator

@jorenbroekema jorenbroekema commented Sep 20, 2023

Description of changes:
Converts the entire repository to:

  • ESM-only (modern JS format)
  • Browser-compatible out of the box, by shimming path, glob, fs, modules

Apart from the ESM format changes, the changes you will encounter:

  • Filesystem can be customized, see: https://github.com/amzn/style-dictionary/pull/1014/files#diff-e727e4bdf3657fd1d798edcd6b099d6e092f8573cba266154583a746bba0f346R43-R51
  • Any reliances on "require()" to import JSON files are now using JSON.parse(fs.readFileSync()) instead. For JS files, only ESM is supported, through dynamic imports. Due to dynamic imports being async in nature, some of the APIs have already changed to becoming async and returning promises.
  • Some deprecated stuff, I already removed in this PR, because they tended to be features that were a bit annoying to convert to browser-compatible ESM.
  • Some formatting changes still, sadly, didn't catch everything in the previous PR
  • Changing var to const or let
  • Changing the templates files to be ES Modules, so they can be more easily imported in both NodeJS and the Browser too.

TODOs for next PR, since at Tokens Studio we could really use an early, unstable, prerelease of this change, and the PR is big enough as is:

  • Lots of manual smoke testing in both browser and node environment to find issues early
  • Make the tests work again, to spot regressions, but we should test in a headless browser to spot browser incompatibilities, so we'll have to switch test runner
  • Remove leftover references to properties/allProperties, now is tokens/allTokens

Breaking changes list

  • CommonJS format Configs or Tokens are no longer supported
  • StyleDictionary.extend() is now async, so returns Promise<StyleDictionary.Core> instead of StyleDictionary.Core
  • allProperties/properties was deprecated, is now removed from StyleDictionary.Core in some places (although lots of leftovers still remain in the codebase, to be removed).
  • Templates/registerTemplate were deprecated in favor of formats, now templates is removed.

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

index.js Outdated Show resolved Hide resolved
@jorenbroekema jorenbroekema changed the title Esmify browser Make ESM-only and browser-compatible out of the box Sep 20, 2023
@jorenbroekema jorenbroekema marked this pull request as ready for review September 29, 2023 15:12
@jorenbroekema jorenbroekema requested a review from a team as a code owner September 29, 2023 15:12
@jorenbroekema jorenbroekema force-pushed the esmify-browser branch 2 times, most recently from ee20ed4 to d566b46 Compare October 9, 2023 09:01
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! Just one minor comment/question about importing fs

lib/buildFile.js Outdated Show resolved Hide resolved
@dbanksdesign dbanksdesign merged commit dcbe2fb into v4 Oct 22, 2023
0 of 2 checks passed
@jorenbroekema jorenbroekema deleted the esmify-browser branch October 23, 2023 08:14
@jorenbroekema jorenbroekema self-assigned this Nov 10, 2023
dbanksdesign pushed a commit that referenced this pull request Jun 28, 2024
For a full list of changes see the CHANGELOG.md or the [migration guide](https://styledictionary.com/version-4/migration/) from version 3.x.x to version 4.0.0

* BREAKING: make style-dictionary ESM-only and browser-compatible (#1014)
* Update docs (#1051)
* chore: upgrade glob to latest, set posix:true, verify & fix Windows (#1070)
* chore: fix glob usage in script (#1074)
* fix: glob dependency (#1075)
* chore: release (prerelease) (#1076)
* feat: improve and test ref utils error handling (#1077)
* feat: expose flattenTokens utility (#1079)
* fix: resolved filepath, async parser await (#1083)
* feat: allow deferring transitive transforms from the transformer (#1069)
* feat: support w3c special properties (#1081)
* feat: expose typeW3CDelegate util function (#1087)
* fix: small bug with w3c type delegate util (#1088)
* fix: only run postinstall scripts in non- prod-mode (#1091)
* fix: publish missing script file to npm (#1093)
* fix: dev scripts only run in sd cwd (#1095)
* fix: escape double quotes for ts outputStringLiterals (#1097)
* W3C Syntax refactor to allow value & type token names/groups (#1100)
* feat: support async for all hooks (#1106)
* fix: dtcg option not passed in some places (#1116)
* fix: outputReferenceFallbacks for css/variables formatter (#1113)
* fix: missing type imports (#1118)
* feat: allow transforms to be added on top of transformGroup (#1120)
* chore: fix ref docs mistakes, add DTCG option (#1122)
* feat: remove reliance on CTI, add token type (#1123)
* feat: redesign logging (#1125)
* fix: outputReferences for DTCG spec tokens (#1127)
* feat: allow passing Filesystem volumes to SD instance / extend method (#1128)
* chore: update docs volumes (#1130)
* fix: absolute paths in Node env (#1134)
* feat: add warnings disabled option, fix logging issues (#1136)
* fix(types): add missing type keyword for type export from index.d.ts (#1139)
* Revamp docs (#1141)
* feat: allow outputReferences function, publish filter util for it (#1145)
* feat: move formatHelpers to utils entrypoint (breaking) (#1147)
* chore: add migration docs (#1148)
* Some small docs fixes, and removing docsify (#1149)
* fix: change merging behavior for tokens to override (#1151)
* fix: asset url handling in CSS format (#1153)
* feat: add outputReferencesTransformed utility function (#1154)
* fix: outputReferencesTransformed util handling object-value tokens, unfiltered (#1155)
* chore: fix some docs links (#1159)
* fix: logging to be in sequence per platform (#1161)
* fix: get rid of lodash, refactor templates to ES6 (#1160)
* Format options improvements (#1165)
* feat: turn off generated timestamp by default in file headers (#1174)
* Expand composites (#1169)
* Align Hooks APIs (#1185)
* feat: move fileHeader global prop to hooks.fileHeaders (#1177)
* feat: move filter global prop to hooks.filters, rename matcher to filter (#1179)
* feat: move action global prop to hooks.actions (#1180)
* feat: move parsers global prop to hooks.parsers, apply explicitly (#1181)
* feat: move transformGroup global prop to hooks.transformGroups (#1182)
* feat: move transforms global prop to hooks.transforms, align api (#1183)
* feat: move formats global prop to hooks.formats, align api (#1184)
* fix: color filter now skips invalid colors (#995) (#1188)
* chore: docs mentions extend twice, duplicate (#1192)
* feat: add object-value CSS shorthand transforms (#1194)
* feat: pass options to fileheaders and filters, add unfilteredAllTokens (#1205)
* fix: pass options to transforms filters, live demo main page (#1208)
* chore: allow preselecting playground file (#1209)
* fix: typeDtcgDelegate  at any position, size/rem apply to unitless values (#1210)
* feat: add convert to DTCG spec utilities, file converter docs site (#1200)
* chore: version inject for sd-playground on build (#1216)
* docs(DTCG): Update DTCG docs with latest link and fix full name (#1215)
* chore: add mermaid integration to docs, create architecture (#1221)
* feat: add formatPlatform/formatAllPlatforms methods (#1222)
* fix: allow register hooks override existing (#1223)
* feat: pass dictionary options to preprocessors (#1224)
* feat: pass ref path in getReferences util output (#1226)
* chore: add missing changeset for SD format platform methods (#1227)
* timingFunction and fontFamily props, optional border props (#1229)
* fix: expand on platform level to adjust path prop (#1231)
* fix: fix CLI, update basic example, fix android templates DTCG (#1235)
* feat: allow not throwing on broken refs (#1240)
* feat: recursively expand nested composite tokens (#1244)


---------

Co-authored-by: Andreas Nordahl <andnorda@gmail.com>
Co-authored-by: tkgroot <tkuppensgroo@uos.de>
Co-authored-by: Lukas Oppermann <lukasoppermann@github.com>
Co-authored-by: Lukas Oppermann <oppermann.lukas@gmail.com>
Co-authored-by: Joren Broekema <joren@Jorens-MacBook-Pro.local>
Co-authored-by: Tom Pietrosanti <Rykus0@users.noreply.github.com>
Co-authored-by: Kaelig Deloumeau-Prigent <kaelig@users.noreply.github.com>
Co-authored-by: Daan Vos de Wael <daanvosdewael@users.noreply.github.com>
Co-authored-by: Abel van Beek <abel.van.beek@tromsfylke.no>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

2 participants