@abraca/nuxt 2.3.0 → 2.4.0

package/dist/module.json

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

package/dist/runtime/components/editor/AFileGlbViewer.vue

@@ -1,8 +1,6 @@
 <script setup>
 import { ref, computed, shallowRef, watch, onMounted, onUnmounted } from "vue";
-import { Raycaster, Vector2 } from "three";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
+import { loadThree } from "../../utils/loadThree";
 const props = defineProps({
   url: { type: String, required: true },
   objectId: { type: String, required: true },
@@ -27,9 +25,19 @@ const panY = ref(0);
 const ZOOM_MIN = 1.5;
 const ZOOM_MAX = 12;
 const loadedModel = shallowRef(null);
+const viewerUnavailable = ref(false);
 async function loadGLTF(url) {
-  const loader = new GLTFLoader();
-  const dracoLoader = new DRACOLoader();
+  const three = await loadThree();
+  if (!three) {
+    viewerUnavailable.value = true;
+    return;
+  }
+  if (!raycaster) {
+    raycaster = new three.Raycaster();
+    ndc = new three.Vector2();
+  }
+  const loader = new three.GLTFLoader();
+  const dracoLoader = new three.DRACOLoader();
   dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
   loader.setDRACOLoader(dracoLoader);
   const gltf = await loader.loadAsync(url);
@@ -53,12 +61,12 @@ defineExpose({ autoRotateEnabled, wireframe, resetView });
 const camPos = computed(() => [panX.value, 1.5 + panY.value, zoom.value]);
 const camTarget = computed(() => [panX.value, panY.value, 0]);
 const sceneCamera = shallowRef(null);
-const raycaster = new Raycaster();
-const ndc = new Vector2();
+let raycaster = null;
+let ndc = null;
 const wrapEl = ref(null);
 function hitsModel(ev) {
   const cam = sceneCamera.value;
-  if (!cam || !wrapEl.value || !loadedModel.value) return true;
+  if (!cam || !wrapEl.value || !loadedModel.value || !raycaster) return true;
   const rect = wrapEl.value.getBoundingClientRect();
   ndc.x = (ev.clientX - rect.left) / rect.width * 2 - 1;
   ndc.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
@@ -153,7 +161,16 @@ onMounted(() => {
     @pointerdown="onPointerDown"
     @wheel.prevent="onWheel"
   >
-    <TresCanvas :clear-color="clearColor">
+    <div
+      v-if="viewerUnavailable"
+      class="glb-fallback"
+    >
+      3D preview unavailable — install <code>three</code> to view this model.
+    </div>
+    <TresCanvas
+      v-else
+      :clear-color="clearColor"
+    >
       <TresPerspectiveCamera
         :position="camPos"
         :look-at="camTarget"
@@ -183,5 +200,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.glb-wrap{cursor:grab;height:100%;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.glb-wrap.dragging{cursor:grabbing}
+.glb-wrap{cursor:grab;height:100%;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.glb-wrap.dragging{cursor:grabbing}.glb-fallback{align-items:center;display:flex;font-size:.875rem;height:100%;justify-content:center;opacity:.7;padding:1rem;text-align:center;width:100%}.glb-fallback code{font-family:monospace;opacity:.85}
 </style>

package/dist/runtime/components/renderers/sheets/ASheetsToolbar.d.vue.ts

@@ -18,27 +18,27 @@ type __VLS_Props = {
     labels?: Partial<AbracadabraLocale['renderers']['sheets']>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggleBold: () => any;
-    toggleItalic: () => any;
     addColumn: () => any;
     addRow: () => any;
     "update:editValue": (value: string) => any;
     commitFormulaBar: () => any;
     cancelFormulaBar: () => any;
     startEditFromBar: () => any;
+    toggleBold: () => any;
+    toggleItalic: () => any;
     setTextColor: (color: string | undefined) => any;
     setBgColor: (color: string | undefined) => any;
     setAlign: (align: string) => any;
     setNumberFormat: (format: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggleBold?: (() => any) | undefined;
-    onToggleItalic?: (() => any) | undefined;
     onAddColumn?: (() => any) | undefined;
     onAddRow?: (() => any) | undefined;
     "onUpdate:editValue"?: ((value: string) => any) | undefined;
     onCommitFormulaBar?: (() => any) | undefined;
     onCancelFormulaBar?: (() => any) | undefined;
     onStartEditFromBar?: (() => any) | undefined;
+    onToggleBold?: (() => any) | undefined;
+    onToggleItalic?: (() => any) | undefined;
     onSetTextColor?: ((color: string | undefined) => any) | undefined;
     onSetBgColor?: ((color: string | undefined) => any) | undefined;
     onSetAlign?: ((align: string) => any) | undefined;

package/dist/runtime/components/renderers/sheets/ASheetsToolbar.vue.d.ts

@@ -18,27 +18,27 @@ type __VLS_Props = {
     labels?: Partial<AbracadabraLocale['renderers']['sheets']>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggleBold: () => any;
-    toggleItalic: () => any;
     addColumn: () => any;
     addRow: () => any;
     "update:editValue": (value: string) => any;
     commitFormulaBar: () => any;
     cancelFormulaBar: () => any;
     startEditFromBar: () => any;
+    toggleBold: () => any;
+    toggleItalic: () => any;
     setTextColor: (color: string | undefined) => any;
     setBgColor: (color: string | undefined) => any;
     setAlign: (align: string) => any;
     setNumberFormat: (format: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggleBold?: (() => any) | undefined;
-    onToggleItalic?: (() => any) | undefined;
     onAddColumn?: (() => any) | undefined;
     onAddRow?: (() => any) | undefined;
     "onUpdate:editValue"?: ((value: string) => any) | undefined;
     onCommitFormulaBar?: (() => any) | undefined;
     onCancelFormulaBar?: (() => any) | undefined;
     onStartEditFromBar?: (() => any) | undefined;
+    onToggleBold?: (() => any) | undefined;
+    onToggleItalic?: (() => any) | undefined;
     onSetTextColor?: ((color: string | undefined) => any) | undefined;
     onSetBgColor?: ((color: string | undefined) => any) | undefined;
     onSetAlign?: ((align: string) => any) | undefined;

package/dist/runtime/components/shell/AUserMenu.d.vue.ts

@@ -14,13 +14,13 @@ type __VLS_Props = {
     extraItems?: DropdownMenuItem[][];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: () => any;
     "open-settings": () => any;
     "open-account": () => any;
+    logout: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onLogout?: (() => any) | undefined;
     "onOpen-settings"?: (() => any) | undefined;
     "onOpen-account"?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
 }>, {
     color: string;
     collapsed: boolean;

package/dist/runtime/components/shell/AUserMenu.vue.d.ts

@@ -14,13 +14,13 @@ type __VLS_Props = {
     extraItems?: DropdownMenuItem[][];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: () => any;
     "open-settings": () => any;
     "open-account": () => any;
+    logout: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onLogout?: (() => any) | undefined;
     "onOpen-settings"?: (() => any) | undefined;
     "onOpen-account"?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
 }>, {
     color: string;
     collapsed: boolean;

package/dist/runtime/utils/loadThree.d.ts

@@ -0,0 +1,18 @@
+/**
+ * loadThree — try-import the `three` peer dependency (+ GLTF/DRACO loaders).
+ *
+ * Returns the pieces <AFileGlbViewer> needs if the consumer installed
+ * `three`, or `null` otherwise. Cached after the first call; the first
+ * failed lookup logs once in dev. Mirrors loadKatex / loadCodeMirror so
+ * `three` stays a truly optional peer and never enters the build graph —
+ * a consumer that doesn't render 3D model blocks never needs `three`.
+ *
+ * Apps that want GLB previews install: `pnpm add three`.
+ */
+export interface ThreeBundle {
+    Raycaster: any;
+    Vector2: any;
+    GLTFLoader: any;
+    DRACOLoader: any;
+}
+export declare function loadThree(): Promise<ThreeBundle | null>;

package/dist/runtime/utils/loadThree.js

@@ -0,0 +1,46 @@
+let cache = null;
+let loading = null;
+let warnedMissing = false;
+export async function loadThree() {
+  if (cache) return cache;
+  if (loading) return loading;
+  loading = (async () => {
+    try {
+      const threePkg = "three";
+      const gltfPkg = "three/examples/jsm/loaders/GLTFLoader.js";
+      const dracoPkg = "three/examples/jsm/loaders/DRACOLoader.js";
+      const [three, gltf, draco] = await Promise.all([
+        import(
+          /* @vite-ignore */
+          threePkg
+        ),
+        import(
+          /* @vite-ignore */
+          gltfPkg
+        ),
+        import(
+          /* @vite-ignore */
+          dracoPkg
+        )
+      ]);
+      cache = {
+        Raycaster: three.Raycaster,
+        Vector2: three.Vector2,
+        GLTFLoader: gltf.GLTFLoader,
+        DRACOLoader: draco.DRACOLoader
+      };
+      return cache;
+    } catch {
+      if (import.meta.dev && !warnedMissing) {
+        warnedMissing = true;
+        console.warn(
+          "[abracadabra] GLB viewer: `three` peer dependency not installed. 3D model blocks render a fallback. Install with `pnpm add three`."
+        );
+      }
+      return null;
+    } finally {
+      loading = null;
+    }
+  })();
+  return loading;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abraca/nuxt",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "First-class Nuxt module for the Abracadabra CRDT collaboration platform",
   "repository": "abracadabra/abracadabra-nuxt",
   "license": "MIT",
@@ -32,6 +32,10 @@
     "nanoevents": "^9.1.0"
   },
   "peerDependencies": {
+    "@abraca/dabra": "^2.3.0",
+    "@abraca/convert": "^2.3.0",
+    "@abraca/plugin": "^2.3.0",
+    "@abraca/schema": "^2.3.0",
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.7.0",
     "@codemirror/lang-css": "^6.3.1",
@@ -72,17 +76,17 @@
     "lowlight": "^3.0.0",
     "mapbox-gl": "^3.0.0",
     "nuxt": "^4.0.0",
+    "three": "^0.184.0",
     "vue": "^3.4.0",
-    "yjs": "^13.0.0",
-    "@abraca/dabra": "2.3.0",
-    "@abraca/plugin": "2.3.0",
-    "@abraca/convert": "2.3.0",
-    "@abraca/schema": "2.3.0"
+    "yjs": "^13.0.0"
   },
   "peerDependenciesMeta": {
     "@abraca/schema": {
       "optional": true
     },
+    "three": {
+      "optional": true
+    },
     "@codemirror/autocomplete": {
       "optional": true
     },
@@ -133,6 +137,9 @@
     }
   },
   "devDependencies": {
+    "@abraca/dabra": "^2.3.0",
+    "@abraca/convert": "^2.3.0",
+    "@abraca/plugin": "^2.3.0",
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.7.0",
     "@codemirror/lang-css": "^6.3.1",
@@ -172,10 +179,7 @@
     "vue": "^3.5.34",
     "vue-tsc": "^3.2.8",
     "ws": "^8.20.0",
-    "yjs": "^13.6.30",
-    "@abraca/dabra": "2.3.0",
-    "@abraca/plugin": "2.3.0",
-    "@abraca/convert": "2.3.0"
+    "yjs": "^13.6.30"
   },
   "scripts": {
     "dev": "npm run dev:prepare && nuxt dev playground",