@twobirds/microcomponents 0.0.59 → 0.0.61

package/public/src/MC.ts

@@ -410,8 +410,6 @@ class DC extends McBase {
 	}
 }
 
-let observer: MutationObserver | null = null;
-
 /*
 unresolvedCEs (code below this comment):
 
@@ -430,10 +428,10 @@ In general this behaves like a custom runtime import for custom elements in the
 The only difference is that the micro component is loaded only when needed, and not on page load.
 */	
 
-const unresolvedCEs = new Map();
+const CEs = new Map();
 
 /*
-MCs (code below this comment): 
+loadedMCs (code below this comment): 
 a repository (a hashmap) of micro components: 
 the name is the name of the micro component (like "my-mc")
 if they are loading, the value is a script element
@@ -449,28 +447,88 @@ The only difference is that the micro component is loaded only when needed, and
 */	
 const MCs = new Map(); 
 
+function makeLoadScript( element: string ): HTMLScriptElement {
+
+	const fileName: string = '/' + element.split('-').join('/')+'.js';	
+
+	const se: HTMLScriptElement = document.createElement('script');
+
+	se.setAttribute('src', fileName);
+	se.setAttribute('blocking', 'render');
+	se.async = true;
+	se.setAttribute('type', 'module');
+	se.setAttribute( 'name', element);
+	se.setAttribute( 'loading', '');
+
+	addListener( se, 'load', (ev) => {
+		// console.info('loaded MC', elementName);
+		se.removeAttribute( 'loading' );
+		se.setAttribute( 'loaded', '');
+	});
+
+	addListener( se, 'error', (ev) => {
+		console.error('could not load Custom Element code from', fileName);
+	});
+
+	return se;
+}
+
+function onLoadCallback( script: HTMLScriptElement ) {
+	// create callback script tag
+	// it is essential to do this in a timeout and via another script tag, 
+	// to force it to be a top level module allowing for the use of "import"
+	setTimeout( function(){
+		// create callback script tag
+		const importFileName = script.getAttribute('src');
+		const elementName = script.getAttribute('name');
+		
+		const se: HTMLScriptElement = document.createElement('script');
+
+		se.async = true;
+		se.setAttribute( 'type', 'module');
+
+		// --- autoload script
+		const code = /*javascript*/`
+import _ from "${importFileName}";
+import {DC} from "./microcomponents.js";
+
+const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
+
+elements.forEach((element) => {
+	autoload.state.MCs.set( '${elementName}', _ ); // add class to MCs repository
+	DC.add(element, _.name, new _(element)); // add instance to DOM
+	element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); // remove name from elements "_mc" attribute
+});
+
+setTimeout( () => {
+	document.body.querySelector('script[name="${elementName}]"')?.remove();
+},0);`;
+		// --- end autoload script
+
+		se.innerHTML = code;
+		document.body.append(se);
+	}, 0);
+}
+
 function loadUndefinedMicroComponents() {
 
 	// load unresolved custom eleents
 	[ ...document.querySelectorAll(':not(:defined)') ] // undefined custom elements
-		.filter( (element) => !!element && !document.head.querySelector(`script[${element.tagName.toLowerCase()}]`) )
+		.filter( (element) => !!element 
+			&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
+			&& !CEs.has(element.tagName.toLowerCase()) // not in loading list
+		)
 		.forEach((el) => {
 			const elementName = el.tagName.toLowerCase(),
 				fileName: string = '/'+elementName.split('-').join('/')+'.js';	
-			//console.log('load undefined custom element',el);
 
-			const se: HTMLScriptElement = document.createElement('script');
+			const se: HTMLScriptElement = makeLoadScript( elementName );
 
-			se.setAttribute('src', fileName);
-			se.setAttribute('blocking', 'render');
-			se.setAttribute('type', 'module');
-			se.setAttribute( elementName, '');
-
-			se.onerror = () => {
-				console.error('could not load Custom Element code from', fileName);
-			}
+			addListener( se, 'load', () => { 
+				CEs.set( elementName, customElements.get(el.tagName.toLowerCase()) );
+			});
 
-			//console.info('load Custom Element', elementName);
+			CEs.set( elementName, 'loading');
 			document.head.append(se);
 
 			// instanciation of the micro component will be handled by the browser automatically
@@ -480,74 +538,41 @@ function loadUndefinedMicroComponents() {
 	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ] // undefined DOM components
 		.filter( (element) => !!element )
 		.forEach((el) => {
-			const toBeLoaded = el.getAttribute('_mc')?.split(' ').filter( m => !!m && !document.head.querySelector(`script[${m}]`) );
-
-
-			//console.log('load undefined DOM components',toBeLoaded);
-
-			toBeLoaded?.forEach( elementName => {
-				const se: HTMLScriptElement = document.createElement('script'),
-					fileName: string = '/'+elementName.split('-').join('/')+'.js';
-
-				se.setAttribute('src', fileName);
-				se.setAttribute('blocking', 'render');
-				se.async = true;
-				se.setAttribute('type', 'module');
-				se.setAttribute( elementName, '');
+			const elements = el.getAttribute('_mc')?.split(' ').filter( m => !!m ) || [];
+			const elementsToBeLoaded = elements.filter( m => !MCs.has( m ) );
 
-				se.onload = () => {
-					// console.info('loaded MC', elementName);
+			// load MC components that do not exist yet
+			elementsToBeLoaded?.forEach( elementName => {
+				const se: HTMLScriptElement = makeLoadScript( elementName );
 
-					// create callback script tag
-					setTimeout( function(){
-						// create callback script tag
-						const se: HTMLScriptElement = document.createElement('script');
-						const importFileName = fileName;
+				addListener( se, 'load', () => onLoadCallback( document.head.querySelector(`script[name="${elementName}"]`) as HTMLScriptElement) );
+			
+				MCs.set( elementName, 'loading');
 
-						se.async = true;
-						se.setAttribute( 'type', 'module');
-
-						const code = /*javascript*/`
-import _ from "${importFileName}";
-import {DC} from "./microcomponents.js";
-
-//console.log('use importFileName', '${importFileName}');
-// console.log('use elementName',  '${elementName}');
-
-const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
-
-// console.log('elements',  elements);
-elements.forEach((element) => {
-	// console.log('DC, element,class', DC, element, _);
-	DC.add(element, _.name, new _(element));
-	element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim());
-});
-setTimeout( () => {
-	// console.log('remove callback script tag', '${elementName}'); 
-	document.body.querySelector('script[${elementName}]')?.remove();
-},0);
-`;
-						
-						//console.log('before innerHTML');
-						se.innerHTML = code;
-						//console.log('after innerHTML');
-						//console.log( 'callback script tag', se, code );
-						document.body.append(se);
-					}, 0);
-					
-				}
-
-				se.onerror = () => {
-					console.error('could not load DOM Component code from', fileName);
-				}
-
-				// console.info('load DOM Micro Component', elementName);
 				document.head.append(se);
 			});
+
+			// loading MC components already have callbacks attached
+			const elementsAlreadyLoaded = elements.filter( m => MCs.has( m ) && !MCs.get( m )!.length); 
+
+			// MCs that are already loaded will trigger the onLoadCallback manually
+			elementsAlreadyLoaded?.forEach( elementName => {
+				setTimeout( ()=>{
+					console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
+					DC.add(el, elementName, new ( (autoload as any).state.MCs.get(elementName) as any)(el)); // add instance to DOM
+					el.setAttribute('_mc', (el as any)
+						.getAttribute('_mc')
+						.replace('${elementName}', '')
+						.replace( /\w\w/g, ' ')
+						.trim()
+					); // remove name from elements "_mc" attribute
+				}, 5);
+			});
 		});
 }
 
 let autoloadEnabled: boolean = false;
+let observer: MutationObserver | null = null;
 
 export function autoload(enable: boolean = true): boolean {
 	if (!enable) {
@@ -567,5 +592,7 @@ export function autoload(enable: boolean = true): boolean {
 	return autoloadEnabled;
 }
 
+(autoload as LooseObject).state = { CEs, MCs };
+
 export { addListener, removeListener, McBase, MC, DC, McEvent };
 

package/src/MC.ts

@@ -410,8 +410,6 @@ class DC extends McBase {
 	}
 }
 
-let observer: MutationObserver | null = null;
-
 /*
 unresolvedCEs (code below this comment):
 
@@ -430,10 +428,10 @@ In general this behaves like a custom runtime import for custom elements in the
 The only difference is that the micro component is loaded only when needed, and not on page load.
 */	
 
-const unresolvedCEs = new Map();
+const CEs = new Map();
 
 /*
-MCs (code below this comment): 
+loadedMCs (code below this comment): 
 a repository (a hashmap) of micro components: 
 the name is the name of the micro component (like "my-mc")
 if they are loading, the value is a script element
@@ -449,28 +447,88 @@ The only difference is that the micro component is loaded only when needed, and
 */	
 const MCs = new Map(); 
 
+function makeLoadScript( element: string ): HTMLScriptElement {
+
+	const fileName: string = '/' + element.split('-').join('/')+'.js';	
+
+	const se: HTMLScriptElement = document.createElement('script');
+
+	se.setAttribute('src', fileName);
+	se.setAttribute('blocking', 'render');
+	se.async = true;
+	se.setAttribute('type', 'module');
+	se.setAttribute( 'name', element);
+	se.setAttribute( 'loading', '');
+
+	addListener( se, 'load', (ev) => {
+		// console.info('loaded MC', elementName);
+		se.removeAttribute( 'loading' );
+		se.setAttribute( 'loaded', '');
+	});
+
+	addListener( se, 'error', (ev) => {
+		console.error('could not load Custom Element code from', fileName);
+	});
+
+	return se;
+}
+
+function onLoadCallback( script: HTMLScriptElement ) {
+	// create callback script tag
+	// it is essential to do this in a timeout and via another script tag, 
+	// to force it to be a top level module allowing for the use of "import"
+	setTimeout( function(){
+		// create callback script tag
+		const importFileName = script.getAttribute('src');
+		const elementName = script.getAttribute('name');
+		
+		const se: HTMLScriptElement = document.createElement('script');
+
+		se.async = true;
+		se.setAttribute( 'type', 'module');
+
+		// --- autoload script
+		const code = /*javascript*/`
+import _ from "${importFileName}";
+import {DC} from "./microcomponents.js";
+
+const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
+
+elements.forEach((element) => {
+	autoload.state.MCs.set( '${elementName}', _ ); // add class to MCs repository
+	DC.add(element, _.name, new _(element)); // add instance to DOM
+	element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); // remove name from elements "_mc" attribute
+});
+
+setTimeout( () => {
+	document.body.querySelector('script[name="${elementName}]"')?.remove();
+},0);`;
+		// --- end autoload script
+
+		se.innerHTML = code;
+		document.body.append(se);
+	}, 0);
+}
+
 function loadUndefinedMicroComponents() {
 
 	// load unresolved custom eleents
 	[ ...document.querySelectorAll(':not(:defined)') ] // undefined custom elements
-		.filter( (element) => !!element && !document.head.querySelector(`script[${element.tagName.toLowerCase()}]`) )
+		.filter( (element) => !!element 
+			&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
+			&& !CEs.has(element.tagName.toLowerCase()) // not in loading list
+		)
 		.forEach((el) => {
 			const elementName = el.tagName.toLowerCase(),
 				fileName: string = '/'+elementName.split('-').join('/')+'.js';	
-			//console.log('load undefined custom element',el);
 
-			const se: HTMLScriptElement = document.createElement('script');
+			const se: HTMLScriptElement = makeLoadScript( elementName );
 
-			se.setAttribute('src', fileName);
-			se.setAttribute('blocking', 'render');
-			se.setAttribute('type', 'module');
-			se.setAttribute( elementName, '');
-
-			se.onerror = () => {
-				console.error('could not load Custom Element code from', fileName);
-			}
+			addListener( se, 'load', () => { 
+				CEs.set( elementName, customElements.get(el.tagName.toLowerCase()) );
+			});
 
-			//console.info('load Custom Element', elementName);
+			CEs.set( elementName, 'loading');
 			document.head.append(se);
 
 			// instanciation of the micro component will be handled by the browser automatically
@@ -480,74 +538,41 @@ function loadUndefinedMicroComponents() {
 	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ] // undefined DOM components
 		.filter( (element) => !!element )
 		.forEach((el) => {
-			const toBeLoaded = el.getAttribute('_mc')?.split(' ').filter( m => !!m && !document.head.querySelector(`script[${m}]`) );
-
-
-			//console.log('load undefined DOM components',toBeLoaded);
-
-			toBeLoaded?.forEach( elementName => {
-				const se: HTMLScriptElement = document.createElement('script'),
-					fileName: string = '/'+elementName.split('-').join('/')+'.js';
-
-				se.setAttribute('src', fileName);
-				se.setAttribute('blocking', 'render');
-				se.async = true;
-				se.setAttribute('type', 'module');
-				se.setAttribute( elementName, '');
+			const elements = el.getAttribute('_mc')?.split(' ').filter( m => !!m ) || [];
+			const elementsToBeLoaded = elements.filter( m => !MCs.has( m ) );
 
-				se.onload = () => {
-					// console.info('loaded MC', elementName);
+			// load MC components that do not exist yet
+			elementsToBeLoaded?.forEach( elementName => {
+				const se: HTMLScriptElement = makeLoadScript( elementName );
 
-					// create callback script tag
-					setTimeout( function(){
-						// create callback script tag
-						const se: HTMLScriptElement = document.createElement('script');
-						const importFileName = fileName;
+				addListener( se, 'load', () => onLoadCallback( document.head.querySelector(`script[name="${elementName}"]`) as HTMLScriptElement) );
+			
+				MCs.set( elementName, 'loading');
 
-						se.async = true;
-						se.setAttribute( 'type', 'module');
-
-						const code = /*javascript*/`
-import _ from "${importFileName}";
-import {DC} from "./microcomponents.js";
-
-//console.log('use importFileName', '${importFileName}');
-// console.log('use elementName',  '${elementName}');
-
-const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
-
-// console.log('elements',  elements);
-elements.forEach((element) => {
-	// console.log('DC, element,class', DC, element, _);
-	DC.add(element, _.name, new _(element));
-	element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim());
-});
-setTimeout( () => {
-	// console.log('remove callback script tag', '${elementName}'); 
-	document.body.querySelector('script[${elementName}]')?.remove();
-},0);
-`;
-						
-						//console.log('before innerHTML');
-						se.innerHTML = code;
-						//console.log('after innerHTML');
-						//console.log( 'callback script tag', se, code );
-						document.body.append(se);
-					}, 0);
-					
-				}
-
-				se.onerror = () => {
-					console.error('could not load DOM Component code from', fileName);
-				}
-
-				// console.info('load DOM Micro Component', elementName);
 				document.head.append(se);
 			});
+
+			// loading MC components already have callbacks attached
+			const elementsAlreadyLoaded = elements.filter( m => MCs.has( m ) && !MCs.get( m )!.length); 
+
+			// MCs that are already loaded will trigger the onLoadCallback manually
+			elementsAlreadyLoaded?.forEach( elementName => {
+				setTimeout( ()=>{
+					console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
+					DC.add(el, elementName, new ( (autoload as any).state.MCs.get(elementName) as any)(el)); // add instance to DOM
+					el.setAttribute('_mc', (el as any)
+						.getAttribute('_mc')
+						.replace('${elementName}', '')
+						.replace( /\w\w/g, ' ')
+						.trim()
+					); // remove name from elements "_mc" attribute
+				}, 5);
+			});
 		});
 }
 
 let autoloadEnabled: boolean = false;
+let observer: MutationObserver | null = null;
 
 export function autoload(enable: boolean = true): boolean {
 	if (!enable) {
@@ -567,5 +592,7 @@ export function autoload(enable: boolean = true): boolean {
 	return autoloadEnabled;
 }
 
+(autoload as LooseObject).state = { CEs, MCs };
+
 export { addListener, removeListener, McBase, MC, DC, McEvent };