add use:mode directive
This commit is contained in:
Nate Moore
parent
9e0443f084
commit
256e34c731
8 changed files with 73 additions and 15 deletions
|
|
@ -1,16 +1,45 @@
|
|||
<template>
|
||||
<div id="vue" class="counter">
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
<p><slot /></p>
|
||||
<div>
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.counter {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
margin: 0.25rem;
|
||||
border: 1px solid red;
|
||||
min-width: 12em;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
p {
|
||||
flex: 1;
|
||||
}
|
||||
.counter > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
export default {
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
props: {
|
||||
initialCount: Number,
|
||||
},
|
||||
setup({ initialCount = 0 }) {
|
||||
const count = ref(initialCount);
|
||||
const add = () => (count.value = count.value + 1);
|
||||
const subtract = () => (count.value = count.value - 1);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,25 +6,38 @@ export async function getStaticPaths() {
|
|||
return allPokemon.map((pokemon, i, all) => ({
|
||||
params: { pokemon: pokemon.name },
|
||||
props: {
|
||||
pos: Math.random() > 0.5 ? Math.random() > 0.5 ? 'top' : 'bottom' : null,
|
||||
prev: `/${all[i - 1]?.name ?? ''}`,
|
||||
index: i,
|
||||
pokemon,
|
||||
next: `/${all[i + 1]?.name ?? ''}`,
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
const { pos, pokemon, prev, next } = Astro.props;
|
||||
const { pokemon, prev, next } = Astro.props;
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{pokemon.name}</title>
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{pos === 'top' && <Counter client:visible />}
|
||||
<h1>{pokemon.name}</h1>
|
||||
{pos === 'bottom' && <Counter client:visible />}
|
||||
|
||||
<main>
|
||||
<Counter client:visible use:mode="persistent">
|
||||
Persistent!
|
||||
</Counter>
|
||||
|
||||
<Counter client:visible>
|
||||
Not Persistent!
|
||||
</Counter>
|
||||
</main>
|
||||
|
||||
<p><a href={prev}>Previous</a> / <a href={next}>Next</a></p>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
"htmlparser2": "^7.1.2",
|
||||
"kleur": "^4.1.4",
|
||||
"magic-string": "^0.25.7",
|
||||
"micromorph": "^0.0.9",
|
||||
"micromorph": "^0.1.1",
|
||||
"mime": "^3.0.0",
|
||||
"parse5": "^6.0.1",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export interface AstroComponentMetadata {
|
|||
displayName: string;
|
||||
hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only';
|
||||
hydrateArgs?: any;
|
||||
mode?: 'persistent'|'ephemeral';
|
||||
componentUrl?: string;
|
||||
componentExport?: { value: string; namespace?: boolean };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
import listen from 'micromorph/spa'
|
||||
|
||||
listen({
|
||||
beforeDiff(doc) {
|
||||
for (const island of doc.querySelectorAll('astro-root[data-persist]')) {
|
||||
const uid = island.getAttribute('uid');
|
||||
const current = document.querySelector(`astro-root[data-persist][uid="${uid}"]`)
|
||||
if (current) {
|
||||
island.replaceWith(current);
|
||||
}
|
||||
}
|
||||
},
|
||||
afterDiff() {
|
||||
window.dispatchEvent(new CustomEvent('astro:locationchange'))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ interface ExtractedProps {
|
|||
hydration: {
|
||||
directive: string;
|
||||
value: string;
|
||||
mode: 'persistent'|'ephemeral';
|
||||
componentUrl: string;
|
||||
componentExport: { value: string };
|
||||
} | null;
|
||||
|
|
@ -34,9 +35,13 @@ export function extractDirectives(inputProps: Record<string | number, any>): Ext
|
|||
extracted.hydration = {
|
||||
directive: '',
|
||||
value: '',
|
||||
mode: inputProps['use:mode'],
|
||||
componentUrl: '',
|
||||
componentExport: { value: '' },
|
||||
};
|
||||
if (extracted.hydration.mode != null) {
|
||||
delete inputProps['use:mode'];
|
||||
}
|
||||
}
|
||||
switch (key) {
|
||||
case 'client:component-path': {
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@ export async function renderComponent(result: SSRResult, displayName: string, Co
|
|||
metadata.hydrateArgs = hydration.value;
|
||||
metadata.componentExport = hydration.componentExport;
|
||||
metadata.componentUrl = hydration.componentUrl;
|
||||
metadata.mode = hydration.mode;
|
||||
}
|
||||
const probableRendererNames = guessRenderers(metadata.componentUrl);
|
||||
|
||||
|
|
@ -277,7 +278,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
|
|||
// Render a template if no fragment is provided.
|
||||
const needsAstroTemplate = children && !/<\/?astro-fragment\>/.test(html);
|
||||
const template = needsAstroTemplate ? `<template data-astro-template>${children}</template>` : '';
|
||||
return unescapeHTML(`<astro-root ssr uid="${astroId}"${needsAstroTemplate ? ' tmpl' : ''}>${html ?? ''}${template}</astro-root>`);
|
||||
return unescapeHTML(`<astro-root ssr uid="${astroId}"${needsAstroTemplate ? ' tmpl' : ''}${metadata.mode === 'persistent' ? ' data-persist' : ''}>${html ?? ''}${template}</astro-root>`);
|
||||
}
|
||||
|
||||
/** Create the Astro.fetchContent() runtime function. */
|
||||
|
|
|
|||
|
|
@ -5867,10 +5867,10 @@ micromatch@^4.0.2, micromatch@^4.0.4:
|
|||
braces "^3.0.1"
|
||||
picomatch "^2.2.3"
|
||||
|
||||
micromorph@^0.0.9:
|
||||
version "0.0.9"
|
||||
resolved "https://registry.yarnpkg.com/micromorph/-/micromorph-0.0.9.tgz#6599ecbc62b7cd590a8abe94911c8a3ccf9dccd6"
|
||||
integrity sha512-TOlmJcAoAsEWx3awnQUPPVGSZp0URiOxi61phmZcHApAVX43+eoywyvxgenhl/TkXUCnEpb0UbMn3NuP3QbkDg==
|
||||
micromorph@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/micromorph/-/micromorph-0.1.1.tgz#1772b07f1be6cae10b3210a0f84fe5364987f029"
|
||||
integrity sha512-VIAYxW6D9yOkcMJK/G6xS1fh8r1gD+mmD4VLPKki7Xqzfrq1qlCfQAA6ITIbUnLDAHv8UpPPhCWzFJ29fiUjZQ==
|
||||
|
||||
mime@1.6.0:
|
||||
version "1.6.0"
|
||||
|
|
|
|||
Loading…
Reference in a new issue