<template>
  <footer :id="`stamp-${Math.random().toString(36).slice(2)}`">
    Rendered {{ new Date().toISOString() }}
  </footer>
</template>

<script setup lang="ts">
import { useId } from 'vue'

// initializer runs on the server, the value travels in the payload, the client reuses it
const renderedAt = useState('build-stamp:rendered-at', () => new Date().toISOString())
const id = useId()
</script>

<template>
  <footer :id="id">Rendered {{ renderedAt }}</footer>
</template>

<script setup lang="ts">
const props = defineProps<{ iso: string }>()
</script>

<template>
  <!-- Node: en-US in UTC. Browser: whatever the user has. -->
  <time :datetime="iso">{{ new Date(props.iso).toLocaleDateString() }}</time>
</template>

<script setup lang="ts">
const props = defineProps<{ iso: string }>()

// pin BOTH inputs the two runtimes disagree on
const formatter = new Intl.DateTimeFormat('cs-CZ', { dateStyle: 'medium', timeZone: 'Europe/Prague' })
const label = computed(() => formatter.format(new Date(props.iso)))
</script>

<template>
  <time :datetime="iso">{{ label }}</time>
</template>

<script setup lang="ts">
// the guard prevents the crash, not the mismatch: server says "light", client says "dark"
const theme = ref(import.meta.client ? localStorage.getItem('theme') ?? 'light' : 'light')
</script>

<template>
  <div :class="`theme-${theme}`"><slot /></div>
</template>

<script setup lang="ts">
// the request carries the cookie, so server and client read the same value
const theme = useCookie<'light' | 'dark'>('theme', {
  default: () => 'light',
  maxAge: 60 * 60 * 24 * 365,
})
</script>

<template>
  <div :class="`theme-${theme}`"><slot /></div>
</template>

<template>
  <p class="lead">
    <div class="lead__title">{{ title }}</div>
    <a :href="href">Read more <a :href="docsHref">(docs)</a></a>
  </p>
</template>

<template>
  <div class="lead">
    <h2 class="lead__title">{{ title }}</h2>
    <p>
      <a :href="href">Read more</a>
      <a :href="docsHref">(docs)</a>
    </p>
  </div>
</template>

<script setup lang="ts">
const isClient = import.meta.client
</script>

<template>
  <!-- server: nothing. client first render: a chart. Vue must mount it during hydration. -->
  <RevenueChart v-if="isClient" :series="series" />
</template>

<template>
  <ClientOnly>
    <RevenueChart :series="series" />
    <template #fallback>
      <div class="chart-skeleton" aria-hidden="true" />
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
// runs on the server, then runs again on the client: two requests, nothing in the payload
const items = await $fetch<Item[]>('/api/items')
</script>

<script setup lang="ts">
// fetched once on the server, serialised into the payload, reused by the client
const { data: items } = await useFetch<Item[]>('/api/items')
</script>

<template>
  <Teleport to="#modal-root">
    <dialog v-if="open">…</dialog>
  </Teleport>
</template>

<template>
  <!-- #teleports is the one target Nuxt renders during SSR -->
  <Teleport to="#teleports">
    <dialog v-if="open">…</dialog>
  </Teleport>
</template>