Giter VIP home page Giter VIP logo

Comments (6)

spencern avatar spencern commented on May 16, 2024

@aldeed: This should also have some sort of abstraction layer createEvent etc. so that we're not dependent on segment in every component.

from example-storefront.

machikoyasuda avatar machikoyasuda commented on May 16, 2024

Assigning myself for the ✏️ docs portion of this

from example-storefront.

spencern avatar spencern commented on May 16, 2024

@machikoyasuda the docs should be written before writing the code for this issue ideally.

from example-storefront.

mikemurray avatar mikemurray commented on May 16, 2024

Heres an output from MobX spy for reference.

index.js:9 {type: "add", object: RoutingStore, name: "RoutingStore@1", newValue: "", key: "_pathname", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: RoutingStore, name: "RoutingStore@1", newValue: {…}, key: "_query", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "action", name: "[email protected]", object: RoutingStore, arguments: Array(1), spyReportStart: true}
index.js:9 {type: "update", object: RoutingStore, oldValue: "", name: "RoutingStore@1", newValue: "/", …}
index.js:9 {spyReportEnd: true}
index.js:9 {time: 29, spyReportEnd: true}
index.js:9 {type: "action", name: "[email protected]", object: RoutingStore, arguments: Array(1), spyReportStart: true}
index.js:9 {type: "update", object: RoutingStore, oldValue: {…}, name: "RoutingStore@1", newValue: {…}, …}
index.js:9 {spyReportEnd: true}
index.js:9 {time: 8, spyReportEnd: true}
index.js:9 {type: "add", object: AuthStore, name: "AuthStore@4", newValue: "", key: "_token", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "action", name: "[email protected]", object: AuthStore, arguments: Array(1), spyReportStart: true}
index.js:9 {type: "update", object: AuthStore, oldValue: "", name: "AuthStore@4", newValue: "u7cByV6m6cnLjtyb8fr2yJdZkjJH7ISjQGBxRD7h8fb", …}
index.js:9 {spyReportEnd: true}
index.js:9 {time: 6, spyReportEnd: true}
index.js:9 {name: "CatalogItems#32.render()", type: "reaction", spyReportStart: true}
index.js:9 {object: RoutingStore, type: "compute", name: "[email protected]"}
index.js:9 {time: 44, spyReportEnd: true}
index.js:9 {name: "Shop#41.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 9, spyReportEnd: true}
index.js:9 {name: "NavigationTags#82.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 4, spyReportEnd: true}
index.js:9 {name: "AccountDropdown#85.render()", type: "reaction", spyReportStart: true}
index.js:9 {type: "add", object: ProxyComponent, name: "AccountDropdown@10", newValue: null, key: "_anchorEl", …}
index.js:9 {spyReportEnd: true}
index.js:9 {object: ProxyComponent, type: "compute", name: "[email protected]"}
index.js:9 {object: AuthStore, type: "compute", name: "[email protected]"}
index.js:9 {time: 14, spyReportEnd: true}
index.js:9 {name: "CartToggle#105.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 2, spyReportEnd: true}
index.js:9 {name: "NavigationTags#122.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 3, spyReportEnd: true}
index.js:9 {name: "ProductItem#143.render()", type: "reaction", spyReportStart: true}
index.js:9 {type: "add", object: UIStore, name: "UIStore@15", newValue: false, key: "_cartOpen", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: UIStore, name: "UIStore@15", newValue: false, key: "_menuDrawerOpen", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "UIStore@15._appConfig", newValue: {…}, key: "serverRuntimeConfig", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "UIStore@15._appConfig.publicRuntimeConfig", newValue: "http://localhost:3030", key: "externalAssetsUrl", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "UIStore@15._appConfig.publicRuntimeConfig", newValue: "http://localhost:3030/graphql-alpha", key: "graphqlUrl", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "UIStore@15._appConfig", newValue: {…}, key: "publicRuntimeConfig", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: UIStore, name: "UIStore@15", newValue: {…}, key: "_appConfig", …}
index.js:9 {spyReportEnd: true}
index.js:9 {object: UIStore, type: "compute", name: "[email protected]"}
index.js:9 {time: 44, spyReportEnd: true}
index.js:9 {name: "ProductItem#182.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 8, spyReportEnd: true}
index.js:9 {name: "Cart#238.render()", type: "reaction", spyReportStart: true}
index.js:9 {object: UIStore, type: "compute", name: "[email protected]"}
index.js:9 {time: 6, spyReportEnd: true}
index.js:9 {type: "add", object: ProxyComponent, name: "NavigationTags@21", newValue: {…}, key: "_data", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "action", name: "[email protected]", object: ProxyComponent, arguments: Array(1), spyReportStart: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.pageInfo", newValue: "cnBqQ3ZUQkdqaEJpMnhkcm8=", key: "endCursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.pageInfo", newValue: "Y3NlQ0JTU3JKM3Q4SFFTTlA=", key: "startCursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.pageInfo", newValue: false, key: "hasNextPage", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.pageInfo", newValue: "PageInfo", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags", newValue: {…}, key: "pageInfo", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..]", newValue: "Y3NlQ0JTU3JKM3Q4SFFTTlA=", key: "cursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "cmVhY3Rpb24vdGFnOmNzZUNCU1NySjN0OEhRU05Q", key: "_id", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: null, key: "position", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "example-product", key: "name", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "example-product", key: "slug", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: false, key: "isTopLevel", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: ObservableArray, key: "subTagIds", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "Tag", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..]", newValue: {…}, key: "node", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..]", newValue: "TagEdge", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..]", newValue: "cnBqQ3ZUQkdqaEJpMnhkcm8=", key: "cursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "cmVhY3Rpb24vdGFnOnJwakN2VEJHamhCaTJ4ZHJv", key: "_id", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: null, key: "position", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "Shop", key: "name", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "shop", key: "slug", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: true, key: "isTopLevel", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: ObservableArray, key: "subTagIds", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..].node", newValue: "Tag", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..]", newValue: {…}, key: "node", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags.edges[..]", newValue: "TagEdge", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {object: ObservableArray, type: "splice", index: 0, removed: Array(0), added: Array(2), …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags", newValue: ObservableArray, key: "edges", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data.tags", newValue: "TagConnection", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@21._data", newValue: {…}, key: "tags", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "update", object: ProxyComponent, oldValue: {…}, name: "NavigationTags@21", newValue: {…}, …}
index.js:9 {spyReportEnd: true}
index.js:9 {time: 283, spyReportEnd: true}
index.js:9 {type: "action", name: "<unnamed action>", object: ProxyComponent, arguments: Array(2), spyReportStart: true}
index.js:9 {object: ProxyComponent, type: "compute", name: "[email protected]"}
index.js:9 {type: "action", name: "<unnamed action>", object: ProxyComponent, arguments: Array(1), spyReportStart: true}
index.js:9 {time: 8, spyReportEnd: true}
index.js:9 {time: 25, spyReportEnd: true}
index.js:9 {name: "NavigationItemDesktop#350.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 5, spyReportEnd: true}
index.js:9 {type: "add", object: ProxyComponent, name: "NavigationTags@24", newValue: {…}, key: "_data", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "action", name: "[email protected]", object: ProxyComponent, arguments: Array(1), spyReportStart: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.pageInfo", newValue: "cnBqQ3ZUQkdqaEJpMnhkcm8=", key: "endCursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.pageInfo", newValue: "Y3NlQ0JTU3JKM3Q4SFFTTlA=", key: "startCursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.pageInfo", newValue: false, key: "hasNextPage", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.pageInfo", newValue: "PageInfo", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags", newValue: {…}, key: "pageInfo", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..]", newValue: "Y3NlQ0JTU3JKM3Q4SFFTTlA=", key: "cursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "cmVhY3Rpb24vdGFnOmNzZUNCU1NySjN0OEhRU05Q", key: "_id", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: null, key: "position", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "example-product", key: "name", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "example-product", key: "slug", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: false, key: "isTopLevel", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: ObservableArray, key: "subTagIds", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "Tag", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..]", newValue: {…}, key: "node", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..]", newValue: "TagEdge", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..]", newValue: "cnBqQ3ZUQkdqaEJpMnhkcm8=", key: "cursor", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "cmVhY3Rpb24vdGFnOnJwakN2VEJHamhCaTJ4ZHJv", key: "_id", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: null, key: "position", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "Shop", key: "name", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "shop", key: "slug", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: true, key: "isTopLevel", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: ObservableArray, key: "subTagIds", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..].node", newValue: "Tag", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..]", newValue: {…}, key: "node", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags.edges[..]", newValue: "TagEdge", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {object: ObservableArray, type: "splice", index: 0, removed: Array(0), added: Array(2), …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags", newValue: ObservableArray, key: "edges", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data.tags", newValue: "TagConnection", key: "__typename", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "add", object: {…}, name: "NavigationTags@24._data", newValue: {…}, key: "tags", …}
index.js:9 {spyReportEnd: true}
index.js:9 {type: "update", object: ProxyComponent, oldValue: {…}, name: "NavigationTags@24", newValue: {…}, …}
index.js:9 {spyReportEnd: true}
index.js:9 {time: 219, spyReportEnd: true}
index.js:9 {type: "action", name: "<unnamed action>", object: ProxyComponent, arguments: Array(2), spyReportStart: true}
index.js:9 {object: ProxyComponent, type: "compute", name: "[email protected]"}
index.js:9 {type: "action", name: "<unnamed action>", object: ProxyComponent, arguments: Array(1), spyReportStart: true}
index.js:9 {time: 5, spyReportEnd: true}
index.js:9 {time: 13, spyReportEnd: true}
index.js:9 {name: "NavigationMobile#366.render()", type: "reaction", spyReportStart: true}
index.js:9 {object: UIStore, type: "compute", name: "[email protected]"}
index.js:9 {time: 7, spyReportEnd: true}
index.js:9 {name: "ProductItem#182.render()", type: "scheduled-reaction"}
index.js:9 {name: "ProductItem#182.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 4, spyReportEnd: true}
index.js:9 {name: "ProductItem#143.render()", type: "scheduled-reaction"}
index.js:9 {name: "ProductItem#143.render()", type: "reaction", spyReportStart: true}
index.js:9 {time: 4, spyReportEnd: true}

from example-storefront.

aldeed avatar aldeed commented on May 16, 2024

@mikemurray This looks interesting, too. https://github.com/NYTimes/react-tracking

from example-storefront.

spencern avatar spencern commented on May 16, 2024

That NYT project looks nice. Great use of decorators.

from example-storefront.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.