@brightspace-ui/core 3.31.1 → 3.33.0

package/helpers/mathjax.js

@@ -45,7 +45,6 @@ class HtmlBlockMathRenderer {
 
 		const mathJaxConfig = {
 			deferTypeset: true,
-			enableMML3Support: context.enableMML3Support,
 			renderLatex: context.renderLatex,
 			outputScale: context.outputScale || 1,
 			window: window
@@ -62,24 +61,6 @@ class HtmlBlockMathRenderer {
 			elm.style.height = '0.5rem';
 		});
 
-		if (context.enableMML3Support) {
-			// There's a bug in the experimental MML3 plugin that causes mi and mo elements containing non-breaking
-			// spaces to break MathJax's math processing (e.g. <mo>&nbsp;</mo>, <mi>Some&nbsp;Identifier</mi>).
-			// Unfortunately, WIRIS tends to add a lot of these in chemistry equations, so they break math processing.
-			//
-			// In order to address this, we can just remove any non-breaking spaces entirely, replacing them with
-			// empty strings. MathJax will ignore any empty elements as a result, and while this may mean intended
-			// whitespace is occasionally removed, it's necessary for MathJax to render anything at all.
-			//
-			// NOTE: MathJax evidently has a fix for this in MathJax 4, so we should consider trying to remove this when
-			// the update comes out of beta and we decide to take it on.
-			//
-			// See https://github.com/mathjax/MathJax/issues/3030 for some related discussion.
-			elem.querySelectorAll('mo, mi').forEach(elm => {
-				elm.innerHTML = elm.innerHTML.replace(/&nbsp;/g, '');
-			});
-		}
-
 		// If we're using deferred rendering, we need to create a document structure
 		// within the element so MathJax can appropriately process math.
 		if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
@@ -120,13 +101,7 @@ export function loadMathJax(mathJaxConfig) {
 			}
 		},
 		loader: {
-			load: mathJaxConfig && mathJaxConfig.enableMML3Support
-				? [
-					'[mml]/mml3',
-					'ui/menu'
-				] : [
-					'ui/menu'
-				]
+			load: ['ui/menu']
 		},
 		startup: {
 			ready: () => {

package/mixins/localize/localize-mixin.js

@@ -1,70 +1,32 @@
-import '@formatjs/intl-pluralrules/dist-es6/polyfill-locales.js';
-import { defaultLocale as fallbackLang, getDocumentLocaleSettings, supportedLangpacks } from '@brightspace-ui/intl/lib/common.js';
+import { disallowedTagsRegex, getLocalizeClass, validateMarkup } from './localize.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { getLocalizeOverrideResources } from '../../helpers/getLocalizeResources.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import IntlMessageFormat from 'intl-messageformat';
 
-export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinClass extends superclass {
+export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinBaseClass extends getLocalizeClass(superclass) {
 
-	static get properties() {
-		return {
-			__resources: { type: Object, attribute: false }
-		};
-	}
-
-	static documentLocaleSettings = getDocumentLocaleSettings();
+	#updatedProperties = new Map();
 
 	constructor() {
 		super();
-		this.__resourcesLoadedPromise = new Promise((resolve) => {
-			let first = true;
-			this.__languageChangeCallback = () => {
-				if (!this._hasResources()) return;
-				const localizeResources = this.constructor._getAllLocalizeResources();
-				const resourcesLoadedPromise = Promise.all(localizeResources);
-				resourcesLoadedPromise
-					.then((results) => {
-						if (results.length === 0) {
-							return;
-						}
-						const resources = {};
-						for (const res of results) {
-							const language = res.language;
-							for (const [key, value] of Object.entries(res.resources)) {
-								resources[key] = { language, value };
-							}
-						}
-						this.__resources = resources;
-						this._onResourcesChange();
-						if (first) {
-							resolve();
-							first = false;
-						}
-					});
-			};
-		});
-
-		this.__updatedProperties = new Map();
+		super.constructor.setLocalizeMarkup(localizeMarkup);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.constructor.documentLocaleSettings.addChangeListener(this.__languageChangeCallback);
-		this.__languageChangeCallback();
+		this.connect();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.constructor.documentLocaleSettings.removeChangeListener(this.__languageChangeCallback);
-		this.__updatedProperties.clear();
+		this.disconnect();
+		this.#updatedProperties.clear();
 	}
 
 	async getUpdateComplete() {
 		await super.getUpdateComplete();
 		const hasResources = this._hasResources();
-		const resourcesLoaded = this.__resources !== undefined;
+		const resourcesLoaded = this.localize.resources !== undefined && !this.pristine;
 		if (!hasResources || resourcesLoaded) {
 			return;
 		}
@@ -78,148 +40,35 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinC
 			return super.shouldUpdate(changedProperties);
 		}
 
-		const ready = this.__resources !== undefined;
+		const ready = this.localize.resources !== undefined && !this.pristine;
+
 		if (!ready) {
 			changedProperties.forEach((oldValue, propName) => {
-				this.__updatedProperties.set(propName, oldValue);
+				this.#updatedProperties.set(propName, oldValue);
 			});
 			return false;
 		}
 
-		this.__updatedProperties.forEach((oldValue, propName) => {
+		this.#updatedProperties.forEach((oldValue, propName) => {
 			if (!changedProperties.has(propName)) {
 				changedProperties.set(propName, oldValue);
 			}
 		});
-		this.__updatedProperties.clear();
+		this.#updatedProperties.clear();
 
 		return super.shouldUpdate(changedProperties);
-
-	}
-
-	localize(key) {
-
-		const { language, value } = this.__resources?.[key] ?? {};
-		if (!value) return '';
-
-		let params = {};
-		if (arguments.length > 1 && arguments[1]?.constructor === Object) {
-			// support for key-value replacements as a single arg
-			params = arguments[1];
-		} else {
-			// legacy support for localize-behavior replacements as many args
-			for (let i = 1; i < arguments.length; i += 2) {
-				params[arguments[i]] = arguments[i + 1];
-			}
-		}
-
-		const translatedMessage = new IntlMessageFormat(value, language);
-		let formattedMessage = value;
-		try {
-			if (Object.values(params).some(v => typeof v === 'function')) throw 'localize() does not support rich text.';
-			formattedMessage = translatedMessage.format(params);
-		} catch (e) {
-			console.error(e);
-		}
-
-		return formattedMessage;
 	}
 
-	localizeHTML(key, params = {}) {
-
-		const { language, value } = this.__resources?.[key] ?? {};
-		if (!value) return '';
-
-		const translatedMessage = new IntlMessageFormat(value, language);
-		let formattedMessage = value;
-		try {
-			const unvalidated = translatedMessage.format({
-				b: chunks => localizeMarkup`<b>${chunks}</b>`,
-				br: () => localizeMarkup`<br>`,
-				em: chunks => localizeMarkup`<em>${chunks}</em>`,
-				i: chunks => localizeMarkup`<i>${chunks}</i>`,
-				p: chunks => localizeMarkup`<p>${chunks}</p>`,
-				strong: chunks => localizeMarkup`<strong>${chunks}</strong>`,
-				...params
-			});
-			validateMarkup(unvalidated);
-			formattedMessage = unvalidated;
-		} catch (e) {
-			console.error(e);
-		}
-
-		return formattedMessage;
-	}
-
-	static _generatePossibleLanguages(config) {
-
-		if (config?.useBrowserLangs) return navigator.languages.map(e => e.toLowerCase()).concat('en');
-
-		const { language, fallbackLanguage } = this.documentLocaleSettings;
-		const langs = [ language, fallbackLanguage ]
-			.filter(e => e)
-			.map(e => [ e.toLowerCase(), e.split('-')[0] ])
-			.flat();
-
-		return Array.from(new Set([ ...langs, 'en-us', 'en' ]));
-	}
-
-	static _getAllLocalizeResources(config = this.localizeConfig) {
-		let resourcesLoadedPromises = [];
-		const superCtor = Object.getPrototypeOf(this);
-		// get imported terms for each config, head up the chain to get them all
-		if ('_getAllLocalizeResources' in superCtor) {
-			const superConfig = Object.prototype.hasOwnProperty.call(superCtor, 'localizeConfig') && superCtor.localizeConfig.importFunc ? superCtor.localizeConfig : config;
-			resourcesLoadedPromises = superCtor._getAllLocalizeResources(superConfig);
-		}
-		if (Object.prototype.hasOwnProperty.call(this, 'getLocalizeResources') || Object.prototype.hasOwnProperty.call(this, 'resources')) {
-			const possibleLanguages = this._generatePossibleLanguages(config);
-			const res = this.getLocalizeResources(possibleLanguages, config);
-			resourcesLoadedPromises.push(res);
-		}
-		return resourcesLoadedPromises;
-	}
-
-	_hasResources() {
-		return this.constructor['getLocalizeResources'] !== undefined;
-	}
-
-	_onResourcesChange() {
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent('d2l-localize-resources-change'));
+	onLocalizeResourcesChange() {
+		this.requestUpdate('localize');
 	}
 
 });
 
 export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(superclass) {
 
-	static async getLocalizeResources(langs, { importFunc, osloCollection, useBrowserLangs }) {
-
-		// in dev, don't request unsupported langpacks
-		if (!importFunc.toString().includes('switch') && !useBrowserLangs) {
-			langs = langs.filter(lang => supportedLangpacks.includes(lang));
-		}
-
-		for (const lang of [...langs, fallbackLang]) {
-
-			const resources = await Promise.resolve(importFunc(lang)).catch(() => {});
-
-			if (resources) {
-
-				if (osloCollection) {
-					return await getLocalizeOverrideResources(
-						lang,
-						resources,
-						() => osloCollection
-					);
-				}
-
-				return {
-					language: lang,
-					resources
-				};
-			}
-		}
+	static getLocalizeResources() {
+		return super._getLocalizeResources(...arguments);
 	}
 
 	static get localizeConfig() {
@@ -228,25 +77,9 @@ export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(supe
 
 };
 
-export const allowedTags = Object.freeze(['d2l-link', 'd2l-tooltip-help', 'p', 'br', 'b', 'strong', 'i', 'em', 'button']);
-
-const markupError = `localizeHTML() rich-text replacements must use localizeMarkup templates with only the following allowed elements: ${allowedTags}. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/`;
-const validTerminators = '([>\\s/]|$)';
-const allowedAfterTriangleBracket = `/?(${allowedTags.join('|')})?${validTerminators}`;
-const disallowedTagsRegex = new RegExp(`<(?!${allowedAfterTriangleBracket})`);
-
-function validateMarkup(content, applyRegex) {
-	if (content) {
-		if (content.map) return content.forEach(item => validateMarkup(item));
-		if (content._localizeMarkup) return;
-		if (Object.hasOwn(content, '_$litType$')) throw markupError;
-		if (applyRegex && content.constructor === String && disallowedTagsRegex.test(content)) throw markupError;
-	}
-}
-
 export function localizeMarkup(strings, ...expressions) {
-	strings.forEach(str => validateMarkup(str, true));
-	expressions.forEach(exp => validateMarkup(exp, true));
+	strings.forEach(str => validateMarkup(str, disallowedTagsRegex));
+	expressions.forEach(exp => validateMarkup(exp, disallowedTagsRegex));
 	return { ...html(strings, ...expressions), _localizeMarkup: true };
 }
 

package/mixins/localize/localize.js

@@ -0,0 +1,255 @@
+import '@formatjs/intl-pluralrules/dist-es6/polyfill-locales.js';
+import { defaultLocale as fallbackLang, getDocumentLocaleSettings, supportedLangpacks } from '@brightspace-ui/intl/lib/common.js';
+import { getLocalizeOverrideResources } from '../../helpers/getLocalizeResources.js';
+import IntlMessageFormat from 'intl-messageformat';
+
+export const allowedTags = Object.freeze(['d2l-link', 'd2l-tooltip-help', 'p', 'br', 'b', 'strong', 'i', 'em', 'button']);
+
+const getDisallowedTagsRegex = allowedTags => {
+	const validTerminators = '([>\\s/]|$)';
+	const allowedAfterTriangleBracket = `/?(${allowedTags.join('|')})?${validTerminators}`;
+	return new RegExp(`<(?!${allowedAfterTriangleBracket})`);
+};
+
+export const disallowedTagsRegex = getDisallowedTagsRegex(allowedTags);
+const noAllowedTagsRegex = getDisallowedTagsRegex([]);
+
+export const getLocalizeClass = (superclass = class {}) => class LocalizeClass extends superclass {
+
+	static documentLocaleSettings = getDocumentLocaleSettings();
+	static #localizeMarkup;
+
+	static setLocalizeMarkup(localizeMarkup) {
+		this.#localizeMarkup ??= localizeMarkup;
+	}
+
+	pristine = true;
+	#connected = false;
+	#localeChangeCallback;
+	#resourcesPromise;
+	#resolveResourcesLoaded;
+
+	async #localeChangeHandler() {
+		if (!this._hasResources()) return;
+
+		const resourcesPromise = this.constructor._getAllLocalizeResources(this.config);
+		this.#resourcesPromise = resourcesPromise;
+		const localizeResources = (await resourcesPromise).flat(Infinity);
+		// If the locale changed while resources were being fetched, abort
+		if (this.#resourcesPromise !== resourcesPromise) return;
+
+		const allResources = {};
+		const resolvedLocales = new Set();
+		for (const { language, resources } of localizeResources) {
+			for (const [key, value] of Object.entries(resources)) {
+				allResources[key] = { language, value };
+				resolvedLocales.add(language);
+			}
+		}
+		this.localize.resources = allResources;
+		this.localize.resolvedLocale = [...resolvedLocales][0];
+		if (resolvedLocales.size > 1) {
+			console.warn(`Resolved multiple locales in '${this.constructor.name || this.tagName || ''}': ${[...resolvedLocales].join(', ')}`);
+		}
+
+		if (this.pristine) {
+			this.pristine = false;
+			this.#resolveResourcesLoaded();
+		}
+
+		this.#onResourcesChange();
+	}
+
+	#onResourcesChange() {
+		if (this.#connected) {
+			this.dispatchEvent?.(new CustomEvent('d2l-localize-resources-change'));
+			this.config?.onResourcesChange?.();
+			this.onLocalizeResourcesChange?.();
+		}
+	}
+
+	connect() {
+		this.#localeChangeCallback = () => this.#localeChangeHandler();
+		LocalizeClass.documentLocaleSettings.addChangeListener(this.#localeChangeCallback);
+		this.#connected = true;
+		this.#localeChangeCallback();
+	}
+
+	disconnect() {
+		LocalizeClass.documentLocaleSettings.removeChangeListener(this.#localeChangeCallback);
+		this.#connected = false;
+	}
+
+	localize(key) {
+
+		const { language, value } = this.localize.resources?.[key] ?? {};
+		if (!value) return '';
+
+		let params = {};
+		if (arguments.length > 1 && arguments[1]?.constructor === Object) {
+			// support for key-value replacements as a single arg
+			params = arguments[1];
+		} else {
+			// legacy support for localize-behavior replacements as many args
+			for (let i = 1; i < arguments.length; i += 2) {
+				params[arguments[i]] = arguments[i + 1];
+			}
+		}
+
+		const translatedMessage = new IntlMessageFormat(value, language);
+		let formattedMessage = value;
+		try {
+			validateMarkup(formattedMessage, noAllowedTagsRegex);
+			formattedMessage = translatedMessage.format(params);
+		} catch (e) {
+			if (e.name === 'MarkupError')	{
+				e = new Error('localize() does not support rich text. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/'); // eslint-disable-line no-ex-assign
+				formattedMessage = '';
+			}
+			console.error(e);
+		}
+
+		return formattedMessage;
+	}
+
+	localizeHTML(key, params = {}) {
+
+		const { language, value } = this.localize.resources?.[key] ?? {};
+		if (!value) return '';
+
+		const translatedMessage = new IntlMessageFormat(value, language);
+		let formattedMessage = value;
+		try {
+			const unvalidated = translatedMessage.format({
+				b: chunks => LocalizeClass.#localizeMarkup`<b>${chunks}</b>`,
+				br: () => LocalizeClass.#localizeMarkup`<br>`,
+				em: chunks => LocalizeClass.#localizeMarkup`<em>${chunks}</em>`,
+				i: chunks => LocalizeClass.#localizeMarkup`<i>${chunks}</i>`,
+				p: chunks => LocalizeClass.#localizeMarkup`<p>${chunks}</p>`,
+				strong: chunks => LocalizeClass.#localizeMarkup`<strong>${chunks}</strong>`,
+				...params
+			});
+			validateMarkup(unvalidated);
+			formattedMessage = unvalidated;
+		} catch (e) {
+			if (e.name === 'MarkupError') formattedMessage = '';
+			console.error(e);
+		}
+
+		return formattedMessage;
+	}
+
+	__resourcesLoadedPromise = new Promise(r => this.#resolveResourcesLoaded = r);
+
+	static _generatePossibleLanguages(config) {
+
+		if (config?.useBrowserLangs) return navigator.languages.map(e => e.toLowerCase()).concat('en');
+
+		const { language, fallbackLanguage } = this.documentLocaleSettings;
+		const langs = [ language, fallbackLanguage ]
+			.filter(e => e)
+			.map(e => [ e.toLowerCase(), e.split('-')[0] ])
+			.flat();
+
+		return Array.from(new Set([ ...langs, 'en-us', 'en' ]));
+	}
+
+	static _getAllLocalizeResources(config = this.localizeConfig) {
+		const resourcesLoadedPromises = [];
+		const superCtor = Object.getPrototypeOf(this);
+		// get imported terms for each config, head up the chain to get them all
+		if ('_getAllLocalizeResources' in superCtor) {
+			const superConfig = Object.prototype.hasOwnProperty.call(superCtor, 'localizeConfig') && superCtor.localizeConfig.importFunc ? superCtor.localizeConfig : config;
+			resourcesLoadedPromises.push(superCtor._getAllLocalizeResources(superConfig));
+		}
+		if (Object.prototype.hasOwnProperty.call(this, 'getLocalizeResources') || Object.prototype.hasOwnProperty.call(this, 'resources')) {
+			const possibleLanguages = this._generatePossibleLanguages(config);
+			const resourcesPromise = this.getLocalizeResources(possibleLanguages, config);
+			resourcesLoadedPromises.push(resourcesPromise);
+		}
+		return Promise.all(resourcesLoadedPromises);
+	}
+
+	static async _getLocalizeResources(langs, { importFunc, osloCollection, useBrowserLangs }) {
+
+		// in dev, don't request unsupported langpacks
+		if (!importFunc.toString().includes('switch') && !useBrowserLangs) {
+			langs = langs.filter(lang => supportedLangpacks.includes(lang));
+		}
+
+		for (const lang of [...langs, fallbackLang]) {
+
+			const resources = await Promise.resolve(importFunc(lang)).catch(() => {});
+
+			if (resources) {
+
+				if (osloCollection) {
+					return await getLocalizeOverrideResources(
+						lang,
+						resources,
+						() => osloCollection
+					);
+				}
+
+				return {
+					language: lang,
+					resources
+				};
+			}
+		}
+	}
+
+	_hasResources() {
+		return this.constructor.localizeConfig ? Boolean(this.constructor.localizeConfig.importFunc) : this.constructor.getLocalizeResources !== undefined;
+	}
+
+};
+
+export const Localize = class extends getLocalizeClass() {
+
+	static getLocalizeResources() {
+		return super._getLocalizeResources(...arguments);
+	}
+
+	constructor(config) {
+		super();
+		super.constructor.setLocalizeMarkup(localizeMarkup);
+		this.config = config;
+		this.connect();
+	}
+
+	get ready() {
+		return this.__resourcesLoadedPromise;
+	}
+
+	connect() {
+		super.connect();
+		return this.ready;
+	}
+
+};
+
+class MarkupError extends Error {
+	name = this.constructor.name;
+}
+
+export function validateMarkup(content, disallowedTagsRegex) {
+	if (content) {
+		if (content.forEach) {
+			content.forEach(item => validateMarkup(item));
+			return;
+		}
+		if (content._localizeMarkup) return;
+		if (Object.hasOwn(content, '_$litType$')) throw new MarkupError('Rich-text replacements must use localizeMarkup templates. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/');
+
+		if (content.constructor === String && disallowedTagsRegex?.test(content)) throw new MarkupError(`Rich-text replacements may use only the following allowed elements: ${allowedTags}. For more information, see: https://github.com/BrightspaceUI/core/blob/main/mixins/localize/`);
+	}
+}
+
+export function localizeMarkup(strings, ...expressions) {
+	strings.forEach(str => validateMarkup(str, disallowedTagsRegex));
+	expressions.forEach(exp => validateMarkup(exp, disallowedTagsRegex));
+	return strings.reduce((acc, i, idx) => {
+		return acc.push(i, expressions[idx] ?? '') && acc;
+	}, []).join('');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.31.1",
+  "version": "3.33.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",

package/tools/mathjax-test-context.js

@@ -4,6 +4,5 @@ console.warn('Using mathjax test context, this is intended for demo pages and te
 
 addContext('d2l-mathjax', {
 	outputScale: 1.1,
-	renderLatex: !(window.location.search.indexOf('latex=false') !== -1),
-	enableMML3Support: true
+	renderLatex: !(window.location.search.indexOf('latex=false') !== -1)
 });