@brightspace-ui/core 3.227.8 → 3.227.9

package/components/demo/demo-snippet.js

@@ -5,6 +5,14 @@ import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-content.js';
 import { css, html, LitElement } from 'lit';
 
+function setIndent(text, indent = 0, skipFirstLine = false) {
+	const lines = text.split('\n');
+	const indentedLines = lines.filter((l, i) => l.trim() !== '' && !(skipFirstLine && i === 0));
+	const minIndent = Math.min(...indentedLines.map(l => l.match(/^\s*/)[0].length));
+
+	return lines.map((l, i) => `${' '.repeat(indent)}${skipFirstLine && i === 0 ? l : l.substring(minIndent)}`).join('\n');
+}
+
 class DemoSnippet extends LitElement {
 
 	static get properties() {
@@ -27,7 +35,7 @@ class DemoSnippet extends LitElement {
 				background-color: var(--d2l-theme-background-color-base);
 				border: 1px solid var(--d2l-theme-border-color-standard);
 				border-radius: 6px;
-				box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+				box-shadow: var(--d2l-theme-shadow-floating);
 				display: block;
 				max-width: 900px;
 			}
@@ -100,13 +108,14 @@ class DemoSnippet extends LitElement {
 				border: none;
 				border-top-left-radius: 0;
 				border-top-right-radius: 0;
+				box-shadow: none;
 				margin: 0;
 				max-width: 100%;
 			}
 			:host([code-view-hidden]) d2l-code-view {
 				display: none;
 			}
-`;
+		`;
 	}
 
 	constructor() {
@@ -152,73 +161,39 @@ class DemoSnippet extends LitElement {
 		});
 	}
 
-	_applyAttr(name, value, applyToShadowRoot) {
-		const query = this._isTemplate ? 'slot[name="_demo"]' : 'slot:not([name="_demo"])';
-		if (!this.shadowRoot) return;
-		const nodes = this.shadowRoot.querySelector(query).assignedNodes();
-		if (nodes.length === 0) return;
-		const doApply = (nodes, isRoot) => {
-			for (let i = 0; i < nodes.length; i++) {
-				if (nodes[i].nodeType === Node.ELEMENT_NODE) {
-					if (isRoot || nodes[i].tagName.indexOf('-') !== -1) {
-						if (typeof(value) === 'boolean') {
-							if (value) {
-								nodes[i].setAttribute(name, name);
-							} else {
-								nodes[i].removeAttribute(name);
-							}
-						} else {
-							nodes[i].setAttribute(name, value);
-						}
-					}
-					if (applyToShadowRoot && nodes[i].shadowRoot) {
-						doApply(nodes[i].shadowRoot.children, false);
-					}
-					doApply(nodes[i].children, false);
-				}
-			}
-		};
-		doApply(nodes, true);
-	}
-
 	_formatCode(text) {
 
 		if (!text) return text;
 
 		// remove the leading and trailing template tags
-		text = text.replace(/^[\t]*\n/, '').replace(/\n[\t]*$/, '');
-		const templateMatch = text.match(/^[\t]*<template>[\n]*/);
-		this._isTemplate = templateMatch && templateMatch.length > 0;
+		text = text.replace(/^(\t*\n)*/, '').replace(/(\n\t*)*$/, '');
+		this._isTemplate = /^\s*<template>/.test(text);
 		text = text.replace(/^[\t]*<template>[\n]*/, '').replace(/[\n]*[\t]*<\/template>$/, '');
 
-		// fix script whitespace (for some reason brower keeps <script> indent but not the rest)
-		let lines = text
-			.replace(/\t/g, '  ')
-			.replace(/<\/script>/g, '\n</script>')
-			.replace(/<script>/g, '<script>\n')
-			.replace(/<script type="module">/g, '<script type="module">\n')
-			.replace(/<script data-demo-hide(.+?)<\/script>/gis, '')
-			.split('\n');
-		let scriptIndent = 0;
-		lines = lines.map((l) => {
-			if (l.indexOf('<script') > -1) {
-				scriptIndent = l.match(/^(\s*)/)[0].length;
-				return l;
-			} else if (l.indexOf('</script>') > -1) {
-				const nl = this._repeat(' ', scriptIndent) + l ;
-				scriptIndent = 0;
-				return nl;
-			} else if (scriptIndent && !this._isTemplate) {
-				return this._repeat(' ', scriptIndent + 2) + l;
-			} else {
-				return l;
-			}
-		});
+		// fix script whitespace
+		text = setIndent(text.replace(/\t/g, '  '))
+			.replace(/( *)<script( type="module")?>([^\n]+?)<\/script>/g, '$1<script$2>\n$1  $3\n$1</script>') // convert single line scripts to multi-line
+			.replace(/( *)<\/script>/g, '\n$1</script>')
+			.replace(/<script( type="module")?>/g, '<script$1>\n')
+			.replace(/(\n *)?<script data-demo-hide(.+?)<\/script>/gis, '');
+
+		const startTags = new Set([...text.matchAll(/<[^/](.*?)>/g)].map(m => m[0]));
+		for (const tag of startTags) {
+			const formattedTag = tag
+				.replace(/ class=""/g, '') // replace empty class attributes (class="")
+				.replace(/\s+_[^\s/>"'=]*(=(?<q>['"]).*?(?<!\\)\k<q>)?/g, '') // replace private reflected properties (_attr, _attr="value", but not target="_blank")
+				.replace(/=""/g, ''); // replace empty strings for boolean attributes (="")
+			text = text.replace(tag, formattedTag);
+		}
+
+		return text;
 
-		return lines.join('\n')
-			.replace(/ class=""/g, '') // replace empty class attributes (class="")
-			.replace(/\s+_[^\s/>"'=]*(=(?<q>['"]).*?(?<!\\)\k<q>)?/g, '') // replace private reflected properties (_attr, _attr="value", but not target="_blank")
-			.replace(/=""/g, ''); // replace empty strings for boolean attributes (="")
+	}
+
+	_getDemoNodes() {
+		const query = this._isTemplate ? '[slot="_demo"], [slot="_demo"] *' : '*';
+		const elements = Array.from(this.querySelectorAll(query));
+		return elements;
 	}
 
 	async _handleFullscreenChange(e) {
@@ -233,27 +208,31 @@ class DemoSnippet extends LitElement {
 
 	_handleSkeletonChange(e) {
 		this._skeletonOn = e.target.on;
-		this._applyAttr('skeleton', this._skeletonOn, false);
+		const nodes = this._getDemoNodes();
+		for (const node of nodes) {
+			if (node.nodeType !== Node.ELEMENT_NODE) continue;
+			if (node.tagName.indexOf('-') === -1) continue;
+			if (this._skeletonOn) {
+				node.setAttribute('skeleton', '');
+			} else {
+				node.removeAttribute('skeleton');
+			}
+		}
 	}
 
 	_handleSlotChange(e) {
 		this._updateCode(e.target);
+		this._updateHasSkeleton();
 	}
 
 	_removeImportedDemo() {
 		if (!this.shadowRoot) return;
 		const nodes = this.shadowRoot.querySelector('slot[name="_demo"]').assignedNodes();
-		for (let i = nodes.length - 1; i === 0; i--) {
+		for (let i = nodes.length - 1; i >= 0; i--) {
 			nodes[i].parentNode.removeChild(nodes[i]);
 		}
 	}
 
-	_repeat(value, times) {
-		if (!value || !times) return '';
-		if (!''.repeat) return Array(times).join(value); // for IE11
-		return value.repeat(times);
-	}
-
 	_updateCode(slot) {
 		this._removeImportedDemo();
 		const nodes = slot.assignedNodes();
@@ -277,27 +256,12 @@ class DemoSnippet extends LitElement {
 		}
 		const textNode = document.createTextNode(this._formatCode(tempContainer.innerHTML));
 		this._code = textNode.textContent;
-
-		this._updateHasSkeleton();
 	}
 
 	_updateHasSkeleton() {
+		const nodes = this._getDemoNodes();
 
-		const query = this._isTemplate ? 'slot[name="_demo"]' : 'slot:not([name="_demo"])';
-		if (!this.shadowRoot) return;
-		const nodes = this.shadowRoot.querySelector(query).assignedNodes();
-
-		const doApply = (nodes) => {
-			for (let i = 0; i < nodes.length; i++) {
-				if (nodes[i].nodeType === Node.ELEMENT_NODE) {
-					if (nodes[i].skeleton !== undefined) {
-						this._hasSkeleton = true;
-					}
-					doApply(nodes[i].children);
-				}
-			}
-		};
-		doApply(nodes);
+		this._hasSkeleton = nodes.some(n => n.nodeType === Node.ELEMENT_NODE && n.tagName.indexOf('-') !== -1 && n.skeleton !== undefined);
 
 	}
 

package/components/demo/test/demo-snippet.test.js

@@ -0,0 +1,116 @@
+import '../demo-snippet.js';
+import { defineCE, expect, fixture, html, nextFrame, runConstructor } from '@brightspace-ui/testing';
+import { LitElement } from 'lit';
+import { SkeletonMixin } from '../../skeleton/skeleton-mixin.js';
+
+const skeletonTag = defineCE(class extends SkeletonMixin(LitElement) {
+	render() {
+		return html`<div>Skeleton element</div>`;
+	}
+});
+const scriptTestExpected = `<div>
+  <script>
+
+    console.log('hi');
+
+  </script>
+  <script type="module">
+
+    import { test } from './test.js';
+    if (window.test) {
+      console.log('test');
+    }
+
+  </script>
+</div>`;
+const tagTestExpected = `<div foo data-keep="ok"></div>
+<another-tag bar target="_blank"></another-tag>
+<script>
+
+  function _privateFunction() {console.log('Private function name is not removed');}
+
+</script>`;
+
+function addTemplate(inner) {
+	return `<template>${inner}</template>`;
+}
+
+describe('d2l-demo-snippet', () => {
+
+	describe('constructor', () => {
+		it('should construct', () => {
+			runConstructor('d2l-demo-snippet');
+		});
+	});
+
+	describe('code formatting', () => {
+		let elem;
+
+		beforeEach(async() => {
+			elem = await fixture(html`<d2l-demo-snippet></d2l-demo-snippet>`);
+		});
+
+		[true, false].forEach(useTemplate => {
+			it(`sets template flag to ${useTemplate ? 'true' : 'false'}`, async() => {
+				const inner = '<div>demo</div>';
+				const formatted = elem._formatCode(useTemplate ? addTemplate(inner) : inner);
+				expect(formatted).to.equal('<div>demo</div>');
+				expect(elem._isTemplate).to.equal(useTemplate);
+			});
+			it('parses scripts and removes hidden ones', async() => {
+				const inner = `
+				<div>
+					<script>console.log('hi');</script>
+					<script type="module">
+						import { test } from './test.js';
+						if (window.test) {
+							console.log('test');
+						}
+					</script>
+					<script data-demo-hide>hidden</script>
+				</div>`;
+				const formatted = elem._formatCode(useTemplate ? addTemplate(inner) : inner);
+				expect(formatted).to.equal(scriptTestExpected);
+			});
+		});
+
+		it('removes empty and private attributes but keeps normal ones', async() => {
+			const elem = await fixture(html`<d2l-demo-snippet></d2l-demo-snippet>`);
+			const formatted = elem._formatCode(`
+				<div class="" _private foo="" data-keep="ok"></div>
+				<another-tag _private="value" bar="" target="_blank"></another-tag>
+				<script>
+					function _privateFunction() {console.log('Private function name is not removed');}
+				</script>
+			`);
+			expect(formatted).to.equal(tagTestExpected);
+		});
+
+	});
+
+	describe('skeleton detection', () => {
+		[true, false].forEach(useTemplate => {
+
+			function snippetFixture(inner) {
+				return fixture(`<d2l-demo-snippet>${useTemplate ? addTemplate(inner) : inner}</d2l-demo-snippet>`, { awaitLoadingComplete: false });
+			}
+
+			it(`sets _hasSkeleton when a slotted element exposes skeleton property${useTemplate ? ' - template' : ''}`, async() => {
+				await nextFrame();
+				const elem = await snippetFixture(`<${skeletonTag}></${skeletonTag}>`);
+				expect(elem._hasSkeleton).to.be.true;
+			});
+
+			it(`sets _hasSkeleton when a nested slotted element exposes skeleton property${useTemplate ? ' - template' : ''}`, async() => {
+				const elem = await snippetFixture(`<div><${skeletonTag}></${skeletonTag}></div>`);
+				expect(elem._hasSkeleton).to.be.true;
+			});
+
+			it(`does not set _hasSkeleton when a slotted element does not expose skeleton property${useTemplate ? ' - template' : ''}`, async() => {
+				const elem = await snippetFixture('<div></div>');
+				expect(elem._hasSkeleton).to.be.false;
+			});
+		});
+	});
+
+});

package/package.json

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