From 1f0f605617a45233cdaec927e6b34406ffdb948f Mon Sep 17 00:00:00 2001
From: Justin Schroeder <justin@formkit.com>
Date: Thu, 11 Jun 2026 13:26:30 -0400
Subject: [PATCH] fix(docs): render all code example languages at build time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The non-React language panes are Nuxt server components mounted lazily
on tab click. On the statically deployed site there is no server to
answer the runtime island request, so the Vue/Solid/Native/Marko tabs
rendered empty (#174). All panes now render during prerender and toggle
with v-show — the highlighted HTML ships in the static page, so the
client-perf benefit of server components is preserved.

Prerendering all panes also surfaced a build-breaking error the lazy
islands had been hiding: docs/examples/config/config.ts mirrors
ParentConfig and still used the unparameterized event handler types
(TS2314 after the #186 fix) — twoslash rejected the sample and the
island 500'd. Updated to SortEvent<T> et al.

Verified: nuxt generate succeeds (71 island routes prerendered, zero
errors) and the generated index.html contains raw-code containers for
all five languages.

Fixes #174.
---
 docs/components/CodeExample.vue | 20 ++++++++++++--------
 docs/examples/config/config.ts  |  8 ++++----
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/components/CodeExample.vue b/docs/components/CodeExample.vue
index 2637a3e..55f639f 100644
--- a/docs/components/CodeExample.vue
+++ b/docs/components/CodeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Component } from "vue";
-import { shallowRef, ref, reactive, watch, onMounted, nextTick } from "vue";
+import { shallowRef, ref, watch, onMounted } from "vue";
 import IconMarko from "./IconMarko.vue";
 
 const props = defineProps<{
@@ -15,12 +15,10 @@ const availableLangs = ["react", "vue", "solid", "native", "marko"];
 const copyButtonRef = ref<HTMLButtonElement | null>(null);
 
 const cmp = shallowRef<Component | false>(false);
-const loadedLangs = reactive(new Set(["react"]));
 
 watch(
   exampleLang,
   (newLang) => {
-    loadedLangs.add(newLang);
     rawCode.value = codeCache.value[newLang] || "";
     copyStatus.value = rawCode.value ? "Copy" : "Error";
   },
@@ -195,19 +193,25 @@ async function copyCode() {
       v-show="expanded"
       class="editor border-l-4 border-r-4 border-slate-400 dark:border-slate-500"
     >
-      <div v-if="loadedLangs.has('react')" v-show="exampleLang === 'react'">
+      <!--
+        All panes render during SSR/SSG and toggle with v-show. They are
+        server components: mounting them lazily on tab click requires a
+        runtime island request, which has no server to answer it on the
+        statically deployed site — tabs came back empty (#174).
+      -->
+      <div v-show="exampleLang === 'react'">
         <CodeExampleReact :example="example" />
       </div>
-      <div v-if="loadedLangs.has('vue')" v-show="exampleLang === 'vue'">
+      <div v-show="exampleLang === 'vue'">
         <CodeExampleVue :example="example" />
       </div>
-      <div v-if="loadedLangs.has('solid')" v-show="exampleLang === 'solid'">
+      <div v-show="exampleLang === 'solid'">
         <CodeExampleSolid :example="example" />
       </div>
-      <div v-if="loadedLangs.has('native')" v-show="exampleLang === 'native'">
+      <div v-show="exampleLang === 'native'">
         <CodeExampleNative :example="example" />
       </div>
-      <div v-if="loadedLangs.has('marko')" v-show="exampleLang === 'marko'">
+      <div v-show="exampleLang === 'marko'">
         <CodeExampleMarko :example="example" />
       </div>
     </div>
diff --git a/docs/examples/config/config.ts b/docs/examples/config/config.ts
index 576266f..172f94b 100644
--- a/docs/examples/config/config.ts
+++ b/docs/examples/config/config.ts
@@ -348,17 +348,17 @@ export interface ParentConfig<T> {
   /**
    * Callback function for when a sort operation is performed.
    */
-  onSort?: SortEvent;
+  onSort?: SortEvent<T>;
   /**
    * Callback function for when a transfer operation is performed.
    */
-  onTransfer?: TransferEvent;
+  onTransfer?: TransferEvent<T>;
   /**
    * Fired when a drag is started, whether native drag or synthetic
    */
-  onDragstart?: DragstartEvent;
+  onDragstart?: DragstartEvent<T>;
   /**
    * Fired when a drag is ended, whether native drag or synthetic
    */
-  onDragend?: DragendEvent;
+  onDragend?: DragendEvent<T>;
 }