@abraca/nuxt 2.25.0 → 2.27.0

package/dist/module.d.mts

@@ -32,6 +32,7 @@ declare module '@nuxt/schema' {
             entryDocId: string;
             pinServer: boolean;
             persistAuth: boolean;
+            deferConnect: boolean;
             authStorageKey: string;
             disabledBuiltins: string[];
             features: {
@@ -136,6 +137,20 @@ interface ModuleOptions {
      * Default: true.
      */
     persistAuth?: boolean;
+    /**
+     * Defer the SDK import + provider connection (auth challenge, WebSocket,
+     * initial sync) until after the app's first paint, instead of starting it
+     * during plugin setup. The heavy `@abraca/dabra` chunk and the network
+     * round-trips then stop competing with above-the-fold content for the main
+     * thread and the (often slow, mobile) network — a large LCP win on
+     * content-first sites that don't need live data above the fold.
+     *
+     * Live features (awareness, sync, chat) come online a beat after first
+     * paint rather than during it. Recommended for marketing / landing / docs
+     * sites; leave OFF for editor-first apps (dashboards) that want the provider
+     * connected as early as possible. Default: false.
+     */
+    deferConnect?: boolean;
     /**
      * localStorage key used by AbracadabraClient for token persistence.
      * Default: 'abracadabra:auth'

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "2.25.0",
+  "version": "2.27.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -21,6 +21,7 @@ const module$1 = defineNuxtModule({
     url: process.env.ABRACADABRA_URL ?? "https://abra.cou.sh",
     pinServer: false,
     persistAuth: true,
+    deferConnect: false,
     authStorageKey: "abracadabra:auth",
     disabledBuiltins: [],
     features: {
@@ -90,6 +91,7 @@ const module$1 = defineNuxtModule({
           entryDocId: options.entryDocId ?? "",
           pinServer: options.pinServer ?? false,
           persistAuth: options.persistAuth,
+          deferConnect: options.deferConnect ?? false,
           authStorageKey: options.authStorageKey,
           disabledBuiltins: options.disabledBuiltins,
           features: options.features,

package/dist/runtime/components/ADocumentTree.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, nextTick, shallowRef, toRaw, watch } from "vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
 import { useAbracadabra, useTrash, useChat, useVoice, useToast, useAppConfig, useSyncedMap, useDocImport, useDocExport, useWindowManager, useAwareness } from "#imports";
 import { resolveDocType, getAvailableDocTypes } from "../utils/docTypes";
 import { avatarBorderStyle } from "../utils/avatarStyle";
@@ -225,6 +226,20 @@ const flatItems = computed(() => {
   }
   return result;
 });
+const scrollParent = ref(null);
+const ROW_HEIGHT = 32;
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: flatItems.value.length,
+    getScrollElement: () => scrollParent.value,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 12,
+    getItemKey: (index) => flatItems.value[index]?.id ?? index
+  }))
+);
+const virtualRows = computed(
+  () => rowVirtualizer.value.getVirtualItems().map((vRow) => ({ vRow, item: flatItems.value[vRow.index], idx: vRow.index })).filter((r) => r.item)
+);
 function getItemIcon(item) {
   const meta = item.meta;
   if (meta?.icon && typeof meta.icon === "string") return `i-lucide-${meta.icon}`;
@@ -983,6 +998,9 @@ function onTreeDragOver(e) {
   onImportDragOver(e);
 }
 const focusedIndex = ref(-1);
+watch(focusedIndex, (i) => {
+  if (i >= 0 && i < flatItems.value.length) rowVirtualizer.value.scrollToIndex(i, { align: "auto" });
+});
 function onTreeKeydown(e) {
   const items = flatItems.value;
   if (!items.length) return;
@@ -1117,7 +1135,7 @@ defineExpose({
 
   <div
     v-else-if="!collapsed"
-    class="flex flex-col min-h-0"
+    class="flex flex-col min-h-0 h-full"
     :class="externalDragActive ? 'ring-2 ring-inset ring-(--ui-primary)/30 rounded-(--ui-radius) bg-(--ui-primary)/3' : ''"
     tabindex="0"
     role="tree"
@@ -1171,36 +1189,40 @@ defineExpose({
 
     <ClientOnly>
       <template v-if="isReady">
-        <UEmpty
-          v-if="flatItems.length === 0"
-          icon="i-lucide-file-text"
-          title="No pages"
-          description="Create your first page."
-          size="sm"
-        />
-
-        <TransitionGroup
-          v-else
-          name="tree-item"
-          tag="div"
-          :class="['px-1', { 'is-dragging': dragId }]"
+        <div
+          ref="scrollParent"
+          class="flex-1 min-h-0 overflow-y-auto px-1"
+          :class="{ 'is-dragging': dragId }"
           @dragover.prevent
           @dragleave="onListDragLeave"
         >
+          <UEmpty
+            v-if="flatItems.length === 0"
+            icon="i-lucide-file-text"
+            title="No pages"
+            description="Create your first page."
+            size="sm"
+          />
+
           <div
-            v-for="(item, idx) in flatItems"
-            :key="item.id"
-            class="tree-item relative"
-            :class="[
+            v-else
+            :style="{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative', width: '100%' }"
+          >
+            <div
+              v-for="{ vRow, item, idx } in virtualRows"
+              :key="item.id"
+              class="tree-item absolute left-0 right-0"
+              :class="[
   dragId === item.id && !item.isTrashRoot ? 'opacity-30' : '',
   focusedIndex === idx ? 'ring-1 ring-inset ring-(--ui-primary)/50 rounded-sm' : ''
 ]"
-            :data-focused="focusedIndex === idx ? '' : void 0"
-            role="treeitem"
-            @dragover="onDragOver($event, item)"
-            @drop.stop="onDrop"
-            @click="focusedIndex = idx"
-          >
+              :data-focused="focusedIndex === idx ? '' : void 0"
+              :style="{ transform: `translateY(${vRow.start}px)`, height: `${vRow.size}px` }"
+              role="treeitem"
+              @dragover="onDragOver($event, item)"
+              @drop.stop="onDrop"
+              @click="focusedIndex = idx"
+            >
             <!-- Drop indicator: line BEFORE -->
             <div
               v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'before' && !item.isTrashRoot"
@@ -1523,8 +1545,9 @@ defineExpose({
                 />
               </UDropdownMenu>
             </div>
+            </div>
           </div>
-        </TransitionGroup>
+        </div>
 
         <!-- External drag hint bar -->
         <Transition name="drop-hint">

package/dist/runtime/composables/useChildTree.js

@@ -23,9 +23,23 @@ export function useChildTree(rootDoc, parentDocId, options) {
     }
     return result;
   });
+  const childrenByParent = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const e of entries.value) {
+      let arr = map.get(e.parentId);
+      if (!arr) {
+        arr = [];
+        map.set(e.parentId, arr);
+      }
+      arr.push(e);
+    }
+    for (const arr of map.values()) arr.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    return map;
+  });
   function childrenOf(parentId) {
     const target = parentId === null ? parentDocId : parentId;
-    return entries.value.filter((e) => e.parentId === target).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const bucket = childrenByParent.value.get(target);
+    return bucket ? bucket.slice() : [];
   }
   function descendantsOf(id) {
     const result = [];

package/dist/runtime/plugin-abracadabra.client.js

@@ -210,6 +210,7 @@ export default defineNuxtPlugin({
     const debug = abraConfig.debug ?? false;
     const configEntryDocId = abraConfig.entryDocId || void 0;
     const pinServer = abraConfig.pinServer ?? false;
+    const deferConnect = abraConfig.deferConnect ?? false;
     const registry = new PluginRegistry();
     const storedDisabledBuiltins = JSON.parse(
       localStorage.getItem(STORAGE_KEY_DISABLED_BUILTINS) ?? "[]"
@@ -1512,7 +1513,26 @@ export default defineNuxtPlugin({
       initialUrl = currentServerUrl.value || savedServers.value[0]?.url || defaultUrl;
     }
     if (initialUrl !== currentServerUrl.value) currentServerUrl.value = initialUrl;
-    _initPromise = init(initialUrl);
+    if (deferConnect) {
+      _initPromise = new Promise((resolve, reject) => {
+        let started = false;
+        const run = () => {
+          if (started) return;
+          started = true;
+          init(initialUrl).then(resolve, reject);
+        };
+        nuxtApp.hooks.hookOnce("app:suspense:resolve", () => {
+          if (typeof requestIdleCallback === "function") {
+            requestIdleCallback(run, { timeout: 2e3 });
+          } else {
+            setTimeout(run, 200);
+          }
+        });
+        setTimeout(run, 3e3);
+      });
+    } else {
+      _initPromise = init(initialUrl);
+    }
     if (!pinServer && deepLinkServer && !savedServers.value.some((s) => s.url === deepLinkServer)) {
       void addServer(deepLinkServer).catch(() => {
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abraca/nuxt",
-  "version": "2.25.0",
+  "version": "2.27.0",
   "description": "First-class Nuxt module for the Abracadabra CRDT collaboration platform",
   "repository": "abracadabra/abracadabra-nuxt",
   "license": "MIT",