powr-sdk-web 6.0.0 → 6.2.0
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/dist/auth/index.js +2 -2
- package/dist/index.js +110 -0
- package/dist/session/index.js +217 -0
- package/dist/shell/PowrBaseAppWrapper.js +348 -0
- package/dist/shell/index.js +20 -0
- package/dist/shell/parts.js +267 -0
- package/dist/shell/styles.js +241 -0
- package/dist/theme/PowrThemeProvider.js +23 -10
- package/dist/theme/PowrThemeSettings.js +323 -0
- package/dist/theme/host.js +280 -0
- package/dist/theme/index.js +34 -0
- package/dist/theme/initScript.js +86 -0
- package/dist/theme/tokens.js +6 -0
- package/dist/utils/useMediaQuery.js +37 -0
- package/package.json +1 -1
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.fetchThemePreference = fetchThemePreference;
|
|
7
|
+
exports.saveThemePreference = saveThemePreference;
|
|
8
|
+
exports.usePowrThemeHost = usePowrThemeHost;
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
var _auth = require("../utils/auth");
|
|
11
|
+
var _PowrThemeProvider = require("./PowrThemeProvider");
|
|
12
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
13
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
14
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
15
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
16
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
17
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
18
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
19
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
20
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
21
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
22
|
+
/**
|
|
23
|
+
* Theme preference on the Powr host — `GET/PUT /users/me/preferences`.
|
|
24
|
+
*
|
|
25
|
+
* localStorage is the cache before first paint; the host is the truth once
|
|
26
|
+
* the user is logged in. Pull once per token, apply what the host has, and
|
|
27
|
+
* write on Save. Same thesis as login: host stores, SDK reads/writes,
|
|
28
|
+
* products omit `apiUrl`.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
var ENDPOINT = "/users/me/preferences";
|
|
32
|
+
function fetchThemePreference() {
|
|
33
|
+
return _fetchThemePreference.apply(this, arguments);
|
|
34
|
+
}
|
|
35
|
+
function _fetchThemePreference() {
|
|
36
|
+
_fetchThemePreference = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
|
|
37
|
+
var _data$data;
|
|
38
|
+
var _ref,
|
|
39
|
+
apiUrl,
|
|
40
|
+
projectId,
|
|
41
|
+
token,
|
|
42
|
+
headers,
|
|
43
|
+
_yield$apiCall,
|
|
44
|
+
data,
|
|
45
|
+
ok,
|
|
46
|
+
response,
|
|
47
|
+
err,
|
|
48
|
+
_args3 = arguments;
|
|
49
|
+
return _regenerator().w(function (_context3) {
|
|
50
|
+
while (1) switch (_context3.n) {
|
|
51
|
+
case 0:
|
|
52
|
+
_ref = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, apiUrl = _ref.apiUrl, projectId = _ref.projectId, token = _ref.token;
|
|
53
|
+
headers = token ? {
|
|
54
|
+
Authorization: "Bearer ".concat(token)
|
|
55
|
+
} : undefined;
|
|
56
|
+
_context3.n = 1;
|
|
57
|
+
return (0, _auth.apiCall)(apiUrl, ENDPOINT, projectId, {
|
|
58
|
+
method: "GET",
|
|
59
|
+
headers: headers
|
|
60
|
+
});
|
|
61
|
+
case 1:
|
|
62
|
+
_yield$apiCall = _context3.v;
|
|
63
|
+
data = _yield$apiCall.data;
|
|
64
|
+
ok = _yield$apiCall.ok;
|
|
65
|
+
response = _yield$apiCall.response;
|
|
66
|
+
if (ok) {
|
|
67
|
+
_context3.n = 2;
|
|
68
|
+
break;
|
|
69
|
+
}
|
|
70
|
+
err = new Error((data === null || data === void 0 ? void 0 : data.message) || "Failed to load preferences (".concat(response.status, ")"));
|
|
71
|
+
err.status = response.status;
|
|
72
|
+
throw err;
|
|
73
|
+
case 2:
|
|
74
|
+
return _context3.a(2, (data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.theme) || null);
|
|
75
|
+
}
|
|
76
|
+
}, _callee3);
|
|
77
|
+
}));
|
|
78
|
+
return _fetchThemePreference.apply(this, arguments);
|
|
79
|
+
}
|
|
80
|
+
function saveThemePreference() {
|
|
81
|
+
return _saveThemePreference.apply(this, arguments);
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Keep the mounted `PowrThemeProvider` in sync with the host for one user.
|
|
85
|
+
*
|
|
86
|
+
* @param {object} opts
|
|
87
|
+
* @param {string|null} [opts.token] - Powr JWT. No token → nothing happens (cache only).
|
|
88
|
+
* @param {string} [opts.apiUrl] - Leave unset; SDK default host.
|
|
89
|
+
* @param {string} [opts.projectId] - Defaults to NEXT_PUBLIC_PROJECT_ID.
|
|
90
|
+
* @param {boolean} [opts.enabled=true]
|
|
91
|
+
* @returns {{ loaded: boolean, saving: boolean, error: string|null, save: (theme?) => Promise<void>, refresh: () => Promise<void> }}
|
|
92
|
+
*/
|
|
93
|
+
function _saveThemePreference() {
|
|
94
|
+
_saveThemePreference = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
|
|
95
|
+
var _data$data2;
|
|
96
|
+
var _ref2,
|
|
97
|
+
apiUrl,
|
|
98
|
+
projectId,
|
|
99
|
+
token,
|
|
100
|
+
theme,
|
|
101
|
+
headers,
|
|
102
|
+
_yield$apiCall2,
|
|
103
|
+
data,
|
|
104
|
+
ok,
|
|
105
|
+
response,
|
|
106
|
+
err,
|
|
107
|
+
_args4 = arguments;
|
|
108
|
+
return _regenerator().w(function (_context4) {
|
|
109
|
+
while (1) switch (_context4.n) {
|
|
110
|
+
case 0:
|
|
111
|
+
_ref2 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, apiUrl = _ref2.apiUrl, projectId = _ref2.projectId, token = _ref2.token, theme = _ref2.theme;
|
|
112
|
+
headers = token ? {
|
|
113
|
+
Authorization: "Bearer ".concat(token)
|
|
114
|
+
} : undefined;
|
|
115
|
+
_context4.n = 1;
|
|
116
|
+
return (0, _auth.apiCall)(apiUrl, ENDPOINT, projectId, {
|
|
117
|
+
method: "PUT",
|
|
118
|
+
headers: headers,
|
|
119
|
+
body: {
|
|
120
|
+
theme: theme
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
case 1:
|
|
124
|
+
_yield$apiCall2 = _context4.v;
|
|
125
|
+
data = _yield$apiCall2.data;
|
|
126
|
+
ok = _yield$apiCall2.ok;
|
|
127
|
+
response = _yield$apiCall2.response;
|
|
128
|
+
if (ok) {
|
|
129
|
+
_context4.n = 2;
|
|
130
|
+
break;
|
|
131
|
+
}
|
|
132
|
+
err = new Error((data === null || data === void 0 ? void 0 : data.message) || "Failed to save preferences (".concat(response.status, ")"));
|
|
133
|
+
err.status = response.status;
|
|
134
|
+
throw err;
|
|
135
|
+
case 2:
|
|
136
|
+
return _context4.a(2, (data === null || data === void 0 || (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : _data$data2.theme) || null);
|
|
137
|
+
}
|
|
138
|
+
}, _callee4);
|
|
139
|
+
}));
|
|
140
|
+
return _saveThemePreference.apply(this, arguments);
|
|
141
|
+
}
|
|
142
|
+
function usePowrThemeHost() {
|
|
143
|
+
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
144
|
+
token = _ref3.token,
|
|
145
|
+
apiUrl = _ref3.apiUrl,
|
|
146
|
+
projectId = _ref3.projectId,
|
|
147
|
+
_ref3$enabled = _ref3.enabled,
|
|
148
|
+
enabled = _ref3$enabled === void 0 ? true : _ref3$enabled;
|
|
149
|
+
var t = (0, _PowrThemeProvider.usePowrTheme)();
|
|
150
|
+
var _useState = (0, _react.useState)(false),
|
|
151
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
152
|
+
loaded = _useState2[0],
|
|
153
|
+
setLoaded = _useState2[1];
|
|
154
|
+
var _useState3 = (0, _react.useState)(false),
|
|
155
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
156
|
+
saving = _useState4[0],
|
|
157
|
+
setSaving = _useState4[1];
|
|
158
|
+
var _useState5 = (0, _react.useState)(null),
|
|
159
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
160
|
+
error = _useState6[0],
|
|
161
|
+
setError = _useState6[1];
|
|
162
|
+
var lastToken = (0, _react.useRef)(null);
|
|
163
|
+
var themeRef = (0, _react.useRef)(t);
|
|
164
|
+
themeRef.current = t;
|
|
165
|
+
var apply = (0, _react.useCallback)(function (theme) {
|
|
166
|
+
if (!theme) return;
|
|
167
|
+
var cur = themeRef.current;
|
|
168
|
+
if (theme.scheme && theme.scheme !== cur.scheme) cur.setScheme(theme.scheme);
|
|
169
|
+
if (theme.density && theme.density !== cur.density) cur.setDensity(theme.density);
|
|
170
|
+
if (theme.preset !== undefined && theme.preset !== cur.preset) cur.setPreset(theme.preset);
|
|
171
|
+
}, []);
|
|
172
|
+
var refresh = (0, _react.useCallback)(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
|
|
173
|
+
var theme, _t;
|
|
174
|
+
return _regenerator().w(function (_context) {
|
|
175
|
+
while (1) switch (_context.p = _context.n) {
|
|
176
|
+
case 0:
|
|
177
|
+
if (token) {
|
|
178
|
+
_context.n = 1;
|
|
179
|
+
break;
|
|
180
|
+
}
|
|
181
|
+
return _context.a(2);
|
|
182
|
+
case 1:
|
|
183
|
+
_context.p = 1;
|
|
184
|
+
_context.n = 2;
|
|
185
|
+
return fetchThemePreference({
|
|
186
|
+
apiUrl: apiUrl,
|
|
187
|
+
projectId: projectId,
|
|
188
|
+
token: token
|
|
189
|
+
});
|
|
190
|
+
case 2:
|
|
191
|
+
theme = _context.v;
|
|
192
|
+
apply(theme);
|
|
193
|
+
setError(null);
|
|
194
|
+
_context.n = 4;
|
|
195
|
+
break;
|
|
196
|
+
case 3:
|
|
197
|
+
_context.p = 3;
|
|
198
|
+
_t = _context.v;
|
|
199
|
+
setError(_t.message);
|
|
200
|
+
case 4:
|
|
201
|
+
_context.p = 4;
|
|
202
|
+
setLoaded(true);
|
|
203
|
+
return _context.f(4);
|
|
204
|
+
case 5:
|
|
205
|
+
return _context.a(2);
|
|
206
|
+
}
|
|
207
|
+
}, _callee, null, [[1, 3, 4, 5]]);
|
|
208
|
+
})), [token, apiUrl, projectId, apply]);
|
|
209
|
+
|
|
210
|
+
// Pull once per token (login / refresh). Logout resets so the next user pulls again.
|
|
211
|
+
(0, _react.useEffect)(function () {
|
|
212
|
+
if (!enabled || !t.mounted) return;
|
|
213
|
+
if (!token) {
|
|
214
|
+
lastToken.current = null;
|
|
215
|
+
setLoaded(false);
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
if (lastToken.current === token) return;
|
|
219
|
+
lastToken.current = token;
|
|
220
|
+
refresh();
|
|
221
|
+
}, [enabled, token, t.mounted, refresh]);
|
|
222
|
+
var save = (0, _react.useCallback)(/*#__PURE__*/function () {
|
|
223
|
+
var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(theme) {
|
|
224
|
+
var cur, body, saved, _t2;
|
|
225
|
+
return _regenerator().w(function (_context2) {
|
|
226
|
+
while (1) switch (_context2.p = _context2.n) {
|
|
227
|
+
case 0:
|
|
228
|
+
if (token) {
|
|
229
|
+
_context2.n = 1;
|
|
230
|
+
break;
|
|
231
|
+
}
|
|
232
|
+
return _context2.a(2);
|
|
233
|
+
case 1:
|
|
234
|
+
cur = themeRef.current;
|
|
235
|
+
body = theme || {
|
|
236
|
+
scheme: cur.scheme,
|
|
237
|
+
density: cur.density,
|
|
238
|
+
preset: cur.preset
|
|
239
|
+
};
|
|
240
|
+
setSaving(true);
|
|
241
|
+
_context2.p = 2;
|
|
242
|
+
_context2.n = 3;
|
|
243
|
+
return saveThemePreference({
|
|
244
|
+
apiUrl: apiUrl,
|
|
245
|
+
projectId: projectId,
|
|
246
|
+
token: token,
|
|
247
|
+
theme: body
|
|
248
|
+
});
|
|
249
|
+
case 3:
|
|
250
|
+
saved = _context2.v;
|
|
251
|
+
apply(saved);
|
|
252
|
+
setError(null);
|
|
253
|
+
_context2.n = 5;
|
|
254
|
+
break;
|
|
255
|
+
case 4:
|
|
256
|
+
_context2.p = 4;
|
|
257
|
+
_t2 = _context2.v;
|
|
258
|
+
setError(_t2.message);
|
|
259
|
+
throw _t2;
|
|
260
|
+
case 5:
|
|
261
|
+
_context2.p = 5;
|
|
262
|
+
setSaving(false);
|
|
263
|
+
return _context2.f(5);
|
|
264
|
+
case 6:
|
|
265
|
+
return _context2.a(2);
|
|
266
|
+
}
|
|
267
|
+
}, _callee2, null, [[2, 4, 5, 6]]);
|
|
268
|
+
}));
|
|
269
|
+
return function (_x) {
|
|
270
|
+
return _ref5.apply(this, arguments);
|
|
271
|
+
};
|
|
272
|
+
}(), [token, apiUrl, projectId, apply]);
|
|
273
|
+
return {
|
|
274
|
+
loaded: loaded,
|
|
275
|
+
saving: saving,
|
|
276
|
+
error: error,
|
|
277
|
+
save: save,
|
|
278
|
+
refresh: refresh
|
|
279
|
+
};
|
|
280
|
+
}
|
package/dist/theme/index.js
CHANGED
|
@@ -64,6 +64,18 @@ Object.defineProperty(exports, "PowrThemeProvider", {
|
|
|
64
64
|
return _PowrThemeProvider["default"];
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
|
+
Object.defineProperty(exports, "PowrThemeSettings", {
|
|
68
|
+
enumerable: true,
|
|
69
|
+
get: function get() {
|
|
70
|
+
return _PowrThemeSettings["default"];
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
Object.defineProperty(exports, "fetchThemePreference", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
get: function get() {
|
|
76
|
+
return _host.fetchThemePreference;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
67
79
|
Object.defineProperty(exports, "findPreset", {
|
|
68
80
|
enumerable: true,
|
|
69
81
|
get: function get() {
|
|
@@ -82,6 +94,12 @@ Object.defineProperty(exports, "normalizeScheme", {
|
|
|
82
94
|
return _tokens.normalizeScheme;
|
|
83
95
|
}
|
|
84
96
|
});
|
|
97
|
+
Object.defineProperty(exports, "powrThemeInitScript", {
|
|
98
|
+
enumerable: true,
|
|
99
|
+
get: function get() {
|
|
100
|
+
return _initScript.powrThemeInitScript;
|
|
101
|
+
}
|
|
102
|
+
});
|
|
85
103
|
Object.defineProperty(exports, "powrThemeStorageKey", {
|
|
86
104
|
enumerable: true,
|
|
87
105
|
get: function get() {
|
|
@@ -100,6 +118,12 @@ Object.defineProperty(exports, "resolvePowrTokens", {
|
|
|
100
118
|
return _tokens.resolvePowrTokens;
|
|
101
119
|
}
|
|
102
120
|
});
|
|
121
|
+
Object.defineProperty(exports, "saveThemePreference", {
|
|
122
|
+
enumerable: true,
|
|
123
|
+
get: function get() {
|
|
124
|
+
return _host.saveThemePreference;
|
|
125
|
+
}
|
|
126
|
+
});
|
|
103
127
|
Object.defineProperty(exports, "themeForScheme", {
|
|
104
128
|
enumerable: true,
|
|
105
129
|
get: function get() {
|
|
@@ -118,6 +142,16 @@ Object.defineProperty(exports, "usePowrTheme", {
|
|
|
118
142
|
return _PowrThemeProvider.usePowrTheme;
|
|
119
143
|
}
|
|
120
144
|
});
|
|
145
|
+
Object.defineProperty(exports, "usePowrThemeHost", {
|
|
146
|
+
enumerable: true,
|
|
147
|
+
get: function get() {
|
|
148
|
+
return _host.usePowrThemeHost;
|
|
149
|
+
}
|
|
150
|
+
});
|
|
121
151
|
var _PowrThemeProvider = _interopRequireWildcard(require("./PowrThemeProvider"));
|
|
152
|
+
var _PowrThemeSettings = _interopRequireDefault(require("./PowrThemeSettings"));
|
|
153
|
+
var _host = require("./host");
|
|
154
|
+
var _initScript = require("./initScript");
|
|
122
155
|
var _tokens = require("./tokens");
|
|
156
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
123
157
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
exports.powrThemeInitScript = powrThemeInitScript;
|
|
8
|
+
var _tokens = require("./tokens");
|
|
9
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
10
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
11
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
13
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
14
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
15
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
16
|
+
/**
|
|
17
|
+
* No-flash head script.
|
|
18
|
+
*
|
|
19
|
+
* `PowrThemeProvider` applies vars in an effect, so a cached dark user sees one
|
|
20
|
+
* light frame on hard reload. This returns a tiny inline script that reads the
|
|
21
|
+
* same localStorage cache and paints `<html>` before React runs.
|
|
22
|
+
*
|
|
23
|
+
* No logic is duplicated: the css-var table for every scheme × preset × density
|
|
24
|
+
* is precomputed here with `resolvePowrTokens` and embedded. The script only
|
|
25
|
+
* looks up.
|
|
26
|
+
*
|
|
27
|
+
* Next (app router) root layout:
|
|
28
|
+
* <head><script dangerouslySetInnerHTML={{ __html: powrThemeInitScript({ projectId, theme, presets }) }} /></head>
|
|
29
|
+
*
|
|
30
|
+
* @param {object} opts - The same `theme` / `presets` / `projectId` you give the provider.
|
|
31
|
+
* @returns {string} JavaScript source.
|
|
32
|
+
*/
|
|
33
|
+
function powrThemeInitScript() {
|
|
34
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
35
|
+
projectId = _ref.projectId,
|
|
36
|
+
theme = _ref.theme,
|
|
37
|
+
_ref$presets = _ref.presets,
|
|
38
|
+
presets = _ref$presets === void 0 ? [] : _ref$presets,
|
|
39
|
+
_ref$scheme = _ref.scheme,
|
|
40
|
+
scheme = _ref$scheme === void 0 ? _tokens.DEFAULT_POWR_SCHEME : _ref$scheme,
|
|
41
|
+
_ref$density = _ref.density,
|
|
42
|
+
density = _ref$density === void 0 ? _tokens.DEFAULT_POWR_DENSITY : _ref$density,
|
|
43
|
+
_ref$preset = _ref.preset,
|
|
44
|
+
preset = _ref$preset === void 0 ? null : _ref$preset;
|
|
45
|
+
var table = {};
|
|
46
|
+
var presetIds = [null].concat(_toConsumableArray(presets.map(function (p) {
|
|
47
|
+
return p.id;
|
|
48
|
+
})));
|
|
49
|
+
for (var _i = 0, _arr = ["light", "dark"]; _i < _arr.length; _i++) {
|
|
50
|
+
var s = _arr[_i];
|
|
51
|
+
var _iterator = _createForOfIteratorHelper(presetIds),
|
|
52
|
+
_step;
|
|
53
|
+
try {
|
|
54
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
55
|
+
var p = _step.value;
|
|
56
|
+
for (var _i2 = 0, _Object$keys = Object.keys(_tokens.POWR_DENSITIES); _i2 < _Object$keys.length; _i2++) {
|
|
57
|
+
var d = _Object$keys[_i2];
|
|
58
|
+
var r = (0, _tokens.resolvePowrTokens)({
|
|
59
|
+
scheme: s,
|
|
60
|
+
density: d,
|
|
61
|
+
theme: theme,
|
|
62
|
+
preset: p,
|
|
63
|
+
presets: presets
|
|
64
|
+
});
|
|
65
|
+
table["".concat(s, "|").concat(p || "", "|").concat(d)] = (0, _tokens.tokensToCssVars)(r.tokens, r.densityScale);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
} catch (err) {
|
|
69
|
+
_iterator.e(err);
|
|
70
|
+
} finally {
|
|
71
|
+
_iterator.f();
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
var payload = {
|
|
75
|
+
key: (0, _tokens.powrThemeStorageKey)(projectId),
|
|
76
|
+
defaults: {
|
|
77
|
+
scheme: scheme,
|
|
78
|
+
density: density,
|
|
79
|
+
preset: preset
|
|
80
|
+
},
|
|
81
|
+
presets: presetIds.filter(Boolean),
|
|
82
|
+
table: table
|
|
83
|
+
};
|
|
84
|
+
return "(function(){try{" + "var P=".concat(JSON.stringify(payload), ";") + "var c=null;try{c=JSON.parse(localStorage.getItem(P.key)||'null')}catch(e){}" + "var s=(c&&c.scheme)||P.defaults.scheme,d=(c&&c.density)||P.defaults.density,p=c&&c.preset!==undefined?c.preset:P.defaults.preset;" + "if(s!=='light'&&s!=='dark'&&s!=='system')s='light';" + "if(d!=='comfortable'&&d!=='compact')d='comfortable';" + "if(p&&P.presets.indexOf(p)<0)p=null;" + "var rs=s==='system'?(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):s;" + "var v=P.table[rs+'|'+(p||'')+'|'+d];if(!v)return;" + "var el=document.documentElement;for(var k in v)el.style.setProperty(k,v[k]);" + "el.setAttribute('data-powr-scheme',rs);el.setAttribute('data-powr-density',d);" + "if(p)el.setAttribute('data-powr-preset',p);el.style.colorScheme=rs;" + "}catch(e){}})();";
|
|
85
|
+
}
|
|
86
|
+
var _default = exports["default"] = powrThemeInitScript;
|
package/dist/theme/tokens.js
CHANGED
|
@@ -7,6 +7,7 @@ exports.POWR_TOKEN_KEYS = exports.POWR_TOKENS = exports.POWR_SCHEMES = exports.P
|
|
|
7
7
|
exports.findPreset = findPreset;
|
|
8
8
|
exports.normalizeDensity = normalizeDensity;
|
|
9
9
|
exports.normalizeScheme = normalizeScheme;
|
|
10
|
+
exports.powrThemeStorageKey = powrThemeStorageKey;
|
|
10
11
|
exports.powrVar = powrVar;
|
|
11
12
|
exports.resolvePowrTokens = resolvePowrTokens;
|
|
12
13
|
exports.themeForScheme = themeForScheme;
|
|
@@ -90,6 +91,11 @@ var POWR_DENSITIES = exports.POWR_DENSITIES = Object.freeze({
|
|
|
90
91
|
comfortable: 1,
|
|
91
92
|
compact: 0.875
|
|
92
93
|
});
|
|
94
|
+
|
|
95
|
+
/** localStorage key for the cached selectors. Pure — safe in a server component (head script). */
|
|
96
|
+
function powrThemeStorageKey(projectId) {
|
|
97
|
+
return "powr-theme:".concat(projectId || "default");
|
|
98
|
+
}
|
|
93
99
|
var DEFAULT_POWR_SCHEME = exports.DEFAULT_POWR_SCHEME = "light";
|
|
94
100
|
var DEFAULT_POWR_DENSITY = exports.DEFAULT_POWR_DENSITY = "comfortable";
|
|
95
101
|
var BASE_BY_SCHEME = {
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = useMediaQuery;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
9
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
11
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
12
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
14
|
+
/**
|
|
15
|
+
* `window.matchMedia` as a hook. SSR-safe: returns `fallback` until mounted,
|
|
16
|
+
* so server and first client render agree (no hydration mismatch).
|
|
17
|
+
*/
|
|
18
|
+
function useMediaQuery(query) {
|
|
19
|
+
var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
20
|
+
var _useState = (0, _react.useState)(fallback),
|
|
21
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
22
|
+
matches = _useState2[0],
|
|
23
|
+
setMatches = _useState2[1];
|
|
24
|
+
(0, _react.useEffect)(function () {
|
|
25
|
+
if (typeof window === "undefined" || !window.matchMedia) return undefined;
|
|
26
|
+
var mq = window.matchMedia(query);
|
|
27
|
+
var update = function update() {
|
|
28
|
+
return setMatches(mq.matches);
|
|
29
|
+
};
|
|
30
|
+
update();
|
|
31
|
+
if (mq.addEventListener) mq.addEventListener("change", update);else mq.addListener(update);
|
|
32
|
+
return function () {
|
|
33
|
+
if (mq.removeEventListener) mq.removeEventListener("change", update);else mq.removeListener(update);
|
|
34
|
+
};
|
|
35
|
+
}, [query]);
|
|
36
|
+
return matches;
|
|
37
|
+
}
|