Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

add use:mode directive

Browse source
This commit is contained in:
Nate Moore 2022-02-28 14:07:22 -06:00
parent 9e0443f084
commit 256e34c731
8 changed files with 73 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
examples/spa/src/components/Counter.vue
View file

@ -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);

21
examples/spa/src/pages/[pokemon].astro
View file

@ -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>

2
packages/astro/package.json
View file

@ -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",

1
packages/astro/src/@types/astro.ts
View file

@ -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 };
}

9
packages/astro/src/runtime/client/spa.ts
View file

@ -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'))
}

5
packages/astro/src/runtime/server/hydration.ts
View file

@ -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': {

3
packages/astro/src/runtime/server/index.ts
View file

@ -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. */

8
yarn.lock
View file

@ -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"