Issue #10: Completely rebuilt the demos to include tabs and demonstra…

…te context.
patricknelson · Oct 3, 2023 · 6170a6b · 6170a6b
1 parent 622c3f1
commit 6170a6b
Show file tree

Hide file tree

Showing 15 changed files with 381 additions and 184 deletions.
diff --git a/demo/hydratable.html b/demo/hydratable.html
@@ -24,8 +24,8 @@
 			CSS (for better code splitting) and restoring interactivity once assets have loaded.
 		-->
 
-		<app-tag pagetitle="Module with Hydration" page="hydratable" data-svelte-retag-hydratable=""><svelte-retag><main><div class="svelte-1sneid9"><a href="https://github.com/patricknelson/svelte-retag/" target="_blank" rel="noreferrer"><img src="/assets/svelte-retag.svg" class="logo svelte-1sneid9" alt="svelte-retag logo (link to GitHub repo)"></a></div> <nav class="svelte-1sneid9">Demos:
-			<ul class="svelte-1sneid9"><li class="svelte-1sneid9"><a href="index.html" class="svelte-1sneid9">Module</a></li><li class="svelte-1sneid9"><a href="hydratable.html" class="svelte-1sneid9 current">Module with Hydration</a></li><li class="svelte-1sneid9"><a href="iife.html" class="svelte-1sneid9">IIFE/UMD</a></li></ul></nav> <h1>Module with Hydration</h1> <svelte-retag-default>
+		<app-tag pagetitle="Module with Hydration" page="hydratable" data-svelte-retag-hydratable=""><svelte-retag><main class="svelte-694cvq"><div class="svelte-694cvq"><a href="https://github.com/patricknelson/svelte-retag/" target="_blank" rel="noreferrer"><img src="/assets/svelte-retag.svg" class="logo svelte-694cvq" alt="svelte-retag logo (link to GitHub repo)"></a></div> <nav class="svelte-694cvq">Demos:
+			<ul class="svelte-694cvq"><li class="svelte-694cvq"><a href="index.html" class="svelte-694cvq">Module</a></li><li class="svelte-694cvq"><a href="hydratable.html" class="svelte-694cvq current">Module with Hydration</a></li><li class="svelte-694cvq"><a href="iife.html" class="svelte-694cvq">IIFE/UMD</a></li></ul></nav> <h1>Module with Hydration</h1> <svelte-retag-default>
 
 			<intro-tag data-svelte-retag-hydratable=""><svelte-retag><h2>About this demo</h2> <svelte-retag-default>
 				<p>Built with <code>es</code> format and included via <code>&lt;script type="module"&gt;</code> with
@@ -39,24 +39,85 @@
 					the page. Interactivity is then restored to those components once modules (which are
 					<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes" target="_blank" rel="noopener">always
 						deferred</a>) have finished loading.</p>
-			</svelte-retag-default> <h2>Performance</h2> <p>You can compare performance in each demo by opening DevTools, disabling cache, and then enabling network throttling
-				(e.g. try "Fast 3G").</p> <h2>Features</h2> <p>This demo is implemented entirely using Svelte and placed in the page as custom elements (a.k.a. "web components")
-				using <code>svelte-retag</code>. It demonstrates:</p> <ul><li>Slots (default and named slots)</li> <li>Nesting within slots</li> <li>The differences between deferred Modules and IIFE, particularly with regard to CLS (Content
-				Layout Shift)</li> <li>Vite HMR updates (if launched locally)</li> <li>SSR/SSG + hydration <em>(experimental)</em></li></ul> <p>Note that each counter below takes an initial <code>count</code> attribute with an <code>award</code> value, at which
-				point a 🎉 emoji is first displayed (with randomized emojis after that). Press <code>+</code> or <code>-</code> keys on
-				your keyboard to quickly increase/decrease the count.</p></svelte-retag></intro-tag>
+			</svelte-retag-default></svelte-retag></intro-tag>
 
-			<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">Default: Count starts at 0, award at 100.</p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-1cko5ar"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-1cko5ar"> Count is 0 </button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
+			<!-- Top level context (starts at tabs-wrapper) -->
+			<tabs-wrapper data-svelte-retag-hydratable=""><svelte-retag><div class="tabs"><svelte-retag-default>
+				<tab-list data-svelte-retag-hydratable=""><svelte-retag><div class="tab-list svelte-17j5wzr"><svelte-retag-default>
+					<tab-button data-svelte-retag-hydratable=""><svelte-retag><button class="svelte-11iebyy selected"><span class="svelte-11iebyy"><svelte-retag-default>Features</svelte-retag-default></span></button></svelte-retag></tab-button>
+					<tab-button data-svelte-retag-hydratable=""><svelte-retag><button class="svelte-11iebyy"><span class="svelte-11iebyy"><svelte-retag-default>Examples</svelte-retag-default></span></button></svelte-retag></tab-button>
+				</svelte-retag-default></div></svelte-retag></tab-list>
 
-			<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">Start out just 1 click away from the "award".</p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" count="99" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-1cko5ar"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-1cko5ar"> Count is 99 </button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
+				<!-- Features -->
+				<tab-panel data-svelte-retag-hydratable=""><svelte-retag><div class="svelte-1xkiur0 active"><svelte-retag-default>
+					<features-info data-svelte-retag-hydratable=""><svelte-retag><p>View the
+						<a href="https://github.com/patricknelson/svelte-retag/blob/main/demo/index.html" target="_blank" rel="noopener">page
+							source 🚀</a>. This demo is implemented entirely using via <code>svelte-retag</code> with all Svelte components
+						organized on the page using custom elements (or “web components”). Featuring:</p> <ul><li><strong>Slots</strong> (default and named slots)</li> <li><strong>Nesting</strong> within slots</li> <li><strong>Context</strong> (including nested context, see “Examples” tab)</li> <li><strong>Vite HMR updates</strong> (if launched locally)</li> <li>SSR/SSG via <strong>hydration</strong> <em>(experimental)</em></li></ul> <h3>Performance</h3> <p>This demo also shows the differences between deferred Modules and IIFE, particularly with regard to CLS (Cumulative
+						Layout Shift). Use the <strong>Demos</strong> navigation above and compare each one by opening DevTools, disabling
+						cache, and then enabling network throttling (e.g. try "Fast 3G").</p></svelte-retag></features-info>
+				</svelte-retag-default></div></svelte-retag></tab-panel>
 
-			<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">1337 award</p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" count="1337" award="1337" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-1cko5ar"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-1cko5ar"> Count is 1337 🎉</button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
 
-			<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">Nested slot: "Total is"</p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-1cko5ar"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-1cko5ar"> <svelte-retag-default>Total is</svelte-retag-default> 0 </button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
+				<!-- Examples -->
+				<tab-panel data-svelte-retag-hydratable=""><svelte-retag><div class="svelte-1xkiur0"><svelte-retag-default>
+
+					<!-- Nested context -->
+					<tabs-wrapper data-svelte-retag-hydratable=""><svelte-retag><div class="tabs"><svelte-retag-default>
+
+						<tab-list data-svelte-retag-hydratable=""><svelte-retag><div class="tab-list svelte-17j5wzr"><svelte-retag-default>
+							<tab-button data-svelte-retag-hydratable=""><svelte-retag><button class="svelte-11iebyy selected"><span class="svelte-11iebyy"><svelte-retag-default>Slots and Attributes</svelte-retag-default></span></button></svelte-retag></tab-button>
+							<tab-button data-svelte-retag-hydratable=""><svelte-retag><button class="svelte-11iebyy"><span class="svelte-11iebyy"><svelte-retag-default>Nested Context Support</svelte-retag-default></span></button></svelte-retag></tab-button>
+						</svelte-retag-default></div></svelte-retag></tab-list>
+
+						<!-- Slots and Attributes -->
+						<tab-panel data-svelte-retag-hydratable=""><svelte-retag><div class="svelte-1xkiur0 active"><svelte-retag-default>
+							<examples-info data-svelte-retag-hydratable=""><svelte-retag><p>All element attributes in <em>this particular</em> demo are configured to be dynamic. Try editing the
+								<code>pagetitle</code> in <code>&lt;app-tag pagetitle="..."&gt;</code> above or any of the
+								<code>count</code> or <code>award</code> attributes in any of the <code>&lt;counter-tag&gt;</code> buttons below.</p> <p>For example: Each counter below takes an initial <code>count</code> attribute with an <code>award</code>
+								value, at which point a 🎉 emoji is first displayed (with randomized emojis after that). Press <code>+</code> or <code>-</code>
+								keys on your keyboard to quickly increase/decrease the count.</p></svelte-retag></examples-info>
+
+							<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">Default: <code>count</code> starts at 0, <code>award</code> at 100.</p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-14anzuk"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-14anzuk"> Count is 0 </button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
+
+							<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">Start out just 1 click away from the <code>award</code>.</p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" count="99" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-14anzuk"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-14anzuk"> Count is 99 </button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
+
+							<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">1337 <code>award</code></p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" count="1337" award="1337" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-14anzuk"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-14anzuk"> Count is 1337 🎉</button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
+
+							<example-tag data-svelte-retag-hydratable=""><svelte-retag><div class="wrapper svelte-15rtm5g"><div class="title svelte-15rtm5g"><p slot="title" data-svelte-retag-slot="">Slot: "Total is"</p></div> <div class="content svelte-15rtm5g"><counter-tag slot="content" data-svelte-retag-slot="" data-svelte-retag-hydratable=""><svelte-retag><button title="Tip: Press + or - while focused on this button." class="svelte-14anzuk"><img src="/assets/svelte.svg" alt="svelte logo" class="svelte-14anzuk"> <svelte-retag-default>Total is</svelte-retag-default> 0 </button></svelte-retag></counter-tag></div></div></svelte-retag></example-tag>
+						</svelte-retag-default></div></svelte-retag></tab-panel>
+
+						<!-- Nested Context Support -->
+						<tab-panel data-svelte-retag-hydratable=""><svelte-retag><div class="svelte-1xkiur0"><svelte-retag-default>
+							<tabs-info data-svelte-retag-hydratable=""><svelte-retag><p>Credit to <a href="https://stackoverflow.com/users/1990514/amir-pournasserian" target="_blank" rel="noopener">AmirPournasserian</a>
+								from
+								<a href="https://stackoverflow.com/questions/75024281/how-to-avoid-overwriting-context-in-nested-components-like-tabs-in-svelte" target="_blank" rel="noopener">this StackOverflow post</a> for the original <code>.svelte</code> components which were then converted to custom
+								elements using <code>svelte-retag</code> to help demonstrate context. These are implemented purely by arranging the
+								following tags using only HTML and <em>can even be nested</em>, just like in this demo!</p> <pre>&lt;tabs-wrapper&gt;
+  &lt;tab-list&gt;
+    &lt;tab-button&gt;Tab 1&lt;/tab-button&gt;
+    &lt;tab-button&gt;Tab 2&lt;/tab-button&gt;
+  &lt;/tab-list&gt;
+
+  &lt;tab-panel&gt;
+    &lt;!-- Content for Tab 1 --&gt;
+  &lt;/tab-panel&gt;
+
+  &lt;tab-panel&gt;
+    &lt;!-- Content for Tab 2 --&gt;
+  &lt;/tab-panel&gt;
+&lt;/tabs-wrapper&gt;
+</pre> <p>In this example, <code>&lt;tabs-wrapper&gt;</code> defines the shared context and <code>&lt;tab-button&gt;</code>
+								toggles between each <code>&lt;tab-panel&gt;</code> within that context.</p> <p></p></svelte-retag></tabs-info>
+						</svelte-retag-default></div></svelte-retag></tab-panel>
+					</svelte-retag-default></div></svelte-retag></tabs-wrapper>
+
+				</svelte-retag-default></div></svelte-retag></tab-panel>
+
+			</svelte-retag-default></div></svelte-retag></tabs-wrapper>
 
 		</svelte-retag-default></main></svelte-retag></app-tag>
 
 	</div>
-
 </body>
 </html>
diff --git a/demo/hydratable.source.html b/demo/hydratable.source.html
@@ -15,7 +15,7 @@
 			NOTE: This is experimental. This demo was generated by:
 
 				1. Performing a build + preview (important to ensure asset references are accurate)
-				2. Navigate to this vile in the preview, ensuring you have "hydratable=1" in the query string, e.g.: http://localhost:4173/hydratable.source.html?hydratable=1
+				2. Navigate to this page in the preview, ensuring you have "hydratable=1" in the query string, e.g.: http://localhost:4173/hydratable.source.html?hydratable=1
 				3. Open DevTools and copy the full contents of everything at/under the '<div id="app">' element.
 				4. Paste into hydratable.html.
 
@@ -40,25 +40,64 @@
 						deferred</a>) have finished loading.</p>
 			</intro-tag>
 
-			<example-tag>
-				<p slot="title">Default: Count starts at 0, award at 100.</p>
-				<counter-tag slot="content"></counter-tag>
-			</example-tag>
-
-			<example-tag>
-				<p slot="title">Start out just 1 click away from the "award".</p>
-				<counter-tag slot="content" count="99"></counter-tag>
-			</example-tag>
-
-			<example-tag>
-				<p slot="title">1337 award</p>
-				<counter-tag slot="content" count="1337" award="1337"></counter-tag>
-			</example-tag>
-
-			<example-tag>
-				<p slot="title">Nested slot: "Total is"</p>
-				<counter-tag slot="content">Total is</counter-tag>
-			</example-tag>
+			<!-- Top level context (starts at tabs-wrapper) -->
+			<tabs-wrapper>
+				<tab-list>
+					<tab-button>Features</tab-button>
+					<tab-button>Examples</tab-button>
+				</tab-list>
+
+				<!-- Features -->
+				<tab-panel>
+					<features-info></features-info>
+				</tab-panel>
+
+
+				<!-- Examples -->
+				<tab-panel>
+
+					<!-- Nested context -->
+					<tabs-wrapper>
+
+						<tab-list>
+							<tab-button>Slots and Attributes</tab-button>
+							<tab-button>Nested Context Support</tab-button>
+						</tab-list>
+
+						<!-- Slots and Attributes -->
+						<tab-panel>
+							<examples-info></examples-info>
+
+							<example-tag>
+								<p slot="title">Default: <code>count</code> starts at 0, <code>award</code> at 100.</p>
+								<counter-tag slot="content"></counter-tag>
+							</example-tag>
+
+							<example-tag>
+								<p slot="title">Start out just 1 click away from the <code>award</code>.</p>
+								<counter-tag slot="content" count="99"></counter-tag>
+							</example-tag>
+
+							<example-tag>
+								<p slot="title">1337 <code>award</code></p>
+								<counter-tag slot="content" count="1337" award="1337"></counter-tag>
+							</example-tag>
+
+							<example-tag>
+								<p slot="title">Slot: "Total is"</p>
+								<counter-tag slot="content">Total is</counter-tag>
+							</example-tag>
+						</tab-panel>
+
+						<!-- Nested Context Support -->
+						<tab-panel>
+							<tabs-info></tabs-info>
+						</tab-panel>
+					</tabs-wrapper>
+
+				</tab-panel>
+
+			</tabs-wrapper>
 
 		</app-tag>
 

diff --git a/demo/iife.html b/demo/iife.html
@@ -17,33 +17,72 @@
 
 	<div id="app">
 
-		<!-- Go ahead and edit this title. Changes will be forwarded automatically. -->
+		<!-- Go ahead and edit this "pagetitle"! Changes will be forwarded to the "pageTitle" prop automatically. -->
 		<app-tag pagetitle="IIFE/UMD" page="iife">
 
 			<intro-tag>
 				<p>Built using <code>iife</code> format and included via standard <code>&lt;script&gt;</code> inside the <code>&lt;header&gt;</code> tag.</p>
 				<p>While this reduces cumulative layout shift (CLS), it is not conducive to code splitting and may generate a large bundle (thus taking longer to download and initialize).</p>
 			</intro-tag>
 
-			<example-tag>
-				<p slot="title">Default: Count starts at 0, award at 100.</p>
-				<counter-tag slot="content"></counter-tag>
-			</example-tag>
-
-			<example-tag>
-				<p slot="title">Start out just 1 click away from the "award".</p>
-				<counter-tag slot="content" count="99"></counter-tag>
-			</example-tag>
-
-			<example-tag>
-				<p slot="title">1337 award</p>
-				<counter-tag slot="content" count="1337" award="1337"></counter-tag>
-			</example-tag>
-
-			<example-tag>
-				<p slot="title">Nested slot: "Total is"</p>
-				<counter-tag slot="content">Total is</counter-tag>
-			</example-tag>
+			<!-- Top level context (starts at tabs-wrapper) -->
+			<tabs-wrapper>
+				<tab-list>
+					<tab-button>Features</tab-button>
+					<tab-button>Examples</tab-button>
+				</tab-list>
+
+				<!-- Features -->
+				<tab-panel>
+					<features-info></features-info>
+				</tab-panel>
+
+
+				<!-- Examples -->
+				<tab-panel>
+
+					<!-- Nested context -->
+					<tabs-wrapper>
+
+						<tab-list>
+							<tab-button>Slots and Attributes</tab-button>
+							<tab-button>Nested Context Support</tab-button>
+						</tab-list>
+
+						<!-- Slots and Attributes -->
+						<tab-panel>
+							<examples-info></examples-info>
+
+							<example-tag>
+								<p slot="title">Default: <code>count</code> starts at 0, <code>award</code> at 100.</p>
+								<counter-tag slot="content"></counter-tag>
+							</example-tag>
+
+							<example-tag>
+								<p slot="title">Start out just 1 click away from the <code>award</code>.</p>
+								<counter-tag slot="content" count="99"></counter-tag>
+							</example-tag>
+
+							<example-tag>
+								<p slot="title">1337 <code>award</code></p>
+								<counter-tag slot="content" count="1337" award="1337"></counter-tag>
+							</example-tag>
+
+							<example-tag>
+								<p slot="title">Slot: "Total is"</p>
+								<counter-tag slot="content">Total is</counter-tag>
+							</example-tag>
+						</tab-panel>
+
+						<!-- Nested Context Support -->
+						<tab-panel>
+							<tabs-info></tabs-info>
+						</tab-panel>
+					</tabs-wrapper>
+
+				</tab-panel>
+
+			</tabs-wrapper>
 
 		</app-tag>