posthog-js - npm Package Compare versions

Comparing version 1.42.3 to 1.57.2

CHANGELOG.md

@@ -0,1 +1,194 @@
+## 1.57.2 - 2023-05-17
+
+
+
+## 1.57.1 - 2023-05-17
+
+- fix(decide): Make sure all stored properties are sent on first decide request (#633)
+- fix(identify): actually send $set_once on identify calls (#629)
+
+## 1.57.0 - 2023-05-15
+
+- feat: Added OS version to the OS details (#624)
+- fix: Don't delete existing flags on decide errors (#621)
+
+## 1.56.0 - 2023-05-09
+
+- feat: Allow custom masking of network events (#620)
+
+## 1.55.2 - 2023-05-09
+
+- feat: Added idle timer to recordings (#626)
+- docs: Add Nuxt 3 demo  (#623)
+
+## 1.55.1 - 2023-05-03
+
+- fix: Script loading before DOM is ready (#618)
+- Expose options to mask text in session recording (#595)
+
+## 1.55.0 - 2023-04-28
+
+- feat(beta-management): Add opt-in and out functions (#616)
+
+## 1.54.0 - 2023-04-26
+
+- release new version (#617)
+- feat(flags): Allow adding person and group property overrides for flags (#613)
+
+## 1.53.4 - 2023-04-18
+
+- feat: Allow masking of input by referencing the element (#611)
+
+## 1.53.3 - 2023-04-17
+
+- fix: Usage of sessionStorage even if memory persistence (#609)
+
+## 1.53.2 - 2023-04-14
+
+- fix: Don't enable web perf by default for localhost (#608)
+
+## 1.53.1 - 2023-04-13
+
+- chore: bump version (#607)
+- feat: Swap over to storing network events in recordings (#606)
+
+## 1.53.0 - 2023-04-12
+
+- feat: Custom campaign param support (#603)
+- chore(deps): Bump http-cache-semantics from 4.1.0 to 4.1.1 (#528)
+- fix: change user_id -> $user_id in docstring (#525)
+- Remove flag param from useActiveFeatureFlags (#599)
+
+## 1.52.0 - 2023-04-05
+
+- fix: Track referrer/search params per browser session (#496)  
+  _**Note:** This change improves the accuracy of properties `$referrer` and `$referring_domain` in a major way. Previously, the values of these properties often represented pure backlinks in non-SPAs (non-single-page applications). Now those values will represent the true referrer for the current browser-level session (effectively: for the tab). Due to this, referrer data after this update _may_ look different. It will be significantly more accurate though._
+- ci: Point out and close stale issues/PRs (#602)
+- docs(testcafe): update docs removing posthog server requirements (#594)
+
+## 1.51.5 - 2023-03-23
+
+- fix(segment): handle race condition on loading segment integration (#586)
+
+## 1.51.4 - 2023-03-20
+
+- fix: fewer moving parts more like safe text (#590)
+
+## 1.51.3 - 2023-03-17
+
+- try/catch the bit that fails so we don't just eject the element (#585)
+- fix(persistence): set SameSite=None explicitly (#578)
+
+## 1.51.2 - 2023-03-15
+
+- fix: Catch fullsnapshot error (#583)
+
+## 1.51.1 - 2023-03-14
+
+- fix: debug nested span text, part 3 (#582)
+
+## 1.51.0 - 2023-03-14
+
+- added types for PostHog provider `options` (#581)
+- ci(testcafe): run browser tests in parallel (#579)
+
+## 1.50.9 - 2023-03-13
+
+- fix: debug nested span text (part 2) (#577)
+- feat: use autocapture setting from decide (#575)
+
+## 1.50.8 - 2023-03-10
+
+- reinstate getNestedSpanText, but with no recursion (#576)
+
+## 1.50.7 - 2023-03-09
+
+- fix: debug return empty string on getNestedSpanText (#573)
+
+## 1.50.6 - 2023-03-09
+
+- fix: Only call capture snapshot if recording (#572)
+
+## 1.50.5 - 2023-03-09
+
+- Update rrweb (#570)
+- fix: Race condition error with loading rrweb (#569)
+- fix: remove warning of duplicate nextjs import (#566)
+
+## 1.50.4 - 2023-03-06
+
+- chore: Revert canvas recording option (#567)
+- tolerate undefined target (#565)
+
+## 1.50.3 - 2023-03-02
+
+- fix: spans inside buttons (#563)
+
+## 1.50.2 - 2023-03-02
+
+- fix(bots): add "hubspot" and "crawler" to blocked user agents (#564)
+
+## 1.50.1 - 2023-03-01
+
+- feat: allow record canvas (#562)
+- chore: remove old nextjs utils folder (#559)
+
+## 1.50.0 - 2023-02-28
+
+- feat: react library (#540)
+
+## 1.49.0 - 2023-02-28
+
+- feat: augment autocapture using data attributes (#551)
+
+## 1.48.2 - 2023-02-28
+
+- fix: safari iteration error on web performance server timing (#558)
+
+## 1.48.1 - 2023-02-28
+
+- chore: expose errors (#557)
+-  try the compressed-size-action GH action (#556)
+
+## 1.48.0 - 2023-02-27
+
+- fix: apply terser plugin to module.js and es.js (#555)
+
+## 1.47.0 - 2023-02-27
+
+- chore: no-op change to allow version bump (#554)
+- feat(rrweb): implement rrweb2 dynamic loading on decide (#552)
+
+## 1.46.2 - 2023-02-22
+
+- no-op change to allow version bump (#549)
+- more leniency for envs with 'window' undefined (#541)
+
+## 1.46.1 - 2023-02-21
+
+- chore: Remove Sentry types to reduce clashes (#546)
+- fix: Removed Sentry types from compiled types (#545)
+
+## 1.46.0 - 2023-02-21
+
+- feat: Add optional loading of rrweb2 (#543)
+- feat: Add rrweb2 support (experimental) (#536)
+- chore: upgrade @sentry/types (#539)
+
+## 1.45.1 - 2023-02-14
+
+- fix: default persons to anonymous (#534)
+
+## 1.45.0 - 2023-02-14
+
+
+
+## 1.43.1 - 2023-02-07
+
+- fix: correctly persist user state across page loads (#531)
+
+## 1.43.0 - 2023-02-07
+
+- feat: reset marks user anonymous (#524)
+
 ## 1.42.3 - 2023-01-31
@@ -2,0 +195,0 @@

lib/package.json

 {
     "name": "posthog-js",
-    "version": "1.42.3",
+    "version": "1.57.2",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
@@ -38,6 +38,6 @@ "repository": "https://github.com/PostHog/posthog-js",
         "dist/*",
-        "react/dist/*"
+        "react/dist/*",
+        "react/package.json"
     ],
     "dependencies": {
-        "@sentry/types": "7.22.0",
         "fflate": "^0.4.1",
@@ -53,3 +53,7 @@ "rrweb-snapshot": "^1.1.14"
         "@rollup/plugin-node-resolve": "^13.3.0",
+        "@rollup/plugin-terser": "^0.4.0",
         "@rollup/plugin-typescript": "^8.3.3",
+        "@sentry/types": "7.37.2",
+        "@types/jest": "^29.5.1",
+        "@types/react-dom": "^18.0.10",
         "@typescript-eslint/eslint-plugin": "^5.30.7",
@@ -79,4 +83,4 @@ "@typescript-eslint/parser": "^5.30.7",
         "rollup-plugin-dts": "^4.2.2",
-        "rollup-plugin-terser": "^7.0.2",
         "rrweb": "^1.1.3",
+        "rrweb2": "npm:rrweb@2.0.0-alpha.8",
         "sinon": "9.0.2",
@@ -83,0 +87,0 @@ "testcafe": "^1.19.0",

package.json

 {
     "name": "posthog-js",
-    "version": "1.42.3",
+    "version": "1.57.2",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
@@ -38,6 +38,6 @@ "repository": "https://github.com/PostHog/posthog-js",
         "dist/*",
-        "react/dist/*"
+        "react/dist/*",
+        "react/package.json"
     ],
     "dependencies": {
-        "@sentry/types": "7.22.0",
         "fflate": "^0.4.1",
@@ -53,3 +53,7 @@ "rrweb-snapshot": "^1.1.14"
         "@rollup/plugin-node-resolve": "^13.3.0",
+        "@rollup/plugin-terser": "^0.4.0",
         "@rollup/plugin-typescript": "^8.3.3",
+        "@sentry/types": "7.37.2",
+        "@types/jest": "^29.5.1",
+        "@types/react-dom": "^18.0.10",
         "@typescript-eslint/eslint-plugin": "^5.30.7",
@@ -79,4 +83,4 @@ "@typescript-eslint/parser": "^5.30.7",
         "rollup-plugin-dts": "^4.2.2",
-        "rollup-plugin-terser": "^7.0.2",
         "rrweb": "^1.1.3",
+        "rrweb2": "npm:rrweb@2.0.0-alpha.8",
         "sinon": "9.0.2",
@@ -83,0 +87,0 @@ "testcafe": "^1.19.0",

react/dist/esm/index.js

@@ -1,94 +0,92 @@
-import React, { useContext, useState, useCallback, useEffect } from 'react';
+import * as React from 'react';
+import { createContext, useState, useEffect, useContext } from 'react';
+import posthogJs from 'posthog-js';
 
-var cache = new Map();
-function getPostHogContext() {
-    var context = cache.get(React.createContext);
-    if (!context) {
-        context = React.createContext({});
-        cache.set(React.createContext, context);
-    }
-    return context;
+var PostHogContext = createContext({ client: undefined });
+
+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 () {
+        if (client && apiKey) {
+            console.warn('You have provided both a client and an apiKey to PostHogProvider. The apiKey will be ignored in favour of the client.');
+        }
+        if (client && options) {
+            console.warn('You have provided both a client and options to PostHogProvider. The options will be ignored in favour of the client.');
+        }
+        if (posthog) {
+            return;
+        }
+        if (client) {
+            setPosthog(client);
+        }
+        else if (apiKey) {
+            posthogJs.init(apiKey, options);
+            setPosthog(posthogJs);
+        }
+    }, [posthog, client, apiKey, options]);
+    return React.createElement(PostHogContext.Provider, { value: { client: posthog } }, children);
 }
-function usePostHogContext() {
-    var context = useContext(getPostHogContext());
-    if (!context.client) {
-        throw new Error('No PostHog client instance can be found. ' +
-            'Please ensure that your application is wrapped by `PostHogProvider`.');
-    }
-    return context;
-}
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
+var usePostHog = function () {
+    var client = useContext(PostHogContext).client;
+    return client;
+};
 
-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];
+function useFeatureFlagEnabled(flag) {
+    var client = usePostHog();
+    var _a = useState(), featureEnabled = _a[0], setFeatureEnabled = _a[1];
+    useEffect(function () {
+        if (!client) {
+            return;
         }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+        return client.onFeatureFlags(function () {
+            setFeatureEnabled(client.isFeatureEnabled(flag));
+        });
+    }, [client, flag]);
+    return featureEnabled;
+}
 
-var PostHogProvider = function (_a) {
-    var client = _a.client, children = _a.children;
-    var PostHogContext = getPostHogContext();
-    var _b = useState({ enabled: {} }), featureFlags = _b[0], setFeatureFlags = _b[1];
-    return (React.createElement(PostHogContext.Consumer, null, function (context) {
-        if (client && context.client !== client) {
-            context = Object.assign({}, context, { client: client });
+function useFeatureFlagPayload(flag) {
+    var client = usePostHog();
+    var _a = useState(), featureFlagPayload = _a[0], setFeatureFlagPayload = _a[1];
+    useEffect(function () {
+        if (!client) {
+            return;
         }
-        if (!context.client) {
-            throw new Error('PostHogProvider was not passed a client instance. ' +
-                'Make sure you pass in your PostHog client via the "client" prop.');
-        }
-        var value = __assign(__assign({}, context), { featureFlags: featureFlags, setFeatureFlags: setFeatureFlags });
-        return React.createElement(PostHogContext.Provider, { value: value }, children);
-    }));
-};
+        return client.onFeatureFlags(function () {
+            setFeatureFlagPayload(client.getFeatureFlagPayload(flag));
+        });
+    }, [client, flag]);
+    return featureFlagPayload;
+}
 
-function useFeatureFlags(props) {
-    if (props === void 0) { props = {}; }
-    var _a = props.refreshInterval, refreshInterval = _a === void 0 ? 0 : _a, _b = props.sendEvent, sendEvent = _b === void 0 ? true : _b;
-    var _c = usePostHogContext(), posthog = _c.client, featureFlags = _c.featureFlags, setFeatureFlags = _c.setFeatureFlags;
-    var getEnabledFlags = useCallback(function (flags) {
-        var enabled = flags.reduce(function (result, flag) {
-            var flagValue = posthog === null || posthog === void 0 ? void 0 : posthog.getFeatureFlag(flag, {
-                send_event: sendEvent,
-            });
-            if (typeof flagValue !== 'undefined') {
-                result[flag] = flagValue;
-            }
-            return result;
-        }, {});
-        setFeatureFlags({ active: flags, enabled: enabled });
-    }, [posthog, sendEvent, setFeatureFlags]);
+function useActiveFeatureFlags() {
+    var client = usePostHog();
+    var _a = useState(), featureFlags = _a[0], setFeatureFlags = _a[1];
     useEffect(function () {
-        if (posthog && refreshInterval > 0) {
-            var interval_1 = setInterval(function () {
-                posthog === null || posthog === void 0 ? void 0 : posthog.featureFlags.reloadFeatureFlags();
-            }, refreshInterval * 1000);
-            return function () { return clearInterval(interval_1); };
+        if (!client) {
+            return;
         }
-    }, [posthog, refreshInterval, getEnabledFlags]);
-    useEffect(function () {
-        posthog === null || posthog === void 0 ? void 0 : posthog.onFeatureFlags(getEnabledFlags);
-    }, [posthog, getEnabledFlags]);
+        return client.onFeatureFlags(function (flags) {
+            setFeatureFlags(flags);
+        });
+    }, [client]);
     return featureFlags;
 }
 
-export { PostHogProvider, getPostHogContext, useFeatureFlags, usePostHogContext };
+function useFeatureFlagVariantKey(flag) {
+    var client = usePostHog();
+    var _a = useState(), featureFlagVariantKey = _a[0], setFeatureFlagVariantKey = _a[1];
+    useEffect(function () {
+        if (!client) {
+            return;
+        }
+        return client.onFeatureFlags(function () {
+            setFeatureFlagVariantKey(client.getFeatureFlag(flag));
+        });
+    }, [client, flag]);
+    return featureFlagVariantKey;
+}
+
+export { PostHogContext, PostHogProvider, useActiveFeatureFlags, useFeatureFlagEnabled, useFeatureFlagPayload, useFeatureFlagVariantKey, usePostHog };

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

@@ -1,5 +0,7 @@
-import React from 'react';
-import { PostHogProviderValue } from './PostHogProvider';
-export declare function getPostHogContext(): React.Context<any>;
-export declare function usePostHogContext(): PostHogProviderValue;
+/// <reference types="react" />
+import posthogJs from 'posthog-js';
+export declare type PostHog = typeof posthogJs;
+export declare const PostHogContext: import("react").Context<{
+    client?: import("posthog-js").PostHog | undefined;
+}>;
 //# sourceMappingURL=PostHogContext.d.ts.map

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

@@ -1,20 +0,10 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { PostHog } from 'posthog-js';
-export interface FeatureFlags {
-    active?: string[];
-    enabled: {
-        [flag: string]: boolean | string;
-    };
-}
-interface PostHogProviderProps {
-    client: PostHog;
-    children: React.ReactNode | React.ReactNode[] | null;
-}
-export interface PostHogProviderValue {
-    client?: PostHog;
-    featureFlags: FeatureFlags;
-    setFeatureFlags: Dispatch<SetStateAction<FeatureFlags>>;
-}
-export declare const PostHogProvider: React.FC<PostHogProviderProps>;
-export {};
+import { PostHogConfig } from 'posthog-js';
+import * as React from 'react';
+import { PostHog } from './PostHogContext';
+export declare function PostHogProvider({ children, client, apiKey, options, }: {
+    children?: React.ReactNode;
+    client?: PostHog | undefined;
+    apiKey?: string | undefined;
+    options?: Partial<PostHogConfig> | undefined;
+}): JSX.Element;
 //# sourceMappingURL=PostHogProvider.d.ts.map

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

@@ -1,2 +0,6 @@
-export * from './useFeatureFlags';
+export * from './useFeatureFlagEnabled';
+export * from './useFeatureFlagPayload';
+export * from './useActiveFeatureFlags';
+export * from './useFeatureFlagVariantKey';
+export * from './usePostHog';
 //# sourceMappingURL=index.d.ts.map

react/dist/umd/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PosthogReact = {}, global.React));
-}(this, (function (exports, React) { 'use strict';
+    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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-    var cache = new Map();
-    function getPostHogContext() {
-        var context = cache.get(React__default['default'].createContext);
-        if (!context) {
-            context = React__default['default'].createContext({});
-            cache.set(React__default['default'].createContext, context);
+    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];
+                        }
+                    });
+                }
+            });
         }
-        return context;
+        n['default'] = e;
+        return Object.freeze(n);
     }
-    function usePostHogContext() {
-        var context = React.useContext(getPostHogContext());
-        if (!context.client) {
-            throw new Error('No PostHog client instance can be found. ' +
-                'Please ensure that your application is wrapped by `PostHogProvider`.');
-        }
-        return context;
-    }
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var posthogJs__default = /*#__PURE__*/_interopDefaultLegacy(posthogJs);
 
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
+    var PostHogContext = React.createContext({ client: undefined });
 
-    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.
-    ***************************************************************************** */
+    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 () {
+            if (client && apiKey) {
+                console.warn('You have provided both a client and an apiKey to PostHogProvider. The apiKey will be ignored in favour of the client.');
+            }
+            if (client && options) {
+                console.warn('You have provided both a client and options to PostHogProvider. The options will be ignored in favour of the client.');
+            }
+            if (posthog) {
+                return;
+            }
+            if (client) {
+                setPosthog(client);
+            }
+            else if (apiKey) {
+                posthogJs__default['default'].init(apiKey, options);
+                setPosthog(posthogJs__default['default']);
+            }
+        }, [posthog, client, apiKey, options]);
+        return React__namespace.createElement(PostHogContext.Provider, { value: { client: posthog } }, children);
+    }
 
-    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);
+    var usePostHog = function () {
+        var client = React.useContext(PostHogContext).client;
+        return client;
     };
 
-    var PostHogProvider = function (_a) {
-        var client = _a.client, children = _a.children;
-        var PostHogContext = getPostHogContext();
-        var _b = React.useState({ enabled: {} }), featureFlags = _b[0], setFeatureFlags = _b[1];
-        return (React__default['default'].createElement(PostHogContext.Consumer, null, function (context) {
-            if (client && context.client !== client) {
-                context = Object.assign({}, context, { client: client });
+    function useFeatureFlagEnabled(flag) {
+        var client = usePostHog();
+        var _a = React.useState(), featureEnabled = _a[0], setFeatureEnabled = _a[1];
+        React.useEffect(function () {
+            if (!client) {
+                return;
             }
-            if (!context.client) {
-                throw new Error('PostHogProvider was not passed a client instance. ' +
-                    'Make sure you pass in your PostHog client via the "client" prop.');
+            return client.onFeatureFlags(function () {
+                setFeatureEnabled(client.isFeatureEnabled(flag));
+            });
+        }, [client, flag]);
+        return featureEnabled;
+    }
+
+    function useFeatureFlagPayload(flag) {
+        var client = usePostHog();
+        var _a = React.useState(), featureFlagPayload = _a[0], setFeatureFlagPayload = _a[1];
+        React.useEffect(function () {
+            if (!client) {
+                return;
             }
-            var value = __assign(__assign({}, context), { featureFlags: featureFlags, setFeatureFlags: setFeatureFlags });
-            return React__default['default'].createElement(PostHogContext.Provider, { value: value }, children);
-        }));
-    };
+            return client.onFeatureFlags(function () {
+                setFeatureFlagPayload(client.getFeatureFlagPayload(flag));
+            });
+        }, [client, flag]);
+        return featureFlagPayload;
+    }
 
-    function useFeatureFlags(props) {
-        if (props === void 0) { props = {}; }
-        var _a = props.refreshInterval, refreshInterval = _a === void 0 ? 0 : _a, _b = props.sendEvent, sendEvent = _b === void 0 ? true : _b;
-        var _c = usePostHogContext(), posthog = _c.client, featureFlags = _c.featureFlags, setFeatureFlags = _c.setFeatureFlags;
-        var getEnabledFlags = React.useCallback(function (flags) {
-            var enabled = flags.reduce(function (result, flag) {
-                var flagValue = posthog === null || posthog === void 0 ? void 0 : posthog.getFeatureFlag(flag, {
-                    send_event: sendEvent,
-                });
-                if (typeof flagValue !== 'undefined') {
-                    result[flag] = flagValue;
-                }
-                return result;
-            }, {});
-            setFeatureFlags({ active: flags, enabled: enabled });
-        }, [posthog, sendEvent, setFeatureFlags]);
+    function useActiveFeatureFlags() {
+        var client = usePostHog();
+        var _a = React.useState(), featureFlags = _a[0], setFeatureFlags = _a[1];
         React.useEffect(function () {
-            if (posthog && refreshInterval > 0) {
-                var interval_1 = setInterval(function () {
-                    posthog === null || posthog === void 0 ? void 0 : posthog.featureFlags.reloadFeatureFlags();
-                }, refreshInterval * 1000);
-                return function () { return clearInterval(interval_1); };
+            if (!client) {
+                return;
             }
-        }, [posthog, refreshInterval, getEnabledFlags]);
-        React.useEffect(function () {
-            posthog === null || posthog === void 0 ? void 0 : posthog.onFeatureFlags(getEnabledFlags);
-        }, [posthog, getEnabledFlags]);
+            return client.onFeatureFlags(function (flags) {
+                setFeatureFlags(flags);
+            });
+        }, [client]);
         return featureFlags;
     }
 
+    function useFeatureFlagVariantKey(flag) {
+        var client = usePostHog();
+        var _a = React.useState(), featureFlagVariantKey = _a[0], setFeatureFlagVariantKey = _a[1];
+        React.useEffect(function () {
+            if (!client) {
+                return;
+            }
+            return client.onFeatureFlags(function () {
+                setFeatureFlagVariantKey(client.getFeatureFlag(flag));
+            });
+        }, [client, flag]);
+        return featureFlagVariantKey;
+    }
+
+    exports.PostHogContext = PostHogContext;
     exports.PostHogProvider = PostHogProvider;
-    exports.getPostHogContext = getPostHogContext;
-    exports.useFeatureFlags = useFeatureFlags;
-    exports.usePostHogContext = usePostHogContext;
+    exports.useActiveFeatureFlags = useActiveFeatureFlags;
+    exports.useFeatureFlagEnabled = useFeatureFlagEnabled;
+    exports.useFeatureFlagPayload = useFeatureFlagPayload;
+    exports.useFeatureFlagVariantKey = useFeatureFlagVariantKey;
+    exports.usePostHog = usePostHog;
 
 })));

react/package.json

 {
     "name": "posthog-js-react",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0",
     "private": false,
-    "description": "Provides components and hooks for React integrations of PostHog.",
+    "description": "Provides components and hooks for React integrations of PostHog. It is not published to NPM, but is used in the main posthog-js package.",
     "repository": {
@@ -67,3 +67,6 @@ "type": "git",
         ]
+    },
+    "dependencies": {
+        "@sentry/types": "7.37.2"
     }
 }

README.md

@@ -16,9 +16,29 @@ # PostHog Browser JS Library
 
-Testing on IE11 requires a bit more setup.
+Testing on IE11 requires a bit more setup. TestCafe tests will use the
+playground application to test the locally built array.full.js bundle. It will
+also verify that the events emitted during the testing of playground are loaded
+into the PostHog app. By default it uses https://app.posthog.com and the
+project with ID 11213. See the testcafe tests to see how to override these if
+needed. For PostHog internal users ask @benjackwhite or @hazzadous to invite you
+to the Project. You'll need to set `POSTHOG_API_KEY` to your personal API key, and
+`POSTHOG_PROJECT_KEY` to the key for the project you are using.
 
+You'll also need to sign up to [BrowserStack](https://www.browserstack.com/).
+Note that if you are using CodeSpaces, these variables will already be available
+in your shell env variables.
+
+After all this, you'll be able to run through the below steps:
+
+1. Optional: rebuild array.js on changes: `nodemon -w src/ --exec bash -c "yarn build-rollup"`.
+1. Export browserstack credentials: `export BROWSERSTACK_USERNAME=xxx BROWSERSTACK_ACCESS_KEY=xxx`.
+1. Run tests: `npx testcafe "browserstack:ie" testcafe/e2e.spec.js`.
+
+### Running local create react app example
+
+You can use the create react app setup in `playground/nextjs` to test posthog-js as an npm module in a Nextjs application.
+
 1. Run `posthog` locally on port 8000 (`DEBUG=1 TEST=1 ./bin/start`).
 2. Run `python manage.py setup_dev --no-data` on posthog repo, which sets up a demo account.
-3. Optional: rebuild array.js on changes: `nodemon -w src/ --exec bash -c "yarn build-rollup"`.
-4. Export browserstack credentials: `export BROWSERSTACK_USERNAME=xxx BROWSERSTACK_ACCESS_KEY=xxx`.
-5. Run tests: `npx testcafe "browserstack:ie" testcafe/e2e.spec.js`.
+3. Copy posthog token found in `http://localhost:8000/project/settings` and then
+4. `cd playground/nextjs`and run `NEXT_PUBLIC_POSTHOG_KEY='<your-local-api-key>' yarn dev`
 
@@ -39,3 +59,3 @@ ### Tiers of testing
 2. Link the `posthog-js` dependency to your local version (see below)
-3. Run `yarn serve` in `posthog-js`. (This ensures `dist/array.js` is being generated)
+3. Run `yarn start` in `posthog-js`. (This ensures `dist/array.js` is being generated)
 4. In your locally running `PostHog/posthog` build, run `yarn copy-scripts`. (This copies the scripts generated in step 3 to the static assets folder for `PostHog/posthog`)
@@ -52,3 +72,3 @@
 -   In the posthog repo
-    -   Run `yalc add posthog-js && pnpm i && pnpm-copy-scripts`
+    -   Run `yalc add posthog-js && pnpm i && pnpm copy-scripts`
 
@@ -97,4 +117,5 @@ #### When making changes
 
+
 ## Questions?
 
 ### [Join our Slack community.](https://posthog.com/slack)

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

Improved metrics

Total package byte prevSize

3638912

increased by52.69%

Dependency count

2

decreased by-33.33%

Number of package files

42

increased by50%

Number of lines in readme file

118

increased by21.65%

Worsened metrics

Dev dependency count

42

increased by10.53%

Lines of code

4291

decreased by-73.05%

Dependency changes

• - Removed@sentry/types@7.22.0

• - Removed@sentry/types@7.22.0(transitive)