@openedx/frontend-base 1.0.0-alpha.5 → 1.0.0-alpha.7

package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/scriptUtils.js

@@ -1,146 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertScriptContentsIntoDocument = insertScriptContentsIntoDocument;
-exports.addToScriptContents = addToScriptContents;
-exports.generateScriptContents = generateScriptContents;
-const parse5 = __importStar(require("parse5"));
-const webpack_1 = require("webpack");
-const tagUtils_1 = require("./tagUtils");
-/**
- * Finds the insertion point for a script in an HTML document.
- *
- * @param {Object} options - The options object.
- * @param {Object} options.document - The parsed HTML document.
- * @param {string} options.originalSource - The original source code of the HTML document.
- * @throws {Error} If the body element is missing in the HTML document.
- * @return {number} The insertion point for the script in the HTML document.
- */
-function findScriptInsertionPoint({ document, originalSource }) {
-    const bodyElement = (0, tagUtils_1.getDescendantByTag)(document, 'body');
-    if (!bodyElement) {
-        throw new Error('Missing body element in index.html.');
-    }
-    // determine script insertion point
-    if (bodyElement.sourceCodeLocation?.endTag) {
-        return bodyElement.sourceCodeLocation.endTag.startOffset;
-    }
-    // less accurate fallback
-    return originalSource.indexOf('</body>');
-}
-/**
- * Inserts the given script contents into the HTML document and returns a new source with the modified content.
- *
- * @param {Object} options - The options object.
- * @param {string} options.originalSource - The original HTML source.
- * @param {Object} options.scriptContents - The contents of the script to be inserted.
- * @return {sources.ReplaceSource} The new source with the modified HTML content.
- */
-function insertScriptContentsIntoDocument({ originalSource, scriptContents, }) {
-    // parse file as html document
-    const document = parse5.parse(originalSource, {
-        sourceCodeLocationInfo: true,
-    });
-    // find the body element
-    const scriptInsertionPoint = findScriptInsertionPoint({
-        document,
-        originalSource,
-    });
-    // create Paragon script to inject into the HTML document
-    const paragonScript = `<script type="text/javascript">var PARAGON_THEME = ${JSON.stringify(scriptContents, null, 2)};</script>`;
-    // insert the Paragon script into the HTML document
-    const newSource = new webpack_1.sources.ReplaceSource(new webpack_1.sources.RawSource(originalSource), 'index.html');
-    newSource.insert(scriptInsertionPoint, (0, tagUtils_1.minifyScript)(paragonScript));
-    return newSource;
-}
-/**
- * Creates an object with the provided version, defaults, coreCssAsset, and themeVariantCssAssets
- * and returns it. The returned object has the following structure:
- * {
- *   version: The provided version,
- *   themeUrls: {
- *     core: The provided coreCssAsset,
- *     variants: The provided themeVariantCssAssets,
- *     defaults: The provided defaults
- *   }
- * }
- *
- * @param {Object} options - The options object.
- * @param {string} options.version - The version to be added to the returned object.
- * @param {Object} options.defaults - The defaults to be added to the returned object.
- * @param {Object} options.coreCssAsset - The coreCssAsset to be added to the returned object.
- * @param {Object} options.themeVariantCssAssets - The themeVariantCssAssets to be added to the returned object.
- * @return {Object} The object with the provided version, defaults, coreCssAsset, and themeVariantCssAssets.
- */
-function addToScriptContents({ version, defaults, coreCssAsset, themeVariantCssAssets, }) {
-    return {
-        version,
-        themeUrls: {
-            core: coreCssAsset,
-            variants: themeVariantCssAssets,
-            defaults,
-        },
-    };
-}
-/**
- * Generates the script contents object based on the provided assets and versions.
- *
- * @param {Object} options - The options object.
- * @param {Object} options.paragonCoreCssAsset - The asset for the Paragon core CSS.
- * @param {Object} options.paragonThemeVariantCssAssets - The assets for the Paragon theme variants.
- * @param {Object} options.brandCoreCssAsset - The asset for the brand core CSS.
- * @param {Object} options.brandThemeVariantCssAssets - The assets for the brand theme variants.
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS.
- * @param {string} options.paragonVersion - The version of the Paragon theme.
- * @param {Object} options.brandThemeCss - The brand theme CSS.
- * @param {string} options.brandVersion - The version of the brand theme.
- * @return {Object} The script contents object.
- */
-function generateScriptContents({ paragonCoreCssAsset, paragonThemeVariantCssAssets, brandCoreCssAsset, brandThemeVariantCssAssets, paragonThemeCss, paragonVersion, brandThemeCss, brandVersion, }) {
-    const scriptContents = {};
-    scriptContents.paragon = addToScriptContents({
-        version: paragonVersion,
-        coreCssAsset: paragonCoreCssAsset,
-        themeVariantCssAssets: paragonThemeVariantCssAssets,
-        defaults: paragonThemeCss?.defaults,
-    });
-    scriptContents.brand = addToScriptContents({
-        version: brandVersion,
-        coreCssAsset: brandCoreCssAsset,
-        themeVariantCssAssets: brandThemeVariantCssAssets,
-        defaults: brandThemeCss?.defaults,
-    });
-    return scriptContents;
-}

package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/stylesheetUtils.js

@@ -1,126 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findStylesheetInsertionPoint = findStylesheetInsertionPoint;
-exports.insertStylesheetsIntoDocument = insertStylesheetsIntoDocument;
-const parse5 = __importStar(require("parse5"));
-const webpack_1 = require("webpack");
-const tagUtils_1 = require("./tagUtils");
-/**
- * Finds the insertion point for a stylesheet in an HTML document.
- *
- * @param {Object} options - The options object.
- * @param {Object} options.document - The parsed HTML document.
- * @param {string} options.source - The original source code of the HTML document.
- * @throws {Error} If the head element is missing in the HTML document.
- * @return {number} The insertion point for the stylesheet in the HTML document.
- */
-function findStylesheetInsertionPoint({ document, source }) {
-    const headElement = (0, tagUtils_1.getDescendantByTag)(document, 'head');
-    if (!headElement) {
-        throw new Error('Missing head element in index.html.');
-    }
-    // determine script insertion point
-    if (headElement.sourceCodeLocation?.startTag) {
-        return headElement.sourceCodeLocation.startTag.endOffset;
-    }
-    // less accurate fallback
-    const headTagString = '<head>';
-    const headTagIndex = source.indexOf(headTagString);
-    return headTagIndex + headTagString.length;
-}
-/**
- * Inserts stylesheets into an HTML document.
- *
- * @param {object} options - The options for inserting stylesheets.
- * @param {string} options.source - The HTML source code.
- * @param {object} options.urls - The URLs of the stylesheets to be inserted.
- * @param {string} options.urls.default - The URL of the default stylesheet.
- * @param {string} options.urls.brandOverride - The URL of the brand override stylesheet.
- * @return {object|undefined} The new source code with the stylesheets inserted.
- */
-function insertStylesheetsIntoDocument({ source, urls, }) {
-    // parse file as html document
-    const document = parse5.parse(source, {
-        sourceCodeLocationInfo: true,
-    });
-    if (!(0, tagUtils_1.getDescendantByTag)(document, 'head')) {
-        return undefined;
-    }
-    const newSource = new webpack_1.sources.ReplaceSource(new webpack_1.sources.RawSource(source), 'index.html');
-    // insert the brand overrides styles into the HTML document
-    const stylesheetInsertionPoint = findStylesheetInsertionPoint({
-        // @ts-expect-error Typescript complains this document instance is missing properties.  Is parse5.parse not returning a valid Document instance?
-        document,
-        // @ts-expect-error We're passing a ReplaceSource here, when we expect a string in the function.
-        source: newSource,
-    });
-    /**
-     * Creates a new stylesheet link element.
-     *
-     * @param {string} url - The URL of the stylesheet.
-     * @return {string} The HTML code for the stylesheet link element.
-     */
-    function createNewStylesheet(url) {
-        const baseLink = `<link
-      type="text/css"
-      rel="preload"
-      as="style"
-      href="${url}"
-      onload="this.rel='stylesheet';"
-      onerror="this.remove();"
-    />`;
-        return baseLink;
-    }
-    if (urls.default) {
-        // @ts-expect-error getDescendantByTag requires two parameters.
-        const existingDefaultLink = (0, tagUtils_1.getDescendantByTag)(`link[href='${urls.default}']`);
-        if (!existingDefaultLink) {
-            // create link to inject into the HTML document
-            const stylesheetLink = createNewStylesheet(urls.default);
-            newSource.insert(stylesheetInsertionPoint, stylesheetLink);
-        }
-    }
-    if (urls.brandOverride) {
-        // @ts-expect-error getDescendantByTag requires two parameters.
-        const existingBrandLink = (0, tagUtils_1.getDescendantByTag)(`link[href='${urls.brandOverride}']`);
-        if (!existingBrandLink) {
-            // create link to inject into the HTML document
-            const stylesheetLink = createNewStylesheet(urls.brandOverride);
-            newSource.insert(stylesheetInsertionPoint, stylesheetLink);
-        }
-    }
-    return newSource;
-}

package/tools/dist/webpack/plugins/paragon-webpack-plugin/utils/tagUtils.js

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDescendantByTag = getDescendantByTag;
-exports.handleVersionSubstitution = handleVersionSubstitution;
-exports.minifyScript = minifyScript;
-/**
- * Recursively searches for a descendant node with the specified tag name.
- *
- * @param {Object} node - The root node to start the search from.
- * @param {string} tag - The tag name to search for.
- * @return {Object|null} The first descendant node with the specified tag name, or null if not found.
- */
-function getDescendantByTag(node, tag) {
-    for (let i = 0; i < node.childNodes?.length; i++) {
-        if (node.childNodes[i].tagName === tag) {
-            return node.childNodes[i];
-        }
-        const result = getDescendantByTag(node.childNodes[i], tag);
-        if (result) {
-            return result;
-        }
-    }
-    return null;
-}
-/**
- * Replaces a wildcard keyword in a URL with a local version.
- *
- * @param {Object} options - The options object.
- * @param {string} options.url - The URL to substitute the keyword in.
- * @param {string} options.wildcardKeyword - The wildcard keyword to replace.
- * @param {string} options.localVersion - The local version to substitute the keyword with.
- * @return {string} The URL with the wildcard keyword substituted with the local version,
- *                 or the original URL if no substitution is needed.
- */
-function handleVersionSubstitution({ url, wildcardKeyword, localVersion }) {
-    if (!url || !url.includes(wildcardKeyword) || !localVersion) {
-        return url;
-    }
-    return url.replaceAll(wildcardKeyword, localVersion);
-}
-/**
- * Minifies a script by removing unnecessary whitespace and line breaks.
- *
- * @param {string} script - The script to be minified.
- * @return {string} The minified script.
- */
-function minifyScript(script) {
-    return script
-        .replace(/>[\r\n ]+</g, '><')
-        .replace(/(<.*?>)|\s+/g, (m, $1) => {
-        if ($1) {
-            return $1;
-        }
-        return ' ';
-    })
-        .trim();
-}

package/tools/dist/webpack/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/tools/dist/webpack/utils/paragonUtils.js

@@ -1,138 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getParagonVersion = getParagonVersion;
-exports.getParagonThemeCss = getParagonThemeCss;
-exports.getParagonCacheGroups = getParagonCacheGroups;
-exports.getParagonEntryPoints = getParagonEntryPoints;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-/**
- * Retrieves the name of the brand package from the given directory.
- *
- * @param {string} dir - The directory path containing the package.json file.
- * @return {string} The name of the brand package, or an empty string if not found.
- */
-function getBrandPackageName(dir) {
-    const appDependencies = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(dir, 'package.json'), 'utf-8')).dependencies;
-    return Object.keys(appDependencies).find((key) => /@(open)?edx\/brand/.exec(key)) ?? '';
-}
-/**
- * Attempts to extract the Paragon version from the `node_modules` of
- * the consuming application.
- *
- * @param {string} dir Path to directory containing `node_modules`.
- * @returns {string} Paragon dependency version of the consuming application
- */
-function getParagonVersion(dir, { isBrandOverride = false } = {}) {
-    const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
-    const pathToPackageJson = `${dir}/node_modules/${npmPackageName}/package.json`;
-    if (!fs_1.default.existsSync(pathToPackageJson)) {
-        return undefined;
-    }
-    return JSON.parse(fs_1.default.readFileSync(pathToPackageJson, 'utf-8')).version;
-}
-/**
- * Attempts to extract the Paragon theme CSS from the locally installed `@openedx/paragon` package.
- * @param {string} dir Path to directory containing `node_modules`.
- * @param {boolean} isBrandOverride
- * @returns {ParagonThemeCss}
- */
-function getParagonThemeCss(dir, { isBrandOverride = false } = {}) {
-    const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
-    const pathToParagonThemeOutput = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', 'theme-urls.json');
-    if (!fs_1.default.existsSync(pathToParagonThemeOutput)) {
-        return undefined;
-    }
-    const paragonConfig = JSON.parse(fs_1.default.readFileSync(pathToParagonThemeOutput, 'utf-8'));
-    const { core: themeCore, variants: themeVariants, defaults, } = paragonConfig?.themeUrls || {};
-    const pathToCoreCss = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', themeCore.paths.minified);
-    const coreCssExists = fs_1.default.existsSync(pathToCoreCss);
-    const themeVariantResults = Object.entries(themeVariants || {}).reduce((themeVariantAcc, [themeVariant, value]) => {
-        const themeVariantCssDefault = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', value.paths.default);
-        const themeVariantCssMinified = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', value.paths.minified);
-        if (!fs_1.default.existsSync(themeVariantCssDefault) && !fs_1.default.existsSync(themeVariantCssMinified)) {
-            return themeVariantAcc;
-        }
-        return ({
-            ...themeVariantAcc,
-            [themeVariant]: {
-                filePath: themeVariantCssMinified,
-                entryName: isBrandOverride ? `brand.theme.variants.${themeVariant}` : `paragon.theme.variants.${themeVariant}`,
-                outputChunkName: isBrandOverride ? `brand-theme-variants-${themeVariant}` : `paragon-theme-variants-${themeVariant}`,
-            },
-        });
-    }, {});
-    if (!coreCssExists || Object.keys(themeVariantResults).length === 0) {
-        return undefined;
-    }
-    const coreResult = {
-        filePath: path_1.default.resolve(dir, pathToCoreCss),
-        entryName: isBrandOverride ? 'brand.theme.core' : 'paragon.theme.core',
-        outputChunkName: isBrandOverride ? 'brand-theme-core' : 'paragon-theme-core',
-    };
-    return {
-        core: fs_1.default.existsSync(pathToCoreCss) ? coreResult : undefined,
-        variants: themeVariantResults,
-        defaults,
-    };
-}
-/**
- * @typedef CacheGroup
- * @property {string} type The type of cache group.
- * @property {string|function} name The name of the cache group.
- * @property {function} chunks A function that returns true if the chunk should be included in the cache group.
- * @property {boolean} enforce If true, this cache group will be created even if it conflicts with default cache groups.
- */
-/**
- * @param {ParagonThemeCss} paragonThemeCss The Paragon theme CSS metadata.
- * @returns {Object.<string, CacheGroup>} The cache groups for the Paragon theme CSS.
- */
-function getParagonCacheGroups(paragonThemeCss) {
-    if (!paragonThemeCss) {
-        return {};
-    }
-    const cacheGroups = {};
-    if (paragonThemeCss.core !== undefined) {
-        const { core } = paragonThemeCss;
-        cacheGroups[paragonThemeCss.core.outputChunkName] = {
-            type: 'css/mini-extract',
-            name: paragonThemeCss.core.outputChunkName,
-            chunks: (chunk) => chunk.name === core.entryName,
-            enforce: true,
-        };
-    }
-    Object.values(paragonThemeCss.variants).forEach(({ entryName, outputChunkName }) => {
-        cacheGroups[outputChunkName] = {
-            type: 'css/mini-extract',
-            name: outputChunkName,
-            chunks: (chunk) => chunk.name === entryName,
-            enforce: true,
-        };
-    });
-    return cacheGroups;
-}
-/**
- * @param {ParagonThemeCss} paragonThemeCss The Paragon theme CSS metadata.
- * @returns {Object.<string, string>} The entry points for the Paragon theme CSS. Example: ```
- * {
- *   "paragon.theme.core": "/path/to/node_modules/@openedx/paragon/dist/core.min.css",
- *   "paragon.theme.variants.light": "/path/to/node_modules/@openedx/paragon/dist/light.min.css"
- * }
- * ```
- */
-function getParagonEntryPoints(paragonThemeCss) {
-    if (!paragonThemeCss) {
-        return {};
-    }
-    const entryPoints = {};
-    if (paragonThemeCss.core !== undefined) {
-        entryPoints[paragonThemeCss.core.entryName] = path_1.default.resolve(process.cwd(), paragonThemeCss.core.filePath);
-    }
-    Object.values(paragonThemeCss.variants).forEach(({ filePath, entryName }) => {
-        entryPoints[entryName] = path_1.default.resolve(process.cwd(), filePath);
-    });
-    return entryPoints;
-}