Skip to content

Commit

Permalink
Prefetch
Browse files Browse the repository at this point in the history 
* adds prefetch element
  • Loading branch information
@rossrobino
rossrobino authored Feb 8, 2024
1 parent d08c324 commit c3636cd
Show file tree
Hide file tree
Showing 25 changed files with 1,193 additions and 379 deletions.
11 changes: 10 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "drab",
"description": "A headless custom element library",
"version": "5.1.0",
"version": "5.2.0",
"homepage": "https://drab.robino.dev",
"license": "MIT",
"author": {
Expand All @@ -20,6 +20,7 @@
"dialog",
"popover",
"tablesort",
"prefetch",
"copy",
"fullscreen",
"base",
Expand Down Expand Up @@ -111,6 +112,14 @@
"types": "./tablesort/define.d.ts",
"default": "./tablesort/define.js"
},
"./prefetch": {
"types": "./prefetch/index.d.ts",
"default": "./prefetch/index.js"
},
"./prefetch/define": {
"types": "./prefetch/define.d.ts",
"default": "./prefetch/define.js"
},
"./copy": {
"types": "./copy/index.d.ts",
"default": "./copy/index.js"
Expand Down
20 changes: 20 additions & 0 deletions src/docs/prefetch/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script type="module" src="/package/prefetch/define.ts"></script>

<drab-prefetch prerender>
<a data-trigger href="/">Hover to prefetch</a>
</drab-prefetch>

<!--
Alternatively, prefetch all links that with an href that starts with "/".
Wrap all of your anchors with the element and use a `trigger` selector.
-->
<!--
<drab-prefetch trigger="a[href^='/']">
...
<a href="/">Prefetch based on trigger selector</a>
...
</drab-prefetch>
-->

<!-- Prefetch a `url` without providing a trigger. -->
<!-- <drab-prefetch url="/"></drab-prefetch> -->
4 changes: 1 addition & 3 deletions src/layout.client.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
import { prefetch } from "domco";
import "./package/dialog/define";

prefetch({ prerender: true });
import "./package/prefetch/define";
152 changes: 78 additions & 74 deletions src/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,85 +12,89 @@
<body
class="prose prose-neutral max-w-none bg-background font-serif text-foreground prose-a:link selection:bg-foreground selection:text-background prose-headings:font-antique prose-h1:text-balance hover:prose-a:decoration-dotted prose-pre:-mx-6 prose-pre:rounded-none prose-pre:px-6 sm:prose-pre:mx-0 sm:prose-pre:rounded-md sm:prose-pre:px-4"
>
<div class="bg-background/40 lg:flex">
<header class="sticky top-0 z-10">
<nav
class="sticky top-0 hidden h-svh min-w-52 flex-col justify-between border-r bg-muted/70 lg:flex"
>
<ul class="my-0 list-none overflow-y-auto p-8">
<li class="m-0 p-0">
<h2 class="mb-4 mt-0">
<a class="font-extrabold !no-underline" href="/">drab</a>
</h2>
</li>
<nav-items></nav-items>
</ul>
<brand-links></brand-links>
</nav>
<nav
class="mb-6 flex items-center gap-4 bg-background/75 p-6 backdrop-blur-lg lg:hidden lg:w-[65ch]"
>
<drab-dialog
animation-keyframe-from-transform="translateX(-100%)"
animation-keyframe-to-transform="translateX(0)"
<drab-prefetch trigger="a[href^='/']" prerender class="contents">
<div class="bg-background/40 lg:flex">
<header class="sticky top-0 z-10">
<nav
class="sticky top-0 hidden h-svh min-w-52 flex-col justify-between border-r bg-muted/70 lg:flex"
>
<button
data-trigger
type="button"
class="button button-ghost button-icon"
>
<svg-icon icon="bars"></svg-icon>
</button>
<dialog
data-content
class="my-0 ml-0 min-h-screen backdrop:backdrop-blur"
<ul class="my-0 list-none overflow-y-auto p-8">
<li class="m-0 p-0">
<h2 class="mb-4 mt-0">
<a class="font-extrabold !no-underline" href="/">drab</a>
</h2>
</li>
<nav-items></nav-items>
</ul>
<brand-links></brand-links>
</nav>
<nav
class="mb-6 flex items-center gap-4 bg-background/75 p-6 backdrop-blur-lg lg:hidden lg:w-[65ch]"
>
<drab-dialog
animation-keyframe-from-transform="translateX(-100%)"
animation-keyframe-to-transform="translateX(0)"
>
<div
class="flex h-screen flex-col justify-between overflow-y-auto bg-card"
<button
data-trigger
type="button"
class="button button-ghost button-icon"
>
<svg-icon icon="bars"></svg-icon>
</button>
<dialog
data-content
class="my-0 ml-0 min-h-screen backdrop:backdrop-blur"
>
<div class="p-8">
<div class="flex items-center justify-between gap-4">
<h2 class="my-0">
<a class="font-extrabold !no-underline" href="/">
drab
</a>
</h2>
<button
data-trigger
type="button"
title="Close"
class="button button-ghost"
>
<svg-icon icon="close"></svg-icon>
</button>
<div
class="flex h-screen flex-col justify-between overflow-y-auto bg-card"
>
<div class="p-8">
<div class="flex items-center justify-between gap-4">
<h2 class="my-0">
<a class="font-extrabold !no-underline" href="/">
drab
</a>
</h2>
<button
data-trigger
type="button"
title="Close"
class="button button-ghost"
>
<svg-icon icon="close"></svg-icon>
</button>
</div>
<ul class="mb-8 w-48 list-none pl-0">
<nav-items></nav-items>
</ul>
</div>
<ul class="mb-8 w-48 list-none pl-0">
<nav-items></nav-items>
</ul>
<brand-links></brand-links>
</div>
<brand-links></brand-links>
</div>
</dialog>
</drab-dialog>
</dialog>
</drab-dialog>

<h2 class="my-0">
<a class="font-extrabold lowercase !no-underline" href="/">drab</a>
</h2>
</nav>
</header>
<main class="mb-16 lg:flex lg:basis-full lg:justify-center">
<article class="max-w-[80ch] p-6 lg:px-10">
<slot></slot>
</article>
<on-this-page class="prose-sm hidden xl:block">
<div
class="scrollbar-none sticky top-0 max-h-screen overflow-y-auto px-10 pt-8"
>
<h2 class="mb-4 mt-0">On this page</h2>
<ul class="p-0"></ul>
</div>
</on-this-page>
</main>
</div>
<h2 class="my-0">
<a class="font-extrabold lowercase !no-underline" href="/"
>drab</a
>
</h2>
</nav>
</header>
<main class="mb-16 lg:flex lg:basis-full lg:justify-center">
<article class="max-w-[80ch] p-6 lg:px-10">
<slot></slot>
</article>
<on-this-page class="prose-sm hidden xl:block">
<div
class="scrollbar-none sticky top-0 max-h-screen overflow-y-auto px-10 pt-8"
>
<h2 class="mb-4 mt-0">On this page</h2>
<ul class="p-0"></ul>
</div>
</on-this-page>
</main>
</div>
</drab-prefetch>
</body>
</html>
42 changes: 24 additions & 18 deletions src/lib/docs/classes/animate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Animations `options` can be set:

#### Defined in

[src/package/animate/index.ts:39](https://github.com/rossrobino/components/blob/dd63b43/src/package/animate/index.ts#L39)
[src/package/animate/index.ts:39](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/animate/index.ts#L39)

---

Expand All @@ -75,7 +75,7 @@ To clean up event listeners added to `document` when the element is removed.

#### Defined in

[src/package/base/index.ts:17](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L17)
[src/package/base/index.ts:17](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L17)

---

Expand All @@ -93,7 +93,7 @@ An object containing the values of each `animation-option` attribute

#### Defined in

[src/package/animate/index.ts:46](https://github.com/rossrobino/components/blob/dd63b43/src/package/animate/index.ts#L46)
[src/package/animate/index.ts:46](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/animate/index.ts#L46)

### event

Expand All @@ -119,7 +119,7 @@ Base.event

#### Defined in

[src/package/base/index.ts:30](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L30)
[src/package/base/index.ts:30](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L30)

• `set` **event**(`value`): `void`

Expand All @@ -139,7 +139,7 @@ Base.event

#### Defined in

[src/package/base/index.ts:34](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L34)
[src/package/base/index.ts:34](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L34)

### keyframes

Expand All @@ -151,7 +151,7 @@ Base.event

#### Defined in

[src/package/animate/index.ts:128](https://github.com/rossrobino/components/blob/dd63b43/src/package/animate/index.ts#L128)
[src/package/animate/index.ts:128](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/animate/index.ts#L128)

---

Expand Down Expand Up @@ -185,7 +185,7 @@ Animates a particular element using the web animations API.

#### Defined in

[src/package/animate/index.ts:76](https://github.com/rossrobino/components/blob/dd63b43/src/package/animate/index.ts#L76)
[src/package/animate/index.ts:76](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/animate/index.ts#L76)

### connectedCallback

Expand All @@ -201,7 +201,7 @@ Animates a particular element using the web animations API.

#### Defined in

[src/package/base/index.ts:151](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L151)
[src/package/base/index.ts:151](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L151)

### destroy

Expand All @@ -219,7 +219,7 @@ Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallb

#### Defined in

[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L158)
[src/package/base/index.ts:158](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L158)

### disconnectedCallback

Expand All @@ -235,7 +235,7 @@ Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallb

#### Defined in

[src/package/base/index.ts:160](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L160)
[src/package/base/index.ts:160](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L160)

### getContent

Expand Down Expand Up @@ -271,15 +271,21 @@ this.querySelector("[data-content]");

#### Defined in

[src/package/base/index.ts:55](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L55)
[src/package/base/index.ts:55](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L55)

### getTrigger

▸ **getTrigger**(): `NodeListOf`\<`HTMLElement`\>
▸ **getTrigger**\<`T`\>(): `NodeListOf`\<`T`\>

#### Type parameters

| Name | Type |
| :--- | :------------------------------------ |
| `T` | extends `HTMLElement` = `HTMLElement` |

#### Returns

`NodeListOf`\<`HTMLElement`\>
`NodeListOf`\<`T`\>

All of the elements that match the `trigger` selector.

Expand All @@ -295,7 +301,7 @@ this.querySelectorAll("[data-trigger]");

#### Defined in

[src/package/base/index.ts:42](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L42)
[src/package/base/index.ts:42](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L42)

### mount

Expand All @@ -315,7 +321,7 @@ The reason for this is to make these elements work better with frameworks like S

#### Defined in

[src/package/base/index.ts:149](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L149)
[src/package/base/index.ts:149](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L149)

### safeListener

Expand Down Expand Up @@ -350,7 +356,7 @@ element is removed from the DOM, these event listeners are cleaned up.

#### Defined in

[src/package/base/index.ts:118](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L118)
[src/package/base/index.ts:118](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L118)

### swapContent

Expand All @@ -376,7 +382,7 @@ swaps `this.content()` with the content of the element found.

#### Defined in

[src/package/base/index.ts:72](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L72)
[src/package/base/index.ts:72](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L72)

### triggerListener

Expand Down Expand Up @@ -406,4 +412,4 @@ swaps `this.content()` with the content of the element found.

#### Defined in

[src/package/base/index.ts:135](https://github.com/rossrobino/components/blob/dd63b43/src/package/base/index.ts#L135)
[src/package/base/index.ts:135](https://github.com/rossrobino/components/blob/7d0b0ae/src/package/base/index.ts#L135)
Loading

0 comments on commit c3636cd

Please sign in to comment.