lemonmade

export default app({
  name: 'shopify-web',
  kind: AppKind.Admin,
  entries: [
    browser({
      polaris: true,
      targets: [
        BrowserTarget.Admin,
        BrowserTarget.LatestEvergreen,
      ],

lemonmade

// in @shopify/polaris-adapter
enum Action {
  Replace,
  Augment,
  Ignore,
}

type Behavior<Props> =
  | {action: Action.Ignore}
  | {

lemonmade

import {StatsD} from 'hot-shots';

const statsd = new Client({
  host: process.env.STATSD_HOST,
  port: process.env.STATSD_PORT,
  prefix: 'ShopifyWeb.',
});

// An array of objects with some details about browser events
// (time to first byte, first paint, etc)

lemonmade

• Typings. We developed our own typescript/ GraphQL thing (https://github.com/Shopify/graphql-tools-web/tree/master/packages/graphql-typescript-definitions). A few reasons:
  • Types alongside GraphQL files themselves
  • Good tree shaking for “real” enum types
  • Include the type in the GraphQL document definition so that types for Query/ graphql were automatically inferred
  • Better typings for things like variables
  • Smart types to support some testing infrastructure like https://github.com/Shopify/graphql-tools-web/tree/master/packages/graphql-fixtures
• Server rendering: we wrote our own bridging to make it work with the rest of our server side extraction (https://github.com/Shopify/quilt/tree/master/packages/react-effect-apollo)
• Size: Apollo is about 30K gzipped all told, maybe a little more with the dependencies
• Speed: seeing some expensive queries take 30+ ms to actually apply to the cache
• Cache: not really clear how much the cache API is meant to handle. We have some things we’d love to see,

lemonmade

!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s="./src/index.js")}({"./src/index.js":function(e,n,t){"use strict";t.r(n),function(){var e;(e=self.shopify).extend.app

lemonmade

import * as Sentry from '@sentry/browser';

Sentry.init({
  transport: Sentry.Transports.FetchTransport,
});