@vctrl/hooks 0.4.0 → 0.6.0

package/use-load-model/model-context.d.ts

@@ -8,9 +8,28 @@ declare const ModelContext: import('react').Context<{
     load: (filesOrDirectories: import('./types').InputFileOrDirectory) => Promise<void>;
     reset: () => void;
     optimize: {
+        simplifyOptimization: (options?: {
+            ratio?: number;
+            error?: number;
+        } | undefined) => Promise<void>;
+        dedupOptimization: (options?: import('@gltf-transform/functions').DedupOptions | undefined) => Promise<void>;
+        quantizeOptimization: (options?: import('@gltf-transform/functions').QuantizeOptions | undefined) => Promise<void>;
+        texturesCompressOptimization: (options?: import('@gltf-transform/functions').TextureCompressOptions | undefined) => Promise<void>;
+        getSize: () => import('../use-optimize-model/types').ModelSize | null;
+        reset: () => void;
+        report: import('@gltf-transform/functions').InspectReport | null;
+        error: Error | null;
+        loading: boolean;
+    } | {
         simplifyOptimization: () => void;
         dedupOptimization: () => void;
         quantizeOptimization: () => void;
+        texturesCompressOptimization: () => void;
+        getSize: () => void;
+        reset: () => void;
+        report: null;
+        error: null;
+        loading: boolean;
     };
     file: import('./types').ModelFile | null;
     isFileLoading: boolean;
@@ -24,9 +43,28 @@ declare const useModelContext: () => {
     load: (filesOrDirectories: import('./types').InputFileOrDirectory) => Promise<void>;
     reset: () => void;
     optimize: {
+        simplifyOptimization: (options?: {
+            ratio?: number;
+            error?: number;
+        } | undefined) => Promise<void>;
+        dedupOptimization: (options?: import('@gltf-transform/functions').DedupOptions | undefined) => Promise<void>;
+        quantizeOptimization: (options?: import('@gltf-transform/functions').QuantizeOptions | undefined) => Promise<void>;
+        texturesCompressOptimization: (options?: import('@gltf-transform/functions').TextureCompressOptions | undefined) => Promise<void>;
+        getSize: () => import('../use-optimize-model/types').ModelSize | null;
+        reset: () => void;
+        report: import('@gltf-transform/functions').InspectReport | null;
+        error: Error | null;
+        loading: boolean;
+    } | {
         simplifyOptimization: () => void;
         dedupOptimization: () => void;
         quantizeOptimization: () => void;
+        texturesCompressOptimization: () => void;
+        getSize: () => void;
+        reset: () => void;
+        report: null;
+        error: null;
+        loading: boolean;
     };
     file: import('./types').ModelFile | null;
     isFileLoading: boolean;

package/use-load-model/state.d.ts

@@ -1,4 +1,12 @@
 import { Action, State } from './types';
+/**
+ * Initial state for the useReadModelFiles hook
+ *
+ * @property file - Currently loaded file
+ * @property isFileLoading - Flag indicating if a file is currently being loaded
+ * @property progress - Current loading progress (0-100)
+ * @property supportedFileTypes - List of supported file types
+ */
 export declare const initialState: State;
 /**
  * Reducer function for the useReadModelFiles hook

package/use-load-model/types.d.ts

@@ -38,10 +38,11 @@ export type Action = {
 } | {
     type: 'reset-state';
 };
-export type EventTypes = 'multiple-models' | 'not-loaded-files' | 'load-progress' | 'load-complete' | 'load-reset' | 'load-error';
+export type EventTypes = 'multiple-models' | 'not-loaded-files' | 'load-start' | 'load-progress' | 'load-complete' | 'load-reset' | 'load-error';
 export type EventData = {
     'multiple-models': File[];
     'not-loaded-files': File[];
+    'load-start': null;
     'load-progress': number;
     'load-complete': State['file'];
     'load-reset': null;

package/use-load-model/use-load-model.d.ts

@@ -1,14 +1,68 @@
 import { useOptimizeModel } from '../use-optimize-model';
 import { ModelFileTypes, InputFileOrDirectory, ModelFile } from './types';
+/**
+ * Custom hook to load and manage 3D models, integrating optimization functionalities.
+ *
+ * @param optimizer - Optional optimizer hook returned from useOptimizeModel.
+ * @returns An object containing the state, event handlers, and optimization functions.
+ */
 declare function useLoadModel(optimizer?: ReturnType<typeof useOptimizeModel>): {
+    /**
+     * Add an event listener to the event system.
+     */
     on: <T extends import('./types').EventTypes>(event: T, handler?: import('./types').EventHandler<T>) => void;
+    /**
+     * Remove an event listener from the event system.
+     */
     off: <T extends import('./types').EventTypes>(event: T, handler?: import('./types').EventHandler<T>) => void;
+    /**
+     * Load a model and integrate it with the optimizer if available.
+     * This also makes the model available in the use-model-context hook.
+     */
     load: (filesOrDirectories: InputFileOrDirectory) => Promise<void>;
+    /**
+     * Reset the model and optimizer state to the initial state.
+     */
     reset: () => void;
+    /**
+     * Integration of the optimizer
+     * An object containing functions to interact with the optimizer.
+     *
+     * It exposes the following functions:
+     *
+     * - `simplifyOptimization(options?: SimplifyOptions)`: Runs the simplification optimization with the given options.
+     * - `dedupOptimization(options?: DedupOptions)`: Runs the deduplication optimization with the given options.
+     * - `quantizeOptimization(options?: QuantizeOptions)`: Runs the quantization optimization with the given options.
+     * - `texturesCompressionOptimization(options?: TextureCompressionOptions)`: Runs the texture compression optimization with the given options.
+     * - `getSize()`: Returns the size of the optimized model.
+     * - `reset()`: Resets the optimizer.
+     * - `report`: The report state of the optimizer.
+     * - `error`: The error state of the optimizer.
+     * - `loading`: The loading state of the optimizer.
+     */
     optimize: {
+        simplifyOptimization: (options?: {
+            ratio?: number;
+            error?: number;
+        } | undefined) => Promise<void>;
+        dedupOptimization: (options?: import('@gltf-transform/functions').DedupOptions | undefined) => Promise<void>;
+        quantizeOptimization: (options?: import('@gltf-transform/functions').QuantizeOptions | undefined) => Promise<void>;
+        texturesCompressOptimization: (options?: import('@gltf-transform/functions').TextureCompressOptions | undefined) => Promise<void>;
+        getSize: () => import('../use-optimize-model/types').ModelSize | null;
+        reset: () => void;
+        report: import('@gltf-transform/functions').InspectReport | null;
+        error: Error | null;
+        loading: boolean;
+    } | {
         simplifyOptimization: () => void;
         dedupOptimization: () => void;
         quantizeOptimization: () => void;
+        texturesCompressOptimization: () => void;
+        getSize: () => void;
+        reset: () => void;
+        report: null;
+        error: null;
+        loading: boolean;
     };
     file: ModelFile | null;
     isFileLoading: boolean;

package/use-load-model.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./model-context-BmfXsk0j.cjs");exports.ModelContext=e.ModelContext;exports.ModelFileTypes=e.ModelFileTypes;exports.ModelProvider=e.ModelProvider;exports.useLoadModel=e.useLoadModel;exports.useModelContext=e.useModelContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./model-context-DLPGvQ8f.cjs");exports.ModelContext=e.ModelContext;exports.ModelFileTypes=e.ModelFileTypes;exports.ModelProvider=e.ModelProvider;exports.useLoadModel=e.useLoadModel;exports.useModelContext=e.useModelContext;

package/use-load-model.es.js

@@ -1,4 +1,4 @@
-import { a as s, M as a, b as d, u as l, c as M } from "./model-context-qjRd1gfd.js";
+import { a as s, M as a, b as d, u as l, c as M } from "./model-context-hgFMs-nK.js";
 export {
   s as ModelContext,
   a as ModelFileTypes,

package/use-optimize-model/state.d.ts

@@ -0,0 +1,13 @@
+import { Action, State } from './types';
+/**
+ * Initial state for the reducer.
+ */
+export declare const initialState: State;
+/**
+ * Reducer function to manage state transitions.
+ *
+ * @param state - Current state.
+ * @param action - Action to perform.
+ * @returns New state after applying the action.
+ */
+export declare const reducer: (state: State, action: Action) => State;

package/use-optimize-model/types.d.ts

@@ -0,0 +1,37 @@
+import { Document } from '@gltf-transform/core';
+import { InspectReport } from '@gltf-transform/functions';
+/**
+ * Interface representing the size details of the model.
+ */
+export interface ModelSize {
+    /** The file size in bytes. */
+    fileSize: number;
+    /** The file size formatted as a human-readable string. */
+    displayFileSize: string;
+}
+/**
+ * Interface representing the state of the model optimizer.
+ */
+export interface State {
+    modelDoc: Document | null;
+    modelReport: InspectReport | null;
+    error: Error | null;
+    loading: boolean;
+}
+/**
+ * Types of actions for the reducer.
+ */
+export type Action = {
+    type: 'LOAD_START';
+} | {
+    type: 'LOAD_SUCCESS';
+    payload: {
+        modelDoc: Document;
+        modelReport: InspectReport;
+    };
+} | {
+    type: 'LOAD_ERROR';
+    payload: Error;
+} | {
+    type: 'RESET';
+};

package/use-optimize-model/use-optimize-model.d.ts

@@ -1,9 +1,28 @@
 import { Object3D } from 'three';
+import { dedup, quantize, textureCompress } from '@gltf-transform/functions';
+import { ModelSize } from './types';
+/**
+ * Custom React hook for optimizing Three.js models using glTF-Transform.
+ *
+ * This hook provides functions to load, optimize, and retrieve Three.js models.
+ * Optimizations include deduplication, quantization, and simplification of model meshes and textures.
+ *
+ * @returns An object containing functions to interact with the model optimizer.
+ */
 declare const useOptimizeModel: () => {
     load: (model: Object3D) => Promise<void>;
-    getModel: () => Promise<Uint8Array | undefined>;
-    simplifyOptimization: () => Promise<void>;
-    dedupOptimization: () => Promise<void>;
-    quantizeOptimization: () => Promise<void>;
+    getModel: () => Promise<Uint8Array | null>;
+    getSize: () => ModelSize | null;
+    report: import('@gltf-transform/functions').InspectReport | null;
+    simplifyOptimization: (options?: {
+        ratio?: number;
+        error?: number;
+    }) => Promise<void>;
+    dedupOptimization: (options?: Parameters<typeof dedup>[0]) => Promise<void>;
+    quantizeOptimization: (options?: Parameters<typeof quantize>[0]) => Promise<void>;
+    texturesOptimization: (options?: Parameters<typeof textureCompress>[0]) => Promise<void>;
+    reset: () => void;
+    error: Error | null;
+    loading: boolean;
 };
 export default useOptimizeModel;

package/use-optimize-model-7wjiNiSZ.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react"),x=require("./GLTFExporter-ltc8rmzz.cjs"),k=require("@gltf-transform/core"),a=require("@gltf-transform/functions"),L=require("@gltf-transform/extensions"),T=require("meshoptimizer"),y={modelDoc:null,modelReport:null,error:null,loading:!1},q=(i,o)=>{switch(o.type){case"LOAD_START":return{...i,loading:!0,error:null};case"LOAD_SUCCESS":return{...i,loading:!1,modelDoc:o.payload.modelDoc,modelReport:o.payload.modelReport};case"LOAD_ERROR":return{...i,loading:!1,error:o.payload};case"RESET":return{...y};default:return i}},_=()=>{const[i,o]=t.useReducer(q,y),{modelDoc:s,modelReport:c,error:f,loading:R}=i,S=t.useRef(new x.GLTFExporter),m=t.useRef(new k.WebIO().registerExtensions([L.KHRMeshQuantization])),z=t.useCallback(async e=>{o({type:"LOAD_START"});try{const r={binary:!0},l=await S.current.parseAsync(e,r),u=new Uint8Array(l),p=await m.current.readBinary(u),d=a.inspect(p);o({type:"LOAD_SUCCESS",payload:{modelDoc:p,modelReport:d}})}catch(r){o({type:"LOAD_ERROR",payload:r}),console.error("Error loading model:",r)}},[]),n=t.useCallback(async e=>{if(s)try{await s.transform(...e);const r=a.inspect(s);o({type:"LOAD_SUCCESS",payload:{modelDoc:s,modelReport:r}})}catch(r){console.error("Error applying transforms:",r)}},[s]),O=t.useCallback(async e=>{const{ratio:r=.5,error:l=.001}=e||{};await n([a.weld(),a.simplify({simplifier:T.MeshoptSimplifier,ratio:r,error:l})])},[n]),C=t.useCallback(async e=>{await n([a.dedup(e)])},[n]),E=t.useCallback(async e=>{await n([a.quantize(e)])},[n]),w=t.useCallback(async e=>{e&&await n([a.textureCompress(e)])},[n]),b=t.useCallback(async()=>{if(!s)return null;try{return await m.current.writeBinary(s)}catch(e){return console.error("Error getting model binary:",e),null}},[s]),g=t.useCallback(()=>{if(!c)return null;const e=d=>d.reduce((A,h)=>A+h.size,0),r=e(c.meshes.properties),l=e(c.textures.properties),u=r+l,p=`${(u/(1024*1024)).toFixed(2)} MB`;return{fileSize:u,displayFileSize:p}},[c]),D=t.useCallback(()=>{o({type:"RESET"})},[]);return{load:z,getModel:b,getSize:g,report:c,simplifyOptimization:O,dedupOptimization:C,quantizeOptimization:E,texturesOptimization:w,reset:D,error:f,loading:R}};exports.useOptimizeModel=_;

package/use-optimize-model-CVcoeFrO.js

@@ -0,0 +1,117 @@
+import { useReducer as T, useRef as m, useCallback as o } from "react";
+import { G as _ } from "./GLTFExporter-Q5UJ5eb1.js";
+import { WebIO as b } from "@gltf-transform/core";
+import { inspect as y, weld as M, simplify as B, dedup as U, quantize as F, textureCompress as q } from "@gltf-transform/functions";
+import { KHRMeshQuantization as G } from "@gltf-transform/extensions";
+import { MeshoptSimplifier as k } from "meshoptimizer";
+const f = {
+  modelDoc: null,
+  modelReport: null,
+  error: null,
+  loading: !1
+}, H = (i, t) => {
+  switch (t.type) {
+    case "LOAD_START":
+      return { ...i, loading: !0, error: null };
+    case "LOAD_SUCCESS":
+      return {
+        ...i,
+        loading: !1,
+        modelDoc: t.payload.modelDoc,
+        modelReport: t.payload.modelReport
+      };
+    case "LOAD_ERROR":
+      return { ...i, loading: !1, error: t.payload };
+    case "RESET":
+      return { ...f };
+    default:
+      return i;
+  }
+}, v = () => {
+  const [i, t] = T(H, f), { modelDoc: n, modelReport: a, error: R, loading: S } = i, O = m(new _()), d = m(
+    new b().registerExtensions([G])
+  ), z = o(async (r) => {
+    t({ type: "LOAD_START" });
+    try {
+      const e = { binary: !0 }, l = await O.current.parseAsync(r, e), c = new Uint8Array(l), p = await d.current.readBinary(c), u = y(p);
+      t({
+        type: "LOAD_SUCCESS",
+        payload: { modelDoc: p, modelReport: u }
+      });
+    } catch (e) {
+      t({ type: "LOAD_ERROR", payload: e }), console.error("Error loading model:", e);
+    }
+  }, []), s = o(
+    async (r) => {
+      if (n)
+        try {
+          await n.transform(...r);
+          const e = y(n);
+          t({
+            type: "LOAD_SUCCESS",
+            payload: { modelDoc: n, modelReport: e }
+          });
+        } catch (e) {
+          console.error("Error applying transforms:", e);
+        }
+    },
+    [n]
+  ), E = o(
+    async (r) => {
+      const { ratio: e = 0.5, error: l = 1e-3 } = r || {};
+      await s([
+        M(),
+        B({
+          simplifier: k,
+          ratio: e,
+          error: l
+        })
+      ]);
+    },
+    [s]
+  ), w = o(
+    async (r) => {
+      await s([U(r)]);
+    },
+    [s]
+  ), g = o(
+    async (r) => {
+      await s([F(r)]);
+    },
+    [s]
+  ), D = o(
+    async (r) => {
+      r && await s([q(r)]);
+    },
+    [s]
+  ), A = o(async () => {
+    if (!n) return null;
+    try {
+      return await d.current.writeBinary(n);
+    } catch (r) {
+      return console.error("Error getting model binary:", r), null;
+    }
+  }, [n]), h = o(() => {
+    if (!a) return null;
+    const r = (u) => u.reduce((C, L) => C + L.size, 0), e = r(a.meshes.properties), l = r(a.textures.properties), c = e + l, p = `${(c / (1024 * 1024)).toFixed(2)} MB`;
+    return { fileSize: c, displayFileSize: p };
+  }, [a]), x = o(() => {
+    t({ type: "RESET" });
+  }, []);
+  return {
+    load: z,
+    getModel: A,
+    getSize: h,
+    report: a,
+    simplifyOptimization: E,
+    dedupOptimization: w,
+    quantizeOptimization: g,
+    texturesOptimization: D,
+    reset: x,
+    error: R,
+    loading: S
+  };
+};
+export {
+  v as u
+};

package/use-optimize-model.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-optimize-model-CXJnsRYK.cjs");exports.useOptimizeModel=e.useOptimizeModel;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-optimize-model-7wjiNiSZ.cjs");exports.useOptimizeModel=e.useOptimizeModel;

package/use-optimize-model.es.js

@@ -1,4 +1,4 @@
-import { u as i } from "./use-optimize-model-CsddjnWO.js";
+import { u as i } from "./use-optimize-model-CVcoeFrO.js";
 export {
   i as useOptimizeModel
 };

package/use-optimize-model-CXJnsRYK.cjs

@@ -1 +0,0 @@
-"use strict";const f=require("react"),m=require("./GLTFExporter-ltc8rmzz.cjs"),d=require("@gltf-transform/core"),t=require("@gltf-transform/functions"),l=require("@gltf-transform/extensions"),p=require("meshoptimizer"),y=new m.GLTFExporter,n=new d.WebIO;n.registerExtensions([l.KHRMeshQuantization]);const w=()=>{const r=f.useRef(null);async function i(e){const a=await y.parseAsync(e,{binary:!0});r.current=await n.readBinary(new Uint8Array(a))}async function o(){if(!r.current)return;const e=await r.current.transform(t.flatten(),t.quantize(),t.weld(),t.simplify({simplifier:p.MeshoptSimplifier,ratio:.1,error:1e-4}));r.current=e}async function s(){if(!r.current)return;const e=await r.current.transform(t.dedup({}));r.current=e}async function u(){if(!r.current)return;const e=await r.current.transform(t.quantize({}));r.current=e}async function c(){if(r.current)return await n.writeBinary(r.current)}return{load:i,getModel:c,simplifyOptimization:o,dedupOptimization:s,quantizeOptimization:u}};exports.useOptimizeModel=w;

package/use-optimize-model-CsddjnWO.js

@@ -1,51 +0,0 @@
-import { useRef as f } from "react";
-import { G as m } from "./GLTFExporter-Q5UJ5eb1.js";
-import { WebIO as p } from "@gltf-transform/core";
-import { flatten as d, quantize as e, weld as l, simplify as y, dedup as w } from "@gltf-transform/functions";
-import { KHRMeshQuantization as z } from "@gltf-transform/extensions";
-import { MeshoptSimplifier as M } from "meshoptimizer";
-const O = new m(), n = new p();
-n.registerExtensions([z]);
-const A = () => {
-  const r = f(null);
-  async function i(t) {
-    const c = await O.parseAsync(t, {
-      binary: !0
-    });
-    r.current = await n.readBinary(new Uint8Array(c));
-  }
-  async function o() {
-    if (!r.current) return;
-    const t = await r.current.transform(
-      d(),
-      e(),
-      l(),
-      y({ simplifier: M, ratio: 0.1, error: 1e-4 })
-    );
-    r.current = t;
-  }
-  async function a() {
-    if (!r.current) return;
-    const t = await r.current.transform(w({}));
-    r.current = t;
-  }
-  async function u() {
-    if (!r.current) return;
-    const t = await r.current.transform(e({}));
-    r.current = t;
-  }
-  async function s() {
-    if (r.current)
-      return await n.writeBinary(r.current);
-  }
-  return {
-    load: i,
-    getModel: s,
-    simplifyOptimization: o,
-    dedupOptimization: a,
-    quantizeOptimization: u
-  };
-};
-export {
-  A as u
-};