@easyfunnel/react 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +6 -3
  2. package/dist/index.d.ts +6 -3
  3. package/dist/index.js +45 -5
  4. package/dist/index.mjs +45 -6
  5. package/package.json +4 -4
package/dist/index.d.mts CHANGED
@@ -1,14 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react from 'react';
2
3
  import { ReactNode } from 'react';
3
- import { EasyFunnelOptions, Tracker } from '@easyfunnel/sdk';
4
+ import { EasyFunnelOptions, EasyFunnelConfig, Tracker } from '@easyfunnel/sdk';
4
5
 
5
6
  interface EasyFunnelProviderProps extends Omit<EasyFunnelOptions, 'autoPageView'> {
6
7
  children: ReactNode;
8
+ config?: EasyFunnelConfig;
7
9
  }
8
- declare function EasyFunnelProvider({ children, ...options }: EasyFunnelProviderProps): react_jsx_runtime.JSX.Element;
10
+ declare function EasyFunnelProvider({ children, config, ...options }: EasyFunnelProviderProps): react_jsx_runtime.JSX.Element;
9
11
  declare function useEasyFunnel(): Tracker | null;
10
12
 
11
13
  declare function useTrack(): (eventName: string, properties?: Record<string, any>) => void;
12
14
  declare function useIdentify(): (userId: string) => void;
15
+ declare function useSectionRef<T extends HTMLElement = HTMLElement>(sectionName: string): react.RefObject<T | null>;
13
16
 
14
- export { EasyFunnelProvider, useEasyFunnel, useIdentify, useTrack };
17
+ export { EasyFunnelProvider, useEasyFunnel, useIdentify, useSectionRef, useTrack };
package/dist/index.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react from 'react';
2
3
  import { ReactNode } from 'react';
3
- import { EasyFunnelOptions, Tracker } from '@easyfunnel/sdk';
4
+ import { EasyFunnelOptions, EasyFunnelConfig, Tracker } from '@easyfunnel/sdk';
4
5
 
5
6
  interface EasyFunnelProviderProps extends Omit<EasyFunnelOptions, 'autoPageView'> {
6
7
  children: ReactNode;
8
+ config?: EasyFunnelConfig;
7
9
  }
8
- declare function EasyFunnelProvider({ children, ...options }: EasyFunnelProviderProps): react_jsx_runtime.JSX.Element;
10
+ declare function EasyFunnelProvider({ children, config, ...options }: EasyFunnelProviderProps): react_jsx_runtime.JSX.Element;
9
11
  declare function useEasyFunnel(): Tracker | null;
10
12
 
11
13
  declare function useTrack(): (eventName: string, properties?: Record<string, any>) => void;
12
14
  declare function useIdentify(): (userId: string) => void;
15
+ declare function useSectionRef<T extends HTMLElement = HTMLElement>(sectionName: string): react.RefObject<T | null>;
13
16
 
14
- export { EasyFunnelProvider, useEasyFunnel, useIdentify, useTrack };
17
+ export { EasyFunnelProvider, useEasyFunnel, useIdentify, useSectionRef, useTrack };
package/dist/index.js CHANGED
@@ -52,6 +52,7 @@ __export(index_exports, {
52
52
  EasyFunnelProvider: () => EasyFunnelProvider,
53
53
  useEasyFunnel: () => useEasyFunnel,
54
54
  useIdentify: () => useIdentify,
55
+ useSectionRef: () => useSectionRef,
55
56
  useTrack: () => useTrack
56
57
  });
57
58
  module.exports = __toCommonJS(index_exports);
@@ -63,15 +64,24 @@ var import_jsx_runtime = require("react/jsx-runtime");
63
64
  var EasyFunnelContext = (0, import_react.createContext)(null);
64
65
  function EasyFunnelProvider(_a) {
65
66
  var _b = _a, {
66
- children
67
+ children,
68
+ config
67
69
  } = _b, options = __objRest(_b, [
68
- "children"
70
+ "children",
71
+ "config"
69
72
  ]);
70
73
  const trackerRef = (0, import_react.useRef)(null);
71
74
  (0, import_react.useEffect)(() => {
75
+ if (!options.apiKey) {
76
+ console.error(
77
+ "[EasyFunnel] apiKey prop is missing on <EasyFunnelProvider>. Events will not be tracked. Check your environment variable is set and restart your dev server."
78
+ );
79
+ return;
80
+ }
72
81
  if (!trackerRef.current) {
73
82
  trackerRef.current = import_sdk.EasyFunnel.init(__spreadProps(__spreadValues({}, options), {
74
- autoPageView: true
83
+ autoPageView: true,
84
+ rules: config == null ? void 0 : config.rules
75
85
  }));
76
86
  }
77
87
  return () => {
@@ -92,7 +102,14 @@ function useTrack() {
92
102
  const tracker = useEasyFunnel();
93
103
  return (0, import_react2.useCallback)(
94
104
  (eventName, properties) => {
95
- tracker == null ? void 0 : tracker.track(eventName, properties);
105
+ var _a;
106
+ if (!tracker) {
107
+ if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) === "development") {
108
+ console.warn(`[EasyFunnel] track("${eventName}") dropped \u2014 no provider found. Wrap your app with <EasyFunnelProvider>.`);
109
+ }
110
+ return;
111
+ }
112
+ tracker.track(eventName, properties);
96
113
  },
97
114
  [tracker]
98
115
  );
@@ -101,15 +118,38 @@ function useIdentify() {
101
118
  const tracker = useEasyFunnel();
102
119
  return (0, import_react2.useCallback)(
103
120
  (userId) => {
104
- tracker == null ? void 0 : tracker.identify(userId);
121
+ var _a;
122
+ if (!tracker) {
123
+ if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) === "development") {
124
+ console.warn(`[EasyFunnel] identify("${userId}") dropped \u2014 no provider found. Wrap your app with <EasyFunnelProvider>.`);
125
+ }
126
+ return;
127
+ }
128
+ tracker.identify(userId);
105
129
  },
106
130
  [tracker]
107
131
  );
108
132
  }
133
+ function useSectionRef(sectionName) {
134
+ const ref = (0, import_react2.useRef)(null);
135
+ (0, import_react2.useEffect)(() => {
136
+ const el = ref.current;
137
+ if (el) {
138
+ el.setAttribute("data-ef-section", sectionName);
139
+ }
140
+ return () => {
141
+ if (el) {
142
+ el.removeAttribute("data-ef-section");
143
+ }
144
+ };
145
+ }, [sectionName]);
146
+ return ref;
147
+ }
109
148
  // Annotate the CommonJS export names for ESM import in node:
110
149
  0 && (module.exports = {
111
150
  EasyFunnelProvider,
112
151
  useEasyFunnel,
113
152
  useIdentify,
153
+ useSectionRef,
114
154
  useTrack
115
155
  });
package/dist/index.mjs CHANGED
@@ -42,15 +42,24 @@ import { jsx } from "react/jsx-runtime";
42
42
  var EasyFunnelContext = createContext(null);
43
43
  function EasyFunnelProvider(_a) {
44
44
  var _b = _a, {
45
- children
45
+ children,
46
+ config
46
47
  } = _b, options = __objRest(_b, [
47
- "children"
48
+ "children",
49
+ "config"
48
50
  ]);
49
51
  const trackerRef = useRef(null);
50
52
  useEffect(() => {
53
+ if (!options.apiKey) {
54
+ console.error(
55
+ "[EasyFunnel] apiKey prop is missing on <EasyFunnelProvider>. Events will not be tracked. Check your environment variable is set and restart your dev server."
56
+ );
57
+ return;
58
+ }
51
59
  if (!trackerRef.current) {
52
60
  trackerRef.current = EasyFunnel.init(__spreadProps(__spreadValues({}, options), {
53
- autoPageView: true
61
+ autoPageView: true,
62
+ rules: config == null ? void 0 : config.rules
54
63
  }));
55
64
  }
56
65
  return () => {
@@ -66,12 +75,19 @@ function useEasyFunnel() {
66
75
  }
67
76
 
68
77
  // src/hooks.ts
69
- import { useCallback } from "react";
78
+ import { useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
70
79
  function useTrack() {
71
80
  const tracker = useEasyFunnel();
72
81
  return useCallback(
73
82
  (eventName, properties) => {
74
- tracker == null ? void 0 : tracker.track(eventName, properties);
83
+ var _a;
84
+ if (!tracker) {
85
+ if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) === "development") {
86
+ console.warn(`[EasyFunnel] track("${eventName}") dropped \u2014 no provider found. Wrap your app with <EasyFunnelProvider>.`);
87
+ }
88
+ return;
89
+ }
90
+ tracker.track(eventName, properties);
75
91
  },
76
92
  [tracker]
77
93
  );
@@ -80,14 +96,37 @@ function useIdentify() {
80
96
  const tracker = useEasyFunnel();
81
97
  return useCallback(
82
98
  (userId) => {
83
- tracker == null ? void 0 : tracker.identify(userId);
99
+ var _a;
100
+ if (!tracker) {
101
+ if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) === "development") {
102
+ console.warn(`[EasyFunnel] identify("${userId}") dropped \u2014 no provider found. Wrap your app with <EasyFunnelProvider>.`);
103
+ }
104
+ return;
105
+ }
106
+ tracker.identify(userId);
84
107
  },
85
108
  [tracker]
86
109
  );
87
110
  }
111
+ function useSectionRef(sectionName) {
112
+ const ref = useRef2(null);
113
+ useEffect2(() => {
114
+ const el = ref.current;
115
+ if (el) {
116
+ el.setAttribute("data-ef-section", sectionName);
117
+ }
118
+ return () => {
119
+ if (el) {
120
+ el.removeAttribute("data-ef-section");
121
+ }
122
+ };
123
+ }, [sectionName]);
124
+ return ref;
125
+ }
88
126
  export {
89
127
  EasyFunnelProvider,
90
128
  useEasyFunnel,
91
129
  useIdentify,
130
+ useSectionRef,
92
131
  useTrack
93
132
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easyfunnel/react",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "React/Next.js provider for easyfunnel.co analytics",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -13,11 +13,11 @@
13
13
  "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch"
14
14
  },
15
15
  "dependencies": {
16
- "@easyfunnel/sdk": "0.1.1"
16
+ "@easyfunnel/sdk": "^0.1.3"
17
17
  },
18
18
  "peerDependencies": {
19
- "react": ">=18.0.0",
20
- "next": ">=14.0.0"
19
+ "next": ">=14.0.0",
20
+ "react": ">=18.0.0"
21
21
  },
22
22
  "peerDependenciesMeta": {
23
23
  "next": {