posthog-js - npm Package Compare versions

Comparing version 1.57.3 to 1.81.2

lib/package.json

 {
     "name": "posthog-js",
-    "version": "1.57.3",
+    "version": "1.81.2",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
@@ -11,15 +11,5 @@ "repository": "https://github.com/PostHog/posthog-js",
         "build": "yarn build-rollup && yarn build-react",
-        "build-rollup": "yarn build:prepare-types && rollup -c",
+        "build-rollup": "rm -rf lib && tsc -b && rollup -c",
         "build-react": "cd react; yarn; yarn build;",
         "lint": "eslint src",
-        "build:prepare-types": "yarn build:prepare-types:tsc && yarn build:prepare-types:copy && yarn build:prepare-types:fix && yarn build:prepare-types:rename-1 && yarn build:prepare-types:rename-2 && yarn build:prepare-types:rename-3 && yarn build:prepare-types:rename-4 && yarn build:prepare-types:rename-5 && yarn build:prepare-types:rename-6",
-        "build:prepare-types:tsc": "rm -rf lib && tsc -b",
-        "build:prepare-types:copy": "rm -rf lib/rrweb && rm -rf lib/rrweb-snapshot && cp -a node_modules/rrweb lib/rrweb; cp -a node_modules/rrweb-snapshot/typings lib/rrweb-snapshot",
-        "build:prepare-types:fix": "cd lib/rrweb/typings/replay && cat index.d.ts |grep -v 'styles/style.css' > x && mv x index.d.ts",
-        "build:prepare-types:rename-1": "cd lib/rrweb/typings/record && sed 's/rrweb-snapshot/..\\/..\\/..\\/rrweb-snapshot/g' iframe-manager.d.ts > x && mv x iframe-manager.d.ts",
-        "build:prepare-types:rename-2": "cd lib/rrweb/typings/replay && sed 's/rrweb-snapshot/..\\/..\\/..\\/rrweb-snapshot/g' virtual-styles.d.ts > x && mv x virtual-styles.d.ts",
-        "build:prepare-types:rename-3": "cd lib/rrweb/typings && sed 's/rrweb-snapshot/..\\/..\\/rrweb-snapshot/g' types.d.ts > x && mv x types.d.ts",
-        "build:prepare-types:rename-4": "cd lib/rrweb/typings && sed 's/rrweb-snapshot/..\\/..\\/rrweb-snapshot/g' utils.d.ts > x && mv x utils.d.ts",
-        "build:prepare-types:rename-5": "cd lib/src/extensions && sed 's/rrweb\\/typings/..\\/..\\/rrweb\\/typings/g' sessionrecording.d.ts > x && mv x sessionrecording.d.ts",
-        "build:prepare-types:rename-6": "cd lib/src && sed 's/rrweb-snapshot/..\\/rrweb-snapshot/g' types.d.ts > x && mv x types.d.ts",
         "prettier": "prettier --write src/ functional_tests/",
@@ -43,4 +33,3 @@ "prepublishOnly": "yarn lint && yarn test && yarn build && yarn test-react",
     "dependencies": {
-        "fflate": "^0.4.1",
-        "rrweb-snapshot": "^1.1.14"
+        "fflate": "^0.4.1"
     },
@@ -56,2 +45,3 @@ "devDependencies": {
         "@rollup/plugin-typescript": "^8.3.3",
+        "@rrweb/types": "^2.0.0-alpha.11",
         "@sentry/types": "7.37.2",
@@ -62,4 +52,4 @@ "@testing-library/dom": "^9.3.0",
         "@types/uuid": "^9.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.30.7",
-        "@typescript-eslint/parser": "^5.30.7",
+        "@typescript-eslint/eslint-plugin": "^6.4.0",
+        "@typescript-eslint/parser": "^6.4.0",
         "babel-eslint": "10.1.0",
@@ -70,2 +60,4 @@ "babel-jest": "^26.6.3",
         "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-compat": "^4.1.4",
+        "eslint-plugin-jest": "^27.2.3",
         "eslint-plugin-prettier": "^4.2.1",
@@ -89,9 +81,12 @@ "eslint-plugin-react": "^7.30.1",
         "rollup-plugin-dts": "^4.2.2",
-        "rrweb": "^1.1.3",
-        "rrweb2": "npm:rrweb@2.0.0-alpha.8",
+        "rollup-plugin-visualizer": "^5.9.0",
+        "rrweb": "2.0.0-alpha.11",
+        "rrweb-snapshot": "2.0.0-alpha.11",
+        "rrweb-v1": "npm:rrweb@1.1.3",
         "sinon": "9.0.2",
-        "testcafe": "^1.19.0",
-        "testcafe-browser-provider-browserstack": "^1.14.0",
+        "testcafe": "1.19.0",
+        "testcafe-browser-provider-browserstack": "1.14.0",
         "tslib": "^2.4.0",
-        "typescript": "^4.7.4"
+        "typescript": "^4.7.4",
+        "yargs": "^17.7.2"
     },
@@ -104,3 +99,6 @@ "lint-staged": {
         ]
-    }
+    },
+    "browserslist": [
+        "> 0.5%, last 2 versions, Firefox ESR, not dead, IE 11"
+    ]
 }

package.json

 {
     "name": "posthog-js",
-    "version": "1.57.3",
+    "version": "1.81.2",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
@@ -11,15 +11,5 @@ "repository": "https://github.com/PostHog/posthog-js",
         "build": "yarn build-rollup && yarn build-react",
-        "build-rollup": "yarn build:prepare-types && rollup -c",
+        "build-rollup": "rm -rf lib && tsc -b && rollup -c",
         "build-react": "cd react; yarn; yarn build;",
         "lint": "eslint src",
-        "build:prepare-types": "yarn build:prepare-types:tsc && yarn build:prepare-types:copy && yarn build:prepare-types:fix && yarn build:prepare-types:rename-1 && yarn build:prepare-types:rename-2 && yarn build:prepare-types:rename-3 && yarn build:prepare-types:rename-4 && yarn build:prepare-types:rename-5 && yarn build:prepare-types:rename-6",
-        "build:prepare-types:tsc": "rm -rf lib && tsc -b",
-        "build:prepare-types:copy": "rm -rf lib/rrweb && rm -rf lib/rrweb-snapshot && cp -a node_modules/rrweb lib/rrweb; cp -a node_modules/rrweb-snapshot/typings lib/rrweb-snapshot",
-        "build:prepare-types:fix": "cd lib/rrweb/typings/replay && cat index.d.ts |grep -v 'styles/style.css' > x && mv x index.d.ts",
-        "build:prepare-types:rename-1": "cd lib/rrweb/typings/record && sed 's/rrweb-snapshot/..\\/..\\/..\\/rrweb-snapshot/g' iframe-manager.d.ts > x && mv x iframe-manager.d.ts",
-        "build:prepare-types:rename-2": "cd lib/rrweb/typings/replay && sed 's/rrweb-snapshot/..\\/..\\/..\\/rrweb-snapshot/g' virtual-styles.d.ts > x && mv x virtual-styles.d.ts",
-        "build:prepare-types:rename-3": "cd lib/rrweb/typings && sed 's/rrweb-snapshot/..\\/..\\/rrweb-snapshot/g' types.d.ts > x && mv x types.d.ts",
-        "build:prepare-types:rename-4": "cd lib/rrweb/typings && sed 's/rrweb-snapshot/..\\/..\\/rrweb-snapshot/g' utils.d.ts > x && mv x utils.d.ts",
-        "build:prepare-types:rename-5": "cd lib/src/extensions && sed 's/rrweb\\/typings/..\\/..\\/rrweb\\/typings/g' sessionrecording.d.ts > x && mv x sessionrecording.d.ts",
-        "build:prepare-types:rename-6": "cd lib/src && sed 's/rrweb-snapshot/..\\/rrweb-snapshot/g' types.d.ts > x && mv x types.d.ts",
         "prettier": "prettier --write src/ functional_tests/",
@@ -43,4 +33,3 @@ "prepublishOnly": "yarn lint && yarn test && yarn build && yarn test-react",
     "dependencies": {
-        "fflate": "^0.4.1",
-        "rrweb-snapshot": "^1.1.14"
+        "fflate": "^0.4.1"
     },
@@ -56,2 +45,3 @@ "devDependencies": {
         "@rollup/plugin-typescript": "^8.3.3",
+        "@rrweb/types": "^2.0.0-alpha.11",
         "@sentry/types": "7.37.2",
@@ -62,4 +52,4 @@ "@testing-library/dom": "^9.3.0",
         "@types/uuid": "^9.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.30.7",
-        "@typescript-eslint/parser": "^5.30.7",
+        "@typescript-eslint/eslint-plugin": "^6.4.0",
+        "@typescript-eslint/parser": "^6.4.0",
         "babel-eslint": "10.1.0",
@@ -70,2 +60,4 @@ "babel-jest": "^26.6.3",
         "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-compat": "^4.1.4",
+        "eslint-plugin-jest": "^27.2.3",
         "eslint-plugin-prettier": "^4.2.1",
@@ -89,9 +81,12 @@ "eslint-plugin-react": "^7.30.1",
         "rollup-plugin-dts": "^4.2.2",
-        "rrweb": "^1.1.3",
-        "rrweb2": "npm:rrweb@2.0.0-alpha.8",
+        "rollup-plugin-visualizer": "^5.9.0",
+        "rrweb": "2.0.0-alpha.11",
+        "rrweb-snapshot": "2.0.0-alpha.11",
+        "rrweb-v1": "npm:rrweb@1.1.3",
         "sinon": "9.0.2",
-        "testcafe": "^1.19.0",
-        "testcafe-browser-provider-browserstack": "^1.14.0",
+        "testcafe": "1.19.0",
+        "testcafe-browser-provider-browserstack": "1.14.0",
         "tslib": "^2.4.0",
-        "typescript": "^4.7.4"
+        "typescript": "^4.7.4",
+        "yargs": "^17.7.2"
     },
@@ -104,3 +99,6 @@ "lint-staged": {
         ]
-    }
+    },
+    "browserslist": [
+        "> 0.5%, last 2 versions, Firefox ESR, not dead, IE 11"
+    ]
 }

react/dist/esm/index.js

@@ -1,11 +0,9 @@
-import * as React from 'react';
-import { createContext, useState, useEffect, useContext } from 'react';
 import posthogJs from 'posthog-js';
+import React, { createContext, useMemo, useContext, useState, useEffect, useRef, useCallback } from 'react';
 
-var PostHogContext = createContext({ client: undefined });
+var PostHogContext = createContext({ client: posthogJs });
 
 function PostHogProvider(_a) {
     var children = _a.children, client = _a.client, apiKey = _a.apiKey, options = _a.options;
-    var _b = useState(client), posthog = _b[0], setPosthog = _b[1];
-    useEffect(function () {
+    var posthog = useMemo(function () {
         if (client && apiKey) {
@@ -17,13 +15,13 @@ console.warn('You have provided both a client and an apiKey to PostHogProvider. The apiKey will be ignored in favour of the client.');
         }
-        if (posthog) {
-            return;
-        }
         if (client) {
-            setPosthog(client);
+            return client;
         }
-        else if (apiKey) {
+        if (apiKey) {
+            if (posthogJs.__loaded) {
+                console.warn('posthog was already loaded elsewhere. This may cause issues.');
+            }
             posthogJs.init(apiKey, options);
-            setPosthog(posthogJs);
         }
-    }, [posthog, client, apiKey, options]);
+        return posthogJs;
+    }, [client, apiKey]);
     return React.createElement(PostHogContext.Provider, { value: { client: posthog } }, children);
@@ -41,5 +39,2 @@ }
     useEffect(function () {
-        if (!client) {
-            return;
-        }
         return client.onFeatureFlags(function () {
@@ -56,5 +51,2 @@ setFeatureEnabled(client.isFeatureEnabled(flag));
     useEffect(function () {
-        if (!client) {
-            return;
-        }
         return client.onFeatureFlags(function () {
@@ -71,5 +63,2 @@ setFeatureFlagPayload(client.getFeatureFlagPayload(flag));
     useEffect(function () {
-        if (!client) {
-            return;
-        }
         return client.onFeatureFlags(function (flags) {
@@ -86,5 +75,2 @@ setFeatureFlags(flags);
     useEffect(function () {
-        if (!client) {
-            return;
-        }
         return client.onFeatureFlags(function () {
@@ -97,2 +83,90 @@ setFeatureFlagVariantKey(client.getFeatureFlag(flag));
 
-export { PostHogContext, PostHogProvider, useActiveFeatureFlags, useFeatureFlagEnabled, useFeatureFlagPayload, useFeatureFlagVariantKey, usePostHog };
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function PostHogFeature(_a) {
+    var flag = _a.flag, match = _a.match, children = _a.children, fallback = _a.fallback, visibilityObserverOptions = _a.visibilityObserverOptions, trackInteraction = _a.trackInteraction, trackView = _a.trackView, props = __rest(_a, ["flag", "match", "children", "fallback", "visibilityObserverOptions", "trackInteraction", "trackView"]);
+    var payload = useFeatureFlagPayload(flag);
+    var variant = useFeatureFlagVariantKey(flag);
+    var shouldTrackInteraction = trackInteraction !== null && trackInteraction !== void 0 ? trackInteraction : true;
+    var shouldTrackView = trackView !== null && trackView !== void 0 ? trackView : true;
+    if (match === undefined || variant === match) {
+        var childNode = typeof children === 'function' ? children(payload) : children;
+        return (React.createElement(VisibilityAndClickTracker, __assign({ flag: flag, options: visibilityObserverOptions, trackInteraction: shouldTrackInteraction, trackView: shouldTrackView }, props), childNode));
+    }
+    return React.createElement(React.Fragment, null, fallback);
+}
+function captureFeatureInteraction(flag, posthog) {
+    var _a;
+    posthog.capture('$feature_interaction', { feature_flag: flag, $set: (_a = {}, _a["$feature_interaction/" + flag] = true, _a) });
+}
+function captureFeatureView(flag, posthog) {
+    posthog.capture('$feature_view', { feature_flag: flag });
+}
+function VisibilityAndClickTracker(_a) {
+    var flag = _a.flag, children = _a.children, trackInteraction = _a.trackInteraction, trackView = _a.trackView, options = _a.options, props = __rest(_a, ["flag", "children", "trackInteraction", "trackView", "options"]);
+    var ref = useRef(null);
+    var posthog = usePostHog();
+    var visibilityTrackedRef = useRef(false);
+    var clickTrackedRef = useRef(false);
+    var cachedOnClick = useCallback(function () {
+        if (!clickTrackedRef.current && trackInteraction) {
+            captureFeatureInteraction(flag, posthog);
+            clickTrackedRef.current = true;
+        }
+    }, [flag, posthog, trackInteraction]);
+    useEffect(function () {
+        if (ref.current === null || !trackView)
+            return;
+        var onIntersect = function (entry) {
+            if (!visibilityTrackedRef.current && entry.isIntersecting) {
+                captureFeatureView(flag, posthog);
+                visibilityTrackedRef.current = true;
+            }
+        };
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            return onIntersect(entry);
+        }, __assign({ threshold: 0.1 }, options));
+        observer.observe(ref.current);
+        return function () { return observer.disconnect(); };
+    }, [flag, options, posthog, ref, trackView]);
+    return (React.createElement("div", __assign({ ref: ref }, props, { onClick: cachedOnClick }), children));
+}
+
+export { PostHogContext, PostHogFeature, PostHogProvider, useActiveFeatureFlags, useFeatureFlagEnabled, useFeatureFlagPayload, useFeatureFlagVariantKey, usePostHog };

react/dist/types/context/PostHogContext.d.ts

@@ -5,4 +5,4 @@ /// <reference types="react" />
 export declare const PostHogContext: import("react").Context<{
-    client?: import("posthog-js").PostHog | undefined;
+    client: PostHog;
 }>;
 //# sourceMappingURL=PostHogContext.d.ts.map

react/dist/types/context/PostHogProvider.d.ts

 import { PostHogConfig } from 'posthog-js';
-import * as React from 'react';
+import React from 'react';
 import { PostHog } from './PostHogContext';
@@ -4,0 +4,0 @@ export declare function PostHogProvider({ children, client, apiKey, options, }: {

react/dist/types/hooks/usePostHog.d.ts

 import { PostHog } from '../context';
-export declare const usePostHog: () => PostHog | undefined;
+export declare const usePostHog: () => PostHog;
 //# sourceMappingURL=usePostHog.d.ts.map

react/dist/types/index.d.ts

 export * from './context';
 export * from './hooks';
+export * from './components';
 //# sourceMappingURL=index.d.ts.map

react/dist/umd/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('posthog-js')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', 'posthog-js'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PosthogReact = {}, global.React, global.posthogJs));
-}(this, (function (exports, React, posthogJs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('posthog-js'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'posthog-js', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PosthogReact = {}, global.posthogJs, global.React));
+}(this, (function (exports, posthogJs, React) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
-                    });
-                }
-            });
-        }
-        n['default'] = e;
-        return Object.freeze(n);
-    }
-
-    var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var posthogJs__default = /*#__PURE__*/_interopDefaultLegacy(posthogJs);
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-    var PostHogContext = React.createContext({ client: undefined });
+    var PostHogContext = React.createContext({ client: posthogJs__default['default'] });
 
     function PostHogProvider(_a) {
         var children = _a.children, client = _a.client, apiKey = _a.apiKey, options = _a.options;
-        var _b = React.useState(client), posthog = _b[0], setPosthog = _b[1];
-        React.useEffect(function () {
+        var posthog = React.useMemo(function () {
             if (client && apiKey) {
@@ -44,14 +23,14 @@ console.warn('You have provided both a client and an apiKey to PostHogProvider. The apiKey will be ignored in favour of the client.');
             }
-            if (posthog) {
-                return;
-            }
             if (client) {
-                setPosthog(client);
+                return client;
             }
-            else if (apiKey) {
+            if (apiKey) {
+                if (posthogJs__default['default'].__loaded) {
+                    console.warn('posthog was already loaded elsewhere. This may cause issues.');
+                }
                 posthogJs__default['default'].init(apiKey, options);
-                setPosthog(posthogJs__default['default']);
             }
-        }, [posthog, client, apiKey, options]);
-        return React__namespace.createElement(PostHogContext.Provider, { value: { client: posthog } }, children);
+            return posthogJs__default['default'];
+        }, [client, apiKey]);
+        return React__default['default'].createElement(PostHogContext.Provider, { value: { client: posthog } }, children);
     }
@@ -68,5 +47,2 @@
         React.useEffect(function () {
-            if (!client) {
-                return;
-            }
             return client.onFeatureFlags(function () {
@@ -83,5 +59,2 @@ setFeatureEnabled(client.isFeatureEnabled(flag));
         React.useEffect(function () {
-            if (!client) {
-                return;
-            }
             return client.onFeatureFlags(function () {
@@ -98,5 +71,2 @@ setFeatureFlagPayload(client.getFeatureFlagPayload(flag));
         React.useEffect(function () {
-            if (!client) {
-                return;
-            }
             return client.onFeatureFlags(function (flags) {
@@ -113,5 +83,2 @@ setFeatureFlags(flags);
         React.useEffect(function () {
-            if (!client) {
-                return;
-            }
             return client.onFeatureFlags(function () {
@@ -124,3 +91,92 @@ setFeatureFlagVariantKey(client.getFeatureFlag(flag));
 
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    function PostHogFeature(_a) {
+        var flag = _a.flag, match = _a.match, children = _a.children, fallback = _a.fallback, visibilityObserverOptions = _a.visibilityObserverOptions, trackInteraction = _a.trackInteraction, trackView = _a.trackView, props = __rest(_a, ["flag", "match", "children", "fallback", "visibilityObserverOptions", "trackInteraction", "trackView"]);
+        var payload = useFeatureFlagPayload(flag);
+        var variant = useFeatureFlagVariantKey(flag);
+        var shouldTrackInteraction = trackInteraction !== null && trackInteraction !== void 0 ? trackInteraction : true;
+        var shouldTrackView = trackView !== null && trackView !== void 0 ? trackView : true;
+        if (match === undefined || variant === match) {
+            var childNode = typeof children === 'function' ? children(payload) : children;
+            return (React__default['default'].createElement(VisibilityAndClickTracker, __assign({ flag: flag, options: visibilityObserverOptions, trackInteraction: shouldTrackInteraction, trackView: shouldTrackView }, props), childNode));
+        }
+        return React__default['default'].createElement(React__default['default'].Fragment, null, fallback);
+    }
+    function captureFeatureInteraction(flag, posthog) {
+        var _a;
+        posthog.capture('$feature_interaction', { feature_flag: flag, $set: (_a = {}, _a["$feature_interaction/" + flag] = true, _a) });
+    }
+    function captureFeatureView(flag, posthog) {
+        posthog.capture('$feature_view', { feature_flag: flag });
+    }
+    function VisibilityAndClickTracker(_a) {
+        var flag = _a.flag, children = _a.children, trackInteraction = _a.trackInteraction, trackView = _a.trackView, options = _a.options, props = __rest(_a, ["flag", "children", "trackInteraction", "trackView", "options"]);
+        var ref = React.useRef(null);
+        var posthog = usePostHog();
+        var visibilityTrackedRef = React.useRef(false);
+        var clickTrackedRef = React.useRef(false);
+        var cachedOnClick = React.useCallback(function () {
+            if (!clickTrackedRef.current && trackInteraction) {
+                captureFeatureInteraction(flag, posthog);
+                clickTrackedRef.current = true;
+            }
+        }, [flag, posthog, trackInteraction]);
+        React.useEffect(function () {
+            if (ref.current === null || !trackView)
+                return;
+            var onIntersect = function (entry) {
+                if (!visibilityTrackedRef.current && entry.isIntersecting) {
+                    captureFeatureView(flag, posthog);
+                    visibilityTrackedRef.current = true;
+                }
+            };
+            var observer = new IntersectionObserver(function (_a) {
+                var entry = _a[0];
+                return onIntersect(entry);
+            }, __assign({ threshold: 0.1 }, options));
+            observer.observe(ref.current);
+            return function () { return observer.disconnect(); };
+        }, [flag, options, posthog, ref, trackView]);
+        return (React__default['default'].createElement("div", __assign({ ref: ref }, props, { onClick: cachedOnClick }), children));
+    }
+
     exports.PostHogContext = PostHogContext;
+    exports.PostHogFeature = PostHogFeature;
     exports.PostHogProvider = PostHogProvider;
@@ -127,0 +183,0 @@ exports.useActiveFeatureFlags = useActiveFeatureFlags;

react/package.json

@@ -44,2 +44,3 @@ {
         "@rollup/plugin-replace": "^2.3.4",
+        "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^11.2.2",
@@ -46,0 +47,0 @@ "@testing-library/react-hooks": "^3.7.0",

react/README.md

@@ -6,2 +6,3 @@ # PostHog.js React Components
 Unit tests:
+
 ```bash
@@ -12,4 +13,5 @@ yarn test
 Build:
+
 ```bash
 yarn build
 ```

README.md

@@ -12,3 +12,3 @@ # PostHog Browser JS Library
 Unit tests: run `yarn test`.
-Cypress: run `yarn serve` to have a test server running and separately `yarn cypress` to launch Cypress test engine.
+Cypress: run `yarn start` to have a test server running and separately `yarn cypress` to launch Cypress test engine.
 
@@ -15,0 +15,0 @@ ### Running TestCafe E2E tests with BrowserStack

No alert changes

Improved metrics

Total package byte prevSize

5095432

40.11%

Dependency count

1

-50%

Number of package files

173

311.9%

Lines of code

15343

257.81%

Worsened metrics

Dev dependency count

51

13.33%