@edx/frontend-platform 3.3.0 → 3.4.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/package.json +8 -7
- package/react/AppProvider.js +2 -1
- package/react/AppProvider.js.map +1 -1
- package/react/hooks.js +27 -0
- package/react/hooks.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edx/frontend-platform",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "Foundational application framework for Open edX micro-frontend applications.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -31,15 +31,16 @@
|
|
|
31
31
|
},
|
|
32
32
|
"homepage": "https://github.com/openedx/frontend-platform#readme",
|
|
33
33
|
"devDependencies": {
|
|
34
|
+
"@edx/brand": "npm:@edx/brand-openedx@1.2.0",
|
|
34
35
|
"@edx/browserslist-config": "1.1.1",
|
|
35
|
-
"@edx/
|
|
36
|
-
"@edx/
|
|
37
|
-
"@
|
|
36
|
+
"@edx/frontend-build": "12.4.16",
|
|
37
|
+
"@edx/paragon": "20.28.4",
|
|
38
|
+
"@testing-library/react-hooks": "^8.0.1",
|
|
38
39
|
"axios-mock-adapter": "1.21.2",
|
|
39
|
-
"core-js": "3.
|
|
40
|
+
"core-js": "3.29.0",
|
|
40
41
|
"enzyme": "3.11.0",
|
|
41
42
|
"enzyme-adapter-react-16": "1.15.7",
|
|
42
|
-
"husky": "
|
|
43
|
+
"husky": "8.0.3",
|
|
43
44
|
"jsdoc": "3.6.11",
|
|
44
45
|
"nodemon": "2.0.20",
|
|
45
46
|
"prop-types": "15.8.1",
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
"react-dom": "16.14.0",
|
|
48
49
|
"react-redux": "7.2.9",
|
|
49
50
|
"react-router-dom": "5.3.4",
|
|
50
|
-
"redux": "4.2.
|
|
51
|
+
"redux": "4.2.1",
|
|
51
52
|
"regenerator-runtime": "0.13.11"
|
|
52
53
|
},
|
|
53
54
|
"dependencies": {
|
package/react/AppProvider.js
CHANGED
|
@@ -16,7 +16,7 @@ import { Router } from 'react-router-dom';
|
|
|
16
16
|
import OptionalReduxProvider from './OptionalReduxProvider';
|
|
17
17
|
import ErrorBoundary from './ErrorBoundary';
|
|
18
18
|
import AppContext from './AppContext';
|
|
19
|
-
import { useAppEvent } from './hooks';
|
|
19
|
+
import { useAppEvent, useTrackColorSchemeChoice } from './hooks';
|
|
20
20
|
import { getAuthenticatedUser, AUTHENTICATED_USER_CHANGED } from '../auth';
|
|
21
21
|
import { getConfig } from '../config';
|
|
22
22
|
import { CONFIG_CHANGED } from '../constants';
|
|
@@ -68,6 +68,7 @@ export default function AppProvider(_ref) {
|
|
|
68
68
|
locale = _useState6[0],
|
|
69
69
|
setLocale = _useState6[1];
|
|
70
70
|
|
|
71
|
+
useTrackColorSchemeChoice();
|
|
71
72
|
useAppEvent(AUTHENTICATED_USER_CHANGED, function () {
|
|
72
73
|
setAuthenticatedUser(getAuthenticatedUser());
|
|
73
74
|
});
|
package/react/AppProvider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppProvider.js","names":["React","useState","useMemo","PropTypes","Router","OptionalReduxProvider","ErrorBoundary","AppContext","useAppEvent","getAuthenticatedUser","AUTHENTICATED_USER_CHANGED","getConfig","CONFIG_CHANGED","history","getLocale","getMessages","IntlProvider","LOCALE_CHANGED","AppProvider","store","children","config","setConfig","authenticatedUser","setAuthenticatedUser","locale","setLocale","appContextValue","propTypes","object","node","isRequired","defaultProps"],"sources":["../../src/react/AppProvider.jsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Router } from 'react-router-dom';\n\nimport OptionalReduxProvider from './OptionalReduxProvider';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport AppContext from './AppContext';\nimport { useAppEvent } from './hooks';\nimport { getAuthenticatedUser, AUTHENTICATED_USER_CHANGED } from '../auth';\nimport { getConfig } from '../config';\nimport { CONFIG_CHANGED } from '../constants';\nimport { history } from '../initialize';\nimport {\n getLocale,\n getMessages,\n IntlProvider,\n LOCALE_CHANGED,\n} from '../i18n';\n\n/**\n * A wrapper component for React-based micro-frontends to initialize a number of common data/\n * context providers.\n *\n * ```\n * subscribe(APP_READY, () => {\n * ReactDOM.render(\n * <AppProvider>\n * <HelloWorld />\n * </AppProvider>\n * )\n * });\n * ```\n *\n * This will provide the following to HelloWorld:\n * - An error boundary as described above.\n * - An `AppContext` provider for React context data.\n * - IntlProvider for @edx/frontend-i18n internationalization\n * - Optionally a redux `Provider`. Will only be included if a `store` property is passed to\n * `AppProvider`.\n * - A `Router` for react-router.\n *\n * @param {Object} props\n * @param {Object} [props.store] A redux store.\n * @memberof module:React\n */\nexport default function AppProvider({ store, children }) {\n const [config, setConfig] = useState(getConfig());\n const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());\n const [locale, setLocale] = useState(getLocale());\n\n useAppEvent(AUTHENTICATED_USER_CHANGED, () => {\n setAuthenticatedUser(getAuthenticatedUser());\n });\n\n useAppEvent(CONFIG_CHANGED, () => {\n setConfig(getConfig());\n });\n\n useAppEvent(LOCALE_CHANGED, () => {\n setLocale(getLocale());\n });\n\n const appContextValue = useMemo(() => ({ authenticatedUser, config, locale }), [authenticatedUser, config, locale]);\n\n return (\n <IntlProvider locale={locale} messages={getMessages()}>\n <ErrorBoundary>\n <AppContext.Provider\n value={appContextValue}\n >\n <OptionalReduxProvider store={store}>\n <Router history={history}>\n {children}\n </Router>\n </OptionalReduxProvider>\n </AppContext.Provider>\n </ErrorBoundary>\n </IntlProvider>\n );\n}\n\nAppProvider.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n store: PropTypes.object,\n children: PropTypes.node.isRequired,\n};\n\nAppProvider.defaultProps = {\n store: null,\n};\n"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,OAA1B,QAAyC,OAAzC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAEA,OAAOC,qBAAP,MAAkC,yBAAlC;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,SAASC,WAAT,
|
|
1
|
+
{"version":3,"file":"AppProvider.js","names":["React","useState","useMemo","PropTypes","Router","OptionalReduxProvider","ErrorBoundary","AppContext","useAppEvent","useTrackColorSchemeChoice","getAuthenticatedUser","AUTHENTICATED_USER_CHANGED","getConfig","CONFIG_CHANGED","history","getLocale","getMessages","IntlProvider","LOCALE_CHANGED","AppProvider","store","children","config","setConfig","authenticatedUser","setAuthenticatedUser","locale","setLocale","appContextValue","propTypes","object","node","isRequired","defaultProps"],"sources":["../../src/react/AppProvider.jsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Router } from 'react-router-dom';\n\nimport OptionalReduxProvider from './OptionalReduxProvider';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport AppContext from './AppContext';\nimport { useAppEvent, useTrackColorSchemeChoice } from './hooks';\nimport { getAuthenticatedUser, AUTHENTICATED_USER_CHANGED } from '../auth';\nimport { getConfig } from '../config';\nimport { CONFIG_CHANGED } from '../constants';\nimport { history } from '../initialize';\nimport {\n getLocale,\n getMessages,\n IntlProvider,\n LOCALE_CHANGED,\n} from '../i18n';\n\n/**\n * A wrapper component for React-based micro-frontends to initialize a number of common data/\n * context providers.\n *\n * ```\n * subscribe(APP_READY, () => {\n * ReactDOM.render(\n * <AppProvider>\n * <HelloWorld />\n * </AppProvider>\n * )\n * });\n * ```\n *\n * This will provide the following to HelloWorld:\n * - An error boundary as described above.\n * - An `AppContext` provider for React context data.\n * - IntlProvider for @edx/frontend-i18n internationalization\n * - Optionally a redux `Provider`. Will only be included if a `store` property is passed to\n * `AppProvider`.\n * - A `Router` for react-router.\n *\n * @param {Object} props\n * @param {Object} [props.store] A redux store.\n * @memberof module:React\n */\nexport default function AppProvider({ store, children }) {\n const [config, setConfig] = useState(getConfig());\n const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());\n const [locale, setLocale] = useState(getLocale());\n\n useTrackColorSchemeChoice();\n\n useAppEvent(AUTHENTICATED_USER_CHANGED, () => {\n setAuthenticatedUser(getAuthenticatedUser());\n });\n\n useAppEvent(CONFIG_CHANGED, () => {\n setConfig(getConfig());\n });\n\n useAppEvent(LOCALE_CHANGED, () => {\n setLocale(getLocale());\n });\n\n const appContextValue = useMemo(() => ({ authenticatedUser, config, locale }), [authenticatedUser, config, locale]);\n\n return (\n <IntlProvider locale={locale} messages={getMessages()}>\n <ErrorBoundary>\n <AppContext.Provider\n value={appContextValue}\n >\n <OptionalReduxProvider store={store}>\n <Router history={history}>\n {children}\n </Router>\n </OptionalReduxProvider>\n </AppContext.Provider>\n </ErrorBoundary>\n </IntlProvider>\n );\n}\n\nAppProvider.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n store: PropTypes.object,\n children: PropTypes.node.isRequired,\n};\n\nAppProvider.defaultProps = {\n store: null,\n};\n"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,OAA1B,QAAyC,OAAzC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAEA,OAAOC,qBAAP,MAAkC,yBAAlC;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,SAASC,WAAT,EAAsBC,yBAAtB,QAAuD,SAAvD;AACA,SAASC,oBAAT,EAA+BC,0BAA/B,QAAiE,SAAjE;AACA,SAASC,SAAT,QAA0B,WAA1B;AACA,SAASC,cAAT,QAA+B,cAA/B;AACA,SAASC,OAAT,QAAwB,eAAxB;AACA,SACEC,SADF,EAEEC,WAFF,EAGEC,YAHF,EAIEC,cAJF,QAKO,SALP;AAOA;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,eAAe,SAASC,WAAT,OAA0C;EAAA,IAAnBC,KAAmB,QAAnBA,KAAmB;EAAA,IAAZC,QAAY,QAAZA,QAAY;;EACvD,gBAA4BpB,QAAQ,CAACW,SAAS,EAAV,CAApC;EAAA;EAAA,IAAOU,MAAP;EAAA,IAAeC,SAAf;;EACA,iBAAkDtB,QAAQ,CAACS,oBAAoB,EAArB,CAA1D;EAAA;EAAA,IAAOc,iBAAP;EAAA,IAA0BC,oBAA1B;;EACA,iBAA4BxB,QAAQ,CAACc,SAAS,EAAV,CAApC;EAAA;EAAA,IAAOW,MAAP;EAAA,IAAeC,SAAf;;EAEAlB,yBAAyB;EAEzBD,WAAW,CAACG,0BAAD,EAA6B,YAAM;IAC5Cc,oBAAoB,CAACf,oBAAoB,EAArB,CAApB;EACD,CAFU,CAAX;EAIAF,WAAW,CAACK,cAAD,EAAiB,YAAM;IAChCU,SAAS,CAACX,SAAS,EAAV,CAAT;EACD,CAFU,CAAX;EAIAJ,WAAW,CAACU,cAAD,EAAiB,YAAM;IAChCS,SAAS,CAACZ,SAAS,EAAV,CAAT;EACD,CAFU,CAAX;EAIA,IAAMa,eAAe,GAAG1B,OAAO,CAAC;IAAA,OAAO;MAAEsB,iBAAiB,EAAjBA,iBAAF;MAAqBF,MAAM,EAANA,MAArB;MAA6BI,MAAM,EAANA;IAA7B,CAAP;EAAA,CAAD,EAAgD,CAACF,iBAAD,EAAoBF,MAApB,EAA4BI,MAA5B,CAAhD,CAA/B;EAEA,oBACE,oBAAC,YAAD;IAAc,MAAM,EAAEA,MAAtB;IAA8B,QAAQ,EAAEV,WAAW;EAAnD,gBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD,CAAY,QAAZ;IACE,KAAK,EAAEY;EADT,gBAGE,oBAAC,qBAAD;IAAuB,KAAK,EAAER;EAA9B,gBACE,oBAAC,MAAD;IAAQ,OAAO,EAAEN;EAAjB,GACGO,QADH,CADF,CAHF,CADF,CADF,CADF;AAeD;AAEDF,WAAW,CAACU,SAAZ,GAAwB;EACtB;EACAT,KAAK,EAAEjB,SAAS,CAAC2B,MAFK;EAGtBT,QAAQ,EAAElB,SAAS,CAAC4B,IAAV,CAAeC;AAHH,CAAxB;AAMAb,WAAW,CAACc,YAAZ,GAA2B;EACzBb,KAAK,EAAE;AADkB,CAA3B"}
|
package/react/hooks.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* eslint-disable import/prefer-default-export */
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
import { subscribe, unsubscribe } from '../pubSub';
|
|
4
|
+
import { sendTrackEvent } from '../analytics';
|
|
4
5
|
/**
|
|
5
6
|
* A React hook that allows functional components to subscribe to application events. This should
|
|
6
7
|
* be used sparingly - for the most part, Context should be used higher-up in the application to
|
|
@@ -20,4 +21,30 @@ export var useAppEvent = function useAppEvent(type, callback) {
|
|
|
20
21
|
};
|
|
21
22
|
}, [callback, type]);
|
|
22
23
|
};
|
|
24
|
+
/**
|
|
25
|
+
* A React hook that tracks user's preferred color scheme (light or dark) and sends respective
|
|
26
|
+
* event to the tracking service.
|
|
27
|
+
*
|
|
28
|
+
* @memberof module:React
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export var useTrackColorSchemeChoice = function useTrackColorSchemeChoice() {
|
|
32
|
+
useEffect(function () {
|
|
33
|
+
var trackColorSchemeChoice = function trackColorSchemeChoice(_ref) {
|
|
34
|
+
var matches = _ref.matches;
|
|
35
|
+
var preferredColorScheme = matches ? 'dark' : 'light';
|
|
36
|
+
sendTrackEvent('openedx.ui.frontend-platform.prefers-color-scheme.selected', {
|
|
37
|
+
preferredColorScheme: preferredColorScheme
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)'); // send user's initial choice
|
|
42
|
+
|
|
43
|
+
trackColorSchemeChoice(colorSchemeQuery);
|
|
44
|
+
colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
|
|
45
|
+
return function () {
|
|
46
|
+
return colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
|
|
47
|
+
};
|
|
48
|
+
}, []);
|
|
49
|
+
};
|
|
23
50
|
//# sourceMappingURL=hooks.js.map
|
package/react/hooks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","names":["useEffect","subscribe","unsubscribe","useAppEvent","type","callback","subscriptionToken","cleanup"],"sources":["../../src/react/hooks.js"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport { useEffect } from 'react';\nimport { subscribe, unsubscribe } from '../pubSub';\n\n/**\n * A React hook that allows functional components to subscribe to application events. This should\n * be used sparingly - for the most part, Context should be used higher-up in the application to\n * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub\n * mechanism.\n *\n * @memberof module:React\n * @param {string} type\n * @param {function} callback\n */\nexport const useAppEvent = (type, callback) => {\n useEffect(() => {\n const subscriptionToken = subscribe(type, callback);\n\n return function cleanup() {\n unsubscribe(subscriptionToken);\n };\n }, [callback, type]);\n};\n"],"mappings":"AAAA;AACA,SAASA,SAAT,QAA0B,OAA1B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,WAAvC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,IAAD,EAAOC,QAAP,EAAoB;
|
|
1
|
+
{"version":3,"file":"hooks.js","names":["useEffect","subscribe","unsubscribe","sendTrackEvent","useAppEvent","type","callback","subscriptionToken","cleanup","useTrackColorSchemeChoice","trackColorSchemeChoice","matches","preferredColorScheme","colorSchemeQuery","window","matchMedia","addEventListener","removeEventListener"],"sources":["../../src/react/hooks.js"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport { useEffect } from 'react';\nimport { subscribe, unsubscribe } from '../pubSub';\nimport { sendTrackEvent } from '../analytics';\n\n/**\n * A React hook that allows functional components to subscribe to application events. This should\n * be used sparingly - for the most part, Context should be used higher-up in the application to\n * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub\n * mechanism.\n *\n * @memberof module:React\n * @param {string} type\n * @param {function} callback\n */\nexport const useAppEvent = (type, callback) => {\n useEffect(() => {\n const subscriptionToken = subscribe(type, callback);\n\n return function cleanup() {\n unsubscribe(subscriptionToken);\n };\n }, [callback, type]);\n};\n\n/**\n * A React hook that tracks user's preferred color scheme (light or dark) and sends respective\n * event to the tracking service.\n *\n * @memberof module:React\n */\nexport const useTrackColorSchemeChoice = () => {\n useEffect(() => {\n const trackColorSchemeChoice = ({ matches }) => {\n const preferredColorScheme = matches ? 'dark' : 'light';\n\n sendTrackEvent('openedx.ui.frontend-platform.prefers-color-scheme.selected', { preferredColorScheme });\n };\n\n const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n // send user's initial choice\n trackColorSchemeChoice(colorSchemeQuery);\n\n colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);\n return () => colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);\n }, []);\n};\n"],"mappings":"AAAA;AACA,SAASA,SAAT,QAA0B,OAA1B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,WAAvC;AACA,SAASC,cAAT,QAA+B,cAA/B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,IAAD,EAAOC,QAAP,EAAoB;EAC7CN,SAAS,CAAC,YAAM;IACd,IAAMO,iBAAiB,GAAGN,SAAS,CAACI,IAAD,EAAOC,QAAP,CAAnC;IAEA,OAAO,SAASE,OAAT,GAAmB;MACxBN,WAAW,CAACK,iBAAD,CAAX;IACD,CAFD;EAGD,CANQ,EAMN,CAACD,QAAD,EAAWD,IAAX,CANM,CAAT;AAOD,CARM;AAUP;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,IAAMI,yBAAyB,GAAG,SAA5BA,yBAA4B,GAAM;EAC7CT,SAAS,CAAC,YAAM;IACd,IAAMU,sBAAsB,GAAG,SAAzBA,sBAAyB,OAAiB;MAAA,IAAdC,OAAc,QAAdA,OAAc;MAC9C,IAAMC,oBAAoB,GAAGD,OAAO,GAAG,MAAH,GAAY,OAAhD;MAEAR,cAAc,CAAC,4DAAD,EAA+D;QAAES,oBAAoB,EAApBA;MAAF,CAA/D,CAAd;IACD,CAJD;;IAMA,IAAMC,gBAAgB,GAAGC,MAAM,CAACC,UAAP,CAAkB,8BAAlB,CAAzB,CAPc,CASd;;IACAL,sBAAsB,CAACG,gBAAD,CAAtB;IAEAA,gBAAgB,CAACG,gBAAjB,CAAkC,QAAlC,EAA4CN,sBAA5C;IACA,OAAO;MAAA,OAAMG,gBAAgB,CAACI,mBAAjB,CAAqC,QAArC,EAA+CP,sBAA/C,CAAN;IAAA,CAAP;EACD,CAdQ,EAcN,EAdM,CAAT;AAeD,CAhBM"}
|