lemonmade

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

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

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

• 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

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

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

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

lemonmade

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

lemonmade

import {utility} from './support';

jest.mock('./support', () => ({
  ...require.requireActual('./support'),
  utility: jest.fn(),
}));

lemonmade

import {Component} from 'react';

const cache = new WeakMap<Component<any, any>, Map<string, any>>();

export function toggleState<S>(component: Component<any, S>, key: keyof S) {
  const cachedToggles = cache.get(component) || new Map();
  if (cachedToggles.has(key)) { return cachedToggles.get(key); }

  const toggle = () => component.setState((state) => ({[key]: !state[key]}));
  cachedToggles.set(key, toggle);

lemonmade

import {DataProxy} from 'apollo-client/data/proxy';
import {
  ApolloClient,
} from 'apollo-client';
import {DocumentNode} from 'graphql';
import {get} from 'lodash';

import {Status} from '../network';

import stagedFileUploadMutation, {StagedFileUploadMutationData} from './StagedFileUploadMutation.graphql';

lemonmade

// @flow

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

type TestDetails<T: HTMLElement> = {
  node: HTMLElement,
};

type Props = {