@brightspace-ui/core 2.46.2 → 2.47.0

package/components/html-block/html-block.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
-import { codeStyles, HtmlBlockCodeRenderer } from '../../helpers/prism.js';
+import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
 import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
-import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -118,10 +118,11 @@ export const htmlBlockContentStyles = css`
 
 let renderers;
 
-const getRenderers = () => {
+const getRenderers = async() => {
 	if (renderers) return renderers;
-	const tempRenderers = requestInstance(document, 'html-block-renderers');
-	const defaultRenderers = [ new HtmlBlockMathRenderer(), new HtmlBlockCodeRenderer() ];
+	const rendererLoader = requestInstance(document, 'html-block-renderer-loader');
+	const tempRenderers = rendererLoader ? await rendererLoader.getRenderers() : undefined;
+	const defaultRenderers = [ createMathRenderer(), createCodeRenderer() ];
 	renderers = (tempRenderers ? [ ...defaultRenderers, ...tempRenderers ] : defaultRenderers);
 	return renderers;
 };
@@ -193,13 +194,12 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		this.noDeferredRendering = false;
 		this._hasSlottedContent = false;
 
-		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
+		getRenderers().then(renderers => renderers.reduce((attrs, currentRenderer) => {
 			if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
 			return attrs;
-		}, []);
-
-		if (rendererContextAttributes.length === 0) return;
-		this._contextObserverController = new HtmlAttributeObserverController(this, ...rendererContextAttributes);
+		}, [])).then(rendererContextAttributes => {
+			this._contextObserverController = new HtmlAttributeObserverController(this, ...rendererContextAttributes);
+		});
 	}
 
 	connectedCallback() {
@@ -257,6 +257,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 	_contextChanged() {
 		if (!this._contextObserverController) return false;
+		if (!this._contextKeys) {
+			this._updateContextKeys();
+			return true;
+		}
 
 		if (this._contextKeys.size !== this._contextObserverController.values.size) return true;
 		for (const [attr, val] of this._contextKeys) {
@@ -286,7 +290,8 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	}
 
 	async _processRenderers(elem) {
-		for (const renderer of getRenderers()) {
+		const renderers = await getRenderers();
+		for (const renderer of renderers) {
 			if (this._contextObserverController && renderer.contextAttributes) {
 				const contextValues = new Map();
 				renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));

package/controllers/attributeObserver/htmlAttributeObserverController.js

@@ -14,9 +14,9 @@ export class HtmlAttributeObserverController {
 		);
 
 		this._host = host;
-		host.addController(this);
 		this._attributes = attributes;
 		this.values = new Map();
+		host.addController(this);
 	}
 
 	hostConnected() {

package/helpers/mathjax.js

@@ -33,7 +33,7 @@ const mathjaxFontMappings = new Map([
 let mathJaxLoaded;
 let renderingPromise = Promise.resolve();
 
-export class HtmlBlockMathRenderer {
+class HtmlBlockMathRenderer {
 
 	get contextAttributes() {
 		return [mathjaxContextAttribute];
@@ -77,6 +77,10 @@ export class HtmlBlockMathRenderer {
 
 }
 
+export function createHtmlBlockRenderer() {
+	return new HtmlBlockMathRenderer();
+}
+
 export function loadMathJax(mathJaxConfig) {
 
 	if (mathJaxLoaded) return mathJaxLoaded;

package/helpers/prism.js

@@ -452,7 +452,7 @@ export async function formatCodeElement(elem) {
 	Prism.highlightElement(code);
 }
 
-export class HtmlBlockCodeRenderer {
+class HtmlBlockCodeRenderer {
 
 	get canRenderInline() {
 		return true;
@@ -471,3 +471,7 @@ export class HtmlBlockCodeRenderer {
 	}
 
 }
+
+export function createHtmlBlockRenderer() {
+	return new HtmlBlockCodeRenderer();
+}

package/package.json

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