diff --git a/demo/hydratable.html b/demo/hydratable.html index 51c5363..1e3ca46 100644 --- a/demo/hydratable.html +++ b/demo/hydratable.html @@ -24,8 +24,8 @@ CSS (for better code splitting) and restoring interactivity once assets have loaded. --> -

Module with Hydration

+

Module with Hydration

About this demo

Built with es format and included via <script type="module"> with @@ -39,24 +39,85 @@ the page. Interactivity is then restored to those components once modules (which are always deferred) have finished loading.

-

Performance

You can compare performance in each demo by opening DevTools, disabling cache, and then enabling network throttling - (e.g. try "Fast 3G").

Features

This demo is implemented entirely using Svelte and placed in the page as custom elements (a.k.a. "web components") - using svelte-retag. It demonstrates:

  • Slots (default and named slots)
  • Nesting within slots
  • The differences between deferred Modules and IIFE, particularly with regard to CLS (Content - Layout Shift)
  • Vite HMR updates (if launched locally)
  • SSR/SSG + hydration (experimental)

Note that each counter below takes an initial count attribute with an award value, at which - point a ๐ŸŽ‰ emoji is first displayed (with randomized emojis after that). Press + or - keys on - your keyboard to quickly increase/decrease the count.

 + -

Default: Count starts at 0, award at 100.

 + +
+
+ + +
-

Start out just 1 click away from the "award".

 + +
+

View the + page + source ๐Ÿš€. This demo is implemented entirely using via svelte-retag with all Svelte components + organized on the page using custom elements (or โ€œweb componentsโ€). Featuring:

  • Slots (default and named slots)
  • Nesting within slots
  • Context (including nested context, see โ€œExamplesโ€ tab)
  • Vite HMR updates (if launched locally)
  • SSR/SSG via hydration (experimental)

Performance

This demo also shows the differences between deferred Modules and IIFE, particularly with regard to CLS (Cumulative + Layout Shift). Use the Demos navigation above and compare each one by opening DevTools, disabling + cache, and then enabling network throttling (e.g. try "Fast 3G").

 +
-

1337 award

 -

Nested slot: "Total is"

 + +
+ + +
+ +
+ + +
+ + +
+

All element attributes in this particular demo are configured to be dynamic. Try editing the + pagetitle in <app-tag pagetitle="..."> above or any of the + count or award attributes in any of the <counter-tag> buttons below.

For example: Each counter below takes an initial count attribute with an award + value, at which point a ๐ŸŽ‰ emoji is first displayed (with randomized emojis after that). Press + or - + keys on your keyboard to quickly increase/decrease the count.

 + +

Default: count starts at 0, award at 100.

 + +

Start out just 1 click away from the award.

 + +

1337 award

 + +

Slot: "Total is"

 +
+ + +
+

Credit to AmirPournasserian + from + this StackOverflow post for the original .svelte components which were then converted to custom + elements using svelte-retag to help demonstrate context. These are implemented purely by arranging the + following tags using only HTML and can even be nested, just like in this demo!

<tabs-wrapper>
+  <tab-list>
+    <tab-button>Tab 1</tab-button>
+    <tab-button>Tab 2</tab-button>
+  </tab-list>
+
+  <tab-panel>
+    <!-- Content for Tab 1 -->
+  </tab-panel>
+
+  <tab-panel>
+    <!-- Content for Tab 2 -->
+  </tab-panel>
+</tabs-wrapper>
+

In this example, <tabs-wrapper> defines the shared context and <tab-button> + toggles between each <tab-panel> within that context.

 +
+
+ +
+ +
- diff --git a/demo/hydratable.source.html b/demo/hydratable.source.html index d44c6fd..1f72900 100644 --- 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 '
' element. 4. Paste into hydratable.html. @@ -40,25 +40,64 @@ deferred) have finished loading.

- -

Default: Count starts at 0, award at 100.

- - - - -

Start out just 1 click away from the "award".

- - - - -

1337 award

- - - - -

Nested slot: "Total is"

- Total is - + + + + Features + Examples + + + + + + + + + + + + + + + + Slots and Attributes + Nested Context Support + + + + + + + +

Default: count starts at 0, award at 100.

+ + + + +

Start out just 1 click away from the award.

+ + + + +

1337 award

+ + + + +

Slot: "Total is"

+ Total is + + + + + + + + + + + + diff --git a/demo/iife.html b/demo/iife.html index a9b5005..5c46f9c 100644 --- a/demo/iife.html +++ b/demo/iife.html @@ -17,7 +17,7 @@
- + @@ -25,25 +25,64 @@

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).

 - -

Default: Count starts at 0, award at 100.

- - - - -

Start out just 1 click away from the "award".

- - - - -

1337 award

- - - - -

Nested slot: "Total is"

- Total is - + + + + Features + Examples + + + + + + + + + + + + + + + + Slots and Attributes + Nested Context Support + + + + + + + +

Default: count starts at 0, award at 100.

+ + + + +

Start out just 1 click away from the award.

+ + + + +

1337 award

+ + + + +

Slot: "Total is"

+ Total is + + + + + + + + + + + + diff --git a/demo/index.html b/demo/index.html index c704af5..dd8445b 100644 --- a/demo/index.html +++ b/demo/index.html @@ -18,25 +18,64 @@

Built with es format and included via <script type="module">.

- -

Default: Count starts at 0, award at 100.

- - - - -

Start out just 1 click away from the "award".

- - - - -

1337 award

- - - - -

Nested slot: "Total is"

- Total is - + + + + Features + Examples + + + + + + + + + + + + + + + + Slots and Attributes + Nested Context Support + + + + + + + +

Default: count starts at 0, award at 100.

+ + + + +

Start out just 1 click away from the award.

+ + + + +

1337 award

+ + + + +

Slot: "Total is"

+ Total is + + + + + + + + + + + + diff --git a/demo/src/App.svelte b/demo/src/App.svelte index 1552372..4ed44a1 100644 --- a/demo/src/App.svelte +++ b/demo/src/App.svelte @@ -23,6 +23,7 @@ ]; +
+ diff --git a/demo/src/app.css b/demo/src/app.css index 39bf850..ce43e90 100644 --- a/demo/src/app.css +++ b/demo/src/app.css @@ -79,7 +79,7 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } -code { +code, pre { background: var(--light-gray); padding: 2px 4px; border: 1px solid #ccc; diff --git a/demo/src/lib/Example.svelte b/demo/src/lib/ExampleTag.svelte similarity index 100% rename from demo/src/lib/Example.svelte rename to demo/src/lib/ExampleTag.svelte diff --git a/demo/src/lib/ExamplesInfo.svelte b/demo/src/lib/ExamplesInfo.svelte new file mode 100644 index 0000000..9ea953c --- /dev/null +++ b/demo/src/lib/ExamplesInfo.svelte @@ -0,0 +1,6 @@ +

All element attributes in this particular demo are configured to be dynamic. Try editing the + pagetitle in <app-tag pagetitle="..."> above or any of the + count or award attributes in any of the <counter-tag> buttons below.

+

For example: Each counter below takes an initial count attribute with an award + value, at which point a ๐ŸŽ‰ emoji is first displayed (with randomized emojis after that). Press + or - + keys on your keyboard to quickly increase/decrease the count.

diff --git a/demo/src/lib/FeaturesInfo.svelte b/demo/src/lib/FeaturesInfo.svelte new file mode 100644 index 0000000..093d0f8 --- /dev/null +++ b/demo/src/lib/FeaturesInfo.svelte @@ -0,0 +1,16 @@ +

View the + page + source ๐Ÿš€. This demo is implemented entirely using via svelte-retag with all Svelte components + organized on the page using custom elements (or “web components”). Featuring:

+
    +
  • Slots (default and named slots)
    • +
  • Nesting within slots
    • +
  • Context (including nested context, see “Examples” tab)
    • +
  • Vite HMR updates (if launched locally)
    • +
  • SSR/SSG via hydration (experimental)
    • +
+ +

Performance

+

This demo also shows the differences between deferred Modules and IIFE, particularly with regard to CLS (Cumulative + Layout Shift). Use the Demos navigation above and compare each one by opening DevTools, disabling + cache, and then enabling network throttling (e.g. try "Fast 3G").

diff --git a/demo/src/lib/Intro.svelte b/demo/src/lib/Intro.svelte index 6b2594f..7828318 100644 --- a/demo/src/lib/Intro.svelte +++ b/demo/src/lib/Intro.svelte @@ -1,26 +1,3 @@

About this demo

- - -

Performance

-

You can compare performance in each demo by opening DevTools, disabling cache, and then enabling network throttling - (e.g. try "Fast 3G"). -

- -

Features

-

This demo is implemented entirely using Svelte and placed in the page as custom elements (a.k.a. "web components") - using svelte-retag. It demonstrates:

-
    -
  • Slots (default and named slots)
    • -
  • Nesting within slots
    • -
  • The differences between deferred Modules and IIFE, particularly with regard to CLS (Content - Layout Shift) -
    • -
  • Vite HMR updates (if launched locally)
    • -
  • SSR/SSG + hydration (experimental)
    • -
- -

Note that each counter below takes an initial count attribute with an award value, at which - point a ๐ŸŽ‰ emoji is first displayed (with randomized emojis after that). Press + or - keys on - your keyboard to quickly increase/decrease the count.

diff --git a/demo/src/lib/TabsInfo.svelte b/demo/src/lib/TabsInfo.svelte new file mode 100644 index 0000000..743381a --- /dev/null +++ b/demo/src/lib/TabsInfo.svelte @@ -0,0 +1,27 @@ +

Credit to AmirPournasserian + from + + this StackOverflow post for the original .svelte components which were then converted to custom + elements using svelte-retag to help demonstrate context. These are implemented purely by arranging the + following tags using only HTML and can even be nested, just like in this demo!

+ +
+<tabs-wrapper>
+  <tab-list>
+    <tab-button>Tab 1</tab-button>
+    <tab-button>Tab 2</tab-button>
+  </tab-list>
+
+  <tab-panel>
+    <!-- Content for Tab 1 -->
+  </tab-panel>
+
+  <tab-panel>
+    <!-- Content for Tab 2 -->
+  </tab-panel>
+</tabs-wrapper>
+
+ +

In this example, <tabs-wrapper> defines the shared context and <tab-button> + toggles between each <tab-panel> within that context.

+

diff --git a/demo/src/lib/tabs/TabList.svelte b/demo/src/lib/tabs/TabList.svelte index b0af9c8..f79572e 100644 --- a/demo/src/lib/tabs/TabList.svelte +++ b/demo/src/lib/tabs/TabList.svelte @@ -5,5 +5,6 @@ diff --git a/demo/src/main.js b/demo/src/main.js index 91d1750..f826466 100644 --- a/demo/src/main.js +++ b/demo/src/main.js @@ -4,11 +4,30 @@ import './app.css'; import App from './App.svelte'; import Intro from './lib/Intro.svelte'; import Counter from './lib/Counter.svelte'; -import Example from './lib/Example.svelte'; +import ExampleTag from './lib/ExampleTag.svelte'; +import { TabsWrapper, TabList, TabPanel, TabButton } from './lib/tabs'; +import TabsDemo from './lib/TabsDemo.svelte'; +import KeyFeatures from './lib/FeaturesInfo.svelte'; +import ExamplesInfo from './lib/ExamplesInfo.svelte'; +import TabsInfo from './lib/TabsInfo.svelte'; + +/** + * Query string control for testing. + */ const params = new URLSearchParams(location.search); const debugMode = !!params.get('debug'); const hydratable = !!params.get('hydratable'); +const shadow = !!params.get('shadow'); +const shadowStylesheet = ''; // TODO: ISSUE-6: Find good solution for defining this. For now, hack is to inject style[data-vite-dev-id] into shadowRoot. + + +/** + * The definitions below are intentionally redundant and kept simple just to demonstrate syntax. + * + * This could easily be consolidated by wrapping your own wrapper function. For example, I might normally wrap this in + * a function like "defineTag(component, tag, attribs)". + */ svelteRetag({ component: App, @@ -16,6 +35,8 @@ svelteRetag({ attributes: ['pagetitle'], debugMode, hydratable, + shadow, + href: shadowStylesheet, }); svelteRetag({ @@ -23,44 +44,55 @@ svelteRetag({ tagname: 'intro-tag', debugMode, hydratable, + shadow, + href: shadowStylesheet, }); svelteRetag({ - component: Counter, - tagname: 'counter-tag', + component: KeyFeatures, + tagname: 'features-info', debugMode, hydratable, + shadow, + href: shadowStylesheet, }); svelteRetag({ - component: Example, - tagname: 'example-tag', + component: ExamplesInfo, + tagname: 'examples-info', debugMode, hydratable, + shadow, + href: shadowStylesheet, }); - -/** - * TabsWrapper.svelte for testing context - * - * TODO: ISSUE-10: WIP - */ - -import TabsDemo from './lib/TabsDemo.svelte'; -import { TabsWrapper, TabList, TabPanel, TabButton } from './lib/tabs'; - -const shadow = !!params.get('shadow'); -const shadowStylesheet = ''; // TODO: ISSUE-6: Find good solution for defining this. For now, hack is to inject style[data-vite-dev-id] into shadowRoot. - svelteRetag({ - component: TabsDemo, - tagname: 'tabs-demo', + component: TabsInfo, + tagname: 'tabs-info', + debugMode, hydratable, + shadow, + href: shadowStylesheet, +}); + +svelteRetag({ + component: Counter, + tagname: 'counter-tag', + attributes: ['count', 'award'], debugMode, + hydratable, shadow, href: shadowStylesheet, }); +svelteRetag({ + component: ExampleTag, + tagname: 'example-tag', + debugMode, + hydratable, + shadow, + href: shadowStylesheet, +}); svelteRetag({ component: TabPanel, @@ -71,6 +103,7 @@ svelteRetag({ href: shadowStylesheet, }); + svelteRetag({ component: TabButton, tagname: 'tab-button', @@ -97,3 +130,18 @@ svelteRetag({ shadow, href: shadowStylesheet, }); + + +/** + * Note: This is here for local testing and debugging only. This is just a demonstration of pure svelte-only context + * (without maintaining that context through svelte-retag). + */ + +svelteRetag({ + component: TabsDemo, + tagname: 'tabs-demo', + hydratable, + debugMode, + shadow, + href: shadowStylesheet, +}); diff --git a/demo/tabs.html b/demo/tabs.html deleted file mode 100644 index e6a73a3..0000000 --- a/demo/tabs.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - svelte-retag demo (tabs demo) - - - - -
-

Tabs demo

-

Credit to - AmirPournasserian - from - - this StackOverflow post for the tab components.

- - - - - - - - one - two - three - - - - - - - - nested one - nested two - - - -

First nested panel

- - - -

Second nested panel

- - - - - - - - -

Second panel

- - - - -

Third panel

- - - - - -
- - diff --git a/demo/vite.config.js b/demo/vite.config.js index 4b0ea47..64e5fd2 100644 --- a/demo/vite.config.js +++ b/demo/vite.config.js @@ -24,7 +24,6 @@ export default defineConfig({ 'index.html', 'hydratable.html', 'hydratable.source.html', // Used for generating content in hydratable.html above. - 'tabs.html', ], output: {