Update examples to use up-to-date Typewriter (#23)

While on a call with Seth, we realized that the examples used a heavily outdated version of Typewriter. This PR goes through and updates the JS examples to use a linked version of Typewriter, so that it is always up-to-date.

.gitignore

@@ -70,3 +70,6 @@ dist
 .rpt2_cache
 
 .DS_Store
+
+# We use yarn.lock
+package-lock.json

examples/js/package.json

@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "description": "Example app showcasing Typewriter in Javascript",
   "scripts": {
-    "build": "npm run typewriter-local && next build",
-    "dev": "npm run typewriter-local && next",
+    "build": "yarn run typewriter-local && next build",
+    "preinstall": "cd ../.. && yarn link",
+    "dev": "yarn run typewriter-local && next",
     "typewriter-remote": "typewriter gen-js --trackingPlanId {YOUR_TRACKING_PLAN_ID} --workspaceSlug {YOUR_WORKSPACE_SLUG} --token {YOUR_API_TOKEN} --outputPath ./pages/generated",
     "typewriter-local": "typewriter gen-js --inputPath ../local-tracking-plans/tracking-plan-web.json --outputPath ./pages/generated",
     "generate": "yarn run typewriter-local"
@@ -17,9 +18,6 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
-  "devDependencies": {
-    "typewriter": "1.0.0"
-  },
   "main": "index.js",
   "private": false
 }

examples/js/pages/generated/index.js

@@ -5,7 +5,7 @@ const genOptions = (context = { library: {} }) => ({
       ...context.library,
       typewriter: {
         name: "gen-js",
-        version: "3.2.0"
+        version: "3.2.1"
       }
     }
   }
@@ -110,7 +110,7 @@ export default class Analytics {
         throw new Error(JSON.stringify(validate.errors, null, 2));
       }
     }
-    this.analytics.track("Feed Viewed", props, genOptions(ctx));
+    this.analytics.track("Feed Viewed", props, genOptions(context));
   }
   photoViewed(props, context) {
     if (this.propertyValidation) {
@@ -196,7 +196,7 @@ export default class Analytics {
         throw new Error(JSON.stringify(validate.errors, null, 2));
       }
     }
-    this.analytics.track("Photo Viewed", props, genOptions(ctx));
+    this.analytics.track("Photo Viewed", props, genOptions(context));
   }
   profileViewed(props, context) {
     if (this.propertyValidation) {
@@ -282,6 +282,6 @@ export default class Analytics {
         throw new Error(JSON.stringify(validate.errors, null, 2));
       }
     }
-    this.analytics.track("Profile Viewed", props, genOptions(ctx));
+    this.analytics.track("Profile Viewed", props, genOptions(context));
   }
 }

examples/js/pages/index.js

@@ -3,7 +3,7 @@ import Router from 'next/router'
 import Modal from '../components/Modal'
 import Layout from '../components/Layout'
 
-import * as analytics from './generated'
+import Analytics from './generated'
 
 export default class extends React.Component {
   static getInitialProps () {
@@ -13,7 +13,8 @@ export default class extends React.Component {
   }
 
   componentDidMount () {
-    analytics.feedViewed({ profileId: '3' })
+    const appAnalytics = new Analytics(window.analytics)
+    appAnalytics.feedViewed({ profileId: '3' })
   }
 
   dismissModal () {
@@ -79,4 +80,4 @@ export default class extends React.Component {
       </Layout>
     )
   }
-}
+}

examples/js/pages/photo.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import Frame from '../components/Frame'
 import Layout from '../components/Layout'
-import * as analytics from './generated'
+import Analytics from './generated'
 
 export default class Photo extends React.Component {
   componentDidMount() {
-    analytics.photoViewed({ photoID: '3' })
+    const appAnalytics = new Analytics(window.analytics)
+    appAnalytics.photoViewed({ photoID: '3' })
   }
   render() {
     return (
@@ -29,4 +30,4 @@ export default class Photo extends React.Component {
     </Layout>
     )
   }
-}
+}

examples/js/pages/profile.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import Layout from '../components/Layout'
-import * as analytics from './generated'
+import Analytics from './generated'
 
 export default class Profile extends React.Component {
   componentDidMount() {
-    analytics.profileViewed({ profileId: '3' })
+    const appAnalytics = new Analytics(window.analytics)
+    appAnalytics.profileViewed({ profileId: '3' })
   }
   render() {
     return (