react-native-maplibre-gl-js 1.1.0 → 1.2.1
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.
- package/README.md +22 -11
- package/lib/module/react-native/components/Map/Map.test.js +19 -0
- package/lib/module/react-native/components/Map/Map.test.js.map +1 -0
- package/lib/module/react-native/components/MapProvider/MapProvider.hooks.js +148 -1
- package/lib/module/react-native/components/MapProvider/MapProvider.hooks.js.map +1 -1
- package/lib/module/react-native/components/MapProvider/MapProvider.js +18 -84
- package/lib/module/react-native/components/MapProvider/MapProvider.js.map +1 -1
- package/lib/module/react-native/components/MapProvider/MapProvider.test.js +144 -0
- package/lib/module/react-native/components/MapProvider/MapProvider.test.js.map +1 -0
- package/lib/module/react-native/components/MapProvider/MapProvider.utils.js +58 -0
- package/lib/module/react-native/components/MapProvider/MapProvider.utils.js.map +1 -0
- package/lib/module/react-native/components/Marker/Marker.js +7 -11
- package/lib/module/react-native/components/Marker/Marker.js.map +1 -1
- package/lib/module/react-native/components/Marker/Marker.test.js +19 -0
- package/lib/module/react-native/components/Marker/Marker.test.js.map +1 -0
- package/lib/module/react-native/components/Popup/Popup.js +3 -1
- package/lib/module/react-native/components/Popup/Popup.js.map +1 -1
- package/lib/module/react-native/components/Popup/Popup.test.js +19 -0
- package/lib/module/react-native/components/Popup/Popup.test.js.map +1 -0
- package/lib/module/react-native/components-factory/createWebObjectAsComponent.js +3 -5
- package/lib/module/react-native/components-factory/createWebObjectAsComponent.js.map +1 -1
- package/lib/module/react-native/components-factory/createWebObjectAsComponent.test.js +28 -0
- package/lib/module/react-native/components-factory/createWebObjectAsComponent.test.js.map +1 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectMethodsProxy.mock.js +5 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectMethodsProxy.mock.js.map +1 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectMountOnLaunch.mock.js +5 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectMountOnLaunch.mock.js.map +1 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.js +14 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.js.map +1 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.mock.js +5 -0
- package/lib/module/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.mock.js.map +1 -0
- package/lib/module/react-native/hooks/atoms/useMapAtoms.mock.js +12 -0
- package/lib/module/react-native/hooks/atoms/useMapAtoms.mock.js.map +1 -0
- package/lib/module/react-native/logger/rn-logger.js +1 -1
- package/lib/module/react-native/logger/rn-logger.js.map +1 -1
- package/lib/module/react-native/logger/rn-logger.mock.js +10 -0
- package/lib/module/react-native/logger/rn-logger.mock.js.map +1 -0
- package/lib/module/web/generated/webview_static_html.js +3329 -3268
- package/lib/module/web/generated/webview_static_html.js.map +1 -1
- package/lib/module/web/maplibre-gl-js/MapController.js +0 -5
- package/lib/module/web/maplibre-gl-js/MapController.js.map +1 -1
- package/lib/typescript/jest.setup.d.ts +2 -0
- package/lib/typescript/jest.setup.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components/Map/Map.test.d.ts +2 -0
- package/lib/typescript/src/react-native/components/Map/Map.test.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.d.ts +1 -1
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.d.ts.map +1 -1
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.hooks.d.ts +26 -0
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.hooks.d.ts.map +1 -1
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.test.d.ts +2 -0
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.test.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.types.d.ts +15 -0
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.types.d.ts.map +1 -1
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.utils.d.ts +14 -0
- package/lib/typescript/src/react-native/components/MapProvider/MapProvider.utils.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components/Marker/Marker.d.ts +7 -11
- package/lib/typescript/src/react-native/components/Marker/Marker.d.ts.map +1 -1
- package/lib/typescript/src/react-native/components/Marker/Marker.test.d.ts +2 -0
- package/lib/typescript/src/react-native/components/Marker/Marker.test.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components/Popup/Popup.d.ts +3 -1
- package/lib/typescript/src/react-native/components/Popup/Popup.d.ts.map +1 -1
- package/lib/typescript/src/react-native/components/Popup/Popup.test.d.ts +2 -0
- package/lib/typescript/src/react-native/components/Popup/Popup.test.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components-factory/createWebObjectAsComponent.d.ts.map +1 -1
- package/lib/typescript/src/react-native/components-factory/createWebObjectAsComponent.test.d.ts +2 -0
- package/lib/typescript/src/react-native/components-factory/createWebObjectAsComponent.test.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectMethodsProxy.mock.d.ts +3 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectMethodsProxy.mock.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectMountOnLaunch.mock.d.ts +3 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectMountOnLaunch.mock.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.d.ts +4 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.d.ts.map +1 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.mock.d.ts +3 -0
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectPropertiesUpdater.mock.d.ts.map +1 -0
- package/lib/typescript/src/react-native/hooks/atoms/useMapAtoms.mock.d.ts +10 -0
- package/lib/typescript/src/react-native/hooks/atoms/useMapAtoms.mock.d.ts.map +1 -0
- package/lib/typescript/src/react-native/logger/rn-logger.mock.d.ts +7 -0
- package/lib/typescript/src/react-native/logger/rn-logger.mock.d.ts.map +1 -0
- package/lib/typescript/src/web/generated/webview_static_html.d.ts +1 -1
- package/lib/typescript/src/web/generated/webview_static_html.d.ts.map +1 -1
- package/lib/typescript/src/web/maplibre-gl-js/MapController.d.ts.map +1 -1
- package/package.json +6 -10
- package/lib/module/react-native/components-factory/hooks/useWebObjectOptionsUpdater.js +0 -20
- package/lib/module/react-native/components-factory/hooks/useWebObjectOptionsUpdater.js.map +0 -1
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectOptionsUpdater.d.ts +0 -5
- package/lib/typescript/src/react-native/components-factory/hooks/useWebObjectOptionsUpdater.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
|
+
|
|
1
2
|
<div align="center">
|
|
2
3
|
<h1>react-native-maplibre-gl-js</h1>
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
<a href="https://github.com/emilienaufauvre/react-native-maplibre-gl-js/actions/workflows/validation.yml">
|
|
5
|
+
<img src="https://img.shields.io/github/actions/workflow/status/emilienaufauvre/react-native-maplibre-gl-js/validation.yml?branch=main&style=for-the-badge&label=Validation&labelColor=black" />
|
|
6
|
+
</a>
|
|
7
|
+
<a href="https://codecov.io/github/emilienaufauvre/react-native-maplibre-gl-js">
|
|
8
|
+
<img src="https://img.shields.io/codecov/c/github/emilienaufauvre/react-native-maplibre-gl-js/main?style=for-the-badge&labelColor=black&label=Test%20coverage" />
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://github.com/emilienaufauvre/react-native-maplibre-gl-js/actions/workflows/delivery.yml">
|
|
11
|
+
<img src="https://img.shields.io/github/actions/workflow/status/emilienaufauvre/react-native-maplibre-gl-js/delivery.yml?branch=main&style=for-the-badge&label=Delivery&labelColor=black" />
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://www.npmjs.com/package/react-native-maplibre-gl-js">
|
|
14
|
+
<img src="https://img.shields.io/npm/v/react-native-maplibre-gl-js.svg?style=for-the-badge&label=NPM&labelColor=black" />
|
|
15
|
+
</a>
|
|
9
16
|
</div>
|
|
10
17
|
|
|
11
18
|
<div align="center">
|
|
@@ -43,12 +50,14 @@
|
|
|
43
50
|
|
|
44
51
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
45
52
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
46
|
-
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
47
53
|
|
|
48
54
|
- [Supported platforms](#supported-platforms)
|
|
49
55
|
- [Installation](#installation)
|
|
50
56
|
- [📚 Documentation](#-documentation)
|
|
51
57
|
- [🧪 Examples](#-examples)
|
|
58
|
+
- [1. Map](#1-map)
|
|
59
|
+
- [2. Marker](#2-marker)
|
|
60
|
+
- [3. Popup](#3-popup)
|
|
52
61
|
- [🏁 Getting started](#-getting-started)
|
|
53
62
|
- [📝 Design rationale](#-design-rationale)
|
|
54
63
|
- [Existing React Native map solutions](#existing-react-native-map-solutions)
|
|
@@ -99,14 +108,16 @@ Several real-world usage scenarios are available, you can explore them in two wa
|
|
|
99
108
|
- [`1.2. Create a camera animation`](./example/src/app/1.-Map/1.2.-Create-a-camera-animation.tsx)
|
|
100
109
|
- [`1.3. Use the globe projection`](./example/src/app/1.-Map/1.3.-Use-the-globe-projection.tsx)
|
|
101
110
|
- [`1.4. Add a raster tile source directly on map`](./example/src/app/1.-Map/1.4.-Add-a-raster-tile-source-directly-on-map.tsx)
|
|
111
|
+
- [`1.5. Use global css styles`](./example/src/app/1.-Map/1.5.-Use-global-css-styles.tsx)
|
|
102
112
|
|
|
103
113
|
### 2. Marker
|
|
104
114
|
|
|
105
115
|
- [`2.1. Component basis`](./example/src/app/2.-Marker/2.1.-Component-basis.tsx)
|
|
106
|
-
- [`2.2. Animate the coordinate`](./example/src/app/2.-Marker/2.2.-Animate-the-coordinate.tsx)
|
|
107
|
-
- [`2.3.
|
|
108
|
-
- [`2.4. Use an
|
|
109
|
-
- [`2.5.
|
|
116
|
+
- [`2.2. Animate the coordinate with reanimated`](./example/src/app/2.-Marker/2.2.-Animate-the-coordinate-with-reanimated.tsx)
|
|
117
|
+
- [`2.3. Animate on click with css`](./example/src/app/2.-Marker/2.3.-Animate-on-click-with-css.tsx)
|
|
118
|
+
- [`2.4. Use an detached popup`](./example/src/app/2.-Marker/2.4.-Use-an-detached-popup.tsx)
|
|
119
|
+
- [`2.5. Use an attached popup`](./example/src/app/2.-Marker/2.5.-Use-an-attached-popup.tsx)
|
|
120
|
+
- [`2.6. Propagates the events to a parent component`](./example/src/app/2.-Marker/2.6.-Propagates-the-events-to-a-parent-component.tsx)
|
|
110
121
|
|
|
111
122
|
### 3. Popup
|
|
112
123
|
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { render } from '@testing-library/react-native';
|
|
4
|
+
import Map from "./Map.js";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
describe('Map', () => {
|
|
7
|
+
beforeEach(() => {
|
|
8
|
+
jest.clearAllMocks();
|
|
9
|
+
});
|
|
10
|
+
describe('Given the component is rendered', () => {
|
|
11
|
+
beforeEach(() => {
|
|
12
|
+
render(/*#__PURE__*/_jsx(Map, {}));
|
|
13
|
+
});
|
|
14
|
+
describe('When nothing', () => {
|
|
15
|
+
test('Then it does not crash', () => {});
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
//# sourceMappingURL=Map.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["render","Map","jsx","_jsx","describe","beforeEach","jest","clearAllMocks","test"],"sourceRoot":"../../../../../src","sources":["react-native/components/Map/Map.test.tsx"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,+BAA+B;AACtD,OAAOC,GAAG,MAAM,UAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEvBC,QAAQ,CAAC,KAAK,EAAE,MAAM;EACpBC,UAAU,CAAC,MAAM;IACfC,IAAI,CAACC,aAAa,CAAC,CAAC;EACtB,CAAC,CAAC;EAEFH,QAAQ,CAAC,iCAAiC,EAAE,MAAM;IAChDC,UAAU,CAAC,MAAM;MACfL,MAAM,cAACG,IAAA,CAACF,GAAG,IAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEFG,QAAQ,CAAC,cAAc,EAAE,MAAM;MAC7BI,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { StyleSheet } from 'react-native';
|
|
4
|
-
import { useMemo } from 'react';
|
|
4
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
5
|
+
import RNLogger from "../../logger/rn-logger.js";
|
|
6
|
+
import { isWebObjectListenerOnHTMLElement, isWebObjectListenerOnMapLayer, isWebObjectListenerOnObject, isWebObjectListenerOnRN } from "../../../communication/messages.utils.js";
|
|
7
|
+
import useMapAtoms from "../../hooks/atoms/useMapAtoms.js";
|
|
8
|
+
import { buildCssInjectionScript, normalizeCss } from "./MapProvider.utils.js";
|
|
5
9
|
export const useStyles = () => {
|
|
6
10
|
return useMemo(() => StyleSheet.create({
|
|
7
11
|
container: {
|
|
@@ -15,4 +19,147 @@ export const useStyles = () => {
|
|
|
15
19
|
}
|
|
16
20
|
}), []);
|
|
17
21
|
};
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* On start, the map must be mounted before any other map element. When the
|
|
25
|
+
* mount message of the map is ready, we flush all the pending messages to
|
|
26
|
+
* the web world.
|
|
27
|
+
*/
|
|
28
|
+
export const useFlushMessagesOnMapMounted = () => {
|
|
29
|
+
// States.
|
|
30
|
+
// - Global.
|
|
31
|
+
const {
|
|
32
|
+
isMapMountMessageReady,
|
|
33
|
+
flushMessages
|
|
34
|
+
} = useMapAtoms();
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (isMapMountMessageReady) {
|
|
37
|
+
flushMessages();
|
|
38
|
+
}
|
|
39
|
+
}, [flushMessages, isMapMountMessageReady]);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* @returns - The handler that will receive the messages from the web world.
|
|
44
|
+
*/
|
|
45
|
+
export const useWebMessageHandler = () => {
|
|
46
|
+
// States.
|
|
47
|
+
// - Global.
|
|
48
|
+
const {
|
|
49
|
+
setIsWebWorldReady,
|
|
50
|
+
getWebObjectListeners,
|
|
51
|
+
resolveWebObjectPendingMethodResponse
|
|
52
|
+
} = useMapAtoms();
|
|
53
|
+
const createWebViewMessageHandler = useCallback(handlers => {
|
|
54
|
+
// Not an anonymous function => get the function name for logger.
|
|
55
|
+
return function handleMessage(event) {
|
|
56
|
+
try {
|
|
57
|
+
RNLogger.debug('RN', handleMessage.name, event?.nativeEvent?.data);
|
|
58
|
+
const message = JSON.parse(event.nativeEvent.data);
|
|
59
|
+
const handler = handlers[message.type];
|
|
60
|
+
return handler?.(message);
|
|
61
|
+
} catch (error) {
|
|
62
|
+
RNLogger.error('RN', handleMessage.name, error.message);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
}, []);
|
|
66
|
+
|
|
67
|
+
// Handle the messages from the web world by dispatching the message to the
|
|
68
|
+
// corresponding handler.
|
|
69
|
+
const handler = useMemo(() => {
|
|
70
|
+
return createWebViewMessageHandler({
|
|
71
|
+
console: ({
|
|
72
|
+
payload: {
|
|
73
|
+
args,
|
|
74
|
+
level
|
|
75
|
+
}
|
|
76
|
+
}) => {
|
|
77
|
+
RNLogger[level]('Web', args[0], ...args.slice(1));
|
|
78
|
+
},
|
|
79
|
+
ready: () => {
|
|
80
|
+
setIsWebWorldReady(true);
|
|
81
|
+
},
|
|
82
|
+
webObjectListenerEvent: ({
|
|
83
|
+
payload: {
|
|
84
|
+
eventName,
|
|
85
|
+
event,
|
|
86
|
+
objectId
|
|
87
|
+
}
|
|
88
|
+
}) => {
|
|
89
|
+
// Retrieve the corresponding object listener.
|
|
90
|
+
const listener = getWebObjectListeners({
|
|
91
|
+
objectId
|
|
92
|
+
})?.[eventName];
|
|
93
|
+
// Then, call it.
|
|
94
|
+
if (isWebObjectListenerOnRN(listener)) {
|
|
95
|
+
;
|
|
96
|
+
listener.rnListener(event);
|
|
97
|
+
}
|
|
98
|
+
if (isWebObjectListenerOnObject(listener)) {
|
|
99
|
+
;
|
|
100
|
+
listener.objectListener(event);
|
|
101
|
+
}
|
|
102
|
+
if (isWebObjectListenerOnMapLayer(listener)) {
|
|
103
|
+
;
|
|
104
|
+
listener.layerListener(event);
|
|
105
|
+
}
|
|
106
|
+
if (isWebObjectListenerOnHTMLElement(listener)) {
|
|
107
|
+
;
|
|
108
|
+
listener.elementListener(event);
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
webObjectMethodResponse: ({
|
|
112
|
+
payload: {
|
|
113
|
+
requestId,
|
|
114
|
+
result
|
|
115
|
+
}
|
|
116
|
+
}) => {
|
|
117
|
+
resolveWebObjectPendingMethodResponse({
|
|
118
|
+
requestId,
|
|
119
|
+
result
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
}, [createWebViewMessageHandler, setIsWebWorldReady, getWebObjectListeners, resolveWebObjectPendingMethodResponse]);
|
|
124
|
+
return {
|
|
125
|
+
handler
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* @param injectedCss - The CSS to be injected.
|
|
131
|
+
* @returns - The given CSS in a format that can be injected into the WebView.
|
|
132
|
+
*/
|
|
133
|
+
export const useCssInjectionScript = injectedCss => {
|
|
134
|
+
const cssInjectionScript = useMemo(() => {
|
|
135
|
+
const normalizedCss = normalizeCss(injectedCss);
|
|
136
|
+
return normalizedCss ? buildCssInjectionScript(normalizedCss) : undefined;
|
|
137
|
+
}, [injectedCss]);
|
|
138
|
+
return {
|
|
139
|
+
cssInjectionScript
|
|
140
|
+
};
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* Inject the given script into the WebView if it changed.
|
|
145
|
+
* @param cssInjectionScript - A script that injects CSS once executed within
|
|
146
|
+
* the WebView.
|
|
147
|
+
*/
|
|
148
|
+
export const useInjectJavaScriptIfInjectedCssChanged = cssInjectionScript => {
|
|
149
|
+
// Refs.
|
|
150
|
+
const lastInjectedScriptRef = useRef(null);
|
|
151
|
+
// States.
|
|
152
|
+
// - Global.
|
|
153
|
+
const {
|
|
154
|
+
webView,
|
|
155
|
+
isWebWorldReady
|
|
156
|
+
} = useMapAtoms();
|
|
157
|
+
useEffect(() => {
|
|
158
|
+
if (!cssInjectionScript || !isWebWorldReady || !webView || lastInjectedScriptRef.current === cssInjectionScript) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
webView?.injectJavaScript(cssInjectionScript);
|
|
162
|
+
lastInjectedScriptRef.current = cssInjectionScript;
|
|
163
|
+
}, [cssInjectionScript, isWebWorldReady, webView]);
|
|
164
|
+
};
|
|
18
165
|
//# sourceMappingURL=MapProvider.hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","useMemo","useStyles","create","container","width","height","overflow","webView","flex","backgroundColor"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.hooks.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,OAAO,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"names":["StyleSheet","useCallback","useEffect","useMemo","useRef","RNLogger","isWebObjectListenerOnHTMLElement","isWebObjectListenerOnMapLayer","isWebObjectListenerOnObject","isWebObjectListenerOnRN","useMapAtoms","buildCssInjectionScript","normalizeCss","useStyles","create","container","width","height","overflow","webView","flex","backgroundColor","useFlushMessagesOnMapMounted","isMapMountMessageReady","flushMessages","useWebMessageHandler","setIsWebWorldReady","getWebObjectListeners","resolveWebObjectPendingMethodResponse","createWebViewMessageHandler","handlers","handleMessage","event","debug","name","nativeEvent","data","message","JSON","parse","handler","type","error","console","payload","args","level","slice","ready","webObjectListenerEvent","eventName","objectId","listener","rnListener","objectListener","layerListener","elementListener","webObjectMethodResponse","requestId","result","useCssInjectionScript","injectedCss","cssInjectionScript","normalizedCss","undefined","useInjectJavaScriptIfInjectedCssChanged","lastInjectedScriptRef","isWebWorldReady","current","injectJavaScript"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.hooks.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,11 +3,8 @@
|
|
|
3
3
|
import { View } from 'react-native';
|
|
4
4
|
import { WebView } from 'react-native-webview';
|
|
5
5
|
import { WEBVIEW_STATIC_HTML } from "../../../web/generated/webview_static_html.js";
|
|
6
|
-
import RNLogger from "../../logger/rn-logger.js";
|
|
7
6
|
import useMapAtoms from "../../hooks/atoms/useMapAtoms.js";
|
|
8
|
-
import {
|
|
9
|
-
import { useStyles } from "./MapProvider.hooks.js";
|
|
10
|
-
import { useCallback, useEffect } from 'react';
|
|
7
|
+
import { useFlushMessagesOnMapMounted, useCssInjectionScript, useInjectJavaScriptIfInjectedCssChanged, useStyles, useWebMessageHandler } from "./MapProvider.hooks.js";
|
|
11
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
9
|
/**
|
|
13
10
|
* Must be used as a parent component to allow instantiation of map elements.
|
|
@@ -27,102 +24,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
27
24
|
const MapProvider = ({
|
|
28
25
|
style,
|
|
29
26
|
webViewStyle,
|
|
30
|
-
children
|
|
27
|
+
children,
|
|
28
|
+
injectedCss
|
|
31
29
|
}) => {
|
|
32
30
|
// States.
|
|
33
31
|
// - Global.
|
|
34
32
|
const {
|
|
35
|
-
setWebView
|
|
36
|
-
setIsWebWorldReady,
|
|
37
|
-
isMapMountMessageReady,
|
|
38
|
-
flushMessages,
|
|
39
|
-
getWebObjectListeners,
|
|
40
|
-
resolveWebObjectPendingMethodResponse
|
|
33
|
+
setWebView
|
|
41
34
|
} = useMapAtoms();
|
|
42
35
|
// Theme.
|
|
43
36
|
const styles = useStyles();
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
// Handler of messages from the web world.
|
|
55
|
-
const onMessage = useCallback(
|
|
56
|
-
// Not an anonymous function => get the function name for logger.
|
|
57
|
-
function handleMessage(event) {
|
|
58
|
-
try {
|
|
59
|
-
RNLogger.debug('RN', handleMessage.name, event?.nativeEvent?.data);
|
|
60
|
-
const message = JSON.parse(event.nativeEvent.data);
|
|
61
|
-
switch (message.type) {
|
|
62
|
-
case 'console':
|
|
63
|
-
{
|
|
64
|
-
RNLogger[message.payload.level]('Web', message.payload.args[0], ...message.payload.args.slice(1));
|
|
65
|
-
break;
|
|
66
|
-
}
|
|
67
|
-
case 'ready':
|
|
68
|
-
{
|
|
69
|
-
setIsWebWorldReady(true);
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
case 'webObjectListenerEvent':
|
|
73
|
-
{
|
|
74
|
-
// Retrieve the corresponding object listener.
|
|
75
|
-
const listener = getWebObjectListeners({
|
|
76
|
-
objectId: message.payload.objectId
|
|
77
|
-
})?.[message.payload.eventName];
|
|
78
|
-
// Then, call it.
|
|
79
|
-
if (isWebObjectListenerOnRN(listener)) {
|
|
80
|
-
;
|
|
81
|
-
listener.rnListener(message.payload.event);
|
|
82
|
-
}
|
|
83
|
-
if (isWebObjectListenerOnObject(listener)) {
|
|
84
|
-
;
|
|
85
|
-
listener.objectListener(message.payload.event);
|
|
86
|
-
}
|
|
87
|
-
if (isWebObjectListenerOnMapLayer(listener)) {
|
|
88
|
-
;
|
|
89
|
-
listener.layerListener(message.payload.event);
|
|
90
|
-
}
|
|
91
|
-
if (isWebObjectListenerOnHTMLElement(listener)) {
|
|
92
|
-
;
|
|
93
|
-
listener.elementListener(message.payload.event);
|
|
94
|
-
}
|
|
95
|
-
break;
|
|
96
|
-
}
|
|
97
|
-
case 'webObjectMethodResponse':
|
|
98
|
-
{
|
|
99
|
-
resolveWebObjectPendingMethodResponse({
|
|
100
|
-
requestId: message.payload.requestId,
|
|
101
|
-
result: message.payload.result
|
|
102
|
-
});
|
|
103
|
-
break;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
} catch (error) {
|
|
107
|
-
RNLogger.error('RN', handleMessage.name, error.message);
|
|
108
|
-
}
|
|
109
|
-
}, [setIsWebWorldReady, getWebObjectListeners, resolveWebObjectPendingMethodResponse]);
|
|
37
|
+
// Behaviors.
|
|
38
|
+
useFlushMessagesOnMapMounted();
|
|
39
|
+
const {
|
|
40
|
+
handler
|
|
41
|
+
} = useWebMessageHandler();
|
|
42
|
+
const {
|
|
43
|
+
cssInjectionScript
|
|
44
|
+
} = useCssInjectionScript(injectedCss);
|
|
45
|
+
useInjectJavaScriptIfInjectedCssChanged(cssInjectionScript);
|
|
110
46
|
return /*#__PURE__*/_jsxs(View, {
|
|
111
47
|
style: [styles.container, style],
|
|
112
48
|
children: [/*#__PURE__*/_jsx(WebView, {
|
|
49
|
+
testID: 'map-provider-webview',
|
|
113
50
|
ref: setWebView,
|
|
114
51
|
style: [styles.webView, webViewStyle],
|
|
115
|
-
|
|
52
|
+
scrollEnabled: false,
|
|
116
53
|
javaScriptEnabled: true,
|
|
117
|
-
allowFileAccess: true,
|
|
118
54
|
domStorageEnabled: true,
|
|
119
|
-
|
|
120
|
-
allowUniversalAccessFromFileURLs: true,
|
|
121
|
-
mixedContentMode: 'always',
|
|
122
|
-
onMessage: onMessage,
|
|
55
|
+
onMessage: handler,
|
|
123
56
|
source: {
|
|
124
57
|
html: WEBVIEW_STATIC_HTML
|
|
125
|
-
}
|
|
58
|
+
},
|
|
59
|
+
injectedJavaScriptBeforeContentLoaded: cssInjectionScript
|
|
126
60
|
}), children]
|
|
127
61
|
});
|
|
128
62
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["View","WebView","WEBVIEW_STATIC_HTML","
|
|
1
|
+
{"version":3,"names":["View","WebView","WEBVIEW_STATIC_HTML","useMapAtoms","useFlushMessagesOnMapMounted","useCssInjectionScript","useInjectJavaScriptIfInjectedCssChanged","useStyles","useWebMessageHandler","jsx","_jsx","jsxs","_jsxs","MapProvider","style","webViewStyle","children","injectedCss","setWebView","styles","handler","cssInjectionScript","container","testID","ref","webView","scrollEnabled","javaScriptEnabled","domStorageEnabled","onMessage","source","html","injectedJavaScriptBeforeContentLoaded"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,mBAAmB,QAAQ,+CAA4C;AAChF,OAAOC,WAAW,MAAM,kCAA+B;AACvD,SACEC,4BAA4B,EAC5BC,qBAAqB,EACrBC,uCAAuC,EACvCC,SAAS,EACTC,oBAAoB,QACf,wBAAqB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EACnBC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAK;EACtB;EACA;EACA,MAAM;IAAEC;EAAW,CAAC,GAAGf,WAAW,CAAC,CAAC;EACpC;EACA,MAAMgB,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAH,4BAA4B,CAAC,CAAC;EAC9B,MAAM;IAAEgB;EAAQ,CAAC,GAAGZ,oBAAoB,CAAC,CAAC;EAC1C,MAAM;IAAEa;EAAmB,CAAC,GAAGhB,qBAAqB,CAACY,WAAW,CAAC;EACjEX,uCAAuC,CAACe,kBAAkB,CAAC;EAE3D,oBACET,KAAA,CAACZ,IAAI;IAACc,KAAK,EAAE,CAACK,MAAM,CAACG,SAAS,EAAER,KAAK,CAAE;IAAAE,QAAA,gBACrCN,IAAA,CAACT,OAAO;MACNsB,MAAM,EAAE,sBAAuB;MAC/BC,GAAG,EAAEN,UAAW;MAChBJ,KAAK,EAAE,CAACK,MAAM,CAACM,OAAO,EAAEV,YAAY,CAAE;MACtCW,aAAa,EAAE,KAAM;MACrBC,iBAAiB,EAAE,IAAK;MACxBC,iBAAiB,EAAE,IAAK;MACxBC,SAAS,EAAET,OAAQ;MACnBU,MAAM,EAAE;QAAEC,IAAI,EAAE7B;MAAoB,CAAE;MACtC8B,qCAAqC,EAAEX;IAAmB,CAC3D,CAAC,EACDL,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAED,eAAeH,WAAW","ignoreList":[]}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View, Text } from 'react-native';
|
|
4
|
+
import { render, renderHook, screen } from '@testing-library/react-native';
|
|
5
|
+
import MapProvider from "./MapProvider.js";
|
|
6
|
+
import { useWebMessageHandler } from "./MapProvider.hooks.js";
|
|
7
|
+
import RNLogger from "../../logger/rn-logger.js";
|
|
8
|
+
import { getWebObjectListenersMock, resolveWebObjectPendingMethodResponseMock, setIsWebWorldReadyMock } from "../../hooks/atoms/useMapAtoms.mock.js";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
const createEvent = data => ({
|
|
11
|
+
nativeEvent: {
|
|
12
|
+
data: typeof data === 'string' ? data : JSON.stringify(data)
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
describe('MapProvider', () => {
|
|
16
|
+
beforeEach(() => {
|
|
17
|
+
jest.clearAllMocks();
|
|
18
|
+
});
|
|
19
|
+
describe('Given the component is rendered with children', () => {
|
|
20
|
+
beforeEach(() => {
|
|
21
|
+
render(/*#__PURE__*/_jsx(MapProvider, {
|
|
22
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
23
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
24
|
+
testID: "child",
|
|
25
|
+
children: "Hello"
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
}));
|
|
29
|
+
});
|
|
30
|
+
describe('When nothing', () => {
|
|
31
|
+
test('Then the children are rendered', () => {
|
|
32
|
+
const child = screen.getByTestId('child');
|
|
33
|
+
expect(child).toBeTruthy();
|
|
34
|
+
});
|
|
35
|
+
test('Then the internal WebView is rendered', () => {
|
|
36
|
+
const webView = screen.getByTestId('map-provider-webview');
|
|
37
|
+
expect(webView).toBeTruthy();
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
describe('useWebMessageHandler', () => {
|
|
43
|
+
beforeEach(() => {
|
|
44
|
+
jest.clearAllMocks();
|
|
45
|
+
});
|
|
46
|
+
describe('Given the hook is used to get the handler', () => {
|
|
47
|
+
let handler;
|
|
48
|
+
beforeEach(() => {
|
|
49
|
+
const {
|
|
50
|
+
result
|
|
51
|
+
} = renderHook(() => useWebMessageHandler());
|
|
52
|
+
handler = result.current.handler;
|
|
53
|
+
});
|
|
54
|
+
describe('When nothing', () => {
|
|
55
|
+
test('Then the handler is a function', () => {
|
|
56
|
+
expect(typeof handler).toBe('function');
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
describe('When handling a message of unknown type', () => {
|
|
60
|
+
test('Then it does not throw', () => {
|
|
61
|
+
expect(() => handler(createEvent({
|
|
62
|
+
type: 'unknown-type'
|
|
63
|
+
}))).not.toThrow();
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
describe('When handling something that is not a message', () => {
|
|
67
|
+
test('Then it does not throw', () => {
|
|
68
|
+
expect(() => handler(createEvent('not a message'))).not.toThrow();
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
describe('When handling a message of type "console"', () => {
|
|
72
|
+
beforeEach(() => {
|
|
73
|
+
handler(createEvent({
|
|
74
|
+
type: 'console',
|
|
75
|
+
payload: {
|
|
76
|
+
level: 'info',
|
|
77
|
+
args: ['hello', 'world']
|
|
78
|
+
}
|
|
79
|
+
}));
|
|
80
|
+
});
|
|
81
|
+
test('Then logs to the console', () => {
|
|
82
|
+
expect(RNLogger.info).toHaveBeenCalledWith('Web', 'hello', 'world');
|
|
83
|
+
});
|
|
84
|
+
});
|
|
85
|
+
describe('When handling a message of type "ready"', () => {
|
|
86
|
+
beforeEach(() => {
|
|
87
|
+
handler(createEvent({
|
|
88
|
+
type: 'ready'
|
|
89
|
+
}));
|
|
90
|
+
});
|
|
91
|
+
test('Then sets the web world is ready', () => {
|
|
92
|
+
expect(setIsWebWorldReadyMock).toHaveBeenCalledWith(true);
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
describe('When handling a message of type "webObjectListenerEvent"', () => {
|
|
96
|
+
let rnListener;
|
|
97
|
+
let eventPayload;
|
|
98
|
+
beforeEach(() => {
|
|
99
|
+
rnListener = jest.fn();
|
|
100
|
+
eventPayload = {
|
|
101
|
+
x: Math.random()
|
|
102
|
+
};
|
|
103
|
+
getWebObjectListenersMock.mockReturnValue({
|
|
104
|
+
click: {
|
|
105
|
+
rnListener
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
handler(createEvent({
|
|
109
|
+
type: 'webObjectListenerEvent',
|
|
110
|
+
payload: {
|
|
111
|
+
objectId: 'object-1',
|
|
112
|
+
eventName: 'click',
|
|
113
|
+
event: eventPayload
|
|
114
|
+
}
|
|
115
|
+
}));
|
|
116
|
+
});
|
|
117
|
+
test('Then dispatches the event to the corresponding listener', () => {
|
|
118
|
+
expect(rnListener).toHaveBeenCalledWith(eventPayload);
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
describe('When handling a message of type "webObjectMethodResponse"', () => {
|
|
122
|
+
beforeEach(() => {
|
|
123
|
+
handler(createEvent({
|
|
124
|
+
type: 'webObjectMethodResponse',
|
|
125
|
+
payload: {
|
|
126
|
+
requestId: 'req-123',
|
|
127
|
+
result: {
|
|
128
|
+
ok: true
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}));
|
|
132
|
+
});
|
|
133
|
+
test('Then resolves the web object method response', () => {
|
|
134
|
+
expect(resolveWebObjectPendingMethodResponseMock).toHaveBeenCalledWith({
|
|
135
|
+
requestId: 'req-123',
|
|
136
|
+
result: {
|
|
137
|
+
ok: true
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
});
|
|
144
|
+
//# sourceMappingURL=MapProvider.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["View","Text","render","renderHook","screen","MapProvider","useWebMessageHandler","RNLogger","getWebObjectListenersMock","resolveWebObjectPendingMethodResponseMock","setIsWebWorldReadyMock","jsx","_jsx","createEvent","data","nativeEvent","JSON","stringify","describe","beforeEach","jest","clearAllMocks","children","testID","test","child","getByTestId","expect","toBeTruthy","webView","handler","result","current","toBe","type","not","toThrow","payload","level","args","info","toHaveBeenCalledWith","rnListener","eventPayload","fn","x","Math","random","mockReturnValue","click","objectId","eventName","event","requestId","ok"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @param css - The CSS to be normalized.
|
|
5
|
+
* @returns A normalized array of non-empty CSS strings or `undefined` if the
|
|
6
|
+
* given CSS is `undefined` or empty.
|
|
7
|
+
*/
|
|
8
|
+
export const normalizeCss = css => {
|
|
9
|
+
const normalizedCss = (Array.isArray(css) ? css : css ? [css] : []).map(s => s.trim()).filter(Boolean);
|
|
10
|
+
return normalizedCss.length ? normalizedCss : undefined;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* @param normalizedCss - The CSS to be injected, typically produced by
|
|
15
|
+
* {@link normalizeCss}.
|
|
16
|
+
* @returns A JavaScript snippet that injects CSS into the document and
|
|
17
|
+
* evaluates to `true` once executed.
|
|
18
|
+
*/
|
|
19
|
+
export const buildCssInjectionScript = normalizedCss => {
|
|
20
|
+
const INJECTED_STYLE_ID = '__map_provider_injected_css__';
|
|
21
|
+
const css = normalizedCss.join('\n');
|
|
22
|
+
const cssJSON = JSON.stringify(css);
|
|
23
|
+
const idJSON = JSON.stringify(INJECTED_STYLE_ID);
|
|
24
|
+
return `
|
|
25
|
+
(function() {
|
|
26
|
+
try {
|
|
27
|
+
var doc = document;
|
|
28
|
+
var id = ${idJSON};
|
|
29
|
+
var css = ${cssJSON};
|
|
30
|
+
|
|
31
|
+
var styleEl = doc.getElementById(id);
|
|
32
|
+
|
|
33
|
+
if (!styleEl) {
|
|
34
|
+
styleEl = doc.createElement('style');
|
|
35
|
+
styleEl.type = 'text/css';
|
|
36
|
+
styleEl.id = id;
|
|
37
|
+
// If the document head isn't available yet, we append the style to
|
|
38
|
+
// documentElement as a fallback.
|
|
39
|
+
// Note: this script won't automatically move the node later when head
|
|
40
|
+
// becomes available; it will only be moved on a subsequent injection.
|
|
41
|
+
(doc.head || doc.documentElement).appendChild(styleEl);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (styleEl.textContent !== css) {
|
|
45
|
+
styleEl.textContent = css;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// If head was not available at the time, bring it up now.
|
|
49
|
+
if (doc.head && styleEl.parentNode !== doc.head) {
|
|
50
|
+
doc.head.appendChild(styleEl);
|
|
51
|
+
}
|
|
52
|
+
} catch (_) {}
|
|
53
|
+
|
|
54
|
+
return true;
|
|
55
|
+
})();
|
|
56
|
+
`;
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=MapProvider.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["normalizeCss","css","normalizedCss","Array","isArray","map","s","trim","filter","Boolean","length","undefined","buildCssInjectionScript","INJECTED_STYLE_ID","join","cssJSON","JSON","stringify","idJSON"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.utils.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,YAAY,GAAIC,GAAuB,IAA2B;EAC7E,MAAMC,aAAa,GAAG,CAACC,KAAK,CAACC,OAAO,CAACH,GAAG,CAAC,GAAGA,GAAG,GAAGA,GAAG,GAAG,CAACA,GAAG,CAAC,GAAG,EAAE,EAC/DI,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC,CACpBC,MAAM,CAACC,OAAO,CAAC;EAElB,OAAOP,aAAa,CAACQ,MAAM,GAAGR,aAAa,GAAGS,SAAS;AACzD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAIV,aAAuB,IAAa;EAC1E,MAAMW,iBAAiB,GAAG,+BAA+B;EAEzD,MAAMZ,GAAG,GAAGC,aAAa,CAACY,IAAI,CAAC,IAAI,CAAC;EACpC,MAAMC,OAAO,GAAGC,IAAI,CAACC,SAAS,CAAChB,GAAG,CAAC;EACnC,MAAMiB,MAAM,GAAGF,IAAI,CAACC,SAAS,CAACJ,iBAAiB,CAAC;EAEhD,OAAO;AACT;AACA;AACA;AACA,mBAAmBK,MAAM;AACzB,oBAAoBH,OAAO;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC","ignoreList":[]}
|