Mark the package as side-effect free

[connor4312]

Adding sideEffects: false in the package.json indicates to bundlers (e.g. Webpack) that the package is side-effect free, which allows it to tree shake imports and reduce code size.

[hawkticehurst]

@connor4312 Thanks for the suggestion! I've never come across this field before but I quite like the idea of it!

After reading the doc you sent I think (??) we may have one side effect in the form of the utility script in charge of applying VS Code theme colors to components.

With that said it seems like we can just add an array declaring the side effects of the package and that will be better than not declaring the field at all:

"sideEffects": ['./src/utilities/theme/applyTheme.js']

[connor4312]

Perhaps a better way would be wrapping the "create" function so that the first time a token is created, that handler gets installed

vscode-webview-ui-toolkit/src/design-tokens.ts

Line 6 in ced445b

const {create} = DesignToken;

Something like

let installedHandler = false;

function create<T>(name: string) {
  if (!installedHandler) {
    addWindowListener();
    installedHandler = true;
  }

  return DesignToken.create<T>(name)
} 

That way the handler is only installed when a token that needs it is consumed, and you don't need to do anything special with the sideEffects flag 🙂 (I'm also not sure if other bundlers would respect anything other than true/false)

[hawkticehurst]

Ooh, yep that feels like a winner. Thank you (again) for the suggestions! 🙂

(This makes me quite happy too because I had always felt slightly icky leaving that script to live in the global scope and somewhat unattached from the rest of the toolkit.)

[hawkticehurst]

@connor4312 So I implemented these changes about 2 weeks ago and ended up running into a circular dependency that breaks the toolkit design token instantiation.

I got pulled away to work on some other toolkit priorities and still haven't quite gotten back to this issue yet, but in the meantime, I thought I would send a link to the dev branch your way in the hopes that a second pair of eyes might see an alternative/solution to this that I haven't yet.

• applyTheme.ts
• design-tokens.ts
• tokenMappings.ts

Screenshots of Issue

[connor4312]

Perhaps have this in design-tokens.ts

export const tokenMappings: {[index: string]: CSSDesignToken<string>} =  {}

and change the create signature to create<T>(name: string, vscodeThemeVar?: string). If passed in, it can be added to the tokenMappings object, and the tokenMappings object can be passed by reference when calling initThemeChangeListener

[hawkticehurst]

Oh, thank you! I'll give it a try once I have a free moment.