@zeix/le-truc 0.15.0

package/examples/module-lazyload/mocks/nested-components.html

@@ -0,0 +1,52 @@
+<h3>Nested Components</h3>
+<p>
+	This snippet contains nested custom components to test initialization order:
+</p>
+
+<card-callout>
+	<h4>Nested Card</h4>
+	<p>
+		This is a card-callout component nested inside the lazy-loaded content.
+	</p>
+
+	<basic-counter class="counter">
+		<button type="button">💐 <span class="value">42</span></button>
+	</basic-counter>
+</card-callout>
+
+<basic-hello>
+	<label for="name">Your name</label>
+	<input id="name" name="name" type="text" autocomplete="given-name" />
+	<p>Hello, <output for="name">World</output>!</p>
+</basic-hello>
+
+<style>
+	.counter {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0.5rem 0;
+	}
+
+	.counter button {
+		background: #3b82f6;
+		color: white;
+		border: none;
+		border-radius: 0.25rem;
+		height: 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+	}
+
+	.counter button:hover {
+		background: #2563eb;
+	}
+
+	.counter .value {
+		font-weight: 600;
+		min-width: 2rem;
+		text-align: center;
+	}
+</style>

package/examples/module-lazyload/mocks/recursive.html

@@ -0,0 +1,20 @@
+<h3>Recursive Content Test</h3>
+<p>
+	This snippet attempts to create recursive loading by including another
+	module-lazyload:
+</p>
+
+<module-lazyload src="/module-lazyload/recursive.html">
+	<card-callout>
+		<p class="loading" role="status">
+			This should not load due to recursion protection...
+		</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<p>
+	The above nested module-lazyload should show an error instead of loading
+	content.
+</p>

package/examples/module-lazyload/mocks/simple-text.html

@@ -0,0 +1,3 @@
+<h3>Simple Text Content</h3>
+<p>This is a simple text snippet loaded via module-lazyload.</p>
+<p>It contains basic HTML content without any custom components.</p>

package/examples/module-lazyload/mocks/snippet.html

@@ -0,0 +1,57 @@
+<h2>Lazy Loaded</h2>
+<p>I come from the server and I bring an additional web component:</p>
+<style>
+	shake-hands {
+		display: inline-block;
+
+		& button {
+			display: flex;
+			flex-direction: row;
+			gap: var(--space-s);
+			border: 1px solid var(--color-orange-50);
+			border-radius: var(--space-xs);
+			background-color: var(--color-orange-20);
+			color: var(--color-text);
+			padding: var(--space-xs) var(--space-s);
+			cursor: pointer;
+			font-size: var(--font-size-m);
+			line-height: var(--line-height-xs);
+			transition: transform var(--transition-short) var(--easing-inout);
+
+			&:hover {
+				background-color: var(--color-orange-30);
+			}
+
+			&:active {
+				background-color: var(--color-orange-40);
+
+				.emoji {
+					transform: scale(1.1);
+				}
+			}
+		}
+	}
+</style>
+<shake-hands aria-label="shake hands">
+	<button type="button">
+		<span class="emoji">🫱🏼‍🫲🏾</span>
+		<span class="count">42</span>
+	</button>
+</shake-hands>
+<script>
+	customElements.get('shake-hands')
+		|| customElements.define(
+			'shake-hands',
+			class extends HTMLElement {
+				connectedCallback() {
+					const countEl = this.querySelector('.count')
+					let count = parseInt(countEl.textContent, 10)
+
+					this.querySelector('button').onclick = () => {
+						count++
+						countEl.textContent = count
+					}
+				}
+			},
+		)
+</script>

package/examples/module-lazyload/mocks/with-styles.html

@@ -0,0 +1,39 @@
+<style>
+	.styled-content {
+		background: linear-gradient(135deg, #fef3c7, #fcd34d);
+		border: 2px solid #f59e0b;
+		border-radius: 0.5rem;
+		padding: 1rem;
+		margin: 0.5rem 0;
+	}
+
+	.styled-title {
+		color: #92400e;
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: 0 0 0.5rem 0;
+	}
+
+	.styled-text {
+		color: #374151;
+		line-height: 1.5;
+		margin: 0;
+	}
+
+	.highlight {
+		background-color: #fbbf24;
+		padding: 0 0.25rem;
+		border-radius: 0.25rem;
+	}
+</style>
+
+<div class="styled-content">
+	<h3 class="styled-title">Styled Content</h3>
+	<p class="styled-text">
+		This snippet includes <span class="highlight">custom CSS styles</span>
+		that should be applied when the content is loaded.
+	</p>
+	<p class="styled-text">
+		The styles use CSS custom properties from the design system.
+	</p>
+</div>

package/examples/module-lazyload/module-lazyload.html

@@ -0,0 +1,132 @@
+<!-- Default example - tests basic loading functionality -->
+<module-lazyload src="/module-lazyload/mocks/simple-text.html">
+	<card-callout>
+		<p class="loading" role="status">Loading...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Complex content test - tests loading of components and styles -->
+<module-lazyload
+	id="complex-content-test"
+	src="/module-lazyload/with-styles.html"
+>
+	<card-callout>
+		<p class="loading" role="status">Loading styled content...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Nested components test - tests initialization of nested custom components -->
+<module-lazyload
+	id="nested-components-test"
+	src="/module-lazyload/mocks/nested-components.html"
+>
+	<card-callout>
+		<p class="loading" role="status">Loading nested components...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Empty content test - tests handling of empty/whitespace responses -->
+<module-lazyload
+	id="empty-content-test"
+	src="/module-lazyload/mocks/empty.html"
+>
+	<card-callout>
+		<p class="loading" role="status">Loading empty content...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Original complex snippet test - tests the existing shake-hands component -->
+<module-lazyload
+	id="original-snippet-test"
+	src="/module-lazyload/mocks/snippet.html"
+	allow-scripts
+>
+	<template shadowrootmode="open">
+		<card-callout>
+			<p class="loading" role="status">Loading shake-hands...</p>
+			<p class="error" role="alert" aria-live="assertive" hidden></p>
+		</card-callout>
+		<div class="content" hidden>
+			<slot></slot>
+		</div>
+	</template>
+</module-lazyload>
+
+<!-- Invalid URL test - tests error handling for malformed URLs -->
+<module-lazyload id="invalid-url-test" src="not-a-valid-url">
+	<card-callout>
+		<p class="loading" role="status">Loading invalid URL...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- 404 error test - tests error handling for missing files -->
+<module-lazyload
+	id="not-found-test"
+	src="/module-lazyload/mocks/does-not-exist.html"
+>
+	<card-callout>
+		<p class="loading" role="status">Loading non-existent file...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Cross-origin URL test - tests error handling for cross-origin requests -->
+<module-lazyload id="cross-origin-test" src="https://example.com/test.html">
+	<card-callout>
+		<p class="loading" role="status">Loading cross-origin...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- No src attribute test - tests handling when src is missing -->
+<module-lazyload id="no-src-test">
+	<card-callout>
+		<p class="loading" role="status">Loading without src...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Dynamic src test - tests programmatic src changes -->
+<module-lazyload id="dynamic-src-test">
+	<card-callout>
+		<p class="loading" role="status">Loading dynamic src...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Missing elements test - tests graceful handling when required elements are missing -->
+<module-lazyload
+	id="missing-elements-test"
+	src="/module-lazyload/simple-text.html"
+>
+	<!-- No card-callout wrapper -->
+	<p class="loading" role="status">Loading without wrapper...</p>
+	<p class="error" role="alert" aria-live="assertive" hidden></p>
+	<div class="content" hidden></div>
+</module-lazyload>
+
+<!-- Recursive loading test - tests prevention of recursive loading -->
+<module-lazyload
+	id="recursive-test"
+	src="/module-lazyload/mocks/recursive.html"
+>
+	<card-callout>
+		<p class="loading" role="status">Loading recursive content...</p>
+		<p class="error" role="alert" aria-live="assertive" hidden></p>
+	</card-callout>
+	<div class="content" hidden></div>
+</module-lazyload>