michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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> <template>
<div id="vue" class="counter"> <div id="vue" class="counter">
<button @click="subtract()">-</button> <p><slot /></p>
<pre>{{ count }}</pre> <div>
<button @click="add()">+</button> <button @click="subtract()">-</button>
<pre>{{ count }}</pre>
<button @click="add()">+</button>
</div>
</div> </div>
</template> </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> <script>
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { props: {
const count = ref(0); initialCount: Number,
},
setup({ initialCount = 0 }) {
const count = ref(initialCount);
const add = () => (count.value = count.value + 1); const add = () => (count.value = count.value + 1);
const subtract = () => (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) => ({ return allPokemon.map((pokemon, i, all) => ({
params: { pokemon: pokemon.name }, params: { pokemon: pokemon.name },
props: { props: {
pos: Math.random() > 0.5 ? Math.random() > 0.5 ? 'top' : 'bottom' : null,
prev: `/${all[i - 1]?.name ?? ''}`, prev: `/${all[i - 1]?.name ?? ''}`,
index: i,
pokemon, pokemon,
next: `/${all[i + 1]?.name ?? ''}`, next: `/${all[i + 1]?.name ?? ''}`,
} }
})); }));
} }
const { pos, pokemon, prev, next } = Astro.props; const { pokemon, prev, next } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<title>{pokemon.name}</title> <title>{pokemon.name}</title>
<style>
main {
display: flex;
}
</style>
</head> </head>
<body> <body>
{pos === 'top' && <Counter client:visible />}
<h1>{pokemon.name}</h1> <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> <p><a href={prev}>Previous</a> / <a href={next}>Next</a></p>
</body> </body>

2
packages/astro/package.json
View file

@ -85,7 +85,7 @@
"htmlparser2": "^7.1.2", "htmlparser2": "^7.1.2",
"kleur": "^4.1.4", "kleur": "^4.1.4",
"magic-string": "^0.25.7", "magic-string": "^0.25.7",
"micromorph": "^0.0.9", "micromorph": "^0.1.1",
"mime": "^3.0.0", "mime": "^3.0.0",
"parse5": "^6.0.1", "parse5": "^6.0.1",
"path-to-regexp": "^6.2.0", "path-to-regexp": "^6.2.0",

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

@ -15,6 +15,7 @@ export interface AstroComponentMetadata {
displayName: string; displayName: string;
hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only'; hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only';
hydrateArgs?: any; hydrateArgs?: any;
mode?: 'persistent'|'ephemeral';
componentUrl?: string; componentUrl?: string;
componentExport?: { value: string; namespace?: boolean }; componentExport?: { value: string; namespace?: boolean };
} }

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

@ -1,6 +1,15 @@
import listen from 'micromorph/spa' import listen from 'micromorph/spa'
listen({ 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() { afterDiff() {
window.dispatchEvent(new CustomEvent('astro:locationchange')) window.dispatchEvent(new CustomEvent('astro:locationchange'))
} }

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

@ -15,6 +15,7 @@ interface ExtractedProps {
hydration: { hydration: {
directive: string; directive: string;
value: string; value: string;
mode: 'persistent'|'ephemeral';
componentUrl: string; componentUrl: string;
componentExport: { value: string }; componentExport: { value: string };
} | null; } | null;
@ -34,9 +35,13 @@ export function extractDirectives(inputProps: Record<string | number, any>): Ext
extracted.hydration = { extracted.hydration = {
directive: '', directive: '',
value: '', value: '',
mode: inputProps['use:mode'],
componentUrl: '', componentUrl: '',
componentExport: { value: '' }, componentExport: { value: '' },
}; };
if (extracted.hydration.mode != null) {
delete inputProps['use:mode'];
}
} }
switch (key) { switch (key) {
case 'client:component-path': { 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.hydrateArgs = hydration.value;
metadata.componentExport = hydration.componentExport; metadata.componentExport = hydration.componentExport;
metadata.componentUrl = hydration.componentUrl; metadata.componentUrl = hydration.componentUrl;
metadata.mode = hydration.mode;
} }
const probableRendererNames = guessRenderers(metadata.componentUrl); 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. // Render a template if no fragment is provided.
const needsAstroTemplate = children && !/<\/?astro-fragment\>/.test(html); const needsAstroTemplate = children && !/<\/?astro-fragment\>/.test(html);
const template = needsAstroTemplate ? `<template data-astro-template>${children}</template>` : ''; 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. */ /** 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" braces "^3.0.1"
picomatch "^2.2.3" picomatch "^2.2.3"
micromorph@^0.0.9: micromorph@^0.1.1:
version "0.0.9" version "0.1.1"
resolved "https://registry.yarnpkg.com/micromorph/-/micromorph-0.0.9.tgz#6599ecbc62b7cd590a8abe94911c8a3ccf9dccd6" resolved "https://registry.yarnpkg.com/micromorph/-/micromorph-0.1.1.tgz#1772b07f1be6cae10b3210a0f84fe5364987f029"
integrity sha512-TOlmJcAoAsEWx3awnQUPPVGSZp0URiOxi61phmZcHApAVX43+eoywyvxgenhl/TkXUCnEpb0UbMn3NuP3QbkDg== integrity sha512-VIAYxW6D9yOkcMJK/G6xS1fh8r1gD+mmD4VLPKki7Xqzfrq1qlCfQAA6ITIbUnLDAHv8UpPPhCWzFJ29fiUjZQ==
mime@1.6.0: mime@1.6.0:
version "1.6.0" version "1.6.0"