From e7995e7a0b06955c8d83144fcaf41b0863f3d627 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 26 Nov 2024 18:23:26 +0100
Subject: [PATCH] docs(app): improve framework hydration (#2780)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Chopin <seb@nuxt.com>
---
 docs/app/app.vue                              |  7 ++++
 docs/app/components/FrameworkSelect.vue       | 13 +++++--
 .../app/components/content/ComponentTheme.vue | 16 +++++----
 docs/app/components/content/FrameworkOnly.vue |  9 +++--
 docs/app/components/content/IconsTheme.vue    | 16 +++++----
 docs/app/plugins/framework.ts                 | 35 +++++++++++++++++++
 docs/nuxt.config.ts                           |  3 +-
 7 files changed, 78 insertions(+), 21 deletions(-)
 create mode 100644 docs/app/plugins/framework.ts

diff --git a/docs/app/app.vue b/docs/app/app.vue
index f01efebe..ef999845 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -167,4 +167,11 @@ provide('navigation', filteredNavigation)
 :root {
   --ui-container: var(--container-8xl);
 }
+
+html[data-framework="nuxt"] .vue-only {
+  display: none;
+}
+html[data-framework="vue"] .nuxt-only {
+  display: none;
+}
 </style>
diff --git a/docs/app/components/FrameworkSelect.vue b/docs/app/components/FrameworkSelect.vue
index 9b9c98f4..33630da9 100644
--- a/docs/app/components/FrameworkSelect.vue
+++ b/docs/app/components/FrameworkSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { framework, frameworks } = useSharedData()
+const { frameworks } = useSharedData()
 </script>
 
 <template>
@@ -12,7 +12,6 @@ const { framework, frameworks } = useSharedData()
     <UButton
       color="neutral"
       variant="outline"
-      v-bind="frameworks.find(f => f.value === framework)"
       block
       trailing-icon="i-lucide-chevron-down"
       :class="[open && 'bg-[var(--ui-bg-elevated)]']"
@@ -20,6 +19,14 @@ const { framework, frameworks } = useSharedData()
         trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
       }"
       class="-mx-2 w-[calc(100%+1rem)]"
-    />
+    >
+      <template #leading>
+        <UIcon v-for="framework in frameworks" :key="framework.value" :name="framework.icon" :class="`${framework.value}-only`" class="shrink-0 size-5" />
+      </template>
+
+      <span v-for="framework in frameworks" :key="framework.value" :class="`${framework.value}-only`">
+        {{ framework.label }}
+      </span>
+    </UButton>
   </UDropdownMenu>
 </template>
diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue
index cef0d26e..31771d6b 100644
--- a/docs/app/components/content/ComponentTheme.vue
+++ b/docs/app/components/content/ComponentTheme.vue
@@ -56,16 +56,18 @@ const component = computed(() => {
   }
 })
 
-const { data: ast } = await useAsyncData(`component-theme-${name}-${framework.value}`, async () => {
+const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
   const md = `
-::code-collapse
-${framework.value === 'nuxt'
-  ? `
+::code-collapse{class="nuxt-only"}
+
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
-`
-  : `
+
+::
+
+::code-collapse{class="vue-only"}
+
 \`\`\`ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -81,7 +83,7 @@ export default defineConfig({
   ]
 })
 \`\`\`
-`}
+
 ::
 
 ${strippedCompoundVariants.value
diff --git a/docs/app/components/content/FrameworkOnly.vue b/docs/app/components/content/FrameworkOnly.vue
index 4a29b0ae..7920a644 100644
--- a/docs/app/components/content/FrameworkOnly.vue
+++ b/docs/app/components/content/FrameworkOnly.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
-const { framework } = useSharedData()
+import { Slot } from 'radix-vue'
 </script>
 
 <template>
-  <slot :name="framework" />
+  <Slot class="nuxt-only">
+    <slot name="nuxt" />
+  </Slot>
+  <Slot class="vue-only">
+    <slot name="vue" />
+  </Slot>
 </template>
diff --git a/docs/app/components/content/IconsTheme.vue b/docs/app/components/content/IconsTheme.vue
index 15910e24..bc84680b 100644
--- a/docs/app/components/content/IconsTheme.vue
+++ b/docs/app/components/content/IconsTheme.vue
@@ -4,11 +4,10 @@ import icons from '../../../../src/theme/icons'
 
 const { framework } = useSharedData()
 
-const { data: ast } = await useAsyncData(`icons-theme-${framework.value}`, async () => {
+const { data: ast } = await useAsyncData(`icons-theme`, async () => {
   const md = `
-::code-collapse
-${framework.value === 'nuxt'
-  ? `
+::code-collapse{class="nuxt-only"}
+
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify({
   ui: {
@@ -16,8 +15,11 @@ export default defineAppConfig(${json5.stringify({
   }
 }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
-`
-  : `
+
+::
+
+::code-collapse{class="vue-only"}
+
 \`\`\`ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -37,7 +39,7 @@ export default defineConfig({
   ]
 })
 \`\`\`
-`}
+
 ::
 `
 
diff --git a/docs/app/plugins/framework.ts b/docs/app/plugins/framework.ts
new file mode 100644
index 00000000..1e2e3c3d
--- /dev/null
+++ b/docs/app/plugins/framework.ts
@@ -0,0 +1,35 @@
+export default defineNuxtPlugin({
+  enforce: 'post',
+  setup() {
+    const { framework } = useSharedData()
+
+    if (import.meta.client) {
+      useHead({
+        htmlAttrs: {
+          'data-framework': framework
+        }
+      })
+    }
+
+    if (import.meta.server) {
+      useHead({
+        script: [{
+          innerHTML: `
+          function getCookie(name) {
+            var value = '; ' + window.document.cookie;
+            var parts = value.split('; ' + name + '=');
+            if (parts.length === 2) {
+              return parts.pop()?.split(';').shift();
+            }
+          }
+
+          var framework = getCookie('nuxt-ui-framework');
+          document.documentElement.setAttribute('data-framework', framework || 'nuxt');
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
+        }]
+      })
+    }
+  }
+})
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 46f2875d..5cbc4f9d 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -102,8 +102,7 @@ export default defineNuxtConfig({
           exclude: [
             '/components/*',
             '/getting-started/*',
-            '/composables/*',
-            '/api/*'
+            '/composables/*'
           ]
         }
       }