@vctrl/hooks 0.0.9 → 0.1.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.9",
+  "version": "0.1.1",
   "name": "@vctrl/hooks",
   "description": "vctrl/hooks is a React hooks package designed to simplify 3D model loading and management within React applications. It's part of the vectreal-core ecosystem and is primarily used in the vctrl/viewer React component and the official website application.",
   "bugs": {

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

@@ -0,0 +1,7 @@
+import { EventData, EventHandler, EventTypes } from './types';
+declare const eventSystem: {
+    emit<T extends EventTypes>(event: T, data: EventData[T]): void;
+    on<T extends EventTypes>(event: T, handler: EventHandler<T>): void;
+    off<T extends EventTypes>(event: T, handler: EventHandler<T>): void;
+};
+export default eventSystem;

package/use-load-model/file-type-hooks/use-load-binary.d.ts

@@ -0,0 +1,11 @@
+import { Action, ModelFileTypes } from '../types';
+/**
+ * Hook to load binary files
+ *
+ * @param dispatch - The dispatch function from the useReducer hook
+ * @returns An object containing the loadBinary function
+ */
+declare function useLoadBinary(dispatch: React.Dispatch<Action>): {
+    loadBinary: (file: File, fileType: ModelFileTypes, onProgress: () => void) => void;
+};
+export default useLoadBinary;

package/use-load-model/file-type-hooks/use-load-gltf.d.ts

@@ -0,0 +1,5 @@
+import { Action } from '../types';
+declare function useLoadGltf(dispatch: React.Dispatch<Action>): {
+    loadGltf: (gltfFile: File, otherFiles: File[], onProgress: (progress: number) => void) => void;
+};
+export default useLoadGltf;

package/use-load-model/loaders/create-gltf-loader.d.ts

@@ -0,0 +1,3 @@
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+declare function createGltfLoader(): GLTFLoader;
+export default createGltfLoader;

package/{src/use-load-model/loaders/create-usdz-loader.ts → use-load-model/loaders/create-usdz-loader.d.ts}

@@ -1,9 +1,3 @@
 import { USDZLoader } from 'three/examples/jsm/loaders/USDZLoader';
-
-function createUsdzLoader() {
-  const usdzLoader = new USDZLoader();
-
-  return usdzLoader;
-}
-
+declare function createUsdzLoader(): USDZLoader;
 export default createUsdzLoader;

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

@@ -0,0 +1,20 @@
+declare const ModelContext: import('react').Context<{
+    on: <T extends import('./types').EventTypes>(event: T, handler: import('./types').EventHandler<T>) => void;
+    off: <T extends import('./types').EventTypes>(event: T, handler: import('./types').EventHandler<T>) => void;
+    handleFileUpload: (filesOrDirectories: import('./types').InputFileOrDirectory) => Promise<void>;
+    file: import('./types').ModelFile | null;
+    isFileLoading: boolean;
+    progress: number;
+    supportedFileTypes: import('./types').ModelFileTypes[];
+}>;
+declare const ModelProvider: ({ children }: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+declare const useModelContext: () => {
+    on: <T extends import('./types').EventTypes>(event: T, handler: import('./types').EventHandler<T>) => void;
+    off: <T extends import('./types').EventTypes>(event: T, handler: import('./types').EventHandler<T>) => void;
+    handleFileUpload: (filesOrDirectories: import('./types').InputFileOrDirectory) => Promise<void>;
+    file: import('./types').ModelFile | null;
+    isFileLoading: boolean;
+    progress: number;
+    supportedFileTypes: import('./types').ModelFileTypes[];
+};
+export { ModelContext, ModelProvider, useModelContext };

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

@@ -0,0 +1,11 @@
+import { Action, State } from './types';
+export declare const initialState: State;
+/**
+ * Reducer function for the useReadModelFiles hook
+ *
+ * @param state - The current state of the reducer
+ * @param action - The action to be performed
+ * @returns The updated state
+ */
+declare function reducer(state: State, action: Action): State;
+export default reducer;

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

@@ -0,0 +1,48 @@
+import { Object3D } from 'three';
+export declare enum ModelFileTypes {
+    gltf = "gltf",
+    glb = "glb",
+    usdz = "usdz"
+}
+export type InputFileOrDirectory = (File | FileSystemDirectoryHandle)[];
+export interface ReducedGltf {
+    images: {
+        name: string;
+        uri: string;
+    }[];
+    buffers: {
+        bytelength: string;
+        uri: string;
+    }[];
+}
+export interface ModelFile {
+    model: Object3D;
+    type: ModelFileTypes;
+    name: string;
+}
+export interface State {
+    file: ModelFile | null;
+    isFileLoading: boolean;
+    progress: number;
+    supportedFileTypes: ModelFileTypes[];
+}
+export type Action = {
+    type: 'SET_FILE';
+    payload: ModelFile;
+} | {
+    type: 'SET_FILE_LOADING';
+    payload: boolean;
+} | {
+    type: 'SET_PROGRESS';
+    payload: number;
+} | {
+    type: 'RESET_STATE';
+};
+export type EventTypes = 'MULTIPLE_3D_MODELS' | 'UNSUPPORTED_FILE_TYPE' | 'UPLOAD_PROGRESS' | 'UPLOAD_COMPLETE';
+export type EventData = {
+    MULTIPLE_3D_MODELS: File[];
+    UNSUPPORTED_FILE_TYPE: File[];
+    UPLOAD_PROGRESS: number;
+    UPLOAD_COMPLETE: State['file'];
+};
+export type EventHandler<T extends EventTypes> = (data: EventData[T]) => void;

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

@@ -0,0 +1,11 @@
+import { ModelFileTypes, InputFileOrDirectory } from './types';
+declare function useLoadModel(): {
+    on: <T extends import('./types').EventTypes>(event: T, handler: import('./types').EventHandler<T>) => void;
+    off: <T extends import('./types').EventTypes>(event: T, handler: import('./types').EventHandler<T>) => void;
+    handleFileUpload: (filesOrDirectories: InputFileOrDirectory) => Promise<void>;
+    file: import('./types').ModelFile | null;
+    isFileLoading: boolean;
+    progress: number;
+    supportedFileTypes: ModelFileTypes[];
+};
+export default useLoadModel;

package/use-load-model/utils/array-buffer-to-base64.d.ts

@@ -0,0 +1,2 @@
+declare function arrayBufferToBase64(arrayBuffer: ArrayBuffer): Promise<unknown>;
+export default arrayBufferToBase64;

package/use-load-model/utils/read-directory.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Recursively reads a directory
+ *
+ * @param directoryHandle - The directory handle to read
+ * @returns - An array of file objects
+ */
+declare function readDirectory(directoryHandle: FileSystemDirectoryHandle): Promise<File[]>;
+export default readDirectory;

package/use-load-model.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./model-context-mPTTbSMx.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

@@ -0,0 +1,8 @@
+import { a as s, M as a, b as d, u as l, c as M } from "./model-context-ClI5AGc8.js";
+export {
+  s as ModelContext,
+  a as ModelFileTypes,
+  d as ModelProvider,
+  l as useLoadModel,
+  M as useModelContext
+};

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

package/project.json

@@ -1,16 +0,0 @@
-{
-  "name": "vctrl/hooks",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/hooks/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/vite:build",
-      "options": {
-        "outputPath": "dist/packages/vctrl/hooks",
-        "configFile": "packages/hooks/vite.config.ts"
-      }
-    }
-  }
-}

package/src/use-load-model/event-system.ts

@@ -1,29 +0,0 @@
-import { EventData, EventHandler, EventTypes } from './types';
-
-const listeners = {} as Record<EventTypes, EventHandler<EventTypes>[]>;
-const eventSystem = {
-  emit<T extends EventTypes>(event: T, data: EventData[T]): void {
-    const handlers = listeners[event];
-    if (handlers) {
-      handlers.forEach((handler) => handler(data));
-    }
-  },
-
-  on<T extends EventTypes>(event: T, handler: EventHandler<T>): void {
-    if (!listeners[event]) {
-      listeners[event] = [];
-    }
-    listeners[event].push(handler as EventHandler<EventTypes>);
-  },
-
-  off<T extends EventTypes>(event: T, handler: EventHandler<T>): void {
-    const handlers = listeners[event];
-    if (handlers) {
-      listeners[event] = handlers.filter(
-        (h) => h !== handler,
-      ) as EventHandler<EventTypes>[];
-    }
-  },
-};
-
-export default eventSystem;

package/src/use-load-model/file-type-hooks/use-load-binary.ts

@@ -1,74 +0,0 @@
-import { useCallback } from 'react';
-
-import { Action, ModelFileTypes } from '../types';
-import { createGltfLoader, createUsdzLoader } from '../loaders';
-
-/**
- * Hook to load binary files
- *
- * @param dispatch - The dispatch function from the useReducer hook
- * @returns An object containing the loadBinary function
- */
-function useLoadBinary(dispatch: React.Dispatch<Action>) {
-  /**
-   * Function to read binary files
-   *
-   * @param file - The binary file to read
-   * @param fileType - The type of file to read
-   * @param onProgress - The function to call when progress is made
-   * @returns {void}
-   */
-  const loadBinary = useCallback(
-    (file: File, fileType: ModelFileTypes, onProgress: () => void) => {
-      const reader = new FileReader();
-
-      reader.onload = async (event: ProgressEvent<FileReader>) => {
-        if (event.target?.result) {
-          const arrayBuffer = event.target.result as ArrayBuffer;
-
-          if (fileType === ModelFileTypes.glb) {
-            const gltfLoader = createGltfLoader();
-
-            gltfLoader.parse(arrayBuffer, '', (gltf) => {
-              dispatch({
-                type: 'SET_FILE',
-                payload: {
-                  model: gltf.scene,
-                  type: ModelFileTypes.glb,
-                  name: file.name,
-                },
-              });
-            });
-          } else if (fileType === ModelFileTypes.usdz) {
-            const usdzLoader = createUsdzLoader();
-            const model = usdzLoader.parse(arrayBuffer);
-
-            dispatch({
-              type: 'SET_FILE',
-              payload: {
-                model: model,
-                type: ModelFileTypes.usdz,
-                name: file.name,
-              },
-            });
-          }
-
-          onProgress(); // Call progress callback when binary file is loaded
-          dispatch({ type: 'SET_FILE_LOADING', payload: false });
-        }
-      };
-
-      reader.onerror = (error) => {
-        console.error('Error reading file:', error);
-        dispatch({ type: 'SET_FILE_LOADING', payload: false });
-      };
-
-      reader.readAsArrayBuffer(file);
-    },
-    [dispatch],
-  );
-
-  return { loadBinary };
-}
-
-export default useLoadBinary;

package/src/use-load-model/file-type-hooks/use-load-gltf.ts

@@ -1,115 +0,0 @@
-import { useCallback } from 'react';
-
-import { Action, ModelFileTypes, ReducedGltf } from '../types';
-import { arrayBufferToBase64 } from '../utils';
-import { createGltfLoader } from '../loaders';
-
-function useLoadGltf(dispatch: React.Dispatch<Action>) {
-  const embedExternalResources = useCallback(
-    async (
-      gltfContent: ReducedGltf,
-      otherFiles: File[],
-      onProgress: (progress: number) => void,
-    ) => {
-      const fileMap = new Map(otherFiles.map((file) => [file.name, file]));
-      const totalFiles =
-        (gltfContent.buffers?.length || 0) + (gltfContent.images?.length || 0);
-      let processedFiles = 0;
-
-      const updateProgress = () => {
-        processedFiles++;
-        onProgress((processedFiles / totalFiles) * 100);
-      };
-
-      // Embed buffers
-      if (gltfContent.buffers) {
-        for (let i = 0; i < gltfContent.buffers.length; i++) {
-          const buffer = gltfContent.buffers[i];
-          if (!buffer.uri || buffer.uri.startsWith('data:')) {
-            updateProgress();
-            continue;
-          }
-
-          const fileName = buffer.uri.split('/').pop() || '';
-          const file = fileMap.get(fileName);
-          if (file) {
-            const arrayBuffer = await file.arrayBuffer();
-            const base64 = await arrayBufferToBase64(arrayBuffer);
-            buffer.uri = `data:application/octet-stream;base64,${base64}`;
-          }
-          updateProgress();
-        }
-      }
-
-      // Embed images
-      if (gltfContent.images) {
-        for (let i = 0; i < gltfContent.images.length; i++) {
-          const image = gltfContent.images[i];
-          if (!image.uri || image.uri.startsWith('data:')) {
-            updateProgress();
-            continue;
-          }
-
-          const fileName = image.uri.split('/').pop() || '';
-          const file = fileMap.get(fileName);
-          if (file) {
-            const arrayBuffer = await file.arrayBuffer();
-            const base64 = await arrayBufferToBase64(arrayBuffer);
-            const mimeType = file.type || 'image/png';
-            image.uri = `data:${mimeType};base64,${base64}`;
-          }
-          updateProgress();
-        }
-      }
-
-      return gltfContent;
-    },
-    [],
-  );
-
-  const loadGltf = useCallback(
-    (
-      gltfFile: File,
-      otherFiles: File[],
-      onProgress: (progress: number) => void,
-    ) => {
-      const reader = new FileReader();
-      reader.onload = async (e) => {
-        const gltfContent = JSON.parse(e.target?.result as string);
-        onProgress(10); // Initial progress after parsing GLTF
-
-        const modifiedGLTF = await embedExternalResources(
-          gltfContent,
-          otherFiles,
-          (embeddingProgress) => {
-            // Map embedding progress to 10-90% range
-            onProgress(10 + embeddingProgress * 0.8);
-          },
-        );
-
-        const gltfLoader = createGltfLoader();
-
-        gltfLoader.parse(JSON.stringify(modifiedGLTF), '', (gltf) => {
-          dispatch({
-            type: 'SET_FILE',
-            payload: {
-              model: gltf.scene,
-              type: ModelFileTypes.gltf,
-              name: gltfFile.name,
-            },
-          });
-        });
-
-        onProgress(100); // Final progress
-        dispatch({ type: 'SET_FILE_LOADING', payload: false });
-      };
-
-      reader.readAsText(gltfFile);
-    },
-    [dispatch, embedExternalResources],
-  );
-
-  return { loadGltf };
-}
-
-export default useLoadGltf;

package/src/use-load-model/loaders/create-gltf-loader.ts

@@ -1,20 +0,0 @@
-import { WebGLRenderer } from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
-
-function createGltfLoader() {
-  const dracoLoader = new DRACOLoader();
-  dracoLoader.setDecoderPath('/draco/');
-
-  const ktxLoader = new KTX2Loader();
-  ktxLoader.setTranscoderPath('/draco/');
-
-  const gltfLoader = new GLTFLoader()
-    .setDRACOLoader(dracoLoader)
-    .setKTX2Loader(ktxLoader.detectSupport(new WebGLRenderer()));
-
-  return gltfLoader;
-}
-
-export default createGltfLoader;

package/src/use-load-model/model-context.tsx

@@ -1,18 +0,0 @@
-import { createContext, useContext } from 'react';
-import useLoadModel from './use-load-model';
-
-const ModelContext = createContext({} as ReturnType<typeof useLoadModel>);
-
-const ModelProvider = ({ children }: React.PropsWithChildren) => {
-  const value = useLoadModel();
-
-  return (
-    <ModelContext.Provider value={value}>{children}</ModelContext.Provider>
-  );
-};
-
-const useModelContext = () => {
-  return useContext(ModelContext);
-};
-
-export { ModelContext, ModelProvider, useModelContext };

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

@@ -1,33 +0,0 @@
-import { Action, ModelFileTypes, State } from './types';
-
-// Initial state
-export const initialState: State = {
-  file: null,
-  isFileLoading: false,
-  progress: 0,
-  supportedFileTypes: Object.values(ModelFileTypes),
-};
-
-/**
- * Reducer function for the useReadModelFiles hook
- *
- * @param state - The current state of the reducer
- * @param action - The action to be performed
- * @returns The updated state
- */
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case 'SET_FILE':
-      return { ...state, file: action.payload };
-    case 'SET_FILE_LOADING':
-      return { ...state, isFileLoading: action.payload };
-    case 'SET_PROGRESS':
-      return { ...state, progress: action.payload };
-    case 'RESET_STATE':
-      return { ...initialState };
-    default:
-      return state;
-  }
-}
-
-export default reducer;

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

@@ -1,53 +0,0 @@
-import { Object3D } from 'three';
-
-export enum ModelFileTypes {
-  gltf = 'gltf',
-  glb = 'glb',
-  usdz = 'usdz',
-}
-
-export type InputFileOrDirectory = (File | FileSystemDirectoryHandle)[];
-
-export interface ReducedGltf {
-  images: { name: string; uri: string }[];
-  buffers: { bytelength: string; uri: string }[];
-}
-
-export interface ModelFile {
-  model: Object3D;
-  type: ModelFileTypes;
-  name: string;
-}
-
-// Updated State interface
-export interface State {
-  file: ModelFile | null;
-  isFileLoading: boolean;
-  progress: number;
-  supportedFileTypes: ModelFileTypes[];
-}
-
-// Updated Action types
-export type Action =
-  | { type: 'SET_FILE'; payload: ModelFile }
-  | { type: 'SET_FILE_LOADING'; payload: boolean }
-  | { type: 'SET_PROGRESS'; payload: number }
-  | { type: 'RESET_STATE' };
-
-// Updated Event types
-export type EventTypes =
-  | 'MULTIPLE_3D_MODELS'
-  | 'UNSUPPORTED_FILE_TYPE'
-  | 'UPLOAD_PROGRESS'
-  | 'UPLOAD_COMPLETE';
-
-// Updated event data types
-export type EventData = {
-  MULTIPLE_3D_MODELS: File[];
-  UNSUPPORTED_FILE_TYPE: File[];
-  UPLOAD_PROGRESS: number;
-  UPLOAD_COMPLETE: State['file'];
-};
-
-// Updated EventHandler type
-export type EventHandler<T extends EventTypes> = (data: EventData[T]) => void;