@shopify/react-hydrate - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

build/ts/context.js

@@ -1,6 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HydrationContext = void 0;
-var react_1 = require("react");
-var manager_1 = require("./manager");
-exports.HydrationContext = react_1.createContext(new manager_1.HydrationManager());
+import { createContext } from 'react';
+import { HydrationManager } from './manager';
+export const HydrationContext = createContext(new HydrationManager());

build/ts/hooks.js

@@ -1,9 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHydrationManager = void 0;
-var react_1 = require("react");
-var context_1 = require("./context");
-function useHydrationManager() {
-    return react_1.useContext(context_1.HydrationContext);
+import { useContext } from 'react';
+import { HydrationContext } from './context';
+export function useHydrationManager() {
+    return useContext(HydrationContext);
 }
-exports.useHydrationManager = useHydrationManager;

build/ts/HydrationTracker.js

@@ -1,10 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HydrationTracker = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-var hooks_1 = require("./hooks");
-function HydrationTracker() {
-    var manager = hooks_1.useHydrationManager();
-    react_1.default.useEffect(function () {
+import React from 'react';
+import { useHydrationManager } from './hooks';
+export function HydrationTracker() {
+    const manager = useHydrationManager();
+    React.useEffect(() => {
         manager.hydrated = true;
@@ -14,2 +10,1 @@ }, [manager]);
 }
-exports.HydrationTracker = HydrationTracker;

build/ts/Hydrator.js

@@ -1,20 +0,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Hydrator = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-var react_hooks_1 = require("@shopify/react-hooks");
-var react_effect_1 = require("@shopify/react-effect");
-var context_1 = require("./context");
-var shared_1 = require("./shared");
-exports.Hydrator = react_1.default.memo(function Hydrator(_a) {
-    var _b;
-    var children = _a.children, id = _a.id;
-    var manager = react_1.default.useContext(context_1.HydrationContext);
-    var hydrationId = react_hooks_1.useLazyRef(function () { return manager.hydrationId(id); }).current;
-    var hydrationProps = (_b = {}, _b[shared_1.HYDRATION_ATTRIBUTE] = hydrationId, _b);
-    react_effect_1.useServerEffect(function () { }, manager.effect);
-    return children ? (react_1.default.createElement("div", tslib_1.__assign({}, hydrationProps), children)) : (react_1.default.createElement("div", tslib_1.__assign({}, hydrationProps, { dangerouslySetInnerHTML: {
+import React from 'react';
+import { useLazyRef } from '@shopify/react-hooks';
+import { useServerEffect } from '@shopify/react-effect';
+import { HydrationContext } from './context';
+import { HYDRATION_ATTRIBUTE } from './shared';
+export const Hydrator = React.memo(function Hydrator({ children, id }) {
+    const manager = React.useContext(HydrationContext);
+    const hydrationId = useLazyRef(() => manager.hydrationId(id)).current;
+    const hydrationProps = { [HYDRATION_ATTRIBUTE]: hydrationId };
+    useServerEffect(() => { }, manager.effect);
+    return children ? (React.createElement("div", Object.assign({}, hydrationProps), children)) : (React.createElement("div", Object.assign({}, hydrationProps, { dangerouslySetInnerHTML: {
             __html: manager.getHydration(hydrationId) || '',
         } })));
 });

build/ts/index.js

@@ -1,13 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var context_1 = require("./context");
-Object.defineProperty(exports, "HydrationContext", { enumerable: true, get: function () { return context_1.HydrationContext; } });
-var manager_1 = require("./manager");
-Object.defineProperty(exports, "HydrationManager", { enumerable: true, get: function () { return manager_1.HydrationManager; } });
-Object.defineProperty(exports, "EFFECT_ID", { enumerable: true, get: function () { return manager_1.EFFECT_ID; } });
-var hooks_1 = require("./hooks");
-Object.defineProperty(exports, "useHydrationManager", { enumerable: true, get: function () { return hooks_1.useHydrationManager; } });
-var Hydrator_1 = require("./Hydrator");
-Object.defineProperty(exports, "Hydrator", { enumerable: true, get: function () { return Hydrator_1.Hydrator; } });
-var HydrationTracker_1 = require("./HydrationTracker");
-Object.defineProperty(exports, "HydrationTracker", { enumerable: true, get: function () { return HydrationTracker_1.HydrationTracker; } });
+export { HydrationContext } from './context';
+export { HydrationManager, EFFECT_ID } from './manager';
+export { useHydrationManager } from './hooks';
+export { Hydrator } from './Hydrator';
+export { HydrationTracker } from './HydrationTracker';

build/ts/manager.js

@@ -1,19 +0,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HydrationManager = exports.EFFECT_ID = void 0;
-var tslib_1 = require("tslib");
-var shared_1 = require("./shared");
-var DEFAULT_HYDRATION_ID = Symbol('defaultId');
-var DEFAULT_HYDRATION_PREFIX = 'hydration';
-exports.EFFECT_ID = Symbol('react-hydrate');
-var HydrationManager = /** @class */ (function () {
-    function HydrationManager() {
-        var e_1, _a;
-        var _this = this;
+import { HYDRATION_ATTRIBUTE } from './shared';
+const DEFAULT_HYDRATION_ID = Symbol('defaultId');
+const DEFAULT_HYDRATION_PREFIX = 'hydration';
+export const EFFECT_ID = Symbol('react-hydrate');
+export class HydrationManager {
+    constructor() {
         this.hydrated = false;
         this.effect = {
-            id: exports.EFFECT_ID,
-            betweenEachPass: function () {
-                _this.ids.clear();
-                _this.hydration.clear();
+            id: EFFECT_ID,
+            betweenEachPass: () => {
+                this.ids.clear();
+                this.hydration.clear();
             },
@@ -24,28 +18,16 @@ };
         if (typeof document !== 'undefined') {
-            try {
-                for (var _b = tslib_1.__values(document.querySelectorAll("[" + shared_1.HYDRATION_ATTRIBUTE + "]")), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var element = _c.value;
-                    this.hydration.set(element.getAttribute(shared_1.HYDRATION_ATTRIBUTE), element.innerHTML);
-                }
+            for (const element of document.querySelectorAll(`[${HYDRATION_ATTRIBUTE}]`)) {
+                this.hydration.set(element.getAttribute(HYDRATION_ATTRIBUTE), element.innerHTML);
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
         }
     }
-    HydrationManager.prototype.hydrationId = function (id) {
-        var finalId = id || DEFAULT_HYDRATION_ID;
-        var current = this.ids.get(finalId) || 0;
+    hydrationId(id) {
+        const finalId = id || DEFAULT_HYDRATION_ID;
+        const current = this.ids.get(finalId) || 0;
         this.ids.set(finalId, current + 1);
-        return "" + (id || DEFAULT_HYDRATION_PREFIX) + (current + 1);
-    };
-    HydrationManager.prototype.getHydration = function (id) {
+        return `${id || DEFAULT_HYDRATION_PREFIX}${current + 1}`;
+    }
+    getHydration(id) {
         return this.hydration.get(id);
-    };
-    return HydrationManager;
-}());
-exports.HydrationManager = HydrationManager;
+    }
+}

build/ts/shared.js

@@ -1,4 +0,1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HYDRATION_ATTRIBUTE = void 0;
-exports.HYDRATION_ATTRIBUTE = 'data-hydration-id';
+export const HYDRATION_ATTRIBUTE = 'data-hydration-id';

index.js

@@ -1,1 +0,1 @@
-module.exports = require("./build/cjs/index.js");
+module.exports = require("./build/node/index.js");

package.json

 {
   "name": "@shopify/react-hydrate",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "license": "MIT",
@@ -28,3 +28,3 @@ "description": "Utilities for hydrating server-rendered React apps",
     "@shopify/react-effect": "^3.3.3",
-    "@shopify/react-hooks": "^1.12.3",
+    "@shopify/react-hooks": "^1.13.0",
     "tslib": "^1.14.1"
@@ -31,0 +31,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

35551

decreased by-6.67%

Lines of code

515

decreased by-8.36%

Dependency changes

• Updated@shopify/react-hooks@^1.13.0