@shopify/react-performance - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

		@@ -8,2 +8,10 @@ # Changelog

		## [Unreleased]

		## [1.1.0] - 2019-10-11

		### Added

		- creates a performance object as the default context value [#1102](https://github.com/Shopify/quilt/pull/1102)

		## [1.0.0]
		@@ -10,0 +18,0 @@

dist/context.d.ts

 import React from 'react';
 import { Performance } from '@shopify/performance';
 export declare const PerformanceContext: React.Context<Performance | undefined>;
 export declare const PerformanceContext: React.Context<Performance | null>;

dist/context.js

 @@ -5,2 +5,3 @@ "use strict";
 var react_1 = tslib_1.__importDefault(require("react"));
 exports.PerformanceContext = react_1.default.createContext(undefined);
 var performance_1 = require("@shopify/performance");
 exports.PerformanceContext = react_1.default.createContext(typeof window === 'undefined' ? null : new performance_1.Performance());

package.json

		{
		"name": "@shopify/react-performance",
		"version": "1.0.2",
		"version": "1.1.0",
		"license": "MIT",
		@@ -27,3 +27,4 @@ "description": "Primitives to measure your React application's performance using @shopify/performance",
		"dependencies": {
		"@shopify/performance": "^1.2.1"
		"@shopify/performance": "^1.2.1",
		"@shopify/react-hooks": "^1.2.3"
		},
		@@ -30,0 +31,0 @@ "peerDependencies": {

README.md

		@@ -20,26 +20,5 @@ # `@shopify/react-performance`

		#### Add the context provider

		Before we can use any of the components or hooks in the package we must wrap our app tree with the `PerformanceContext.Provider` component.

		```tsx
		// App.tsx
		import React from 'react';
		import {Performance, PerformanceContext} from '@shopify/react-performance';

		// in a Server-Side-Rendering enabled app you will likely only want to instantiate this if `document` is defined.
		const performance = new Performance();

		function App() {
		return (
		<PerformanceContext.Provider value={performance}>
		{/* The rest of your app */}
		</PerformanceContext.Provider>
		);
		}
		```

		#### Display data using NavigationListener

		Now that we have access to `PerformanceContext` we can use the other components and hooks offered by `@shopify/react-performance` anywhere in our tree. To demonstrate, we'll create a component called `LastNavigationDetails` and use it to display some basic data about our app's performance.
		To demonstrate, we'll create a component called `LastNavigationDetails` and use it to display some basic data about our app's performance.

		@@ -75,3 +54,3 @@ ```tsx

		We can render this component anywhere in our tree, but lets do so in our App component from earlier.
		We can render this component anywhere in our application, but lets do so in our App component from earlier.

		@@ -81,14 +60,10 @@ ```tsx
		import React from 'react';
		import {Performance, PerformanceContext} from '@shopify/react-performance';
		import {LastNavigationDetails} from './LastNavigationDetails';

		// in a Server-Side-Rendering enabled app you will likely only want to instantiate this if `document` is defined.
		const performance = new Performance();

		function App() {
		return (
		<PerformanceContext.Provider value={performance}>
		<>
		{/* The rest of your app */}
		<LastNavigationDetails />
		</PerformanceContext.Provider>
		</>
		);
		@@ -221,3 +196,3 @@ }

		A componenr which takes both `id` and `stage` props and uses them to generate a tag for a call to `window.performance.mark` when it is mounted. This can be used to mark specialized moments in your applications startup, or a specific interaction.
		A component which takes both `id` and `stage` props and uses them to generate a tag for a call to `window.performance.mark` when it is mounted. This can be used to mark specialized moments in your applications startup, or a specific interaction.

		@@ -224,0 +199,0 @@ ```tsx

@shopify/react-performance - npm Package Compare versions

Improved metrics

Worsened metrics

Dependency changes