@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.
Files changed (78) hide show
  1. package/config/eslint/base.eslint.config.js +1 -1
  2. package/config/jest/jest.config.js +1 -0
  3. package/config/types.js +0 -2
  4. package/config/webpack/common-config/all/getStylesheetRule.js +1 -1
  5. package/config/webpack/webpack.config.build.js +1 -11
  6. package/config/webpack/webpack.config.dev.js +5 -11
  7. package/config/webpack/webpack.config.dev.shell.js +5 -11
  8. package/package.json +4 -3
  9. package/runtime/config/index.ts +2 -3
  10. package/runtime/index.ts +5 -0
  11. package/runtime/jest.config.js +1 -0
  12. package/runtime/react/SiteProvider.tsx +26 -3
  13. package/runtime/react/constants.ts +3 -0
  14. package/runtime/react/hooks/index.ts +8 -0
  15. package/runtime/react/hooks/theme/index.ts +2 -0
  16. package/runtime/react/hooks/theme/useTheme.test.ts +221 -0
  17. package/runtime/react/hooks/theme/useTheme.ts +179 -0
  18. package/runtime/react/hooks/theme/useThemeConfig.test.ts +107 -0
  19. package/runtime/react/hooks/theme/useThemeConfig.ts +34 -0
  20. package/runtime/react/hooks/theme/useThemeCore.test.ts +65 -0
  21. package/runtime/react/hooks/theme/useThemeCore.ts +52 -0
  22. package/runtime/react/hooks/theme/useThemeVariants.test.ts +97 -0
  23. package/runtime/react/hooks/theme/useThemeVariants.ts +116 -0
  24. package/runtime/react/hooks/theme/useTrackColorSchemeChoice.test.ts +54 -0
  25. package/runtime/react/hooks/theme/useTrackColorSchemeChoice.ts +30 -0
  26. package/runtime/react/hooks/theme/utils.ts +11 -0
  27. package/runtime/react/hooks/useActiveRoles.ts +15 -0
  28. package/runtime/react/hooks/useActiveRouteRoleWatcher.ts +31 -0
  29. package/runtime/react/hooks/useAppConfig.ts +9 -0
  30. package/runtime/react/hooks/useAuthenticatedUser.test.tsx +41 -0
  31. package/runtime/react/hooks/useAuthenticatedUser.ts +9 -0
  32. package/runtime/react/hooks/useSiteConfig.test.tsx +13 -0
  33. package/runtime/react/hooks/useSiteConfig.ts +9 -0
  34. package/runtime/react/hooks/useSiteEvent.ts +24 -0
  35. package/runtime/react/reducers.ts +40 -0
  36. package/runtime/setupTest.js +0 -35
  37. package/runtime/slots/widget/iframe/hooks.ts +1 -1
  38. package/runtime/testing/initializeMockApp.ts +5 -0
  39. package/shell/app.scss +2 -1
  40. package/shell/jest.config.js +1 -0
  41. package/shell/setupTest.js +0 -35
  42. package/shell/site.tsx +1 -1
  43. package/tools/dist/cli/openedx.js +1 -15
  44. package/tools/dist/cli/utils/printUsage.js +0 -9
  45. package/tools/dist/eslint/base.eslint.config.js +1 -1
  46. package/tools/dist/jest/jest.config.js +1 -0
  47. package/tools/dist/types.js +0 -2
  48. package/tools/dist/webpack/common-config/all/getStylesheetRule.js +1 -1
  49. package/tools/dist/webpack/webpack.config.build.js +1 -11
  50. package/tools/dist/webpack/webpack.config.dev.js +5 -11
  51. package/tools/dist/webpack/webpack.config.dev.shell.js +5 -11
  52. package/types.ts +20 -0
  53. package/config/webpack/plugins/paragon-webpack-plugin/ParagonWebpackPlugin.js +0 -108
  54. package/config/webpack/plugins/paragon-webpack-plugin/index.js +0 -7
  55. package/config/webpack/plugins/paragon-webpack-plugin/utils/assetUtils.js +0 -64
  56. package/config/webpack/plugins/paragon-webpack-plugin/utils/htmlUtils.js +0 -53
  57. package/config/webpack/plugins/paragon-webpack-plugin/utils/index.js +0 -9
  58. package/config/webpack/plugins/paragon-webpack-plugin/utils/paragonStylesheetUtils.js +0 -114
  59. package/config/webpack/plugins/paragon-webpack-plugin/utils/scriptUtils.js +0 -146
  60. package/config/webpack/plugins/paragon-webpack-plugin/utils/stylesheetUtils.js +0 -126
  61. package/config/webpack/plugins/paragon-webpack-plugin/utils/tagUtils.js +0 -57
  62. package/config/webpack/types.js +0 -2
  63. package/config/webpack/utils/paragonUtils.js +0 -138
  64. package/runtime/react/hooks.test.jsx +0 -104
  65. package/runtime/react/hooks.ts +0 -106
  66. package/tools/dist/cli/commands/pack.js +0 -14
  67. package/tools/dist/cli/commands/release.js +0 -28
  68. package/tools/dist/webpack/plugins/paragon-webpack-plugin/ParagonWebpackPlugin.js +0 -108
  69. package/tools/dist/webpack/plugins/paragon-webpack-plugin/index.js +0 -7
  70. package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/assetUtils.js +0 -64
  71. package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/htmlUtils.js +0 -53
  72. package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/index.js +0 -9
  73. package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/paragonStylesheetUtils.js +0 -114
  74. package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/scriptUtils.js +0 -146
  75. package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/stylesheetUtils.js +0 -126
  76. package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/tagUtils.js +0 -57
  77. package/tools/dist/webpack/types.js +0 -2
  78. package/tools/dist/webpack/utils/paragonUtils.js +0 -138
@@ -11,21 +11,15 @@ const path_1 = __importDefault(require("path"));
11
11
  const react_refresh_typescript_1 = __importDefault(require("react-refresh-typescript"));
12
12
  const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
13
13
  const common_config_1 = require("./common-config");
14
- const ParagonWebpackPlugin_1 = __importDefault(require("./plugins/paragon-webpack-plugin/ParagonWebpackPlugin"));
15
14
  const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
16
15
  const getLocalAliases_1 = __importDefault(require("./utils/getLocalAliases"));
17
16
  const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
18
17
  const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
19
- const paragonUtils_1 = require("./utils/paragonUtils");
20
- const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
21
- const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
22
18
  const aliases = (0, getLocalAliases_1.default)();
23
19
  const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('shell/site.config.dev.tsx');
24
20
  const config = {
25
21
  entry: {
26
22
  app: path_1.default.resolve(process.cwd(), 'shell/site'),
27
- ...(0, paragonUtils_1.getParagonEntryPoints)(paragonThemeCss),
28
- ...(0, paragonUtils_1.getParagonEntryPoints)(brandThemeCss),
29
23
  },
30
24
  output: {
31
25
  path: path_1.default.resolve(process.cwd(), './dist'),
@@ -35,6 +29,7 @@ const config = {
35
29
  alias: {
36
30
  ...aliases,
37
31
  'site.config': resolvedSiteConfigPath,
32
+ '@src': path_1.default.resolve(process.cwd(), 'src'),
38
33
  },
39
34
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
40
35
  },
@@ -77,10 +72,6 @@ const config = {
77
72
  optimization: {
78
73
  splitChunks: {
79
74
  chunks: 'all',
80
- cacheGroups: {
81
- ...(0, paragonUtils_1.getParagonCacheGroups)(paragonThemeCss),
82
- ...(0, paragonUtils_1.getParagonCacheGroups)(brandThemeCss),
83
- },
84
75
  },
85
76
  minimizer: (0, common_config_1.getImageMinimizer)(),
86
77
  },
@@ -90,7 +81,6 @@ const config = {
90
81
  // This helps to clean up the final bundle application
91
82
  // See: https://www.npmjs.com/package/webpack-remove-empty-scripts#usage-with-mini-css-extract-plugin
92
83
  new webpack_remove_empty_scripts_1.default(),
93
- new ParagonWebpackPlugin_1.default(),
94
84
  // Writes the extracted CSS from each entry to a file in the output directory.
95
85
  new mini_css_extract_plugin_1.default({
96
86
  filename: '[name].css',
@@ -106,5 +96,9 @@ const config = {
106
96
  // This configures webpack-dev-server which serves bundles from memory and provides live
107
97
  // reloading.
108
98
  devServer: (0, common_config_1.getDevServer)(),
99
+ // Limit the number of watched files to avoid `inotify` resource starvation.
100
+ watchOptions: {
101
+ ignored: /node_modules/
102
+ }
109
103
  };
110
104
  exports.default = config;
package/types.ts CHANGED
@@ -60,6 +60,9 @@ export interface OptionalSiteConfig {
60
60
  externalLinkUrlOverrides: string[],
61
61
  mfeConfigApiUrl: string | null,
62
62
 
63
+ // Theme
64
+ theme: Theme,
65
+
63
66
  // Cookies
64
67
  accessTokenCookieName: string,
65
68
  languagePreferenceCookieName: string,
@@ -78,6 +81,23 @@ export interface OptionalSiteConfig {
78
81
 
79
82
  export type SiteConfig = RequiredSiteConfig & Partial<OptionalSiteConfig>;
80
83
 
84
+ export interface ThemeVariant {
85
+ url: string,
86
+ }
87
+
88
+ export interface ThemeDefaults {
89
+ light?: string,
90
+ dark?: string,
91
+ }
92
+
93
+ export type ThemeVariants = Record<string, ThemeVariant>;
94
+
95
+ export interface Theme {
96
+ core?: ThemeVariant,
97
+ defaults?: ThemeDefaults,
98
+ variants?: ThemeVariants,
99
+ }
100
+
81
101
  export interface User {
82
102
  administrator: boolean,
83
103
  email: string,
@@ -1,108 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const webpack_1 = require("webpack");
4
- const paragonUtils_1 = require("../../utils/paragonUtils");
5
- const utils_1 = require("./utils");
6
- // Get Paragon and brand versions / CSS files from disk.
7
- const paragonVersion = (0, paragonUtils_1.getParagonVersion)(process.cwd());
8
- const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
9
- const brandVersion = (0, paragonUtils_1.getParagonVersion)(process.cwd(), { isBrandOverride: true });
10
- const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
11
- /**
12
- * 1. Injects `PARAGON_THEME` global variable into the HTML document during the Webpack compilation process.
13
- * 2. Injects `<link rel="preload" as="style">` element(s) for the Paragon and brand CSS into the HTML document.
14
- */
15
- class ParagonWebpackPlugin {
16
- pluginName;
17
- paragonThemeUrlsConfig;
18
- processAssetsHandlers;
19
- paragonMetadata;
20
- constructor({ processAssetsHandlers = [] } = {}) {
21
- this.pluginName = 'ParagonWebpackPlugin';
22
- this.paragonThemeUrlsConfig = {};
23
- this.paragonMetadata = {};
24
- // List of handlers to be executed after processing assets during the Webpack compilation.
25
- this.processAssetsHandlers = [
26
- this.resolveParagonThemeUrlsFromConfig,
27
- this.injectParagonMetadataIntoDocument,
28
- this.injectParagonStylesheetsIntoDocument,
29
- ...processAssetsHandlers,
30
- ].map(handler => handler.bind(this));
31
- }
32
- /**
33
- * Resolves the MFE configuration from ``PARAGON_THEME_URLS`` in the environment variables. `
34
- *
35
- * @returns {Object} Metadata about the Paragon and brand theme URLs from configuration.
36
- */
37
- async resolveParagonThemeUrlsFromConfig() {
38
- try {
39
- this.paragonThemeUrlsConfig = JSON.parse(process.env.PARAGON_THEME_URLS ?? '{}');
40
- }
41
- catch (error) {
42
- console.info('Paragon Plugin cannot load PARAGON_THEME_URLS env variable, skipping.');
43
- }
44
- }
45
- /**
46
- * Generates `PARAGON_THEME` global variable in HTML document.
47
- * @param {Object} compilation Webpack compilation object.
48
- */
49
- injectParagonMetadataIntoDocument(compilation) {
50
- const paragonMetadata = (0, utils_1.injectMetadataIntoDocument)(compilation, {
51
- paragonThemeCss,
52
- paragonVersion,
53
- brandThemeCss,
54
- brandVersion,
55
- });
56
- if (paragonMetadata) {
57
- this.paragonMetadata = paragonMetadata;
58
- }
59
- }
60
- injectParagonStylesheetsIntoDocument(compilation) {
61
- const file = compilation.getAsset('index.html');
62
- // If the `index.html` hasn't loaded yet, or there are no Paragon theme URLs, then there is nothing to do yet.
63
- if (!file || Object.keys(this.paragonThemeUrlsConfig || {}).length === 0) {
64
- return;
65
- }
66
- // Generates `<link rel="preload" as="style">` element(s) for the Paragon and brand CSS files.
67
- const paragonStylesheetUrls = (0, utils_1.getParagonStylesheetUrls)({
68
- paragonThemeUrls: this.paragonThemeUrlsConfig,
69
- paragonVersion,
70
- brandVersion,
71
- });
72
- const { core: paragonCoreCss, variants: paragonThemeVariantCss, } = paragonStylesheetUrls;
73
- // We do not expect to have a Buffer here, ever.
74
- const originalSource = file.source.source();
75
- // Inject core CSS
76
- let newSource = (0, utils_1.injectParagonCoreStylesheets)({
77
- source: originalSource,
78
- paragonCoreCss,
79
- paragonThemeCss,
80
- brandThemeCss,
81
- });
82
- // Inject theme variant CSS
83
- newSource = (0, utils_1.injectParagonThemeVariantStylesheets)({
84
- // @ts-expect-error newSource is possibly undefined here.
85
- source: newSource.source(),
86
- paragonThemeVariantCss,
87
- paragonThemeCss,
88
- brandThemeCss,
89
- });
90
- // @ts-expect-error newSource is possibly undefined here.
91
- compilation.updateAsset('index.html', new webpack_1.sources.RawSource(newSource.source()));
92
- }
93
- apply(compiler) {
94
- compiler.hooks.thisCompilation.tap(this.pluginName, (compilation) => {
95
- compilation.hooks.processAssets.tap({
96
- name: this.pluginName,
97
- stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
98
- additionalAssets: true,
99
- }, () => {
100
- // Iterate through each configured handler, passing the compilation to each.
101
- this.processAssetsHandlers.forEach(async (handler) => {
102
- await handler(compilation);
103
- });
104
- });
105
- });
106
- }
107
- }
108
- exports.default = ParagonWebpackPlugin;
@@ -1,7 +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
- const ParagonWebpackPlugin_1 = __importDefault(require("./ParagonWebpackPlugin"));
7
- exports.default = ParagonWebpackPlugin_1.default;
@@ -1,64 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.findCoreCssAsset = findCoreCssAsset;
4
- exports.findThemeVariantCssAssets = findThemeVariantCssAssets;
5
- exports.getCssAssetsFromCompilation = getCssAssetsFromCompilation;
6
- /**
7
- * Finds the core CSS asset from the given array of Paragon assets.
8
- *
9
- * @param {Array} paragonAssets - An array of Paragon assets.
10
- * @return {Object|undefined} The core CSS asset, or undefined if not found.
11
- */
12
- function findCoreCssAsset(paragonAssets) {
13
- return paragonAssets?.find((asset) => asset.name.includes('core') && asset.name.endsWith('.css'));
14
- }
15
- /**
16
- * Finds the theme variant CSS assets from the given Paragon assets based on the provided options.
17
- *
18
- * @param {Array} paragonAssets - An array of Paragon assets.
19
- * @param {Object} options - The options for finding the theme variant CSS assets.
20
- * @param {boolean} [options.isBrandOverride=false] - Indicates if the theme variant is a brand override.
21
- * @param {Object} [options.brandThemeCss] - The brand theme CSS object.
22
- * @param {Object} [options.paragonThemeCss] - The Paragon theme CSS object.
23
- * @return {Object} - The theme variant CSS assets.
24
- */
25
- function findThemeVariantCssAssets(paragonAssets, { isBrandOverride = false, brandThemeCss, paragonThemeCss, }) {
26
- const themeVariantsSource = isBrandOverride ? brandThemeCss?.variants : paragonThemeCss?.variants;
27
- const themeVariantCssAssets = {};
28
- Object.entries(themeVariantsSource || {}).forEach(([themeVariant, value]) => {
29
- const foundThemeVariantAsset = paragonAssets.find((asset) => asset.name.includes(value.outputChunkName));
30
- if (!foundThemeVariantAsset) {
31
- return;
32
- }
33
- themeVariantCssAssets[themeVariant] = {
34
- fileName: foundThemeVariantAsset.name,
35
- };
36
- });
37
- return themeVariantCssAssets;
38
- }
39
- /**
40
- * Retrieves the CSS assets from the compilation based on the provided options.
41
- *
42
- * @param {Object} compilation - The compilation object.
43
- * @param {Object} options - The options for retrieving the CSS assets.
44
- * @param {boolean} [options.isBrandOverride=false] - Indicates if the assets are for a brand override.
45
- * @param {Object} [options.brandThemeCss] - The brand theme CSS object.
46
- * @param {Object} [options.paragonThemeCss] - The Paragon theme CSS object.
47
- * @return {Object} - The CSS assets, including the core CSS asset and theme variant CSS assets.
48
- */
49
- function getCssAssetsFromCompilation(compilation, { isBrandOverride = false, brandThemeCss, paragonThemeCss, }) {
50
- const assetSubstring = isBrandOverride ? 'brand' : 'paragon';
51
- const paragonAssets = compilation.getAssets().filter(asset => asset.name.includes(assetSubstring) && asset.name.endsWith('.css'));
52
- const coreCssAsset = findCoreCssAsset(paragonAssets);
53
- const themeVariantCssAssets = findThemeVariantCssAssets(paragonAssets, {
54
- isBrandOverride,
55
- paragonThemeCss,
56
- brandThemeCss,
57
- });
58
- return {
59
- coreCssAsset: {
60
- fileName: coreCssAsset?.name,
61
- },
62
- themeVariantCssAssets,
63
- };
64
- }
@@ -1,53 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.injectMetadataIntoDocument = injectMetadataIntoDocument;
4
- const webpack_1 = require("webpack");
5
- const assetUtils_1 = require("./assetUtils");
6
- const scriptUtils_1 = require("./scriptUtils");
7
- /**
8
- * Injects metadata into the HTML document by modifying the 'index.html' asset in the compilation.
9
- *
10
- * @param {Object} compilation - The Webpack compilation object.
11
- * @param {Object} options - The options object.
12
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS object.
13
- * @param {string} options.paragonVersion - The version of the Paragon theme.
14
- * @param {Object} options.brandThemeCss - The brand theme CSS object.
15
- * @param {string} options.brandVersion - The version of the brand theme.
16
- * @return {Object|undefined} The script contents object if the 'index.html' asset exists, otherwise undefined.
17
- */
18
- function injectMetadataIntoDocument(compilation, { paragonThemeCss, paragonVersion, brandThemeCss, brandVersion, }) {
19
- const file = compilation.getAsset('index.html');
20
- if (!file) {
21
- return undefined;
22
- }
23
- const { coreCssAsset: paragonCoreCssAsset, themeVariantCssAssets: paragonThemeVariantCssAssets, } = (0, assetUtils_1.getCssAssetsFromCompilation)(compilation, {
24
- brandThemeCss,
25
- paragonThemeCss,
26
- });
27
- const { coreCssAsset: brandCoreCssAsset, themeVariantCssAssets: brandThemeVariantCssAssets, } = (0, assetUtils_1.getCssAssetsFromCompilation)(compilation, {
28
- isBrandOverride: true,
29
- brandThemeCss,
30
- paragonThemeCss,
31
- });
32
- const scriptContents = (0, scriptUtils_1.generateScriptContents)({
33
- paragonCoreCssAsset,
34
- paragonThemeVariantCssAssets,
35
- brandCoreCssAsset,
36
- brandThemeVariantCssAssets,
37
- paragonThemeCss,
38
- paragonVersion,
39
- brandThemeCss,
40
- brandVersion,
41
- });
42
- // We expect this to be a string at all times.
43
- const originalSource = file.source.source();
44
- const newSource = (0, scriptUtils_1.insertScriptContentsIntoDocument)({
45
- originalSource,
46
- // @ts-expect-error This parameter doesn't exist in the function.
47
- coreCssAsset: paragonCoreCssAsset,
48
- themeVariantCssAssets: paragonThemeVariantCssAssets,
49
- scriptContents,
50
- });
51
- compilation.updateAsset('index.html', new webpack_1.sources.RawSource(newSource.source()));
52
- return scriptContents;
53
- }
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.injectParagonThemeVariantStylesheets = exports.injectParagonCoreStylesheets = exports.getParagonStylesheetUrls = exports.injectMetadataIntoDocument = void 0;
4
- var htmlUtils_1 = require("./htmlUtils");
5
- Object.defineProperty(exports, "injectMetadataIntoDocument", { enumerable: true, get: function () { return htmlUtils_1.injectMetadataIntoDocument; } });
6
- var paragonStylesheetUtils_1 = require("./paragonStylesheetUtils");
7
- Object.defineProperty(exports, "getParagonStylesheetUrls", { enumerable: true, get: function () { return paragonStylesheetUtils_1.getParagonStylesheetUrls; } });
8
- Object.defineProperty(exports, "injectParagonCoreStylesheets", { enumerable: true, get: function () { return paragonStylesheetUtils_1.injectParagonCoreStylesheets; } });
9
- Object.defineProperty(exports, "injectParagonThemeVariantStylesheets", { enumerable: true, get: function () { return paragonStylesheetUtils_1.injectParagonThemeVariantStylesheets; } });
@@ -1,114 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.injectParagonCoreStylesheets = injectParagonCoreStylesheets;
4
- exports.injectParagonThemeVariantStylesheets = injectParagonThemeVariantStylesheets;
5
- exports.getParagonStylesheetUrls = getParagonStylesheetUrls;
6
- const stylesheetUtils_1 = require("./stylesheetUtils");
7
- const tagUtils_1 = require("./tagUtils");
8
- /**
9
- * Injects Paragon core stylesheets into the document.
10
- *
11
- * @param {Object} options - The options object.
12
- * @param {string|object} options.source - The source HTML document.
13
- * @param {Object} options.paragonCoreCss - The Paragon core CSS object.
14
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS object.
15
- * @param {Object} options.brandThemeCss - The brand theme CSS object.
16
- * @return {string|object} The modified HTML document with Paragon core stylesheets injected.
17
- */
18
- function injectParagonCoreStylesheets({ source, paragonCoreCss, paragonThemeCss, brandThemeCss, }) {
19
- return (0, stylesheetUtils_1.insertStylesheetsIntoDocument)({
20
- source,
21
- urls: paragonCoreCss.urls,
22
- // @ts-expect-error These two parameters don't exist on insertStylesheetsIntoDocument
23
- paragonThemeCss,
24
- brandThemeCss,
25
- });
26
- }
27
- /**
28
- * Injects Paragon theme variant stylesheets into the document.
29
- *
30
- * @param {Object} options - The options object.
31
- * @param {string|object} options.source - The source HTML document.
32
- * @param {Object} options.paragonThemeVariantCss - The Paragon theme variant CSS object.
33
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS object.
34
- * @param {Object} options.brandThemeCss - The brand theme CSS object.
35
- * @return {string|object} The modified HTML document with Paragon theme variant stylesheets injected.
36
- */
37
- function injectParagonThemeVariantStylesheets({ source, paragonThemeVariantCss, paragonThemeCss, brandThemeCss, }) {
38
- let newSource = source;
39
- Object.values(paragonThemeVariantCss).forEach(({ urls }) => {
40
- newSource = (0, stylesheetUtils_1.insertStylesheetsIntoDocument)({
41
- source: (typeof newSource === 'object' ? newSource.source() : newSource),
42
- urls,
43
- // @ts-expect-error These two parameters don't exist on insertStylesheetsIntoDocument
44
- paragonThemeCss,
45
- brandThemeCss,
46
- });
47
- });
48
- return newSource;
49
- }
50
- /**
51
- * Retrieves the URLs of the Paragon stylesheets based on the provided theme URLs, Paragon version, and brand version.
52
- *
53
- * @param {Object} options - The options object.
54
- * @param {Object} options.paragonThemeUrls - The URLs of the Paragon theme.
55
- * @param {string} options.paragonVersion - The version of the Paragon theme.
56
- * @param {string} options.brandVersion - The version of the brand theme.
57
- * @return {Object} An object containing the URLs of the Paragon stylesheets.
58
- */
59
- function getParagonStylesheetUrls({ paragonThemeUrls, paragonVersion, brandVersion }) {
60
- const paragonCoreCssUrl = 'urls' in paragonThemeUrls.core && paragonThemeUrls.core.urls !== undefined ? paragonThemeUrls.core.urls.default : paragonThemeUrls.core.url;
61
- const brandCoreCssUrl = 'urls' in paragonThemeUrls.core && paragonThemeUrls.core.urls !== undefined ? paragonThemeUrls.core.urls.brandOverride : undefined;
62
- const defaultThemeVariants = paragonThemeUrls.defaults || {};
63
- const coreCss = {
64
- urls: {
65
- default: (0, tagUtils_1.handleVersionSubstitution)({
66
- url: paragonCoreCssUrl,
67
- wildcardKeyword: '$paragonVersion',
68
- localVersion: paragonVersion
69
- }),
70
- brandOverride: (0, tagUtils_1.handleVersionSubstitution)({
71
- url: brandCoreCssUrl,
72
- wildcardKeyword: '$brandVersion',
73
- localVersion: brandVersion
74
- }),
75
- },
76
- };
77
- const themeVariantsCss = {};
78
- const themeVariantsEntries = Object.entries(paragonThemeUrls.variants || {});
79
- themeVariantsEntries.forEach(([themeVariant, { url, urls }]) => {
80
- const themeVariantMetadata = { urls: {} };
81
- if (url) {
82
- themeVariantMetadata.urls = {
83
- default: (0, tagUtils_1.handleVersionSubstitution)({
84
- url,
85
- wildcardKeyword: '$paragonVersion',
86
- localVersion: paragonVersion,
87
- }),
88
- // If there is no brand override URL, then we don't need to do any version substitution
89
- // but we still need to return the property.
90
- brandOverride: undefined,
91
- };
92
- }
93
- else if (urls) {
94
- themeVariantMetadata.urls = {
95
- default: (0, tagUtils_1.handleVersionSubstitution)({
96
- url: urls.default,
97
- wildcardKeyword: '$paragonVersion',
98
- localVersion: paragonVersion,
99
- }),
100
- brandOverride: (0, tagUtils_1.handleVersionSubstitution)({
101
- url: urls.brandOverride,
102
- wildcardKeyword: '$brandVersion',
103
- localVersion: brandVersion,
104
- }),
105
- };
106
- }
107
- themeVariantsCss[themeVariant] = themeVariantMetadata;
108
- });
109
- return {
110
- core: coreCss,
111
- variants: themeVariantsCss,
112
- defaults: defaultThemeVariants,
113
- };
114
- }
@@ -1,146 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || (function () {
19
- var ownKeys = function(o) {
20
- ownKeys = Object.getOwnPropertyNames || function (o) {
21
- var ar = [];
22
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
- return ar;
24
- };
25
- return ownKeys(o);
26
- };
27
- return function (mod) {
28
- if (mod && mod.__esModule) return mod;
29
- var result = {};
30
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
- __setModuleDefault(result, mod);
32
- return result;
33
- };
34
- })();
35
- Object.defineProperty(exports, "__esModule", { value: true });
36
- exports.insertScriptContentsIntoDocument = insertScriptContentsIntoDocument;
37
- exports.addToScriptContents = addToScriptContents;
38
- exports.generateScriptContents = generateScriptContents;
39
- const parse5 = __importStar(require("parse5"));
40
- const webpack_1 = require("webpack");
41
- const tagUtils_1 = require("./tagUtils");
42
- /**
43
- * Finds the insertion point for a script in an HTML document.
44
- *
45
- * @param {Object} options - The options object.
46
- * @param {Object} options.document - The parsed HTML document.
47
- * @param {string} options.originalSource - The original source code of the HTML document.
48
- * @throws {Error} If the body element is missing in the HTML document.
49
- * @return {number} The insertion point for the script in the HTML document.
50
- */
51
- function findScriptInsertionPoint({ document, originalSource }) {
52
- const bodyElement = (0, tagUtils_1.getDescendantByTag)(document, 'body');
53
- if (!bodyElement) {
54
- throw new Error('Missing body element in index.html.');
55
- }
56
- // determine script insertion point
57
- if (bodyElement.sourceCodeLocation?.endTag) {
58
- return bodyElement.sourceCodeLocation.endTag.startOffset;
59
- }
60
- // less accurate fallback
61
- return originalSource.indexOf('</body>');
62
- }
63
- /**
64
- * Inserts the given script contents into the HTML document and returns a new source with the modified content.
65
- *
66
- * @param {Object} options - The options object.
67
- * @param {string} options.originalSource - The original HTML source.
68
- * @param {Object} options.scriptContents - The contents of the script to be inserted.
69
- * @return {sources.ReplaceSource} The new source with the modified HTML content.
70
- */
71
- function insertScriptContentsIntoDocument({ originalSource, scriptContents, }) {
72
- // parse file as html document
73
- const document = parse5.parse(originalSource, {
74
- sourceCodeLocationInfo: true,
75
- });
76
- // find the body element
77
- const scriptInsertionPoint = findScriptInsertionPoint({
78
- document,
79
- originalSource,
80
- });
81
- // create Paragon script to inject into the HTML document
82
- const paragonScript = `<script type="text/javascript">var PARAGON_THEME = ${JSON.stringify(scriptContents, null, 2)};</script>`;
83
- // insert the Paragon script into the HTML document
84
- const newSource = new webpack_1.sources.ReplaceSource(new webpack_1.sources.RawSource(originalSource), 'index.html');
85
- newSource.insert(scriptInsertionPoint, (0, tagUtils_1.minifyScript)(paragonScript));
86
- return newSource;
87
- }
88
- /**
89
- * Creates an object with the provided version, defaults, coreCssAsset, and themeVariantCssAssets
90
- * and returns it. The returned object has the following structure:
91
- * {
92
- * version: The provided version,
93
- * themeUrls: {
94
- * core: The provided coreCssAsset,
95
- * variants: The provided themeVariantCssAssets,
96
- * defaults: The provided defaults
97
- * }
98
- * }
99
- *
100
- * @param {Object} options - The options object.
101
- * @param {string} options.version - The version to be added to the returned object.
102
- * @param {Object} options.defaults - The defaults to be added to the returned object.
103
- * @param {Object} options.coreCssAsset - The coreCssAsset to be added to the returned object.
104
- * @param {Object} options.themeVariantCssAssets - The themeVariantCssAssets to be added to the returned object.
105
- * @return {Object} The object with the provided version, defaults, coreCssAsset, and themeVariantCssAssets.
106
- */
107
- function addToScriptContents({ version, defaults, coreCssAsset, themeVariantCssAssets, }) {
108
- return {
109
- version,
110
- themeUrls: {
111
- core: coreCssAsset,
112
- variants: themeVariantCssAssets,
113
- defaults,
114
- },
115
- };
116
- }
117
- /**
118
- * Generates the script contents object based on the provided assets and versions.
119
- *
120
- * @param {Object} options - The options object.
121
- * @param {Object} options.paragonCoreCssAsset - The asset for the Paragon core CSS.
122
- * @param {Object} options.paragonThemeVariantCssAssets - The assets for the Paragon theme variants.
123
- * @param {Object} options.brandCoreCssAsset - The asset for the brand core CSS.
124
- * @param {Object} options.brandThemeVariantCssAssets - The assets for the brand theme variants.
125
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS.
126
- * @param {string} options.paragonVersion - The version of the Paragon theme.
127
- * @param {Object} options.brandThemeCss - The brand theme CSS.
128
- * @param {string} options.brandVersion - The version of the brand theme.
129
- * @return {Object} The script contents object.
130
- */
131
- function generateScriptContents({ paragonCoreCssAsset, paragonThemeVariantCssAssets, brandCoreCssAsset, brandThemeVariantCssAssets, paragonThemeCss, paragonVersion, brandThemeCss, brandVersion, }) {
132
- const scriptContents = {};
133
- scriptContents.paragon = addToScriptContents({
134
- version: paragonVersion,
135
- coreCssAsset: paragonCoreCssAsset,
136
- themeVariantCssAssets: paragonThemeVariantCssAssets,
137
- defaults: paragonThemeCss?.defaults,
138
- });
139
- scriptContents.brand = addToScriptContents({
140
- version: brandVersion,
141
- coreCssAsset: brandCoreCssAsset,
142
- themeVariantCssAssets: brandThemeVariantCssAssets,
143
- defaults: brandThemeCss?.defaults,
144
- });
145
- return scriptContents;
146
- }