1 | "use strict";
|
2 | var __assign = (this && this.__assign) || function () {
|
3 | __assign = Object.assign || function(t) {
|
4 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5 | s = arguments[i];
|
6 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7 | t[p] = s[p];
|
8 | }
|
9 | return t;
|
10 | };
|
11 | return __assign.apply(this, arguments);
|
12 | };
|
13 | var __rest = (this && this.__rest) || function (s, e) {
|
14 | var t = {};
|
15 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
16 | t[p] = s[p];
|
17 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
18 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
19 | t[p[i]] = s[p[i]];
|
20 | return t;
|
21 | };
|
22 | var __importStar = (this && this.__importStar) || function (mod) {
|
23 | if (mod && mod.__esModule) return mod;
|
24 | var result = {};
|
25 | if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
26 | result["default"] = mod;
|
27 | return result;
|
28 | };
|
29 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
30 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
31 | };
|
32 | Object.defineProperty(exports, "__esModule", { value: true });
|
33 | var react_1 = __importStar(require("react"));
|
34 | var react_redux_1 = require("react-redux");
|
35 | var react_hooks_1 = require("@shopify/react-hooks");
|
36 | var Error_1 = require("@shopify/app-bridge/actions/Error");
|
37 | var Middleware_1 = require("./Middleware");
|
38 | var async_1 = require("./store/async");
|
39 | var actions_1 = require("./store/reducers/embeddedApp/appBridge/actions");
|
40 | var Host_1 = __importDefault(require("./Host"));
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | exports.HostContext = react_1.createContext(null);
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | exports.RouterContext = react_1.createContext(null);
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 | function HostProvider(props) {
|
59 | var _a = react_1.useState(false), initialized = _a[0], setInitialized = _a[1];
|
60 | var config = props.config, debug = props.debug, dispatchClientEventHandler = props.dispatchClientEventHandler, initialState = props.initialState, middleware = props.middleware, router = props.router, hostProps = __rest(props, ["config", "debug", "dispatchClientEventHandler", "initialState", "middleware", "router"]);
|
61 | var apiKey = config && config.apiKey;
|
62 | var previousApiKey = react_hooks_1.usePrevious(apiKey);
|
63 | var apiKeyChanged = (!previousApiKey && apiKey !== undefined) || apiKey !== previousApiKey;
|
64 | var previousInitialState = react_hooks_1.usePrevious(JSON.stringify(initialState));
|
65 | var initialStateChanged = JSON.stringify(initialState) !== previousInitialState;
|
66 | var _b = react_1.useState(), addReducer = _b[0], setAddReducer = _b[1];
|
67 | var _c = react_1.useState(), app = _c[0], setApp = _c[1];
|
68 | var appBridgeMiddleware = react_1.useMemo(function () { return Middleware_1.buildMiddleware(async_1.APP_BRIDGE_KEY, dispatchClientEventHandler, true); }, [dispatchClientEventHandler]);
|
69 | react_1.useEffect(function () {
|
70 | if (!appBridgeMiddleware || typeof appBridgeMiddleware.load !== 'function') {
|
71 | Error_1.throwError(Error_1.AppActionType.MISSING_APP_BRIDGE_MIDDLEWARE, 'Missing required context `appBridgeMiddleware`. Maybe you forgot the App Bridge `<Provider>` component?');
|
72 | }
|
73 | }, [appBridgeMiddleware]);
|
74 | var store = react_1.useMemo(function () {
|
75 | var hostMiddleware = middleware
|
76 | ? middleware.concat([appBridgeMiddleware])
|
77 | : [appBridgeMiddleware];
|
78 |
|
79 | var defaultState = initialState.features && { features: initialState.features };
|
80 | return async_1.createStore(hostMiddleware, defaultState, debug);
|
81 | }, [appBridgeMiddleware, debug, middleware]);
|
82 | react_1.useEffect(function () {
|
83 | if (initialized) {
|
84 | return;
|
85 | }
|
86 | store.dispatch(actions_1.StoreReadyAction);
|
87 | setInitialized(true);
|
88 | }, [initialized, store]);
|
89 | react_1.useEffect(function () {
|
90 | if (!config || !apiKeyChanged) {
|
91 | return;
|
92 | }
|
93 | var newApp = appBridgeMiddleware.load({
|
94 | config: config,
|
95 | type: 'application',
|
96 | });
|
97 | setApp(newApp);
|
98 | }, [appBridgeMiddleware, config, apiKeyChanged]);
|
99 | react_1.useEffect(function () {
|
100 | if (!initialStateChanged) {
|
101 | return;
|
102 | }
|
103 | setAddReducer(function () { return async_1.createAddReducer(store, initialState); });
|
104 | }, [store, initialState, initialStateChanged]);
|
105 | var hostContext = react_1.useMemo(function () {
|
106 | if (!config || !app || !addReducer) {
|
107 | return;
|
108 | }
|
109 | return { app: app, addReducer: addReducer, config: config, store: store };
|
110 | }, [app, addReducer, config, store]);
|
111 | if (!hostContext) {
|
112 | return react_1.default.createElement(react_redux_1.Provider, { store: store });
|
113 | }
|
114 | var hostContent = (react_1.default.createElement(exports.HostContext.Provider, { value: hostContext },
|
115 | react_1.default.createElement(react_redux_1.Provider, { store: store },
|
116 | react_1.default.createElement(Host_1.default, __assign({}, hostProps)))));
|
117 | if (!router) {
|
118 | return hostContent;
|
119 | }
|
120 | return react_1.default.createElement(exports.RouterContext.Provider, { value: router }, hostContent);
|
121 | }
|
122 | exports.default = HostProvider;
|