diageo-age-gate-react 1.0.11 → 1.0.12

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 (4) hide show
  1. package/dist/components/urlChange.d.ts +13 -1
  2. package/dist/index.cjs +71 -38
  3. package/dist/index.mjs +72 -39
  4. package/package.json +1 -1
package/dist/components/urlChange.d.ts CHANGED
@@ -1 +1,13 @@
1
- export declare function useUrlChange(onChange: (url: string) => void): void;
1
+ type WatchType = "pathname" | "search" | "hash" | "all";
2
+ type RouteChangeOptions = {
3
+ watch?: WatchType;
4
+ onBeforeChange?: (url: URL) => void;
5
+ onAfterChange?: (url: URL) => void;
6
+ };
7
+ declare global {
8
+ interface Window {
9
+ __ROUTE_PATCHED__?: boolean;
10
+ }
11
+ }
12
+ export declare function useRouteChange(options?: RouteChangeOptions): void;
13
+ export {};
package/dist/index.cjs CHANGED
@@ -3,36 +3,72 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
5
 
6
- function useUrlChange(onChange) {
7
- const urlRef = react.useRef('');
6
+ const ROUTE_EVENT = "__internal_route_change__";
7
+ function patchHistory() {
8
+ if (window.__ROUTE_PATCHED__)
9
+ return;
10
+ const notify = (type) => {
11
+ const event = new CustomEvent(ROUTE_EVENT, {
12
+ detail: {
13
+ type,
14
+ url: new URL(window.location.href),
15
+ },
16
+ });
17
+ window.dispatchEvent(event);
18
+ };
19
+ const originalPush = history.pushState;
20
+ const originalReplace = history.replaceState;
21
+ history.pushState = function (...args) {
22
+ notify("before");
23
+ originalPush.apply(this, args);
24
+ notify("after");
25
+ };
26
+ history.replaceState = function (...args) {
27
+ notify("before");
28
+ originalReplace.apply(this, args);
29
+ notify("after");
30
+ };
31
+ window.addEventListener("popstate", () => {
32
+ notify("after");
33
+ });
34
+ window.__ROUTE_PATCHED__ = true;
35
+ }
36
+ function isChanged(prev, next, watch) {
37
+ switch (watch) {
38
+ case "pathname":
39
+ return prev.pathname !== next.pathname;
40
+ case "search":
41
+ return prev.search !== next.search;
42
+ case "hash":
43
+ return prev.hash !== next.hash;
44
+ case "all":
45
+ default:
46
+ return prev.href !== next.href;
47
+ }
48
+ }
49
+ function useRouteChange(options = {}) {
50
+ const { watch = "pathname", onBeforeChange, onAfterChange, } = options;
8
51
  react.useEffect(() => {
9
- urlRef.current = window.location.href;
10
- const check = () => {
11
- const current = window.location.href;
12
- if (urlRef.current !== current) {
13
- urlRef.current = current;
14
- onChange(current);
52
+ patchHistory();
53
+ let prevUrl = new URL(window.location.href);
54
+ const handler = (e) => {
55
+ const custom = e;
56
+ const { type, url } = custom.detail;
57
+ if (!isChanged(prevUrl, url, watch))
58
+ return;
59
+ if (type === "before") {
60
+ onBeforeChange?.(url);
61
+ }
62
+ if (type === "after") {
63
+ onAfterChange?.(url);
64
+ prevUrl = url;
15
65
  }
16
66
  };
17
- // 监听前进后退
18
- window.addEventListener('popstate', check);
19
- // 劫持导航方法
20
- const push = history.pushState;
21
- const replace = history.replaceState;
22
- history.pushState = (...args) => {
23
- push(...args);
24
- setTimeout(check, 0);
25
- };
26
- history.replaceState = (...args) => {
27
- replace(...args);
28
- setTimeout(check, 0);
29
- };
67
+ window.addEventListener(ROUTE_EVENT, handler);
30
68
  return () => {
31
- window.removeEventListener('popstate', check);
32
- history.pushState = push;
33
- history.replaceState = replace;
69
+ window.removeEventListener(ROUTE_EVENT, handler);
34
70
  };
35
- }, [onChange]);
71
+ }, [watch, onBeforeChange, onAfterChange]);
36
72
  }
37
73
 
38
74
  // ============ 内置工具函数 ============
@@ -59,23 +95,20 @@ function getUrlQuery(key) {
59
95
  }
60
96
  // ============ 组件 ============
61
97
  function AgeGate({ customerId, userHash, containerId = 'ageGateWrapper', noAgeGate = false, noFooter = false, countryCode: propCountryCode, language: propLanguage, }) {
62
- useUrlChange((url) => {
63
- console.log('当前URL:', url);
64
- const existingScript = document.querySelector(`script[src*="prod.diageoagegate.com"]`);
65
- if (existingScript) {
66
- existingScript.remove();
67
- }
68
- document.querySelector('#diageo-footer-wrap')?.remove();
69
- if (window?.init) {
70
- window.init();
71
- }
72
- else {
73
- initInjectFooterJs();
98
+ useRouteChange({
99
+ onAfterChange: () => {
100
+ document.querySelector('#diageo-footer-wrap')?.remove();
101
+ if (window?.init) {
102
+ window.init();
103
+ }
104
+ else {
105
+ initInjectFooterJs();
106
+ }
74
107
  }
75
108
  });
76
109
  react.useEffect(() => {
77
110
  initInjectFooterJs();
78
- }, [customerId, userHash, containerId, noAgeGate, noFooter, propCountryCode, propLanguage]);
111
+ }, []);
79
112
  function initInjectFooterJs() {
80
113
  // URL 参数控制
81
114
  const noFooterFromQuery = getUrlQuery('pageStatus') === 'noFooter';
package/dist/index.mjs CHANGED
@@ -1,36 +1,72 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { useRef, useEffect } from 'react';
2
+ import { useEffect } from 'react';
3
3
 
4
- function useUrlChange(onChange) {
5
- const urlRef = useRef('');
4
+ const ROUTE_EVENT = "__internal_route_change__";
5
+ function patchHistory() {
6
+ if (window.__ROUTE_PATCHED__)
7
+ return;
8
+ const notify = (type) => {
9
+ const event = new CustomEvent(ROUTE_EVENT, {
10
+ detail: {
11
+ type,
12
+ url: new URL(window.location.href),
13
+ },
14
+ });
15
+ window.dispatchEvent(event);
16
+ };
17
+ const originalPush = history.pushState;
18
+ const originalReplace = history.replaceState;
19
+ history.pushState = function (...args) {
20
+ notify("before");
21
+ originalPush.apply(this, args);
22
+ notify("after");
23
+ };
24
+ history.replaceState = function (...args) {
25
+ notify("before");
26
+ originalReplace.apply(this, args);
27
+ notify("after");
28
+ };
29
+ window.addEventListener("popstate", () => {
30
+ notify("after");
31
+ });
32
+ window.__ROUTE_PATCHED__ = true;
33
+ }
34
+ function isChanged(prev, next, watch) {
35
+ switch (watch) {
36
+ case "pathname":
37
+ return prev.pathname !== next.pathname;
38
+ case "search":
39
+ return prev.search !== next.search;
40
+ case "hash":
41
+ return prev.hash !== next.hash;
42
+ case "all":
43
+ default:
44
+ return prev.href !== next.href;
45
+ }
46
+ }
47
+ function useRouteChange(options = {}) {
48
+ const { watch = "pathname", onBeforeChange, onAfterChange, } = options;
6
49
  useEffect(() => {
7
- urlRef.current = window.location.href;
8
- const check = () => {
9
- const current = window.location.href;
10
- if (urlRef.current !== current) {
11
- urlRef.current = current;
12
- onChange(current);
50
+ patchHistory();
51
+ let prevUrl = new URL(window.location.href);
52
+ const handler = (e) => {
53
+ const custom = e;
54
+ const { type, url } = custom.detail;
55
+ if (!isChanged(prevUrl, url, watch))
56
+ return;
57
+ if (type === "before") {
58
+ onBeforeChange?.(url);
59
+ }
60
+ if (type === "after") {
61
+ onAfterChange?.(url);
62
+ prevUrl = url;
13
63
  }
14
64
  };
15
- // 监听前进后退
16
- window.addEventListener('popstate', check);
17
- // 劫持导航方法
18
- const push = history.pushState;
19
- const replace = history.replaceState;
20
- history.pushState = (...args) => {
21
- push(...args);
22
- setTimeout(check, 0);
23
- };
24
- history.replaceState = (...args) => {
25
- replace(...args);
26
- setTimeout(check, 0);
27
- };
65
+ window.addEventListener(ROUTE_EVENT, handler);
28
66
  return () => {
29
- window.removeEventListener('popstate', check);
30
- history.pushState = push;
31
- history.replaceState = replace;
67
+ window.removeEventListener(ROUTE_EVENT, handler);
32
68
  };
33
- }, [onChange]);
69
+ }, [watch, onBeforeChange, onAfterChange]);
34
70
  }
35
71
 
36
72
  // ============ 内置工具函数 ============
@@ -57,23 +93,20 @@ function getUrlQuery(key) {
57
93
  }
58
94
  // ============ 组件 ============
59
95
  function AgeGate({ customerId, userHash, containerId = 'ageGateWrapper', noAgeGate = false, noFooter = false, countryCode: propCountryCode, language: propLanguage, }) {
60
- useUrlChange((url) => {
61
- console.log('当前URL:', url);
62
- const existingScript = document.querySelector(`script[src*="prod.diageoagegate.com"]`);
63
- if (existingScript) {
64
- existingScript.remove();
65
- }
66
- document.querySelector('#diageo-footer-wrap')?.remove();
67
- if (window?.init) {
68
- window.init();
69
- }
70
- else {
71
- initInjectFooterJs();
96
+ useRouteChange({
97
+ onAfterChange: () => {
98
+ document.querySelector('#diageo-footer-wrap')?.remove();
99
+ if (window?.init) {
100
+ window.init();
101
+ }
102
+ else {
103
+ initInjectFooterJs();
104
+ }
72
105
  }
73
106
  });
74
107
  useEffect(() => {
75
108
  initInjectFooterJs();
76
- }, [customerId, userHash, containerId, noAgeGate, noFooter, propCountryCode, propLanguage]);
109
+ }, []);
77
110
  function initInjectFooterJs() {
78
111
  // URL 参数控制
79
112
  const noFooterFromQuery = getUrlQuery('pageStatus') === 'noFooter';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "diageo-age-gate-react",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "keywords": [
5
5
  "mlp diageo",
6
6
  "age gate footer"