posthog-js 1.59.0 → 1.61.0

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.59.0",
+    "version": "1.61.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",
@@ -51,6 +51,7 @@
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-terser": "^0.4.0",
         "@rollup/plugin-typescript": "^8.3.3",
+        "@rrweb/types": "^2.0.0-alpha.8",
         "@sentry/types": "7.37.2",
         "@testing-library/dom": "^9.3.0",
         "@types/jest": "^29.5.1",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.59.0",
+    "version": "1.61.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",
@@ -51,6 +51,7 @@
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-terser": "^0.4.0",
         "@rollup/plugin-typescript": "^8.3.3",
+        "@rrweb/types": "^2.0.0-alpha.8",
         "@sentry/types": "7.37.2",
         "@testing-library/dom": "^9.3.0",
         "@types/jest": "^29.5.1",

package/react/README.md

@@ -3,11 +3,13 @@
 ## Testing
 
 Unit tests:
+
 ```bash
 yarn test
 ```
 
 Build:
+
 ```bash
 yarn build
 ```

package/react/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createContext, useState, useEffect, useContext } from 'react';
+import React__default, { createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
 import posthogJs from 'posthog-js';
 
 var PostHogContext = createContext({ client: undefined });
@@ -89,4 +89,90 @@ function useFeatureFlagVariantKey(flag) {
     return featureFlagVariantKey;
 }
 
-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, props = __rest(_a, ["flag", "match", "children", "fallback", "visibilityObserverOptions"]);
+    var payload = useFeatureFlagPayload(flag);
+    var variant = useFeatureFlagVariantKey(flag);
+    if (match === undefined || variant === match) {
+        var childNode = typeof children === 'function' ? children(payload) : children;
+        return (React__default.createElement(VisibilityAndClickTracker, __assign({ flag: flag, options: visibilityObserverOptions }, props), childNode));
+    }
+    return React__default.createElement(React__default.Fragment, null, fallback);
+}
+function trackClicks(flag, posthog) {
+    var _a;
+    posthog === null || posthog === void 0 ? void 0 : posthog.capture('$feature_interaction', { feature_flag: flag, $set: (_a = {}, _a["$feature_interaction/" + flag] = true, _a) });
+}
+function trackVisibility(flag, posthog) {
+    posthog === null || posthog === void 0 ? void 0 : posthog.capture('$feature_view', { feature_flag: flag });
+}
+function VisibilityAndClickTracker(_a) {
+    var flag = _a.flag, children = _a.children, options = _a.options, props = __rest(_a, ["flag", "children", "options"]);
+    var ref = useRef(null);
+    var posthog = usePostHog();
+    var visibilityTrackedRef = useRef(false);
+    var clickTrackedRef = useRef(false);
+    var cachedOnClick = useCallback(function () {
+        if (!clickTrackedRef.current) {
+            trackClicks(flag, posthog);
+            clickTrackedRef.current = true;
+        }
+    }, [flag, posthog]);
+    useEffect(function () {
+        if (ref.current === null)
+            return;
+        var onIntersect = function (entry) {
+            if (!visibilityTrackedRef.current && entry.isIntersecting) {
+                trackVisibility(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]);
+    return (React__default.createElement("div", __assign({ ref: ref }, props, { onClick: cachedOnClick }), children));
+}
+
+export { PostHogContext, PostHogFeature, PostHogProvider, useActiveFeatureFlags, useFeatureFlagEnabled, useFeatureFlagPayload, useFeatureFlagVariantKey, usePostHog };

package/react/dist/types/components/PostHogFeature.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type PostHogFeatureProps = React.HTMLProps<HTMLDivElement> & {
+    flag: string;
+    children: React.ReactNode | ((payload: any) => React.ReactNode);
+    fallback?: React.ReactNode;
+    match?: string | boolean;
+    visibilityObserverOptions?: IntersectionObserverInit;
+};
+export declare function PostHogFeature({ flag, match, children, fallback, visibilityObserverOptions, ...props }: PostHogFeatureProps): JSX.Element | null;
+//# sourceMappingURL=PostHogFeature.d.ts.map

package/react/dist/types/components/PostHogFeature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostHogFeature.d.ts","sourceRoot":"","sources":["../../../src/components/PostHogFeature.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAG7D,oBAAY,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG;IAChE,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,yBAAyB,CAAC,EAAE,wBAAwB,CAAA;CACvD,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,yBAAyB,EACzB,GAAG,KAAK,EACX,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAa1C"}

package/react/dist/types/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PostHogFeature';
+//# sourceMappingURL=index.d.ts.map

package/react/dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/react/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './context';
 export * from './hooks';
+export * from './components';
 //# sourceMappingURL=index.d.ts.map

package/react/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA"}

package/react/dist/umd/index.js

@@ -27,6 +27,7 @@
     }
 
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var posthogJs__default = /*#__PURE__*/_interopDefaultLegacy(posthogJs);
 
     var PostHogContext = React.createContext({ client: undefined });
@@ -116,7 +117,94 @@
         return featureFlagVariantKey;
     }
 
+    /*! *****************************************************************************
+    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, props = __rest(_a, ["flag", "match", "children", "fallback", "visibilityObserverOptions"]);
+        var payload = useFeatureFlagPayload(flag);
+        var variant = useFeatureFlagVariantKey(flag);
+        if (match === undefined || variant === match) {
+            var childNode = typeof children === 'function' ? children(payload) : children;
+            return (React__default['default'].createElement(VisibilityAndClickTracker, __assign({ flag: flag, options: visibilityObserverOptions }, props), childNode));
+        }
+        return React__default['default'].createElement(React__default['default'].Fragment, null, fallback);
+    }
+    function trackClicks(flag, posthog) {
+        var _a;
+        posthog === null || posthog === void 0 ? void 0 : posthog.capture('$feature_interaction', { feature_flag: flag, $set: (_a = {}, _a["$feature_interaction/" + flag] = true, _a) });
+    }
+    function trackVisibility(flag, posthog) {
+        posthog === null || posthog === void 0 ? void 0 : posthog.capture('$feature_view', { feature_flag: flag });
+    }
+    function VisibilityAndClickTracker(_a) {
+        var flag = _a.flag, children = _a.children, options = _a.options, props = __rest(_a, ["flag", "children", "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) {
+                trackClicks(flag, posthog);
+                clickTrackedRef.current = true;
+            }
+        }, [flag, posthog]);
+        React.useEffect(function () {
+            if (ref.current === null)
+                return;
+            var onIntersect = function (entry) {
+                if (!visibilityTrackedRef.current && entry.isIntersecting) {
+                    trackVisibility(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]);
+        return (React__default['default'].createElement("div", __assign({ ref: ref }, props, { onClick: cachedOnClick }), children));
+    }
+
     exports.PostHogContext = PostHogContext;
+    exports.PostHogFeature = PostHogFeature;
     exports.PostHogProvider = PostHogProvider;
     exports.useActiveFeatureFlags = useActiveFeatureFlags;
     exports.useFeatureFlagEnabled = useFeatureFlagEnabled;

package/react/package.json

@@ -41,6 +41,7 @@
         "@rollup/plugin-inject": "^4.0.2",
         "@rollup/plugin-node-resolve": "^11.0.1",
         "@rollup/plugin-replace": "^2.3.4",
+        "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^11.2.2",
         "@testing-library/react-hooks": "^3.7.0",
         "@types/react": "^17.0.0",