@openedx/frontend-base 1.0.0-alpha.1 → 1.0.0-alpha.10
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/config/eslint/base.eslint.config.js +1 -1
- package/config/jest/jest.config.js +1 -0
- package/config/types.js +0 -2
- package/config/webpack/common-config/all/getStylesheetRule.js +1 -1
- package/config/webpack/webpack.config.build.js +1 -11
- package/config/webpack/webpack.config.dev.js +5 -11
- package/config/webpack/webpack.config.dev.shell.js +5 -11
- package/package.json +4 -3
- package/runtime/config/index.ts +2 -3
- package/runtime/index.ts +5 -0
- package/runtime/jest.config.js +1 -0
- package/runtime/react/SiteProvider.tsx +26 -3
- package/runtime/react/constants.ts +3 -0
- package/runtime/react/hooks/index.ts +8 -0
- package/runtime/react/hooks/theme/index.ts +2 -0
- package/runtime/react/hooks/theme/useTheme.test.ts +221 -0
- package/runtime/react/hooks/theme/useTheme.ts +179 -0
- package/runtime/react/hooks/theme/useThemeConfig.test.ts +107 -0
- package/runtime/react/hooks/theme/useThemeConfig.ts +34 -0
- package/runtime/react/hooks/theme/useThemeCore.test.ts +65 -0
- package/runtime/react/hooks/theme/useThemeCore.ts +52 -0
- package/runtime/react/hooks/theme/useThemeVariants.test.ts +97 -0
- package/runtime/react/hooks/theme/useThemeVariants.ts +116 -0
- package/runtime/react/hooks/theme/useTrackColorSchemeChoice.test.ts +54 -0
- package/runtime/react/hooks/theme/useTrackColorSchemeChoice.ts +30 -0
- package/runtime/react/hooks/theme/utils.ts +11 -0
- package/runtime/react/hooks/useActiveRoles.ts +15 -0
- package/runtime/react/hooks/useActiveRouteRoleWatcher.ts +31 -0
- package/runtime/react/hooks/useAppConfig.ts +9 -0
- package/runtime/react/hooks/useAuthenticatedUser.test.tsx +41 -0
- package/runtime/react/hooks/useAuthenticatedUser.ts +9 -0
- package/runtime/react/hooks/useSiteConfig.test.tsx +13 -0
- package/runtime/react/hooks/useSiteConfig.ts +9 -0
- package/runtime/react/hooks/useSiteEvent.ts +24 -0
- package/runtime/react/reducers.ts +40 -0
- package/runtime/setupTest.js +0 -35
- package/runtime/slots/widget/iframe/hooks.ts +1 -1
- package/runtime/testing/initializeMockApp.ts +5 -0
- package/shell/app.scss +2 -1
- package/shell/jest.config.js +1 -0
- package/shell/setupTest.js +0 -35
- package/shell/site.tsx +1 -1
- package/tools/dist/cli/openedx.js +1 -15
- package/tools/dist/cli/utils/printUsage.js +0 -9
- package/tools/dist/eslint/base.eslint.config.js +1 -1
- package/tools/dist/jest/jest.config.js +1 -0
- package/tools/dist/types.js +0 -2
- package/tools/dist/webpack/common-config/all/getStylesheetRule.js +1 -1
- package/tools/dist/webpack/webpack.config.build.js +1 -11
- package/tools/dist/webpack/webpack.config.dev.js +5 -11
- package/tools/dist/webpack/webpack.config.dev.shell.js +5 -11
- package/types.ts +20 -0
- package/config/webpack/plugins/paragon-webpack-plugin/ParagonWebpackPlugin.js +0 -108
- package/config/webpack/plugins/paragon-webpack-plugin/index.js +0 -7
- package/config/webpack/plugins/paragon-webpack-plugin/utils/assetUtils.js +0 -64
- package/config/webpack/plugins/paragon-webpack-plugin/utils/htmlUtils.js +0 -53
- package/config/webpack/plugins/paragon-webpack-plugin/utils/index.js +0 -9
- package/config/webpack/plugins/paragon-webpack-plugin/utils/paragonStylesheetUtils.js +0 -114
- package/config/webpack/plugins/paragon-webpack-plugin/utils/scriptUtils.js +0 -146
- package/config/webpack/plugins/paragon-webpack-plugin/utils/stylesheetUtils.js +0 -126
- package/config/webpack/plugins/paragon-webpack-plugin/utils/tagUtils.js +0 -57
- package/config/webpack/types.js +0 -2
- package/config/webpack/utils/paragonUtils.js +0 -138
- package/runtime/react/hooks.test.jsx +0 -104
- package/runtime/react/hooks.ts +0 -106
- package/tools/dist/cli/commands/pack.js +0 -14
- package/tools/dist/cli/commands/release.js +0 -28
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/ParagonWebpackPlugin.js +0 -108
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/index.js +0 -7
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/assetUtils.js +0 -64
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/htmlUtils.js +0 -53
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/index.js +0 -9
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/paragonStylesheetUtils.js +0 -114
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/scriptUtils.js +0 -146
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/stylesheetUtils.js +0 -126
- package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/tagUtils.js +0 -57
- package/tools/dist/webpack/types.js +0 -2
- package/tools/dist/webpack/utils/paragonUtils.js +0 -138
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getDescendantByTag = getDescendantByTag;
|
|
4
|
-
exports.handleVersionSubstitution = handleVersionSubstitution;
|
|
5
|
-
exports.minifyScript = minifyScript;
|
|
6
|
-
/**
|
|
7
|
-
* Recursively searches for a descendant node with the specified tag name.
|
|
8
|
-
*
|
|
9
|
-
* @param {Object} node - The root node to start the search from.
|
|
10
|
-
* @param {string} tag - The tag name to search for.
|
|
11
|
-
* @return {Object|null} The first descendant node with the specified tag name, or null if not found.
|
|
12
|
-
*/
|
|
13
|
-
function getDescendantByTag(node, tag) {
|
|
14
|
-
for (let i = 0; i < node.childNodes?.length; i++) {
|
|
15
|
-
if (node.childNodes[i].tagName === tag) {
|
|
16
|
-
return node.childNodes[i];
|
|
17
|
-
}
|
|
18
|
-
const result = getDescendantByTag(node.childNodes[i], tag);
|
|
19
|
-
if (result) {
|
|
20
|
-
return result;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return null;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Replaces a wildcard keyword in a URL with a local version.
|
|
27
|
-
*
|
|
28
|
-
* @param {Object} options - The options object.
|
|
29
|
-
* @param {string} options.url - The URL to substitute the keyword in.
|
|
30
|
-
* @param {string} options.wildcardKeyword - The wildcard keyword to replace.
|
|
31
|
-
* @param {string} options.localVersion - The local version to substitute the keyword with.
|
|
32
|
-
* @return {string} The URL with the wildcard keyword substituted with the local version,
|
|
33
|
-
* or the original URL if no substitution is needed.
|
|
34
|
-
*/
|
|
35
|
-
function handleVersionSubstitution({ url, wildcardKeyword, localVersion }) {
|
|
36
|
-
if (!url || !url.includes(wildcardKeyword) || !localVersion) {
|
|
37
|
-
return url;
|
|
38
|
-
}
|
|
39
|
-
return url.replaceAll(wildcardKeyword, localVersion);
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Minifies a script by removing unnecessary whitespace and line breaks.
|
|
43
|
-
*
|
|
44
|
-
* @param {string} script - The script to be minified.
|
|
45
|
-
* @return {string} The minified script.
|
|
46
|
-
*/
|
|
47
|
-
function minifyScript(script) {
|
|
48
|
-
return script
|
|
49
|
-
.replace(/>[\r\n ]+</g, '><')
|
|
50
|
-
.replace(/(<.*?>)|\s+/g, (m, $1) => {
|
|
51
|
-
if ($1) {
|
|
52
|
-
return $1;
|
|
53
|
-
}
|
|
54
|
-
return ' ';
|
|
55
|
-
})
|
|
56
|
-
.trim();
|
|
57
|
-
}
|
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.getParagonVersion = getParagonVersion;
|
|
7
|
-
exports.getParagonThemeCss = getParagonThemeCss;
|
|
8
|
-
exports.getParagonCacheGroups = getParagonCacheGroups;
|
|
9
|
-
exports.getParagonEntryPoints = getParagonEntryPoints;
|
|
10
|
-
const fs_1 = __importDefault(require("fs"));
|
|
11
|
-
const path_1 = __importDefault(require("path"));
|
|
12
|
-
/**
|
|
13
|
-
* Retrieves the name of the brand package from the given directory.
|
|
14
|
-
*
|
|
15
|
-
* @param {string} dir - The directory path containing the package.json file.
|
|
16
|
-
* @return {string} The name of the brand package, or an empty string if not found.
|
|
17
|
-
*/
|
|
18
|
-
function getBrandPackageName(dir) {
|
|
19
|
-
const appDependencies = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(dir, 'package.json'), 'utf-8')).dependencies;
|
|
20
|
-
return Object.keys(appDependencies).find((key) => /@(open)?edx\/brand/.exec(key)) ?? '';
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Attempts to extract the Paragon version from the `node_modules` of
|
|
24
|
-
* the consuming application.
|
|
25
|
-
*
|
|
26
|
-
* @param {string} dir Path to directory containing `node_modules`.
|
|
27
|
-
* @returns {string} Paragon dependency version of the consuming application
|
|
28
|
-
*/
|
|
29
|
-
function getParagonVersion(dir, { isBrandOverride = false } = {}) {
|
|
30
|
-
const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
|
|
31
|
-
const pathToPackageJson = `${dir}/node_modules/${npmPackageName}/package.json`;
|
|
32
|
-
if (!fs_1.default.existsSync(pathToPackageJson)) {
|
|
33
|
-
return undefined;
|
|
34
|
-
}
|
|
35
|
-
return JSON.parse(fs_1.default.readFileSync(pathToPackageJson, 'utf-8')).version;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Attempts to extract the Paragon theme CSS from the locally installed `@openedx/paragon` package.
|
|
39
|
-
* @param {string} dir Path to directory containing `node_modules`.
|
|
40
|
-
* @param {boolean} isBrandOverride
|
|
41
|
-
* @returns {ParagonThemeCss}
|
|
42
|
-
*/
|
|
43
|
-
function getParagonThemeCss(dir, { isBrandOverride = false } = {}) {
|
|
44
|
-
const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
|
|
45
|
-
const pathToParagonThemeOutput = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', 'theme-urls.json');
|
|
46
|
-
if (!fs_1.default.existsSync(pathToParagonThemeOutput)) {
|
|
47
|
-
return undefined;
|
|
48
|
-
}
|
|
49
|
-
const paragonConfig = JSON.parse(fs_1.default.readFileSync(pathToParagonThemeOutput, 'utf-8'));
|
|
50
|
-
const { core: themeCore, variants: themeVariants, defaults, } = paragonConfig?.themeUrls || {};
|
|
51
|
-
const pathToCoreCss = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', themeCore.paths.minified);
|
|
52
|
-
const coreCssExists = fs_1.default.existsSync(pathToCoreCss);
|
|
53
|
-
const themeVariantResults = Object.entries(themeVariants || {}).reduce((themeVariantAcc, [themeVariant, value]) => {
|
|
54
|
-
const themeVariantCssDefault = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', value.paths.default);
|
|
55
|
-
const themeVariantCssMinified = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', value.paths.minified);
|
|
56
|
-
if (!fs_1.default.existsSync(themeVariantCssDefault) && !fs_1.default.existsSync(themeVariantCssMinified)) {
|
|
57
|
-
return themeVariantAcc;
|
|
58
|
-
}
|
|
59
|
-
return ({
|
|
60
|
-
...themeVariantAcc,
|
|
61
|
-
[themeVariant]: {
|
|
62
|
-
filePath: themeVariantCssMinified,
|
|
63
|
-
entryName: isBrandOverride ? `brand.theme.variants.${themeVariant}` : `paragon.theme.variants.${themeVariant}`,
|
|
64
|
-
outputChunkName: isBrandOverride ? `brand-theme-variants-${themeVariant}` : `paragon-theme-variants-${themeVariant}`,
|
|
65
|
-
},
|
|
66
|
-
});
|
|
67
|
-
}, {});
|
|
68
|
-
if (!coreCssExists || Object.keys(themeVariantResults).length === 0) {
|
|
69
|
-
return undefined;
|
|
70
|
-
}
|
|
71
|
-
const coreResult = {
|
|
72
|
-
filePath: path_1.default.resolve(dir, pathToCoreCss),
|
|
73
|
-
entryName: isBrandOverride ? 'brand.theme.core' : 'paragon.theme.core',
|
|
74
|
-
outputChunkName: isBrandOverride ? 'brand-theme-core' : 'paragon-theme-core',
|
|
75
|
-
};
|
|
76
|
-
return {
|
|
77
|
-
core: fs_1.default.existsSync(pathToCoreCss) ? coreResult : undefined,
|
|
78
|
-
variants: themeVariantResults,
|
|
79
|
-
defaults,
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
/**
|
|
83
|
-
* @typedef CacheGroup
|
|
84
|
-
* @property {string} type The type of cache group.
|
|
85
|
-
* @property {string|function} name The name of the cache group.
|
|
86
|
-
* @property {function} chunks A function that returns true if the chunk should be included in the cache group.
|
|
87
|
-
* @property {boolean} enforce If true, this cache group will be created even if it conflicts with default cache groups.
|
|
88
|
-
*/
|
|
89
|
-
/**
|
|
90
|
-
* @param {ParagonThemeCss} paragonThemeCss The Paragon theme CSS metadata.
|
|
91
|
-
* @returns {Object.<string, CacheGroup>} The cache groups for the Paragon theme CSS.
|
|
92
|
-
*/
|
|
93
|
-
function getParagonCacheGroups(paragonThemeCss) {
|
|
94
|
-
if (!paragonThemeCss) {
|
|
95
|
-
return {};
|
|
96
|
-
}
|
|
97
|
-
const cacheGroups = {};
|
|
98
|
-
if (paragonThemeCss.core !== undefined) {
|
|
99
|
-
const { core } = paragonThemeCss;
|
|
100
|
-
cacheGroups[paragonThemeCss.core.outputChunkName] = {
|
|
101
|
-
type: 'css/mini-extract',
|
|
102
|
-
name: paragonThemeCss.core.outputChunkName,
|
|
103
|
-
chunks: (chunk) => chunk.name === core.entryName,
|
|
104
|
-
enforce: true,
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
Object.values(paragonThemeCss.variants).forEach(({ entryName, outputChunkName }) => {
|
|
108
|
-
cacheGroups[outputChunkName] = {
|
|
109
|
-
type: 'css/mini-extract',
|
|
110
|
-
name: outputChunkName,
|
|
111
|
-
chunks: (chunk) => chunk.name === entryName,
|
|
112
|
-
enforce: true,
|
|
113
|
-
};
|
|
114
|
-
});
|
|
115
|
-
return cacheGroups;
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* @param {ParagonThemeCss} paragonThemeCss The Paragon theme CSS metadata.
|
|
119
|
-
* @returns {Object.<string, string>} The entry points for the Paragon theme CSS. Example: ```
|
|
120
|
-
* {
|
|
121
|
-
* "paragon.theme.core": "/path/to/node_modules/@openedx/paragon/dist/core.min.css",
|
|
122
|
-
* "paragon.theme.variants.light": "/path/to/node_modules/@openedx/paragon/dist/light.min.css"
|
|
123
|
-
* }
|
|
124
|
-
* ```
|
|
125
|
-
*/
|
|
126
|
-
function getParagonEntryPoints(paragonThemeCss) {
|
|
127
|
-
if (!paragonThemeCss) {
|
|
128
|
-
return {};
|
|
129
|
-
}
|
|
130
|
-
const entryPoints = {};
|
|
131
|
-
if (paragonThemeCss.core !== undefined) {
|
|
132
|
-
entryPoints[paragonThemeCss.core.entryName] = path_1.default.resolve(process.cwd(), paragonThemeCss.core.filePath);
|
|
133
|
-
}
|
|
134
|
-
Object.values(paragonThemeCss.variants).forEach(({ filePath, entryName }) => {
|
|
135
|
-
entryPoints[entryName] = path_1.default.resolve(process.cwd(), filePath);
|
|
136
|
-
});
|
|
137
|
-
return entryPoints;
|
|
138
|
-
}
|