@shopify/react-html - npm Package Compare versions

Comparing version 8.1.3 to 9.0.0

CHANGELOG.md

@@ -13,2 +13,8 @@ # Changelog
 
+## 9.0.0 - 2019-07-03
+
+### Changed
+
+- Updated to integrate with the newest `@shopify/sewing-kit-koa` and `@shopify/react-hydrate` packages. There is a single breaking change that is documented in the [migration guide](./documentation/migration-version-8-to-9). ([#762](https://github.com/Shopify/quilt/pull/762))
+
 ## 8.1.1 - 2019-06-14
@@ -15,0 +21,0 @@

dist/components/index.d.ts

@@ -10,4 +10,4 @@ export { Favicon } from './Favicon';
 export { AppleHomeScreen } from './AppleHomeScreen';
-export { HeadUpdater } from './HeadUpdater';
+export { HtmlUpdater } from './HtmlUpdater';
 export { BodyAttributes } from './BodyAttributes';
 export { HtmlAttributes } from './HtmlAttributes';

dist/components/index.js

@@ -21,4 +21,4 @@ "use strict";
 exports.AppleHomeScreen = AppleHomeScreen_1.AppleHomeScreen;
-var HeadUpdater_1 = require("./HeadUpdater");
-exports.HeadUpdater = HeadUpdater_1.HeadUpdater;
+var HtmlUpdater_1 = require("./HtmlUpdater");
+exports.HtmlUpdater = HtmlUpdater_1.HtmlUpdater;
 var BodyAttributes_1 = require("./BodyAttributes");
@@ -25,0 +25,0 @@ exports.BodyAttributes = BodyAttributes_1.BodyAttributes;

dist/server/components/Html.d.ts

 import * as React from 'react';
+import { HydrationManager } from '@shopify/react-hydrate';
 import { HtmlManager } from '../../manager';
@@ -9,2 +10,3 @@ export interface Asset {
     manager?: HtmlManager;
+    hydrationManager?: HydrationManager;
     children: React.ReactElement<any> | string;
@@ -15,5 +17,6 @@ locale?: string;
     blockingScripts?: Asset[];
+    preloadAssets?: Asset[];
     headMarkup?: React.ReactNode;
     bodyMarkup?: React.ReactNode;
 }
-export default function Html({ manager, children, locale, blockingScripts, scripts, styles, headMarkup, bodyMarkup, }: Props): JSX.Element;
+export default function Html({ manager, hydrationManager, children, locale, blockingScripts, scripts, styles, preloadAssets, headMarkup, bodyMarkup, }: Props): JSX.Element;

dist/server/components/Html.js

@@ -6,2 +6,3 @@ "use strict";
 var server_1 = require("react-dom/server");
+var react_hydrate_1 = require("@shopify/react-hydrate");
 var components_1 = require("../../components");
@@ -12,5 +13,7 @@ var context_1 = require("../../context");
 function Html(_a) {
-    var manager = _a.manager, children = _a.children, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.blockingScripts, blockingScripts = _c === void 0 ? [] : _c, _d = _a.scripts, scripts = _d === void 0 ? [] : _d, _e = _a.styles, styles = _e === void 0 ? [] : _e, _f = _a.headMarkup, headMarkup = _f === void 0 ? null : _f, _g = _a.bodyMarkup, bodyMarkup = _g === void 0 ? null : _g;
-    var _h;
-    var markup = typeof children === 'string' ? children : render(children, manager);
+    var manager = _a.manager, hydrationManager = _a.hydrationManager, children = _a.children, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.blockingScripts, blockingScripts = _c === void 0 ? [] : _c, _d = _a.scripts, scripts = _d === void 0 ? [] : _d, _e = _a.styles, styles = _e === void 0 ? [] : _e, _f = _a.preloadAssets, preloadAssets = _f === void 0 ? [] : _f, _g = _a.headMarkup, headMarkup = _g === void 0 ? null : _g, _h = _a.bodyMarkup, bodyMarkup = _h === void 0 ? null : _h;
+    var _j;
+    var markup = typeof children === 'string'
+        ? children
+        : render(children, { htmlManager: manager, hydrationManager: hydrationManager });
     var extracted = manager && manager.extract();
@@ -23,3 +26,3 @@ var serializationMarkup = extracted
         : null;
-    var managedProps = (_h = {}, _h[utilities_1.MANAGED_ATTRIBUTE] = true, _h);
+    var managedProps = (_j = {}, _j[utilities_1.MANAGED_ATTRIBUTE] = true, _j);
     var titleMarkup = extracted && extracted.title ? (React.createElement("title", tslib_1.__assign({}, managedProps), extracted.title)) : null;
@@ -49,2 +52,3 @@ var metaMarkup = extracted
     });
+    var preloadAssetsMarkup = preloadAssets.map(function (asset) { return (React.createElement("link", { key: asset.path, rel: "prefetch", href: asset.path })); });
     var htmlAttributes = extracted ? extracted.htmlAttributes : {};
@@ -72,3 +76,4 @@ var bodyAttributes = extracted ? extracted.bodyAttributes : {};
             blockingScriptsMarkup,
-            deferredScriptsMarkup),
+            deferredScriptsMarkup,
+            preloadAssetsMarkup),
         React.createElement("body", tslib_1.__assign({}, bodyAttributes),
@@ -80,5 +85,7 @@ React.createElement("div", { id: "app", dangerouslySetInnerHTML: { __html: markup } }),
 exports.default = Html;
-function render(app, manager) {
-    var content = manager == null ? (app) : (React.createElement(context_1.HtmlContext.Provider, { value: manager }, app));
+function render(app, _a) {
+    var htmlManager = _a.htmlManager, hydrationManager = _a.hydrationManager;
+    var hydrationWrapped = hydrationManager ? (React.createElement(react_hydrate_1.HydrationContext.Provider, { value: hydrationManager }, app)) : (app);
+    var content = htmlManager == null ? (app) : (React.createElement(context_1.HtmlContext.Provider, { value: htmlManager }, hydrationWrapped));
     return server_1.renderToString(content);
 }

package.json

 {
   "name": "@shopify/react-html",
-  "version": "8.1.3",
+  "version": "9.0.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "A component to render your react app with no static HTML.",

src/components/index.ts

@@ -10,4 +10,4 @@ export {Favicon} from './Favicon';
 export {AppleHomeScreen} from './AppleHomeScreen';
-export {HeadUpdater} from './HeadUpdater';
+export {HtmlUpdater} from './HtmlUpdater';
 export {BodyAttributes} from './BodyAttributes';
 export {HtmlAttributes} from './HtmlAttributes';

No alert changes

Improved metrics

Total package byte prevSize

108722

2.94%

Number of package files

102

0.99%

Lines of code

2275

2.52%

No dependency changes