kempo-ui 0.2.1 → 0.2.3

package/dist/components/Import.js

@@ -1 +1 @@
-import LightComponent from"./LightComponent.js";import{html,render,unsafeHTML}from"../lit-all.min.js";export default class Import extends LightComponent{static properties={src:{type:String,reflect:!0},content:{type:String},scripts:{type:Array}};static replacements={};constructor(){super(),this.src="",this.content="",this.scripts=[]}updated(t){super.updated(),t.has("src")&&this.fetch(),t.has("content")&&this.scripts.length>0&&setTimeout(()=>this.executeScripts(),0)}async fetch(){let t=await(await fetch(this.src)).text();for(const[e,r]of Object.entries(Import.replacements))t=t.replace(new RegExp(`%%${e}%%`,"g"),r);const e=(new DOMParser).parseFromString(t,"text/html"),r=e.querySelectorAll("script");this.scripts=Array.from(r).map(t=>({src:t.src,text:t.textContent,type:t.type||"text/javascript"})),r.forEach(t=>t.remove()),this.content=e.body?e.body.innerHTML:t}executeScripts(){this.scripts.forEach(t=>{const e=document.createElement("script");e.type=t.type,t.src?e.src=t.src:t.text&&(e.textContent=t.text),document.head.appendChild(e)}),this.scripts=[]}renderLightDom(){return this.content?html`${unsafeHTML(this.content)}`:html``}}window.customElements.define("k-import",Import);
+import LightComponent from"./LightComponent.js";import{html,render,unsafeHTML}from"../lit-all.min.js";export default class Import extends LightComponent{static properties={src:{type:String,reflect:!0},content:{type:String},scripts:{type:Array}};static replacements={};constructor(){super(),this.src="",this.content="",this.scripts=[]}updated(t){super.updated(),t.has("src")&&(void 0===t.get("src")&&""===this.src||this.dispatchEvent(new CustomEvent("src-change",{detail:{src:this.src},bubbles:!0,composed:!0})),this.fetch()),t.has("content")&&this.content&&setTimeout(()=>{this.scripts.length>0&&this.executeScripts(),this.dispatchEvent(new CustomEvent("content-rendered",{bubbles:!0,composed:!0}))},0)}async fetch(){if(!this.src)return;this.dispatchEvent(new CustomEvent("fetch-start",{detail:{src:this.src},bubbles:!0,composed:!0}));const t=await fetch(this.src);this.dispatchEvent(new CustomEvent("fetch-response",{detail:{src:this.src,status:t.status},bubbles:!0,composed:!0}));let e=await t.text();for(const[t,s]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),s);const s=(new DOMParser).parseFromString(e,"text/html"),r=s.querySelectorAll("script");this.scripts=Array.from(r).map(t=>({src:t.src,text:t.textContent,type:t.type||"text/javascript"})),r.forEach(t=>t.remove()),this.content=s.body?s.body.innerHTML:e}executeScripts(){this.scripts.forEach(t=>{const e=document.createElement("script");e.type=t.type,t.src?e.src=t.src:t.text&&(e.textContent=t.text),document.head.appendChild(e)}),this.scripts=[]}renderLightDom(){return this.content?html`${unsafeHTML(this.content)}`:html``}}window.customElements.define("k-import",Import);

package/docs/components/import.html

@@ -28,6 +28,7 @@
           <a href="#requirements">Requirements</a><br />
           <a href="#properties">Properties</a><br />
           <a href="#methods">Methods</a><br />
+          <a href="#events">Events</a><br />
         </div>
       </k-accordion-panel>
     </k-accordion>
@@ -68,8 +69,21 @@
     <p>The source URL of the HTML snippet to import. Syncs to <code>src</code> attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h5><code>load()<i>: Promise</i></code></h5>
-    <p>Loads the HTML snippet from the specified source URL.</p>
+    <h5><code>fetch()<i>: Promise</i></code></h5>
+    <p>Fetches and renders the HTML snippet from the current <code>src</code> URL. Called automatically when <code>src</code> changes.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>src-change</code></h5>
+    <p>Fired when the <code>src</code> property changes. <code>detail: { src }</code></p>
+    <h5><code>fetch-start</code></h5>
+    <p>Fired when the HTTP fetch begins. <code>detail: { src }</code></p>
+    <h5><code>fetch-response</code></h5>
+    <p>Fired when the HTTP response is received. <code>detail: { src, status }</code></p>
+    <h5><code>content-rendered</code></h5>
+    <p>Fired after the HTML content has been injected into the DOM and all inline scripts have been executed.</p>
+    <k-card label="JavaScript">
+      <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> importer = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&#x27;k-import&#x27;</span>);<br>importer.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;src-change&#x27;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;src set:&#x27;</span>, e.<span class="hljs-property">detail</span>.<span class="hljs-property">src</span>));<br>importer.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;fetch-start&#x27;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;fetching:&#x27;</span>, e.<span class="hljs-property">detail</span>.<span class="hljs-property">src</span>));<br>importer.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;fetch-response&#x27;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;response status:&#x27;</span>, e.<span class="hljs-property">detail</span>.<span class="hljs-property">status</span>));<br>importer.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;content-rendered&#x27;</span>, <span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;content ready&#x27;</span>));</code></pre>
+    </k-card>
 
   </k-main>
   <div style="height:33vh"></div>

package/docs/src/components/Import.js

@@ -1 +1 @@
-import LightComponent from"./LightComponent.js";import{html,render,unsafeHTML}from"../lit-all.min.js";export default class Import extends LightComponent{static properties={src:{type:String,reflect:!0},content:{type:String},scripts:{type:Array}};static replacements={};constructor(){super(),this.src="",this.content="",this.scripts=[]}updated(t){super.updated(),t.has("src")&&this.fetch(),t.has("content")&&this.scripts.length>0&&setTimeout(()=>this.executeScripts(),0)}async fetch(){let t=await(await fetch(this.src)).text();for(const[e,r]of Object.entries(Import.replacements))t=t.replace(new RegExp(`%%${e}%%`,"g"),r);const e=(new DOMParser).parseFromString(t,"text/html"),r=e.querySelectorAll("script");this.scripts=Array.from(r).map(t=>({src:t.src,text:t.textContent,type:t.type||"text/javascript"})),r.forEach(t=>t.remove()),this.content=e.body?e.body.innerHTML:t}executeScripts(){this.scripts.forEach(t=>{const e=document.createElement("script");e.type=t.type,t.src?e.src=t.src:t.text&&(e.textContent=t.text),document.head.appendChild(e)}),this.scripts=[]}renderLightDom(){return this.content?html`${unsafeHTML(this.content)}`:html``}}window.customElements.define("k-import",Import);
+import LightComponent from"./LightComponent.js";import{html,render,unsafeHTML}from"../lit-all.min.js";export default class Import extends LightComponent{static properties={src:{type:String,reflect:!0},content:{type:String},scripts:{type:Array}};static replacements={};constructor(){super(),this.src="",this.content="",this.scripts=[]}updated(t){super.updated(),t.has("src")&&(void 0===t.get("src")&&""===this.src||this.dispatchEvent(new CustomEvent("src-change",{detail:{src:this.src},bubbles:!0,composed:!0})),this.fetch()),t.has("content")&&this.content&&setTimeout(()=>{this.scripts.length>0&&this.executeScripts(),this.dispatchEvent(new CustomEvent("content-rendered",{bubbles:!0,composed:!0}))},0)}async fetch(){if(!this.src)return;this.dispatchEvent(new CustomEvent("fetch-start",{detail:{src:this.src},bubbles:!0,composed:!0}));const t=await fetch(this.src);this.dispatchEvent(new CustomEvent("fetch-response",{detail:{src:this.src,status:t.status},bubbles:!0,composed:!0}));let e=await t.text();for(const[t,s]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),s);const s=(new DOMParser).parseFromString(e,"text/html"),r=s.querySelectorAll("script");this.scripts=Array.from(r).map(t=>({src:t.src,text:t.textContent,type:t.type||"text/javascript"})),r.forEach(t=>t.remove()),this.content=s.body?s.body.innerHTML:e}executeScripts(){this.scripts.forEach(t=>{const e=document.createElement("script");e.type=t.type,t.src?e.src=t.src:t.text&&(e.textContent=t.text),document.head.appendChild(e)}),this.scripts=[]}renderLightDom(){return this.content?html`${unsafeHTML(this.content)}`:html``}}window.customElements.define("k-import",Import);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Import.js

@@ -29,14 +29,18 @@ export default class Import extends LightComponent {
 	*/
 	updated(changedProperties){
 		super.updated(); // Important: call super for LightComponent
-		
+
 		if(changedProperties.has('src')){
+			if(changedProperties.get('src') !== undefined || this.src !== '')
+				this.dispatchEvent(new CustomEvent('src-change', { detail: { src: this.src }, bubbles: true, composed: true }));
 			this.fetch();
 		}
-		
-		if(changedProperties.has('content') && this.scripts.length > 0){
-			// Execute scripts after DOM content is rendered
-			setTimeout(() => this.executeScripts(), 0);
+
+		if(changedProperties.has('content') && this.content){
+			setTimeout(() => {
+				if(this.scripts.length > 0) this.executeScripts();
+				this.dispatchEvent(new CustomEvent('content-rendered', { bubbles: true, composed: true }));
+			}, 0);
 		}
 	}
 
@@ -44,7 +48,11 @@ export default class Import extends LightComponent {
 		Methods
 	*/
 	async fetch(){
-		let contents = await (await fetch(this.src)).text();
+		if(!this.src) return;
+		this.dispatchEvent(new CustomEvent('fetch-start', { detail: { src: this.src }, bubbles: true, composed: true }));
+		const response = await fetch(this.src);
+		this.dispatchEvent(new CustomEvent('fetch-response', { detail: { src: this.src, status: response.status }, bubbles: true, composed: true }));
+		let contents = await response.text();
 		for (const [name, value] of Object.entries(Import.replacements)) {
 			contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
 		}
@@ -82,7 +90,7 @@ export default class Import extends LightComponent {
 			// Append to head to execute
 			document.head.appendChild(scriptElement);
 		});
-		
+
 		// Clear scripts after execution to avoid re-execution
 		this.scripts = [];
 	}

package/tests/components/Import.browser-test.js

@@ -308,5 +308,217 @@ export default {
 		// LightComponent sets display: contents
 		cleanup(container);
 		pass('Import has appropriate display');
+	},
+
+	/*
+		Event Tests
+	*/
+	'should not dispatch src-change event on initialization with empty src': async ({pass, fail}) => {
+		let eventFired = false;
+		const container = document.createElement('div');
+		const importEl = document.createElement('k-import');
+		importEl.addEventListener('src-change', () => { eventFired = true; });
+		container.appendChild(importEl);
+		document.body.appendChild(container);
+		await importEl.updateComplete;
+
+		if(eventFired){
+			cleanup(container);
+			return fail('src-change should not fire during initialization with empty src');
+		}
+		cleanup(container);
+		pass('src-change not fired on initialization with empty src');
+	},
+
+	'should dispatch src-change event when src is set': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let eventFired = false;
+		let eventDetail = null;
+		importEl.addEventListener('src-change', e => {
+			eventFired = true;
+			eventDetail = e.detail;
+		});
+
+		importEl.src = '/some-file.html';
+		await importEl.updateComplete;
+
+		if(!eventFired){
+			cleanup(container);
+			return fail('src-change event should be fired when src changes');
+		}
+		if(eventDetail.src !== '/some-file.html'){
+			cleanup(container);
+			return fail(`Expected detail.src "/some-file.html", got "${eventDetail.src}"`);
+		}
+		cleanup(container);
+		pass('src-change event dispatched with correct detail');
+	},
+
+	'src-change event should bubble': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let bubbled = false;
+		container.addEventListener('src-change', () => { bubbled = true; });
+
+		importEl.src = '/bubble-test.html';
+		await importEl.updateComplete;
+
+		if(!bubbled){
+			cleanup(container);
+			return fail('src-change event should bubble');
+		}
+		cleanup(container);
+		pass('src-change event bubbles');
+	},
+
+	'should dispatch fetch-start event when fetch begins': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		let fetchStartFired = false;
+		let fetchStartDetail = null;
+
+		importEl.addEventListener('fetch-start', e => {
+			fetchStartFired = true;
+			fetchStartDetail = e.detail;
+		});
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>test</p>') });
+
+		importEl.src = '/mock-file.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		window.fetch = originalFetch;
+
+		if(!fetchStartFired){
+			cleanup(container);
+			return fail('fetch-start event should be fired');
+		}
+		if(fetchStartDetail.src !== '/mock-file.html'){
+			cleanup(container);
+			return fail(`Expected detail.src "/mock-file.html", got "${fetchStartDetail.src}"`);
+		}
+		cleanup(container);
+		pass('fetch-start event dispatched with correct detail');
+	},
+
+	'should dispatch fetch-response event after response is received': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		let fetchResponseFired = false;
+		let fetchResponseDetail = null;
+
+		importEl.addEventListener('fetch-response', e => {
+			fetchResponseFired = true;
+			fetchResponseDetail = e.detail;
+		});
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>test</p>') });
+
+		importEl.src = '/mock-file.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		window.fetch = originalFetch;
+
+		if(!fetchResponseFired){
+			cleanup(container);
+			return fail('fetch-response event should be fired');
+		}
+		if(fetchResponseDetail.src !== '/mock-file.html'){
+			cleanup(container);
+			return fail(`Expected detail.src "/mock-file.html", got "${fetchResponseDetail.src}"`);
+		}
+		if(fetchResponseDetail.status !== 200){
+			cleanup(container);
+			return fail(`Expected detail.status 200, got ${fetchResponseDetail.status}`);
+		}
+		cleanup(container);
+		pass('fetch-response event dispatched with correct detail');
+	},
+
+	'fetch-start should fire before fetch-response': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		const order = [];
+
+		importEl.addEventListener('fetch-start', () => order.push('fetch-start'));
+		importEl.addEventListener('fetch-response', () => order.push('fetch-response'));
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>test</p>') });
+
+		importEl.src = '/mock-file.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		window.fetch = originalFetch;
+
+		if(order[0] !== 'fetch-start' || order[1] !== 'fetch-response'){
+			cleanup(container);
+			return fail(`Expected [fetch-start, fetch-response], got [${order.join(', ')}]`);
+		}
+		cleanup(container);
+		pass('fetch-start fires before fetch-response');
+	},
+
+	'should dispatch content-rendered event after content is set': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let eventFired = false;
+
+		importEl.addEventListener('content-rendered', () => { eventFired = true; });
+
+		importEl.content = '<p>rendered content</p>';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		if(!eventFired){
+			cleanup(container);
+			return fail('content-rendered event should be fired after content changes');
+		}
+		cleanup(container);
+		pass('content-rendered event dispatched after content is set');
+	},
+
+	'content-rendered event should bubble': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let bubbled = false;
+		container.addEventListener('content-rendered', () => { bubbled = true; });
+
+		importEl.content = '<p>bubble test</p>';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		if(!bubbled){
+			cleanup(container);
+			return fail('content-rendered event should bubble');
+		}
+		cleanup(container);
+		pass('content-rendered event bubbles');
+	},
+
+	'should dispatch all four events in order during a full fetch cycle': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		const order = [];
+
+		importEl.addEventListener('src-change', () => order.push('src-change'));
+		importEl.addEventListener('fetch-start', () => order.push('fetch-start'));
+		importEl.addEventListener('fetch-response', () => order.push('fetch-response'));
+		importEl.addEventListener('content-rendered', () => order.push('content-rendered'));
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>full cycle</p>') });
+
+		importEl.src = '/full-cycle.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 100));
+
+		window.fetch = originalFetch;
+
+		const expected = ['src-change', 'fetch-start', 'fetch-response', 'content-rendered'];
+		if(JSON.stringify(order) !== JSON.stringify(expected)){
+			cleanup(container);
+			return fail(`Expected [${expected.join(', ')}], got [${order.join(', ')}]`);
+		}
+		cleanup(container);
+		pass('All four events fire in correct order');
 	}
 };