Support for Named Exports

I came across this while implementing Typewriter on an internal project. After doing some manual refactoring a few times I think it’d be great to have this baked in into Typewriter.

Currently typewriter exports wraps all your tracking calls inside a class you can instance to execute and allows you to pass an analytics instance. i.e.

Current Status

Show

const genOptions = (context = {}) => ({
  context: {
    ...context,
    typewriter: {
      name: "gen-js",
      version: "5.1.1"
    }
  }
});
export default class Analytics {
  constructor(analytics) {
    this.analytics = analytics || { track: () => null };
  }
  someThingToTrack(props, context) {
    this.analytics.track("Tracking a Thing", props, genOptions(context));
  }
  (... Many other methods)
}

We where using only a few of those tracking methods in our specific project, so we where shipping a lot of unused code that we weren’t able to treeshake. While it might not look like a a huge code reduction if we add the --runtimeValidation false flag, but it is if we want to keep those 😢

So after talking with @colinking on slack, he mentioned making this issue could be a good first step into the discussion.

Proposal

Final export (after running typewriter gen-js with some flags i.e --runtimeValidation false --export class) would look like this:

Show

let analytics = (window && window.analytics) || { track: () => null } 

export const setaAnalytics = (newAnalytics) => { analytics = newAnalytics }

const genOptions = (context = {}) => ({
  context: {
    ...context,
    typewriter: {
      name: 'gen-js',
      version: '5.0.1'
    }
  }
})


export const someThingToTrack = (props, context, callback = () => {}) => {
  analytics.track('Tracking a Thing', props, genOptions(context), callback)
}

Explanation

• Implements a new flag --export with parameters class & named-exports (or functions?)
  • We set class as the default value for it to keep backwards compatibility
• Makes every method now a named export
• Enables a module variable to be the instance of analytics.js
  • Adds method to be able to override that variable
• Adds support for the callback parameter

Final Thoughts

• Easier tree shake / dead code elimination
• Yei for smaller bundle sizes ❤️

[fforres]

We are. I’m a big advocate for protocols / define our tracking-plan ( and tw specially 😄 ) It’s taking me more than I hoped for to get someone that can help us with that 😅, but we are getting there 🤘

[colinking]

❤️ @fforres

HMU if Brex is interested in trying out Typewriter!