fix(docs): improve SSG generated docs

epicmaxco · Mar 7, 2024 · 9357440 · 9357440
1 parent 5682640
commit 9357440
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 38 deletions.
diff --git a/packages/docs/components/Play.client.vue → packages/docs/components/Play.vue b/packages/docs/components/Play.client.vue → packages/docs/components/Play.vue
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
@@ -1,40 +1,41 @@
 <template>
-  <div
-    :key="isMounted + ''"
-    class="docs-layout"
-  >
+  <Suspense>
     <div
-      v-if="!isMounted"
-      class="docs-layout__loader"
-    />
-    <VaLayout
-      :top="{ fixed: true, order: 2 }"
-      :left="{ fixed: true, absolute: breakpoints.smDown, overlay: breakpoints.smDown && isSidebarVisible, order: 1 }"
-      @left-overlay-click="isSidebarVisible = false"
+      class="docs-layout"
     >
-      <template #top>
-        <LayoutHeader
-          v-model:isSidebarVisible="isSidebarVisible"
-          v-model:isOptionsVisible="isOptionsVisible"
-        />
-      </template>
-
-      <template #left>
-        <LayoutSidebar
-          v-model:visible="isSidebarVisible"
-          :mobile="breakpoints.xs"
-        />
-      </template>
-
-      <template #content>
-        <main class="docs-layout__main-content">
-          <article class="docs-layout__page-content">
-            <NuxtPage />
-          </article>
-        </main>
-      </template>
-    </VaLayout>
-  </div>
+      <div
+        v-if="false"
+        class="docs-layout__loader"
+      />
+      <VaLayout
+        :top="{ fixed: true, order: 2 }"
+        :left="{ fixed: true, absolute: breakpoints.smDown, overlay: breakpoints.smDown && isSidebarVisible, order: 1 }"
+        @left-overlay-click="isSidebarVisible = false"
+      >
+        <template #top>
+          <LayoutHeader
+            v-model:isSidebarVisible="isSidebarVisible"
+            v-model:isOptionsVisible="isOptionsVisible"
+          />
+        </template>
+
+        <template #left>
+          <LayoutSidebar
+            v-model:visible="isSidebarVisible"
+            :mobile="breakpoints.xs"
+          />
+        </template>
+
+        <template #content>
+          <main class="docs-layout__main-content">
+            <article class="docs-layout__page-content">
+              <NuxtPage />
+            </article>
+          </main>
+        </template>
+      </VaLayout>
+    </div>
+  </Suspense>
 </template>
 
 <script setup lang="ts">
@@ -74,7 +75,7 @@ useHead({
   ],
 })
 
-const isMounted = useIsMounted()
+// const isMounted = useIsMounted()
 </script>
 
 <style lang="scss">

diff --git a/packages/ui/src/services/config-transport/createSlots.ts b/packages/ui/src/services/config-transport/createSlots.ts
@@ -1,7 +1,7 @@
 import { ComponentInternalInstance, Ref, VNode, computed } from 'vue'
 import { injectChildPropsFromParent } from '../../composables/useChildComponents'
 import { Props } from './shared'
-import { makeVNode } from './createRenderFn'
+import { makeVNode, renderSlotNode } from './createRenderFn'
 
 const SLOT_PREFIX = 'slot:'
 
@@ -40,7 +40,7 @@ export const createSlots = (instance: ComponentInternalInstance, propsFromConfig
       const childSlot = childPropsFromParent?.value?.[prefixedKey]
 
       if (childSlot !== undefined) {
-        return makeVNode(childSlot)
+        return renderSlotNode(makeVNode(childSlot))
       }
 
       const originalSlot = target[key]
@@ -53,7 +53,7 @@ export const createSlots = (instance: ComponentInternalInstance, propsFromConfig
 
       // Return prop from config only if user didn't pass props manually
       if (propFromConfig !== undefined) {
-        return makeVNode(propFromConfig)
+        return renderSlotNode(makeVNode(propFromConfig))
       }
 
       return originalSlot